various player changes/fixes

- listen polling from 150ms -> 100ms
- fix queue repeat logic
- improve gapless support

src/components/player/NowPlayingView.tsx

@@ -7,6 +7,7 @@ import {
   moveDown,
   setPlayerIndex,
   setPlayerVolume,
+  fixPlayer2Index,
 } from '../../redux/playQueueSlice';
 import {
   toggleSelected,
@@ -63,6 +64,7 @@ const NowPlayingView = () => {
 
     dispatch(clearSelected());
     dispatch(setPlayerIndex(rowData));
+    dispatch(fixPlayer2Index());
   };
 
   if (!playQueue) {

src/components/player/Player.tsx

@@ -76,28 +76,40 @@ const Player = ({ children }: any, ref: any) => {
     // Don't fade if player2Index <= player1Index unless repeat==='all'
 
     if (
-      (playQueue.repeat === 'none' &&
-        playQueue.player2.index > playQueue.player1.index) ||
+      playQueue.player1.index + 1 < playQueue.entry.length ||
       playQueue.repeat === 'all'
     ) {
       if (currentSeek >= fadeAtTime) {
+        // If it's not the last track in the queue OR we want to repeat
         // Once fading starts, start playing player 2 and set current to 2
-        const timeLeft = duration - currentSeek;
 
-        if (player2Ref.current.audioEl.current) {
-          const player1Volume =
-            playQueue.player1.volume - (playQueue.volume / timeLeft) * 0.1 <= 0
-              ? 0
-              : playQueue.player1.volume - (playQueue.volume / timeLeft) * 0.1;
+        if (fadeDuration > 1) {
+          const timeLeft = duration - currentSeek;
+          if (player2Ref.current.audioEl.current) {
+            const player1Volume =
+              playQueue.player1.volume - (playQueue.volume / timeLeft) * 0.05 <=
+              0
+                ? 0
+                : playQueue.player1.volume -
+                  (playQueue.volume / timeLeft) * 0.05;
 
-          const player2Volume =
-            playQueue.player2.volume + (playQueue.volume / timeLeft) * 0.1 >=
-            playQueue.volume
-              ? playQueue.volume
-              : playQueue.player2.volume + (playQueue.volume / timeLeft) * 0.1;
+            const player2Volume =
+              playQueue.player2.volume + (playQueue.volume / timeLeft) * 0.05 >=
+              playQueue.volume
+                ? playQueue.volume
+                : playQueue.player2.volume +
+                  (playQueue.volume / timeLeft) * 0.05;
 
-          dispatch(setPlayerVolume({ player: 1, volume: player1Volume }));
-          dispatch(setPlayerVolume({ player: 2, volume: player2Volume }));
+            dispatch(setPlayerVolume({ player: 1, volume: player1Volume }));
+            dispatch(setPlayerVolume({ player: 2, volume: player2Volume }));
+            player2Ref.current.audioEl.current.play();
+            dispatch(setIsFading(true));
+          }
+        } else {
+          // If fade time is less than 1 second, don't fade and just start at
+          // full volume. Due to the low fade duration, it causes the volume to
+          // blast from low to full incredibly quickly due to the intervalled polling
+          dispatch(setPlayerVolume({ player: 2, volume: playQueue.volume }));
           player2Ref.current.audioEl.current.play();
           dispatch(setIsFading(true));
         }
@@ -121,28 +133,34 @@ const Player = ({ children }: any, ref: any) => {
     const fadeAtTime = duration - fadeDuration;
 
     if (
-      (playQueue.repeat === 'none' &&
-        playQueue.player1.index > playQueue.player2.index) ||
+      playQueue.player2.index + 1 < playQueue.entry.length ||
       playQueue.repeat === 'all'
     ) {
       if (currentSeek >= fadeAtTime) {
-        const timeLeft = duration - currentSeek;
+        if (fadeDuration > 1) {
+          const timeLeft = duration - currentSeek;
+          if (player1Ref.current.audioEl.current) {
+            const player1Volume =
+              playQueue.player1.volume + (playQueue.volume / timeLeft) * 0.05 >=
+              playQueue.volume
+                ? playQueue.volume
+                : playQueue.player1.volume +
+                  (playQueue.volume / timeLeft) * 0.05;
 
-        // Once fading starts, start playing player 1 and set current to 1
-        if (player1Ref.current.audioEl.current) {
-          const player1Volume =
-            playQueue.player1.volume + (playQueue.volume / timeLeft) * 0.1 >=
-            playQueue.volume
-              ? playQueue.volume
-              : playQueue.player1.volume + (playQueue.volume / timeLeft) * 0.1;
+            const player2Volume =
+              playQueue.player2.volume - (playQueue.volume / timeLeft) * 0.05 <=
+              0
+                ? 0
+                : playQueue.player2.volume -
+                  (playQueue.volume / timeLeft) * 0.05;
 
-          const player2Volume =
-            playQueue.player2.volume - (playQueue.volume / timeLeft) * 0.1 <= 0
-              ? 0
-              : playQueue.player2.volume - (playQueue.volume / timeLeft) * 0.1;
-
-          dispatch(setPlayerVolume({ player: 1, volume: player1Volume }));
-          dispatch(setPlayerVolume({ player: 2, volume: player2Volume }));
+            dispatch(setPlayerVolume({ player: 1, volume: player1Volume }));
+            dispatch(setPlayerVolume({ player: 2, volume: player2Volume }));
+            player1Ref.current.audioEl.current.play();
+            dispatch(setIsFading(true));
+          }
+        } else {
+          dispatch(setPlayerVolume({ player: 1, volume: playQueue.volume }));
           player1Ref.current.audioEl.current.play();
           dispatch(setIsFading(true));
         }
@@ -261,7 +279,7 @@ const Player = ({ children }: any, ref: any) => {
             ? checkCachedSong(playQueue.entry[playQueue.player1.index]?.id)
             : playQueue.entry[playQueue.player1.index]?.streamUrl
         }
-        listenInterval={150}
+        listenInterval={100}
         preload="auto"
         onListen={handleListen1}
         onEnded={handleOnEnded1}
@@ -279,7 +297,7 @@ const Player = ({ children }: any, ref: any) => {
             ? checkCachedSong(playQueue.entry[playQueue.player2.index]?.id)
             : playQueue.entry[playQueue.player2.index]?.streamUrl
         }
-        listenInterval={150}
+        listenInterval={100}
         preload="auto"
         onListen={handleListen2}
         onEnded={handleOnEnded2}

src/components/settings/Config.tsx

@@ -235,11 +235,20 @@ const Config = () => {
       }
     >
       <ConfigPanel header="Playback" bordered>
+        <div>
+          If the crossfade duration is set to less than or equal to{' '}
+          <code>1.0</code>, volume fading will not occur for either track, but
+          rather start the fading-in track at full volume. This is to
+          tentatively support
+          <strong> gapless playback</strong> without fade. Experiment between a
+          crossfade duration of <code>0</code> and <code>1.0</code> to find your
+          comfort zone.
+        </div>
         <div style={{ width: '300px', paddingTop: '20px' }}>
           <ControlLabel>Crossfade duration (seconds)</ControlLabel>
           <InputNumber
             defaultValue={String(settings.getSync('fadeDuration')) || '0'}
-            step={0.5}
+            step={0.1}
             min={0}
             max={100}
             onChange={(e) => {
@@ -251,8 +260,8 @@ const Config = () => {
       </ConfigPanel>
       <ConfigPanel header="Look & Feel" bordered>
         <div>
-          Select the columns you want displayed on all pages with a song list.
-          The columns will be displayed in the order selected below.
+          Select the columns you want displayed pages with a song list. The
+          columns will be displayed in the order selected below.
         </div>
         <div style={{ width: '100%', marginTop: '20px' }}>
           <TagPicker
@@ -299,7 +308,7 @@ const Config = () => {
             <ControlLabel>Font Size</ControlLabel>
             <InputNumber
               defaultValue={String(settings.getSync('songListFontSize')) || '0'}
-              step={1}
+              step={0.5}
               min={1}
               max={100}
               onChange={(e) => {

src/redux/playQueueSlice.ts

@@ -180,24 +180,38 @@ const playQueueSlice = createSlice({
       if (state.entry.length > 2) {
         if (action.payload === 1) {
           if (
-            state.player1.index + 2 >= state.entry.length - 1 &&
-            state.repeat === 'all'
+            state.player1.index + 1 === state.entry.length &&
+            state.repeat === 'none'
           ) {
-            state.player1.index = state.player2.index + 1;
-          } else if (state.player1.index + 2 >= state.entry.length - 1) {
+            // Reset the player on the end of the playlist if no repeat
             resetPlayerDefaults(state);
+          } else if (state.player1.index + 2 >= state.entry.length) {
+            // If incrementing would be greater than the total number of entries,
+            // reset it back to 0. Also check if player1 is already set to 0.
+            if (state.player2.index === 0) {
+              state.player1.index = state.player2.index + 1;
+            } else {
+              state.player1.index = 0;
+            }
           } else {
             state.player1.index += 2;
           }
           state.currentPlayer = 2;
         } else {
           if (
-            state.player2.index + 2 >= state.entry.length - 1 &&
-            state.repeat === 'all'
+            state.player2.index + 1 === state.entry.length &&
+            state.repeat === 'none'
           ) {
-            state.player2.index = state.player1.index + 1;
-          } else if (state.player2.index + 2 >= state.entry.length - 1) {
+            // Reset the player on the end of the playlist if no repeat
             resetPlayerDefaults(state);
+          } else if (state.player2.index + 2 >= state.entry.length) {
+            // If incrementing would be greater than the total number of entries,
+            // reset it back to 0. Also check if player1 is already set to 0.
+            if (state.player1.index === 0) {
+              state.player2.index = 1;
+            } else {
+              state.player2.index = 0;
+            }
           } else {
             state.player2.index += 2;
           }
@@ -217,12 +231,9 @@ const playQueueSlice = createSlice({
       state.player1.index = findIndex;
       state.player1.volume = state.volume;
 
-      // Don't set player2 index greater than entry list
-      if (findIndex >= state.entry.length - 1) {
-        state.player2.index = 0;
-      } else {
-        state.player2.index = findIndex + 1;
-      }
+      // We use fixPlayer2Index in conjunction with this reducer
+      // See note in decrementCurrentIndex reducer
+      state.player2.index = 0;
 
       state.player2.volume = 0;
       state.currentPlayer = 1;
@@ -269,6 +280,8 @@ const playQueueSlice = createSlice({
     fixPlayer2Index: (state) => {
       if (state.entry.length >= 2) {
         state.player2.index = state.currentIndex + 1;
+      } else {
+        state.player1.index = 0;
       }
     },