re-implement playerbar controls

2026-05-06 20:10:12 +02:00 · 2025-11-04 21:29:09 -08:00
parent 16b99ef597
commit 515496ab85
13 changed files with 873 additions and 566 deletions
@@ -16,6 +16,7 @@ import 'overlayscrollbars/overlayscrollbars.css';

 import i18n from '/@/i18n/i18n';
 import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
+import { PlayerProvider } from '/@/renderer/features/player/context/player-context';
 import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
 import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
 import { useServerVersion } from '/@/renderer/hooks/use-server-version';
@@ -31,8 +32,8 @@ import {
 import { useAppTheme } from '/@/renderer/themes/use-app-theme';
 import { sanitizeCss } from '/@/renderer/utils/sanitize';
 import { toast } from '/@/shared/components/toast/toast';
-import { PlayerType, WebAudio } from '/@/shared/types/types';
 import '/styles/overlayscrollbars.css';
+import { PlayerType, WebAudio } from '/@/shared/types/types';

 ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]);

@@ -193,7 +194,9 @@ export const App = () => {
                zIndex={50000}
            />
            <WebAudioContext.Provider value={webAudioProvider}>
-                <AppRouter />
+                <PlayerProvider>
+                    <AppRouter />
+                </PlayerProvider>
            </WebAudioContext.Provider>
            <IsUpdatedDialog />
        </MantineProvider>
@@ -4,6 +4,7 @@ import { useImperativeHandle, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';

 import { AudioPlayer } from '/@/renderer/features/player/audio-player/types';
+import { convertToLogVolume } from '/@/renderer/features/player/audio-player/utils/player-utils';
 import { PlayerStatus } from '/@/shared/types/types';

 export interface OnProgressProps {
@@ -120,52 +121,49 @@ export const WebPlayerEngine = (props: WebPlayerEngineProps) => {
        },
    }));

+    const volume1 = convertToLogVolume(internalVolume1);
+    const volume2 = convertToLogVolume(internalVolume2);
+
    return (
-        <>
-            {Boolean(src1) && (
-                <ReactPlayer
-                    config={{
-                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                    }}
-                    controls={false}
-                    height={0}
-                    muted={isMuted}
-                    onEnded={src1 ? () => onEndedPlayer1() : undefined}
-                    onProgress={onProgressPlayer1}
-                    playbackRate={speed || 1}
-                    playing={playerNum === 1 && playerStatus === PlayerStatus.PLAYING}
-                    progressInterval={isTransitioning ? 10 : 250}
-                    ref={player1Ref}
-                    url={src1 || EMPTY_SOURCE}
-                    volume={convertToLogVolume(internalVolume1)}
-                    width={0}
-                />
-            )}
-            {Boolean(src2) && (
-                <ReactPlayer
-                    config={{
-                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                    }}
-                    controls={false}
-                    height={0}
-                    muted={isMuted}
-                    onEnded={src2 ? () => onEndedPlayer2() : undefined}
-                    onProgress={onProgressPlayer2}
-                    playbackRate={speed || 1}
-                    playing={playerNum === 2 && playerStatus === PlayerStatus.PLAYING}
-                    progressInterval={isTransitioning ? 10 : 250}
-                    ref={player2Ref}
-                    url={src2 || EMPTY_SOURCE}
-                    volume={convertToLogVolume(internalVolume2)}
-                    width={0}
-                />
-            )}
-        </>
+        <div id="web-player-engine" style={{ display: 'none' }}>
+            <ReactPlayer
+                config={{
+                    file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
+                }}
+                controls={false}
+                height={0}
+                id="web-player-1"
+                muted={isMuted}
+                onEnded={src1 ? () => onEndedPlayer1() : undefined}
+                onProgress={onProgressPlayer1}
+                playbackRate={speed || 1}
+                playing={playerNum === 1 && playerStatus === PlayerStatus.PLAYING}
+                progressInterval={isTransitioning ? 10 : 250}
+                ref={player1Ref}
+                url={src1 || EMPTY_SOURCE}
+                volume={volume1}
+                width={0}
+            />
+            <ReactPlayer
+                config={{
+                    file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
+                }}
+                controls={false}
+                height={0}
+                id="web-player-2"
+                muted={isMuted}
+                onEnded={src2 ? () => onEndedPlayer2() : undefined}
+                onProgress={onProgressPlayer2}
+                playbackRate={speed || 1}
+                playing={playerNum === 2 && playerStatus === PlayerStatus.PLAYING}
+                progressInterval={isTransitioning ? 10 : 250}
+                ref={player2Ref}
+                url={src2 || EMPTY_SOURCE}
+                volume={volume2}
+                width={0}
+            />
+        </div>
    );
 };

 WebPlayerEngine.displayName = 'WebPlayerEngine';
-
-function convertToLogVolume(linearVolume: number) {
-    return Math.pow(linearVolume, 2.0);
-}
@@ -30,10 +30,7 @@ export interface PlayerEventsCallbacks {
        prev: { timestamp: number },
    ) => void;
    onPlayerSpeed?: (properties: { speed: number }, prev: { speed: number }) => void;
-    onPlayerStatus?: (
-        properties: { song: QueueSong | undefined; status: PlayerStatus },
-        prev: { song: QueueSong | undefined; status: PlayerStatus },
-    ) => void;
+    onPlayerStatus?: (properties: { status: PlayerStatus }, prev: { status: PlayerStatus }) => void;
    onPlayerVolume?: (properties: { volume: number }, prev: { volume: number }) => void;
 }

