feat(queue): move shuffle/loop controls into queue drawer, scoped to queue

src/components/player/PersistentPlayer.tsx

@@ -8,8 +8,6 @@ import {
   resume,
   toggleMute,
   setVolume,
-  toggleShuffle,
-  setRepeat,
   toggleQueue,
 } from '../../store/slices/player';
 import { openTrackInfo } from '../../store/slices/ui';
@@ -73,14 +71,6 @@ export function PersistentPlayer() {
 
       <div className="pl-center">
         <div className="pl-transport">
-          <button
-            type="button"
-            className={`pl-tbtn${player.shuffle ? ' on' : ''}`}
-            onClick={() => dispatch(toggleShuffle())}
-            title={t('player.shuffle')}
-          >
-            <Icon name="shuffle" />
-          </button>
           <button
             type="button"
             className="pl-tbtn"
@@ -107,24 +97,6 @@ export function PersistentPlayer() {
           >
             <Icon name="skip-forward" fill />
           </button>
-          <button
-            type="button"
-            className={`pl-tbtn${player.repeat !== 'none' ? ' on' : ''}`}
-            onClick={() =>
-              dispatch(
-                setRepeat(
-                  player.repeat === 'none'
-                    ? 'all'
-                    : player.repeat === 'all'
-                      ? 'one'
-                      : 'none',
-                ),
-              )
-            }
-            title={t('player.repeat', { mode: player.repeat })}
-          >
-            <Icon name="repeat" />
-          </button>
         </div>
         <div className="pl-seek">
           <span className="pl-time">

src/components/player/QueuePanel.tsx

@@ -33,6 +33,8 @@ import {
   removeFromQueue,
   moveInQueue,
   clearQueue,
+  toggleShuffle,
+  toggleLoop,
   type QueueEntry,
 } from '../../store/slices/queue';
 import { toggleQueue } from '../../store/slices/player';
@@ -71,6 +73,22 @@ export function QueuePanel() {
           <div className="row">
             <h3>{t('queue.title')}</h3>
             <div style={{ flex: 1 }} />
+            <button
+              type="button"
+              className={`iconbtn sm${queue.shuffle ? ' on' : ''}`}
+              onClick={() => dispatch(toggleShuffle())}
+              title={t('queue.shuffle')}
+            >
+              <Icon name="shuffle" />
+            </button>
+            <button
+              type="button"
+              className={`iconbtn sm${queue.loop ? ' on' : ''}`}
+              onClick={() => dispatch(toggleLoop())}
+              title={t('queue.loop')}
+            >
+              <Icon name="repeat" />
+            </button>
             <button
               type="button"
               className="iconbtn sm"

src/hooks/useAudioPlayer.ts

@@ -27,6 +27,10 @@ export function useAudioPlayer() {
   const queue = useAppSelector((s) => s.queue);
   const accessToken = useAppSelector((s) => s.auth.accessToken);
   const isSetup = useRef(false);
+  // `ended` is registered once below; read the latest loop flag through a ref
+  // so the listener doesn't need to be re-bound on every queue change.
+  const loopRef = useRef(queue.loop);
+  loopRef.current = queue.loop;
 
   useEffect(() => {
     if (isSetup.current) return;
@@ -41,7 +45,12 @@ export function useAudioPlayer() {
       dispatch(setDuration(audio.duration || 0));
     });
     audio.addEventListener('ended', () => {
+      if (loopRef.current) {
+        audio.currentTime = 0;
+        void audio.play();
+      } else {
         dispatch(nextTrack());
+      }
     });
     audio.addEventListener('pause', () => {
       dispatch(pause());

src/i18n/locales/en.ts

@@ -120,12 +120,10 @@ const en = {
   },
   player: {
     nothingPlaying: 'Nothing playing',
-    shuffle: 'Shuffle',
     previous: 'Previous',
     next: 'Next',
     pause: 'Pause',
     play: 'Play',
-    repeat: 'Repeat: {{mode}}',
     streaming: 'Streaming',
     local: 'Local',
     queue: 'Play queue',
@@ -134,6 +132,8 @@ const en = {
   },
   queue: {
     title: 'Play queue',
+    shuffle: 'Shuffle queue',
+    loop: 'Repeat current track',
     clear: 'Clear queue',
     close: 'Close',
     from: 'From {{source}}',

src/i18n/locales/ru.ts

@@ -122,12 +122,10 @@ const ru: Translations = {
   },
   player: {
     nothingPlaying: 'Ничего не играет',
-    shuffle: 'Перемешать',
     previous: 'Назад',
     next: 'Вперёд',
     pause: 'Пауза',
     play: 'Воспроизвести',
-    repeat: 'Повтор: {{mode}}',
     streaming: 'Стриминг',
     local: 'Локально',
     queue: 'Очередь',
@@ -136,6 +134,8 @@ const ru: Translations = {
   },
   queue: {
     title: 'Очередь воспроизведения',
+    shuffle: 'Перемешать очередь',
+    loop: 'Повторять текущий трек',
     clear: 'Очистить очередь',
     close: 'Закрыть',
     from: 'Из: {{source}}',

src/store/persist.ts

@@ -8,14 +8,8 @@
  * Server data (library/albums/…) is Tier 2 (see `rtkqPersist.ts`).
  */
 import { instanceStorage } from '../config/instances';
-import {
+import { queueInitialState, type QueueState } from './slices/queue';
-  queueInitialState,
+import { playerInitialState, type PlayerState } from './slices/player';
-  type QueueState,
-} from './slices/queue';
-import {
-  playerInitialState,
-  type PlayerState,
-} from './slices/player';
 import type { RootState } from './index';
 
 const QUEUE_KEY = 'queue';
@@ -26,11 +20,17 @@ const PLAYER_KEY = 'player';
 // transient UI, so they are intentionally left out.
 type PersistedQueue = Pick<
   QueueState,
-  'entries' | 'currentIndex' | 'source' | 'sourceId' | 'sourceName'
+  | 'entries'
+  | 'currentIndex'
+  | 'source'
+  | 'sourceId'
+  | 'sourceName'
+  | 'shuffle'
+  | 'loop'
 >;
 type PersistedPlayer = Pick<
   PlayerState,
-  'currentTrackId' | 'position' | 'volume' | 'muted' | 'repeat' | 'shuffle'
+  'currentTrackId' | 'position' | 'volume' | 'muted'
 >;
 
 function pickQueue(state: QueueState): PersistedQueue {
@@ -40,6 +40,8 @@ function pickQueue(state: QueueState): PersistedQueue {
     source: state.source,
     sourceId: state.sourceId,
     sourceName: state.sourceName,
+    shuffle: state.shuffle,
+    loop: state.loop,
   };
 }
 
@@ -49,8 +51,6 @@ function pickPlayer(state: PlayerState): PersistedPlayer {
     position: state.position,
     volume: state.volume,
     muted: state.muted,
-    repeat: state.repeat,
-    shuffle: state.shuffle,
   };
 }
 

src/store/slices/player.ts

@@ -1,7 +1,5 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 
-export type RepeatMode = 'none' | 'one' | 'all';
-
 export interface PlayerState {
   currentTrackId: string | null;
   isPlaying: boolean;
@@ -9,8 +7,6 @@ export interface PlayerState {
   duration: number;
   volume: number;
   muted: boolean;
-  repeat: RepeatMode;
-  shuffle: boolean;
   isQueueOpen: boolean;
 }
 
@@ -21,8 +17,6 @@ export const playerInitialState: PlayerState = {
   duration: 0,
   volume: 0.78,
   muted: false,
-  repeat: 'none',
-  shuffle: false,
   isQueueOpen: false,
 };
 
@@ -58,12 +52,6 @@ export const playerSlice = createSlice({
     toggleMute(state) {
       state.muted = !state.muted;
     },
-    setRepeat(state, action: PayloadAction<RepeatMode>) {
-      state.repeat = action.payload;
-    },
-    toggleShuffle(state) {
-      state.shuffle = !state.shuffle;
-    },
     toggleQueue(state) {
       state.isQueueOpen = !state.isQueueOpen;
     },
@@ -79,8 +67,6 @@ export const {
   setDuration,
   setVolume,
   toggleMute,
-  setRepeat,
-  toggleShuffle,
   toggleQueue,
 } = playerSlice.actions;
 export default playerSlice.reducer;

src/store/slices/queue.ts

@@ -23,6 +23,8 @@ export interface QueueState {
   source: QueueSource;
   sourceId: string | null;
   sourceName: string | null;
+  shuffle: boolean;
+  loop: boolean;
 }
 
 export const queueInitialState: QueueState = {
@@ -31,6 +33,8 @@ export const queueInitialState: QueueState = {
   source: 'manual',
   sourceId: null,
   sourceName: null,
+  shuffle: false,
+  loop: false,
 };
 
 export const queueSlice = createSlice({
@@ -82,7 +86,15 @@ export const queueSlice = createSlice({
       state.currentIndex = action.payload;
     },
     nextTrack(state) {
-      if (state.currentIndex < state.entries.length - 1) state.currentIndex++;
+      if (state.shuffle && state.entries.length > 1) {
+        let next = state.currentIndex;
+        while (next === state.currentIndex) {
+          next = Math.floor(Math.random() * state.entries.length);
+        }
+        state.currentIndex = next;
+      } else if (state.currentIndex < state.entries.length - 1) {
+        state.currentIndex++;
+      }
     },
     prevTrack(state) {
       if (state.currentIndex > 0) state.currentIndex--;
@@ -91,6 +103,12 @@ export const queueSlice = createSlice({
       state.entries = [];
       state.currentIndex = -1;
     },
+    toggleShuffle(state) {
+      state.shuffle = !state.shuffle;
+    },
+    toggleLoop(state) {
+      state.loop = !state.loop;
+    },
   },
 });
 
@@ -105,5 +123,7 @@ export const {
   nextTrack,
   prevTrack,
   clearQueue,
+  toggleShuffle,
+  toggleLoop,
 } = queueSlice.actions;
 export default queueSlice.reducer;