Fix player break in fade when nav to NowPlaying

- Add better handling to pause/play when the current index changes
- Add better audio handling when switching songs

src/components/card/Card.tsx

@@ -77,18 +77,16 @@ const Card = ({
     if (playClick.type === 'playlist') {
       const res = await getPlaylist(playClick.id);
       dispatch(appendPlayQueue({ entries: res.song }));
-      if (playQueue.entry.length < 1) {
-        dispatch(setStatus('PLAYING'));
-      }
     }
 
     if (playClick.type === 'album' || playClick.type === 'artist') {
       const res = await getAlbum(playClick.id);
       dispatch(appendPlayQueue({ entries: res.song }));
+    }
+
     if (playQueue.entry.length < 1) {
       dispatch(setStatus('PLAYING'));
     }
-    }
   };
 
   const handleFavorite = async () => {

src/components/player/Player.tsx

@@ -235,7 +235,6 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
   const cacheSongs = settings.getSync('cacheSongs');
   const [debug, setDebug] = useState(playQueue.showDebugWindow);
   const [title] = useState('');
-  const [srcIsSet, setSrcIsSet] = useState(false);
   const [cachePath] = useState(path.join(getSongCachePath(), '/'));
   const [fadeDuration, setFadeDuration] = useState(playQueue.fadeDuration);
   const [fadeType, setFadeType] = useState(playQueue.fadeType);
@@ -305,10 +304,9 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
   }, [playQueue.currentPlayer, player.status]);
 
   useEffect(() => {
-    /* Adding a small delay when setting the track src helps to not break the player when we're modifying
-    the currentSongIndex such as when sorting the table, shuffling, or drag and dropping rows.
-     It can also prevent loading unneeded tracks when rapidly incrementing/decrementing the player. */
-
+    // Adding a small delay when setting the track src helps to not break the player when we're modifying
+    // the currentSongIndex such as when sorting the table, shuffling, or drag and dropping rows.
+    // It can also prevent loading unneeded tracks when rapidly incrementing/decrementing the player.
     if (playQueue[currentEntryList].length > 0 && !playQueue.isFading) {
       const timer1 = setTimeout(() => {
         dispatch(setPlayerSrc({ player: 1, src: getSrc1() }));
@@ -325,15 +323,17 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
     }
 
     if (playQueue[currentEntryList].length > 0) {
-      /* If fading, just instantly switch the track, otherwise the player breaks
-     from the timeout due to the listen handlers that run during the fade */
+      // If fading, just instantly switch the track, otherwise the player breaks
+      // from the timeout due to the listen handlers that run during the fade
+      // If switching to the NowPlayingView while on player1 and fading, dispatching
+      // the src for player1 will cause the player to break
+
       dispatch(setPlayerSrc({ player: 1, src: getSrc1() }));
       dispatch(setPlayerSrc({ player: 2, src: getSrc2() }));
-      setSrcIsSet(true);
     }
 
     return undefined;
-  }, [currentEntryList, dispatch, getSrc1, getSrc2, playQueue, srcIsSet]);
+  }, [currentEntryList, dispatch, getSrc1, getSrc2, playQueue]);
 
   useEffect(() => {
     // Update playback settings when changed in redux store
@@ -381,6 +381,7 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
   };
 
   const handleOnEndedPlayer1 = () => {
+    player1Ref.current.audioEl.current.currentTime = 0;
     if (cacheSongs) {
       cacheSong(
         `${playQueue[currentEntryList][playQueue.player1.index].id}.mp3`,
@@ -422,10 +423,10 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
         dispatch(setAutoIncremented(false));
       }
     }
-    setSrcIsSet(false);
   };
 
   const handleOnEndedPlayer2 = () => {
+    player2Ref.current.audioEl.current.currentTime = 0;
     if (cacheSongs) {
       cacheSong(
         `${playQueue[currentEntryList][playQueue.player2.index].id}.mp3`,
@@ -466,7 +467,6 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
         dispatch(setAutoIncremented(false));
       }
     }
-    setSrcIsSet(false);
   };
 
   const handleGaplessPlayer1 = () => {
@@ -509,7 +509,8 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
         volume={playQueue.player1.volume}
         autoPlay={
           playQueue.player1.index === playQueue.currentIndex &&
-          playQueue.currentPlayer === 1
+          playQueue.currentPlayer === 1 &&
+          player.status === 'PLAYING'
         }
         onError={(e: any) => {
           if (playQueue[currentEntryList].length > 0) {
@@ -534,7 +535,8 @@ const Player = ({ currentEntryList, children }: any, ref: any) => {
         volume={playQueue.player2.volume}
         autoPlay={
           playQueue.player2.index === playQueue.currentIndex &&
-          playQueue.currentPlayer === 2
+          playQueue.currentPlayer === 2 &&
+          player.status === 'PLAYING'
         }
         onError={(e: any) => {
           if (playQueue[currentEntryList].length > 0) {

src/components/shared/ContextMenu.tsx

@@ -96,16 +96,6 @@ export const GlobalContextMenu = () => {
       dispatch(fixPlayer2Index());
     }
     dispatch(setContextMenu({ show: false }));
-
-    // If the currently playing song is removed, then the player will autostart because
-    // the player src changed. If that happens, automatically set the playing status
-    if (
-      _.map(multiSelect.selected, 'uniqueId').includes(
-        playQueue.current.uniqueId
-      )
-    ) {
-      setTimeout(() => dispatch(setStatus('PLAYING')), 50);
-    }
   };
 
   const handleAddToPlaylist = async () => {
@@ -208,7 +198,6 @@ export const GlobalContextMenu = () => {
   return (
     <>
       {misc.contextMenu.show && misc.contextMenu.type === 'nowPlaying' && (
-        <>
         <ContextMenu
           xPos={misc.contextMenu.xPos}
           yPos={misc.contextMenu.yPos}
@@ -281,7 +270,6 @@ export const GlobalContextMenu = () => {
             onClick={handleUnfavorite}
           />
         </ContextMenu>
-        </>
       )}
     </>
   );

src/components/viewtypes/ListViewTable.tsx

@@ -186,7 +186,7 @@ const ListViewTable = ({
           })
         );
       }
-      if (playQueue.currentPlayer === 1) {
+      if (playQueue.currentPlayer === 1 && !playQueue.isFading) {
         dispatch(fixPlayer2Index());
       }
     }
@@ -195,6 +195,7 @@ const ListViewTable = ({
     dispatch,
     nowPlaying,
     playQueue.currentPlayer,
+    playQueue.isFading,
     playQueue.sortColumn,
     playQueue.sortType,
     sortedData,