@@ -0,0 +1,3 @@
+export const convertToLogVolume = (linearVolume: number) => {
+    return Math.pow(linearVolume, 2.0);
+};
@@ -21,13 +21,13 @@ const PLAY_PAUSE_FADE_INTERVAL = 10;

 export function WebPlayer() {
    const playerRef = useRef<WebPlayerEngineHandle>(null);
-    const { player, player1, player2 } = usePlayerData();
+    const { num, player1, player2, status } = usePlayerData();
    const { mediaAutoNext, setProgress } = usePlayerActions();
    const { crossfadeDuration, speed, transitionType } = usePlayerProperties();
    const isMuted = usePlayerMuted();
    const volume = usePlayerVolume();

-    const [localPlayerStatus, setLocalPlayerStatus] = useState<PlayerStatus>(player.status);
+    const [localPlayerStatus, setLocalPlayerStatus] = useState<PlayerStatus>(status);
    const [isTransitioning, setIsTransitioning] = useState<boolean | string>(false);

    const fadeAndSetStatus = useCallback(
@@ -68,7 +68,7 @@ export function WebPlayer() {

    const onProgressPlayer1 = useCallback(
        (e: OnProgressProps) => {
-            if (transitionType === 'crossfade' && player.playerNum === 1) {
+            if (transitionType === 'crossfade' && num === 1) {
                setProgress(Number(e.playedSeconds.toFixed(0)));
            } else if (transitionType === 'gapless') {
                setProgress(Number(e.playedSeconds.toFixed(0)));
@@ -83,7 +83,7 @@ export function WebPlayer() {
                    crossfadeHandler({
                        crossfadeDuration: crossfadeDuration,
                        currentPlayer: playerRef.current.player1(),
-                        currentPlayerNum: player.playerNum,
+                        currentPlayerNum: num,
                        currentTime: e.playedSeconds,
                        duration: getDuration(playerRef.current.player1().ref),
                        isTransitioning,
@@ -105,12 +105,12 @@ export function WebPlayer() {
                    break;
            }
        },
-        [crossfadeDuration, isTransitioning, player.playerNum, setProgress, transitionType, volume],
+        [crossfadeDuration, isTransitioning, num, setProgress, transitionType, volume],
    );

    const onProgressPlayer2 = useCallback(
        (e: OnProgressProps) => {
-            if (transitionType === PlayerStyle.CROSSFADE && player.playerNum === 2) {
+            if (transitionType === PlayerStyle.CROSSFADE && num === 2) {
                setProgress(Number(e.playedSeconds.toFixed(0)));
            } else if (transitionType === PlayerStyle.GAPLESS) {
                setProgress(Number(e.playedSeconds.toFixed(0)));
@@ -125,7 +125,7 @@ export function WebPlayer() {
                    crossfadeHandler({
                        crossfadeDuration: crossfadeDuration,
                        currentPlayer: playerRef.current.player2(),
-                        currentPlayerNum: player.playerNum,
+                        currentPlayerNum: num,
                        currentTime: e.playedSeconds,
                        duration: getDuration(playerRef.current.player2().ref),
                        isTransitioning,
@@ -147,7 +147,7 @@ export function WebPlayer() {
                    break;
            }
        },
-        [crossfadeDuration, isTransitioning, player.playerNum, setProgress, transitionType, volume],
+        [crossfadeDuration, isTransitioning, num, setProgress, transitionType, volume],
    );

    const handleOnEndedPlayer1 = useCallback(() => {
@@ -180,7 +180,7 @@ export function WebPlayer() {
        {
            onPlayerSeekToTimestamp: (properties) => {
                const timestamp = properties.timestamp;
-                if (player.playerNum === 1) {
+                if (num === 1) {
                    playerRef.current?.player1()?.ref?.seekTo(timestamp);
                } else {
                    playerRef.current?.player2()?.ref?.seekTo(timestamp);
@@ -199,7 +199,7 @@ export function WebPlayer() {
                playerRef.current?.setVolume(volume);
            },
        },
-        [volume, player.playerNum, isTransitioning],
+        [volume, num, isTransitioning],
    );

    return (
@@ -210,7 +210,7 @@ export function WebPlayer() {
            onEndedPlayer2={handleOnEndedPlayer2}
            onProgressPlayer1={onProgressPlayer1}
            onProgressPlayer2={onProgressPlayer2}
-            playerNum={player.playerNum}
+            playerNum={num}
            playerRef={playerRef}
            playerStatus={localPlayerStatus}
            speed={speed}
@@ -4,31 +4,6 @@
    align-items: center;
 }

-.slider-container {
-    display: flex;
-    width: 95%;
-    height: 20px;
-}
-
-.slider-value-wrapper {
-    display: flex;
-    flex: 1;
-    align-self: center;
-    justify-content: center;
-    max-width: 50px;
-
-    @media (width < 768px) {
-        display: none;
-    }
-}
-
-.slider-wrapper {
-    display: flex;
-    flex: 6;
-    align-items: center;
-    height: 100%;
-}
-
 .controls-container {
    display: flex;
    align-items: center;
@@ -1,7 +1,4 @@
 import { useQueryClient } from '@tanstack/react-query';
-import formatDuration from 'format-duration';
-import isElectron from 'is-electron';
-import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

 import styles from './center-controls.module.css';
@@ -9,126 +6,48 @@ import styles from './center-controls.module.css';
 import { PlayButton, PlayerButton } from '/@/renderer/features/player/components/player-button';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 import { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal';
+import { usePlayerContext } from '/@/renderer/features/player/context/player-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
 import {
-    useAppStore,
-    useAppStoreActions,
-    useHotkeySettings,
-    usePlaybackType,
-    usePlayerNum,
    usePlayerRepeat,
    usePlayerShuffle,
    usePlayerSong,
    usePlayerStatus,
-    usePlayerTimestamp,
    useSettingsStore,
 } from '/@/renderer/store';
 import { Icon } from '/@/shared/components/icon/icon';
-import { Text } from '/@/shared/components/text/text';
-import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
-import { PlayerRepeat, PlayerShuffle, PlayerStatus, PlayerType } from '/@/shared/types/types';
+import { PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/shared/types/types';

-interface CenterControlsProps {
-    playersRef: any;
-}
-
-export const CenterControls = ({ playersRef }: CenterControlsProps) => {
+export const CenterControls = () => {
    const { t } = useTranslation();
    const queryClient = useQueryClient();
-    const [isSeeking, setIsSeeking] = useState(false);
    const currentSong = usePlayerSong();
    const skip = useSettingsStore((state) => state.general.skipButtons);
    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
-    const playbackType = usePlaybackType();
-    const player1 = playersRef?.current?.player1;
-    const player2 = playersRef?.current?.player2;
    const status = usePlayerStatus();
-    const player = usePlayerNum();
-    // const setCurrentTime = useSetCurrentTime();
    const repeat = usePlayerRepeat();
    const shuffle = usePlayerShuffle();
-    const { bindings } = useHotkeySettings();
-    const { showTimeRemaining } = useAppStore();
-    const { setShowTimeRemaining } = useAppStoreActions();

-    // const {
-    //     handleNextTrack,
-    //     handlePause,
-    //     handlePlay,
-    //     handlePlayPause,
-    //     handlePrevTrack,
-    //     handleSeekSlider,
-    //     handleSkipBackward,
-    //     handleSkipForward,
-    //     handleStop,
-    //     handleToggleRepeat,
-    //     handleToggleShuffle,
-    // } = useCenterControls({ playersRef });
+    const {
+        mediaNext,
+        mediaPrevious,
+        mediaSkipBackward,
+        mediaSkipForward,
+        mediaStop,
+        mediaTogglePlayPause,
+        toggleRepeat,
+        toggleShuffle,
+    } = usePlayerContext();
+
    const handlePlayQueueAdd = usePlayQueueAdd();

-    const songDuration = currentSong?.duration ? currentSong.duration / 1000 : 0;
-    const currentTime = usePlayerTimestamp();
-    const currentPlayerRef = player === 1 ? player1 : player2;
-    const formattedDuration = formatDuration(songDuration * 1000 || 0);
-    const formattedTimeRemaining = formatDuration((currentTime - songDuration) * 1000 || 0);
-    const formattedTime = formatDuration(currentTime * 1000 || 0);
-
-    useEffect(() => {
-        let interval: ReturnType<typeof setInterval>;
-
-        if (status === PlayerStatus.PLAYING && !isSeeking) {
-            if (!isElectron() || playbackType === PlayerType.WEB) {
-                // Update twice a second for slightly better performance
-                interval = setInterval(() => {
-                    if (currentPlayerRef) {
-                        // setCurrentTime(currentPlayerRef.getCurrentTime());
-                    }
-                }, 500);
-            }
-        }
-
-        return () => clearInterval(interval);
-    }, [currentPlayerRef, isSeeking, playbackType, status]);
-
-    const [seekValue, setSeekValue] = useState(0);
-
-    // useHotkeys([
-    //     [bindings.playPause.isGlobal ? '' : bindings.playPause.hotkey, handlePlayPause],
-    //     [bindings.play.isGlobal ? '' : bindings.play.hotkey, handlePlay],
-    //     [bindings.pause.isGlobal ? '' : bindings.pause.hotkey, handlePause],
-    //     [bindings.stop.isGlobal ? '' : bindings.stop.hotkey, handleStop],
-    //     [bindings.next.isGlobal ? '' : bindings.next.hotkey, handleNextTrack],
-    //     [bindings.previous.isGlobal ? '' : bindings.previous.hotkey, handlePrevTrack],
-    //     [bindings.toggleRepeat.isGlobal ? '' : bindings.toggleRepeat.hotkey, handleToggleRepeat],
-    //     [bindings.toggleShuffle.isGlobal ? '' : bindings.toggleShuffle.hotkey, handleToggleShuffle],
-    //     [
-    //         bindings.skipBackward.isGlobal ? '' : bindings.skipBackward.hotkey,
-    //         () => handleSkipBackward(skip?.skipBackwardSeconds || 5),
-    //     ],
-    //     [
-    //         bindings.skipForward.isGlobal ? '' : bindings.skipForward.hotkey,
-    //         () => handleSkipForward(skip?.skipForwardSeconds || 5),
-    //     ],
-    // ]);
-
-    // useMediaSession({
-    //     handleNextTrack,
-    //     handlePause,
-    //     handlePlay,
-    //     handlePrevTrack,
-    //     handleSeekSlider,
-    //     handleSkipBackward,
-    //     handleSkipForward,
-    //     handleStop,
-    // });
-
    return (
        <>
            <div className={styles.controlsContainer}>
                <div className={styles.buttonsContainer}>
                    <PlayerButton
                        icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
-                        // onClick={handleStop}
+                        onClick={mediaStop}
                        tooltip={{
                            label: t('player.stop', { postProcess: 'sentenceCase' }),
                            openDelay: 0,
@@ -144,7 +63,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                            />
                        }
                        isActive={shuffle !== PlayerShuffle.NONE}
-                        // onClick={handleToggleShuffle}
+                        onClick={toggleShuffle}
                        tooltip={{
                            label:
                                shuffle === PlayerShuffle.NONE
@@ -159,7 +78,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                    />
                    <PlayerButton
                        icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
-                        // onClick={handlePrevTrack}
+                        onClick={mediaPrevious}
                        tooltip={{
                            label: t('player.previous', { postProcess: 'sentenceCase' }),
                            openDelay: 0,
@@ -171,7 +90,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                            icon={
                                <Icon fill="default" icon="mediaStepBackward" size={buttonSize} />
                            }
-                            // onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
+                            onClick={mediaSkipBackward}
                            tooltip={{
                                label: t('player.skip', {
                                    context: 'back',
@@ -186,12 +105,12 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                    <PlayButton
                        disabled={currentSong?.id === undefined}
                        isPaused={status === PlayerStatus.PAUSED}
-                        // onClick={handlePlayPause}
+                        onClick={mediaTogglePlayPause}
                    />
                    {skip?.enabled && (
                        <PlayerButton
                            icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
-                            // onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
+                            onClick={mediaSkipForward}
                            tooltip={{
                                label: t('player.skip', {
                                    context: 'forward',
@@ -205,7 +124,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                    )}
                    <PlayerButton
                        icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
-                        // onClick={handleNextTrack}
+                        onClick={mediaNext}
                        tooltip={{
                            label: t('player.next', { postProcess: 'sentenceCase' }),
                            openDelay: 0,
@@ -225,7 +144,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                            )
                        }
                        isActive={repeat !== PlayerRepeat.NONE}
-                        // onClick={handleToggleRepeat}
+                        onClick={toggleRepeat}
                        tooltip={{
                            label: `${
                                repeat === PlayerRepeat.NONE
@@ -263,57 +182,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                    />
                </div>
            </div>
-            <div className={styles.sliderContainer}>
-                <div className={styles.sliderValueWrapper}>
-                    <Text
-                        className={PlaybackSelectors.elapsedTime}
-                        fw={600}
-                        isMuted
-                        isNoSelect
-                        size="xs"
-                        style={{ userSelect: 'none' }}
-                    >
-                        {formattedTime}
-                    </Text>
-                </div>
-                <div className={styles.sliderWrapper}>
-                    <PlayerbarSlider
-                        label={(value) => formatDuration(value * 1000)}
-                        max={songDuration}
-                        min={0}
-                        onChange={(e) => {
-                            setIsSeeking(true);
-                            setSeekValue(e);
-                        }}
-                        onChangeEnd={(e) => {
-                            // There is a timing bug in Mantine in which the onChangeEnd
-                            // event fires before onChange. Add a small delay to force
-                            // onChangeEnd to happen after onCHange
-                            setTimeout(() => {
-                                // handleSeekSlider(e);
-                                setIsSeeking(false);
-                            }, 50);
-                        }}
-                        size={6}
-                        value={!isSeeking ? currentTime : seekValue}
-                        w="100%"
-                    />
-                </div>
-                <div className={styles.sliderValueWrapper}>
-                    <Text
-                        className={PlaybackSelectors.totalDuration}
-                        fw={600}
-                        isMuted
-                        isNoSelect
-                        onClick={() => setShowTimeRemaining(!showTimeRemaining)}
-                        role="button"
-                        size="xs"
-                        style={{ cursor: 'pointer', userSelect: 'none' }}
-                    >
-                        {showTimeRemaining ? formattedTimeRemaining : formattedDuration}
-                    </Text>
-                </div>
-            </div>
+            <PlayerbarSlider />
        </>
    );
 };
@@ -49,3 +49,28 @@
        right: calc(0.1rem * -1);
    }
 }
+
+.slider-container {
+    display: flex;
+    width: 95%;
+    height: 20px;
+}
+
+.slider-value-wrapper {
+    display: flex;
+    flex: 1;
+    align-self: center;
+    justify-content: center;
+    max-width: 50px;
+
+    @media (width < 768px) {
+        display: none;
+    }
+}
+
+.slider-wrapper {
+    display: flex;
+    flex: 6;
+    align-items: center;
+    height: 100%;
+}
@@ -1,8 +1,123 @@
+import formatDuration from 'format-duration';
+import { useEffect, useRef, useState } from 'react';
+
 import styles from './playerbar-slider.module.css';

+import { WebPlayer } from '/@/renderer/features/player/audio-player/web-player';
+import { usePlayerContext } from '/@/renderer/features/player/context/player-context';
+import {
+    useAppStore,
+    useAppStoreActions,
+    usePlaybackType,
+    usePlayerSong,
+    usePlayerTimestamp,
+} from '/@/renderer/store';
 import { Slider, SliderProps } from '/@/shared/components/slider/slider';
+import { Text } from '/@/shared/components/text/text';
+import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
+import { PlayerType } from '/@/shared/types/types';

 export const PlayerbarSlider = ({ ...props }: SliderProps) => {
+    const playbackType = usePlaybackType();
+    const currentSong = usePlayerSong();
+
+    const songDuration = currentSong?.duration ? currentSong.duration / 1000 : 0;
+    const [isSeeking, setIsSeeking] = useState(false);
+    const [seekValue, setSeekValue] = useState(0);
+    const currentTime = usePlayerTimestamp();
+    const seekTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const formattedDuration = formatDuration(songDuration * 1000 || 0);
+    const formattedTimeRemaining = formatDuration((currentTime - songDuration) * 1000 || 0);
+    const formattedTime = formatDuration(currentTime * 1000 || 0);
+
+    const { showTimeRemaining } = useAppStore();
+    const { setShowTimeRemaining } = useAppStoreActions();
+
+    const { mediaSeekToTimestamp } = usePlayerContext();
+
+    const handleSeekToTimestamp = (timestamp: number) => {
+        mediaSeekToTimestamp(timestamp);
+    };
+
+    useEffect(() => {
+        return () => {
+            if (seekTimeoutRef.current) {
+                clearTimeout(seekTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    return (
+        <>
+            <div className={styles.sliderContainer}>
+                <div className={styles.sliderValueWrapper}>
+                    <Text
+                        className={PlaybackSelectors.elapsedTime}
+                        fw={600}
+                        isMuted
+                        isNoSelect
+                        size="xs"
+                        style={{ userSelect: 'none' }}
+                    >
+                        {formattedTime}
+                    </Text>
+                </div>
+                <div className={styles.sliderWrapper}>
+                    <CustomPlayerbarSlider
+                        {...props}
+                        label={(value) => formatDuration(value * 1000)}
+                        max={songDuration}
+                        min={0}
+                        onChange={(e) => {
+                            // Cancel any pending timeout if user starts seeking again
+                            if (seekTimeoutRef.current) {
+                                clearTimeout(seekTimeoutRef.current);
+                                seekTimeoutRef.current = null;
+                            }
+                            setIsSeeking(true);
+                            setSeekValue(e);
+                        }}
+                        onChangeEnd={(e) => {
+                            setSeekValue(e);
+                            handleSeekToTimestamp(e);
+
+                            // Delay resetting isSeeking to allow currentTime to catch up
+                            // This prevents the slider from flickering back and forth
+                            seekTimeoutRef.current = setTimeout(() => {
+                                setIsSeeking(false);
+                                seekTimeoutRef.current = null;
+                            }, 300);
+                        }}
+                        onClick={(e) => {
+                            e?.stopPropagation();
+                        }}
+                        size={6}
+                        value={!isSeeking ? currentTime : seekValue}
+                        w="100%"
+                    />
+                </div>
+                <div className={styles.sliderValueWrapper}>
+                    <Text
+                        className={PlaybackSelectors.totalDuration}
+                        fw={600}
+                        isMuted
+                        isNoSelect
+                        onClick={() => setShowTimeRemaining(!showTimeRemaining)}
+                        role="button"
+                        size="xs"
+                        style={{ cursor: 'pointer', userSelect: 'none' }}
+                    >
+                        {showTimeRemaining ? formattedTimeRemaining : formattedDuration}
+                    </Text>
+                </div>
+            </div>
+            {playbackType === PlayerType.WEB && <WebPlayer />}
+        </>
+    );
+};
+
+export const CustomPlayerbarSlider = ({ ...props }: SliderProps) => {
    return (
        <Slider
            classNames={{
@@ -13,9 +128,7 @@ export const PlayerbarSlider = ({ ...props }: SliderProps) => {
                track: styles.track,
            }}
            {...props}
-            onClick={(e) => {
-                e?.stopPropagation();
-            }}
+            size={6}
        />
    );
 };
@@ -3,44 +3,16 @@ import { MouseEvent } from 'react';

 import styles from './playerbar.module.css';

-import { AudioPlayer } from '/@/renderer/features/player/audio-player';
 import { CenterControls } from '/@/renderer/features/player/components/center-controls';
 import { LeftControls } from '/@/renderer/features/player/components/left-controls';
 import { RightControls } from '/@/renderer/features/player/components/right-controls';
 import { usePowerSaveBlocker } from '/@/renderer/features/player/hooks/use-power-save-blocker';
-import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
-import {
-    useFullScreenPlayerStore,
-    usePlayerData,
-    // usePlayer1Data,
-    // usePlayer2Data,
-    // usePlayerControls,
-    usePlayerMuted,
-    usePlayerNum,
-    usePlayerStatus,
-    usePlayerVolume,
-    useSetFullScreenPlayerStore,
-} from '/@/renderer/store';
-import {
-    useGeneralSettings,
-    usePlaybackType,
-    useSettingsStore,
-} from '/@/renderer/store/settings.store';
+import { useFullScreenPlayerStore, useSetFullScreenPlayerStore } from '/@/renderer/store';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
 import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
-import { PlayerType } from '/@/shared/types/types';

 export const Playerbar = () => {
-    const playersRef = PlayersRef;
-    const settings = useSettingsStore((state) => state.playback);
    const { playerbarOpenDrawer } = useGeneralSettings();
-    const playbackType = usePlaybackType();
-    const volume = usePlayerVolume();
-    // const player1 = usePlayer1Data();
-    // const player2 = usePlayer2Data();
-    const status = usePlayerStatus();
-    const player = usePlayerNum();
-    const muted = usePlayerMuted();
-    // const { autoNext } = usePlayerControls();
    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();

@@ -51,13 +23,6 @@ export const Playerbar = () => {
        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
    };

-    const { player1, player2 } = usePlayerData();
-
-    // const autoNextFn = useCallback(() => {
-    //     const playerData = autoNext();
-    //     updateSong(playerData.current.song);
-    // }, [autoNext]);
-
    return (
        <div
            className={clsx(styles.container, PlaybackSelectors.mediaPlayer)}
@@ -68,13 +33,13 @@ export const Playerbar = () => {
                    <LeftControls />
                </div>
                <div className={styles.centerGridItem}>
-                    <CenterControls playersRef={playersRef} />
+                    <CenterControls />
                </div>
                <div className={styles.rightGridItem}>
                    <RightControls />
                </div>
            </div>
-            {playbackType === PlayerType.WEB && (
+            {/* {playbackType === PlayerType.WEB && (
                <AudioPlayer
                    // autoNext={autoNextFn}
                    crossfadeDuration={settings.crossfadeDuration}
@@ -89,7 +54,7 @@ export const Playerbar = () => {
                    style={settings.style as any}
                    volume={(volume / 100) ** 2}
                />
-            )}
+            )} */}
        </div>
    );
 };
@@ -1,21 +1,22 @@
 import { useHotkeys, useMediaQuery } from '@mantine/hooks';
 import isElectron from 'is-electron';
-import { useEffect } from 'react';
+import { useCallback, useEffect, WheelEvent } from 'react';
 import { useTranslation } from 'react-i18next';

-import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
-import { useRightControls } from '/@/renderer/features/player/hooks/use-right-controls';
+import { CustomPlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
+import { usePlayerContext } from '/@/renderer/features/player/context/player-context';
 import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
 import { useDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
 import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import {
    useAppStoreActions,
    useCurrentServer,
+    useGeneralSettings,
    useHotkeySettings,
    usePlaybackSettings,
    usePlaybackType,
+    usePlayerData,
    usePlayerMuted,
-    usePlayerSong,
    usePlayerSpeed,
    usePlayerVolume,
    useSettingsStore,
@@ -31,38 +32,53 @@ import { Rating } from '/@/shared/components/rating/rating';
 import { Slider } from '/@/shared/components/slider/slider';
 import { Switch } from '/@/shared/components/switch/switch';
 import { LibraryItem, QueueSong, ServerType, Song } from '/@/shared/types/domain-types';
-import { PlaybackType } from '/@/shared/types/types';
+import { PlayerType } from '/@/shared/types/types';

 const ipc = isElectron() ? window.api.ipc : null;
 const remote = isElectron() ? window.api.remote : null;

+const calculateVolumeUp = (volume: number, volumeWheelStep: number) => {
+    let volumeToSet;
+    const newVolumeGreaterThanHundred = volume + volumeWheelStep > 100;
+    if (newVolumeGreaterThanHundred) {
+        volumeToSet = 100;
+    } else {
+        volumeToSet = volume + volumeWheelStep;
+    }
+
+    return volumeToSet;
+};
+
+const calculateVolumeDown = (volume: number, volumeWheelStep: number) => {
+    let volumeToSet;
+    const newVolumeLessThanZero = volume - volumeWheelStep < 0;
+    if (newVolumeLessThanZero) {
+        volumeToSet = 0;
+    } else {
+        volumeToSet = volume - volumeWheelStep;
+    }
+
+    return volumeToSet;
+};
+
 export const RightControls = () => {
    const { t } = useTranslation();
    const isMinWidth = useMediaQuery('(max-width: 480px)');
    const volume = usePlayerVolume();
    const muted = usePlayerMuted();
    const server = useCurrentServer();
-    const currentSong = usePlayerSong();
-    // const previousSong = usePreviousSong();
+    const { currentSong, previousSong } = usePlayerData();
    const { setSideBar } = useAppStoreActions();
    const { rightExpanded: isQueueExpanded } = useSidebarStore();
    const { bindings } = useHotkeySettings();
-    const {
-        handleMute,
-        handleSpeed,
-        handleVolumeDown,
-        handleVolumeSlider,
-        handleVolumeUp,
-        handleVolumeWheel,
-    } = useRightControls();
    const { setSettings } = useSettingsStoreActions();
    const playbackSettings = usePlaybackSettings();
    const playbackType = usePlaybackType();
-
+    const { volumeWheelStep } = useGeneralSettings();
    const speed = usePlayerSpeed();
    const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
    const speedPreservePitch = useSettingsStore((state) => state.playback.preservePitch);
-
+    const { mediaToggleMute, setSpeed, setVolume } = usePlayerContext();
    const updateRatingMutation = useSetRating({});
    const addToFavoritesMutation = useCreateFavorite({});
    const removeFromFavoritesMutation = useDeleteFavorite({});
@@ -113,6 +129,46 @@ export const RightControls = () => {
        }
    };

+    const handleVolumeDown = useCallback(() => {
+        setVolume(volume - 1);
+    }, [setVolume, volume]);
+
+    const handleVolumeUp = useCallback(() => {
+        setVolume(volume + 1);
+    }, [setVolume, volume]);
+
+    const handleMute = useCallback(() => {
+        mediaToggleMute();
+    }, [mediaToggleMute]);
+
+    const handleSpeed = useCallback(
+        (e: number) => {
+            setSpeed(e);
+        },
+        [setSpeed],
+    );
+
+    const handleVolumeSlider = useCallback(
+        (e: number) => {
+            setVolume(e);
+        },
+        [setVolume],
+    );
+
+    const handleVolumeWheel = useCallback(
+        (e: WheelEvent<HTMLButtonElement | HTMLDivElement>) => {
+            let volumeToSet;
+            if (e.deltaY > 0 || e.deltaX > 0) {
+                volumeToSet = calculateVolumeDown(volume, volumeWheelStep);
+            } else {
+                volumeToSet = calculateVolumeUp(volume, volumeWheelStep);
+            }
+
+            remote?.updateVolume(volumeToSet);
+        },
+        [volume, volumeWheelStep],
+    );
+
    const handleToggleQueue = () => {
        setSideBar({ rightExpanded: !isQueueExpanded });
    };
@@ -147,18 +203,18 @@ export const RightControls = () => {
            bindings.favoriteCurrentToggle.isGlobal ? '' : bindings.favoriteCurrentToggle.hotkey,
            () => handleToggleFavorite(currentSong),
        ],
-        // [
-        //     bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
-        //     () => handleAddToFavorites(previousSong),
-        // ],
-        // [
-        //     bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
-        //     () => handleRemoveFromFavorites(previousSong),
-        // ],
-        // [
-        //     bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
-        //     () => handleToggleFavorite(previousSong),
-        // ],
+        [
+            bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
+            () => handleAddToFavorites(previousSong),
+        ],
+        [
+            bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
+            () => handleRemoveFromFavorites(previousSong),
+        ],
+        [
+            bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
+            () => handleToggleFavorite(previousSong),
+        ],
        [bindings.rate0.isGlobal ? '' : bindings.rate0.hotkey, () => handleUpdateRating(0)],
        [bindings.rate1.isGlobal ? '' : bindings.rate1.hotkey, () => handleUpdateRating(1)],
        [bindings.rate2.isGlobal ? '' : bindings.rate2.hotkey, () => handleUpdateRating(2)],
@@ -186,9 +242,9 @@ export const RightControls = () => {
                    query: {
                        item: [
                            {
+                                _serverId: currentSong?._serverId || '',
                                id,
                                itemType: LibraryItem.SONG,
-                                _serverId,
                            } as Song, // This is not a type-safe cast, but it works because those are all the prop
                        ],
                        rating,
@@ -203,7 +259,12 @@ export const RightControls = () => {
        }

        return () => {};
-    }, [addToFavoritesMutation, removeFromFavoritesMutation, updateRatingMutation]);
+    }, [
+        addToFavoritesMutation,
+        currentSong?._serverId,
+        removeFromFavoritesMutation,
+        updateRatingMutation,
+    ]);

    return (
        <Flex align="flex-end" direction="column" h="100%" px="1rem" py="0.5rem">
@@ -236,7 +297,7 @@ export const RightControls = () => {
                        />
                    </DropdownMenu.Target>
                    <DropdownMenu.Dropdown>
-                        {playbackType === PlaybackType.WEB && (
+                        {playbackType === PlayerType.WEB && (
                            <Option>
                                <Option.Label>
                                    {t('setting.preservePitch', {
@@ -338,7 +399,7 @@ export const RightControls = () => {
                    variant="subtle"
                />
                {!isMinWidth ? (
-                    <PlayerbarSlider
+                    <CustomPlayerbarSlider
                        max={100}
                        min={0}
                        onChange={handleVolumeSlider}
@@ -1,12 +1,28 @@
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { createContext, useCallback, useContext, useMemo } from 'react';

+import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
+import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
 import { AddToQueueType, usePlayerActions } from '/@/renderer/store';
-import { LibraryItem, QueueSong, Song } from '/@/shared/types/domain-types';
-import { Play } from '/@/shared/types/types';
+import {
+    LibraryItem,
+    PlaylistSongListResponse,
+    QueueSong,
+    Song,
+    SongListResponse,
+    SongListSort,
+    SortOrder,
+} from '/@/shared/types/domain-types';
+import { Play, PlayerRepeat, PlayerShuffle } from '/@/shared/types/types';

 interface PlayerContext {
    addToQueueByData: (data: Song[], type: AddToQueueType) => void;
-    addToQueueByFetch: (id: string[], itemType: LibraryItem, type: AddToQueueType) => void;
+    addToQueueByFetch: (
+        serverId: string,
+        id: string[],
+        itemType: LibraryItem,
+        type: AddToQueueType,
+    ) => void;
    clearQueue: () => void;
    clearSelected: (items: QueueSong[]) => void;
    decreaseVolume: (amount: number) => void;
@@ -18,16 +34,22 @@ interface PlayerContext {
    mediaSeekToTimestamp: (timestamp: number) => void;
    mediaSkipBackward: () => void;
    mediaSkipForward: () => void;
+    mediaStop: () => void;
    mediaToggleMute: () => void;
    mediaTogglePlayPause: () => void;
    moveSelectedTo: (items: QueueSong[], edge: 'bottom' | 'top', uniqueId: string) => void;
    moveSelectedToBottom: (items: QueueSong[]) => void;
    moveSelectedToNext: (items: QueueSong[]) => void;
    moveSelectedToTop: (items: QueueSong[]) => void;
+    setRepeat: (repeat: PlayerRepeat) => void;
+    setShuffle: (shuffle: PlayerShuffle) => void;
+    setSpeed: (speed: number) => void;
    setVolume: (volume: number) => void;
    shuffle: () => void;
    shuffleAll: () => void;
    shuffleSelected: (items: QueueSong[]) => void;
+    toggleRepeat: () => void;
+    toggleShuffle: () => void;
 }

 export const PlayerContext = createContext<PlayerContext>({
@@ -44,19 +66,26 @@ export const PlayerContext = createContext<PlayerContext>({
    mediaSeekToTimestamp: () => {},
    mediaSkipBackward: () => {},
    mediaSkipForward: () => {},
+    mediaStop: () => {},
    mediaToggleMute: () => {},
    mediaTogglePlayPause: () => {},
    moveSelectedTo: () => {},
    moveSelectedToBottom: () => {},
    moveSelectedToNext: () => {},
    moveSelectedToTop: () => {},
+    setRepeat: () => {},
+    setShuffle: () => {},
+    setSpeed: () => {},
    setVolume: () => {},
    shuffle: () => {},
    shuffleAll: () => {},
    shuffleSelected: () => {},
+    toggleRepeat: () => {},
+    toggleShuffle: () => {},
 });

 export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
+    const queryClient = useQueryClient();
    const storeActions = usePlayerActions();

    const addToQueueByData = useCallback(
@@ -72,8 +101,20 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
    );

    const addToQueueByFetch = useCallback(
-        (id: string[], itemType: LibraryItem, type: AddToQueueType) => {},
-        [],
+        async (serverId: string, id: string[], itemType: LibraryItem, type: AddToQueueType) => {
+            const songs = await fetchSongsByItemType(queryClient, serverId, {
+                id,
+                itemType,
+            });
+
+            if (typeof type === 'object' && 'edge' in type && type.edge !== null) {
+                const edge = type.edge === 'top' ? 'top' : 'bottom';
+                storeActions.addToQueueByUniqueId(songs, type.uniqueId, edge);
+            } else {
+                storeActions.addToQueueByType(songs, type as Play);
+            }
+        },
+        [queryClient, storeActions],
    );

    const clearQueue = useCallback(() => {
@@ -120,6 +161,10 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
        storeActions.mediaPrevious();
    }, [storeActions]);

+    const mediaStop = useCallback(() => {
+        storeActions.mediaStop();
+    }, [storeActions]);
+
    const mediaSeekToTimestamp = useCallback(
        (timestamp: number) => {
            storeActions.mediaSeekToTimestamp(timestamp);
@@ -135,6 +180,13 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
        storeActions.mediaSkipForward();
    }, [storeActions]);

+    const setSpeed = useCallback(
+        (speed: number) => {
+            storeActions.setSpeed(speed);
+        },
+        [storeActions],
+    );
+
    const mediaToggleMute = useCallback(() => {
        storeActions.mediaToggleMute();
    }, [storeActions]);
@@ -178,6 +230,20 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
        [storeActions],
    );

+    const setRepeat = useCallback(
+        (repeat: PlayerRepeat) => {
+            storeActions.setRepeat(repeat);
+        },
+        [storeActions],
+    );
+
+    const setShuffle = useCallback(
+        (shuffle: PlayerShuffle) => {
+            storeActions.setShuffle(shuffle);
+        },
+        [storeActions],
+    );
+
    const shuffle = useCallback(() => {
        storeActions.shuffle();
    }, [storeActions]);
@@ -193,6 +259,14 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
        [storeActions],
    );

+    const toggleRepeat = useCallback(() => {
+        storeActions.toggleRepeat();
+    }, [storeActions]);
+
+    const toggleShuffle = useCallback(() => {
+        storeActions.toggleShuffle();
+    }, [storeActions]);
+
    const contextValue: PlayerContext = useMemo(
        () => ({
            addToQueueByData,
@@ -208,16 +282,22 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
            mediaSeekToTimestamp,
            mediaSkipBackward,
            mediaSkipForward,
+            mediaStop,
            mediaToggleMute,
            mediaTogglePlayPause,
            moveSelectedTo,
            moveSelectedToBottom,
            moveSelectedToNext,
            moveSelectedToTop,
+            setRepeat,
+            setShuffle,
+            setSpeed,
            setVolume,
            shuffle,
            shuffleAll,
            shuffleSelected,
+            toggleRepeat,
+            toggleShuffle,
        }),
        [
            addToQueueByData,
@@ -225,6 +305,7 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
            clearQueue,
            clearSelected,
            decreaseVolume,
+            setSpeed,
            increaseVolume,
            mediaNext,
            mediaPause,
@@ -233,22 +314,154 @@ export const PlayerProvider = ({ children }: { children: React.ReactNode }) => {
            mediaSeekToTimestamp,
            mediaSkipBackward,
            mediaSkipForward,
+            mediaStop,
            mediaToggleMute,
            mediaTogglePlayPause,
            moveSelectedTo,
            moveSelectedToBottom,
            moveSelectedToNext,
            moveSelectedToTop,
+            setRepeat,
+            setShuffle,
            setVolume,
            shuffle,
            shuffleAll,
            shuffleSelected,
+            toggleRepeat,
+            toggleShuffle,
        ],
    );

    return <PlayerContext.Provider value={contextValue}>{children}</PlayerContext.Provider>;
 };

-export const usePlayer = () => {
+export const usePlayerContext = () => {
    return useContext(PlayerContext);
 };
+
+/**
+ * Fetches the songs from the server
+ * @param queryClient - The query client to use to fetch the data
+ * @param serverId - The library id to use to fetch the data
+ * @param type - The type of the item to add to the queue
+ * @param args - The arguments to use to fetch the data
+ * @returns The songs to add to the queue
+ */
+export async function fetchSongsByItemType(
+    queryClient: QueryClient,
+    serverId: string,
+    args: {
+        id: string[];
+        itemType: LibraryItem;
+        params?: Record<string, any>;
+    },
+) {
+    const songs: Song[] = [];
+
+    switch (args.itemType) {
+        case LibraryItem.ALBUM: {
+            const promises: Promise<SongListResponse>[] = [];
+
+            for (const id of args.id) {
+                promises.push(
+                    queryClient.fetchQuery(
+                        songsQueries.list({
+                            query: {
+                                albumIds: [id],
+                                sortBy: SongListSort.ID,
+                                sortOrder: SortOrder.ASC,
+                                startIndex: 0,
+                                ...args.params,
+                            },
+                            serverId: serverId,
+                        }),
+                    ),
+                );
+            }
+
+            const results = await Promise.all(promises);
+            songs.push(...results.flatMap((r) => r.items));
+
+            break;
+        }
+
+        case LibraryItem.ALBUM_ARTIST:
+        case LibraryItem.ARTIST: {
+            const promises: Promise<SongListResponse>[] = [];
+
+            for (const id of args.id) {
+                promises.push(
+                    queryClient.fetchQuery(
+                        songsQueries.list({
+                            query: {
+                                albumArtistIds: [id],
+                                limit: -1,
+                                sortBy: SongListSort.ID,
+                                sortOrder: SortOrder.ASC,
+                                startIndex: 0,
+                                ...args.params,
+                            },
+                            serverId: serverId,
+                        }),
+                    ),
+                );
+            }
+
+            const results = await Promise.all(promises);
+            songs.push(...results.flatMap((r) => r.items));
+
+            break;
+        }
+
+        case LibraryItem.GENRE: {
+            const promises: Promise<SongListResponse>[] = [];
+
+            for (const id of args.id) {
+                promises.push(
+                    queryClient.fetchQuery(
+                        songsQueries.list({
+                            query: {
+                                genreIds: [id],
+                                limit: -1,
+                                sortBy: SongListSort.ID,
+                                sortOrder: SortOrder.ASC,
+                                startIndex: 0,
+                                ...args.params,
+                            },
+                            serverId: serverId,
+                        }),
+                    ),
+                );
+            }
+
+            const results = await Promise.all(promises);
+            songs.push(...results.flatMap((r) => r.items));
+            break;
+        }
+
+        case LibraryItem.PLAYLIST: {
+            const promises: Promise<PlaylistSongListResponse>[] = [];
+
+            for (const id of args.id) {
+                promises.push(
+                    queryClient.fetchQuery(
+                        playlistsQueries.songList({
+                            query: {
+                                id: id,
+                                ...args.params,
+                            },
+                            serverId: serverId,
+                        }),
+                    ),
+                );
+            }
+
+            const results = await Promise.all(promises);
+
+            songs.push(...results.flatMap((r) => r.items));
+            break;
+        }
+    }
+
+    return songs;
+}