fix(music player): allow manual track navigation in single repeat mode (#316)

src/component/Viewers/MusicPlayer/MusicPlayer.tsx

@@ -106,6 +106,25 @@ const MusicPlayer = () => {
     [loopMode, playIndex, playerState, index],
   );
 
+  const manualNavigate = useCallback(
+    (isNext: boolean) => {
+      if (!playerState) {
+        return;
+      }
+
+      if (loopMode === LoopMode.single_repeat) {
+        if (isNext) {
+          playIndex(((index ?? 0) + 1) % playerState?.files.length);
+        } else {
+          playIndex(((index ?? 0) - 1 + playerState?.files.length) % playerState?.files.length);
+        }
+      } else {
+        loopProceed(isNext);
+      }
+    },
+    [loopMode, playIndex, playerState, index, loopProceed],
+  );
+
   const onPlayEnded = useCallback(() => {
     if (loopMode !== LoopMode.play_once) {
       loopProceed(true);
@@ -181,6 +200,7 @@ const MusicPlayer = () => {
         <PlayerPopup
           playIndex={playIndex}
           loopProceed={loopProceed}
+          manualNavigate={manualNavigate}
           file={playerState?.files[index]}
           duration={duration}
           current={current}

src/component/Viewers/MusicPlayer/PlayerPopup.tsx

@@ -174,6 +174,7 @@ export interface PlayerPopupProps extends PopoverProps {
   setVolumeLevel: (volume: number) => void;
   volume: number;
   loopProceed: (isNext: boolean) => void;
+  manualNavigate: (isNext: boolean) => void;
   loopMode: number;
   toggleLoopMode: () => void;
   setLoopMode: (mode: number) => void;
@@ -195,6 +196,7 @@ export const PlayerPopup = ({
   setVolumeLevel,
   loopMode,
   loopProceed,
+  manualNavigate,
   toggleLoopMode,
   setLoopMode,
   playbackSpeed,
@@ -253,8 +255,8 @@ export const PlayerPopup = ({
     thumbSrc,
     onPlay: togglePause,
     onPause: togglePause,
-    onPrevious: () => loopProceed(false),
-    onNext: () => loopProceed(true),
+    onPrevious: () => manualNavigate(false),
+    onNext: () => manualNavigate(true),
     onSeek,
   });
 
@@ -406,7 +408,7 @@ export const PlayerPopup = ({
               justifyContent: "center",
             }}
           >
-            <IconButton aria-label="previous song" onClick={() => loopProceed(false)}>
+            <IconButton aria-label="previous song" onClick={() => manualNavigate(false)}>
               <FastRewindRounded fontSize="large" htmlColor={mainIconColor} />
             </IconButton>
             <IconButton aria-label={!playing ? "play" : "pause"} onClick={togglePause}>
@@ -416,7 +418,7 @@ export const PlayerPopup = ({
                 <PauseRounded sx={{ fontSize: "3rem" }} htmlColor={mainIconColor} />
               )}
             </IconButton>
-            <IconButton aria-label="next song" onClick={() => loopProceed(true)}>
+            <IconButton aria-label="next song" onClick={() => manualNavigate(true)}>
               <FastForwardRounded fontSize="large" htmlColor={mainIconColor} />
             </IconButton>
           </Box>