add seekable, fix media back

src/components/player/Player.tsx

@@ -55,9 +55,18 @@ const Player = ({ children }: any, ref: any) => {
   const handleListen = () => {
     const fadeDuration = 10;
     const currentSeek = player1Ref.current?.audioEl.current?.currentTime || 0;
+    const seekable =
+      player1Ref.current.audioEl.current.seekable.length >= 1
+        ? player1Ref.current.audioEl.current.seekable.end(
+            player1Ref.current.audioEl.current.seekable.length - 1
+          )
+        : 0;
     const duration = player1Ref.current?.audioEl.current?.duration;
     const fadeAtTime = duration - fadeDuration;
 
+    console.log(`seekable`, seekable);
+    console.log(`currentSeek`, currentSeek);
+
     if (currentSeek >= fadeAtTime) {
       // Once fading starts, start playing player 2 and set current to 2
       const timeLeft = duration - currentSeek;
@@ -82,13 +91,19 @@ const Player = ({ children }: any, ref: any) => {
     }
 
     if (playQueue.currentPlayer === 1) {
-      dispatch(setCurrentSeek(currentSeek));
+      dispatch(setCurrentSeek({ seek: currentSeek, seekable }));
     }
   };
 
   const handleListen2 = () => {
     const fadeDuration = 10;
     const currentSeek = player2Ref.current?.audioEl.current?.currentTime || 0;
+    const seekable =
+      player2Ref.current.audioEl.current.seekable.length >= 1
+        ? player2Ref.current.audioEl.current.seekable.end(
+            player2Ref.current.audioEl.current.seekable.length - 1
+          )
+        : 0;
     const duration = player2Ref.current?.audioEl.current?.duration;
     const fadeAtTime = duration - fadeDuration;
 
@@ -116,7 +131,7 @@ const Player = ({ children }: any, ref: any) => {
     }
 
     if (playQueue.currentPlayer === 2) {
-      dispatch(setCurrentSeek(currentSeek));
+      dispatch(setCurrentSeek({ seek: currentSeek, seekable }));
     }
   };
 

src/main.dev.js

@@ -25,6 +25,7 @@ import playQueueReducer, {
   decrementCurrentIndex,
   incrementCurrentIndex,
   setStatus,
+  fixPlayer2Index,
 } from './redux/playQueueSlice';
 import multiSelectReducer from './redux/multiSelectSlice';
 import MenuBuilder from './menu';
@@ -123,6 +124,7 @@ const createWindow = async () => {
 
   globalShortcut.register('MediaPreviousTrack', () => {
     store.dispatch(decrementCurrentIndex('usingHotkey'));
+    store.dispatch(fixPlayer2Index());
   });
 
   mainWindow.loadURL(`file://${__dirname}/index.html`);

src/redux/playQueueSlice.ts

@@ -35,6 +35,7 @@ export interface PlayQueue {
   currentSongId: string;
   currentPlayer: number;
   currentSeek: number;
+  currentSeekable: number;
   isFading: boolean;
   autoIncremented: boolean;
   player1: {
@@ -57,6 +58,7 @@ const initialState: PlayQueue = {
   currentSongId: '',
   currentPlayer: 1,
   currentSeek: 0,
+  currentSeekable: 0,
   isFading: false,
   autoIncremented: false,
   player1: {
@@ -93,8 +95,12 @@ const playQueueSlice = createSlice({
       state.volume = action.payload;
     },
 
-    setCurrentSeek: (state, action: PayloadAction<number>) => {
-      state.currentSeek = action.payload;
+    setCurrentSeek: (
+      state,
+      action: PayloadAction<{ seek: number; seekable: number }>
+    ) => {
+      state.currentSeek = action.payload.seek;
+      state.currentSeekable = action.payload.seekable;
     },
 
     setCurrentPlayer: (state, action: PayloadAction<number>) => {
@@ -108,6 +114,7 @@ const playQueueSlice = createSlice({
     incrementCurrentIndex: (state, action: PayloadAction<string>) => {
       if (state.entry.length >= 1) {
         state.currentSeek = 0;
+        state.currentSeekable = 0;
         if (state.currentIndex < state.entry.length - 1) {
           state.currentIndex += 1;
           if (action.payload === 'usingHotkey') {
@@ -149,6 +156,7 @@ const playQueueSlice = createSlice({
       );
 
       state.currentSeek = 0;
+      state.currentSeekable = 0;
       state.isFading = false;
       state.player1.index = findIndex;
       state.player1.volume = state.volume;
@@ -173,12 +181,20 @@ const playQueueSlice = createSlice({
     decrementCurrentIndex: (state, action: PayloadAction<string>) => {
       if (state.entry.length >= 1) {
         state.currentSeek = 0;
+        state.currentSeekable = 0;
         if (state.currentIndex > 0) {
           state.currentIndex -= 1;
           if (action.payload === 'usingHotkey') {
             state.currentPlayer = 1;
+            state.isFading = false;
+            state.player1.volume = state.volume;
             state.player1.index = state.currentIndex;
-            state.player2.index = state.currentIndex + 1;
+
+            // Set the index back to 0 here, while performing the index set on fixPlayer2Index
+            // when dispatching this reducer. We need to do this because when decrementing while
+            // the current player is player2, the current index of player2 will not change,
+            // which means that player2 will continue playing even after decrementing the song
+            state.player2.index = 0;
           }
         }
 
@@ -186,6 +202,10 @@ const playQueueSlice = createSlice({
       }
     },
 
+    fixPlayer2Index: (state) => {
+      state.player2.index = state.currentIndex + 1;
+    },
+
     setCurrentIndex: (state, action: PayloadAction<Entry>) => {
       const findIndex = state.entry.findIndex(
         (track) => track.id === action.payload.id
@@ -204,6 +224,7 @@ const playQueueSlice = createSlice({
       state.currentSongId = '';
       state.currentPlayer = 1;
       state.currentSeek = 0;
+      state.currentSeekable = 0;
       state.player1.index = 0;
       state.player2.index = 1;
 
@@ -226,6 +247,7 @@ const playQueueSlice = createSlice({
       state.currentSongId = '';
       state.currentPlayer = 1;
       state.currentSeek = 0;
+      state.currentSeekable = 0;
       state.player1.index = 0;
       state.player2.index = 1;
     },
@@ -311,6 +333,7 @@ export const {
   decrementCurrentIndex,
   incrementPlayerIndex,
   setPlayerIndex,
+  fixPlayer2Index,
   setCurrentIndex,
   setPlayQueue,
   clearPlayQueue,