re-implement playerbar controls

src/renderer/app.tsx

@@ -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>

src/renderer/features/player/audio-player/engine/web-player-engine.tsx

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

src/renderer/features/player/audio-player/listener/player-events.tsx

@@ -30,10 +30,7 @@ export interface PlayerEventsCallbacks {
         prev: { timestamp: number },
     ) => void;
     onPlayerSpeed?: (properties: { speed: number }, prev: { speed: number }) => void;
-    onPlayerStatus?: (
+    onPlayerStatus?: (properties: { status: PlayerStatus }, prev: { status: PlayerStatus }) => void;
-        properties: { song: QueueSong | undefined; status: PlayerStatus },
-        prev: { song: QueueSong | undefined; status: PlayerStatus },
-    ) => void;
     onPlayerVolume?: (properties: { volume: number }, prev: { volume: number }) => void;
 }
 

src/renderer/features/player/audio-player/utils/player-utils.ts

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

src/renderer/features/player/audio-player/web-player.tsx

@@ -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}

src/renderer/features/player/components/center-controls.module.css

@@ -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;

src/renderer/features/player/components/center-controls.tsx

@@ -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 { PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/shared/types/types';
-import { PlaybackSelectors } from '/@/shared/constants/playback-selectors';
-import { PlayerRepeat, PlayerShuffle, PlayerStatus, PlayerType } from '/@/shared/types/types';
 
-interface CenterControlsProps {
+export const CenterControls = () => {
-    playersRef: any;
-}
-
-export const CenterControls = ({ playersRef }: CenterControlsProps) => {
     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 {
+    const {
-    //     handleNextTrack,
+        mediaNext,
-    //     handlePause,
+        mediaPrevious,
-    //     handlePlay,
+        mediaSkipBackward,
-    //     handlePlayPause,
+        mediaSkipForward,
-    //     handlePrevTrack,
+        mediaStop,
-    //     handleSeekSlider,
+        mediaTogglePlayPause,
-    //     handleSkipBackward,
+        toggleRepeat,
-    //     handleSkipForward,
+        toggleShuffle,
-    //     handleStop,
+    } = usePlayerContext();
-    //     handleToggleRepeat,
+
-    //     handleToggleShuffle,
-    // } = useCenterControls({ playersRef });
     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}>
+            <PlayerbarSlider />
-                <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>
         </>
     );
 };

src/renderer/features/player/components/playerbar-slider.module.css

@@ -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%;
+}

src/renderer/features/player/components/playerbar-slider.tsx

@@ -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) => {
+            size={6}
-                e?.stopPropagation();
-            }}
         />
     );
 };

src/renderer/features/player/components/playerbar.tsx

@@ -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, useSetFullScreenPlayerStore } from '/@/renderer/store';
-import {
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
-    useFullScreenPlayerStore,
-    usePlayerData,
-    // usePlayer1Data,
-    // usePlayer2Data,
-    // usePlayerControls,
-    usePlayerMuted,
-    usePlayerNum,
-    usePlayerStatus,
-    usePlayerVolume,
-    useSetFullScreenPlayerStore,
-} from '/@/renderer/store';
-import {
-    useGeneralSettings,
-    usePlaybackType,
-    useSettingsStore,
-} 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>
     );
 };

src/renderer/features/player/components/right-controls.tsx

@@ -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 { CustomPlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
-import { useRightControls } from '/@/renderer/features/player/hooks/use-right-controls';
+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 { currentSong, previousSong } = usePlayerData();
-    // const previousSong = usePreviousSong();
     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,
+            bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
-        //     () => handleAddToFavorites(previousSong),
+            () => handleAddToFavorites(previousSong),
-        // ],
+        ],
-        // [
+        [
-        //     bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
+            bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
-        //     () => handleRemoveFromFavorites(previousSong),
+            () => handleRemoveFromFavorites(previousSong),
-        // ],
+        ],
-        // [
+        [
-        //     bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
+            bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
-        //     () => handleToggleFavorite(previousSong),
+            () => 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}

src/renderer/features/player/context/player-context.tsx

@@ -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 {
-import { Play } from '/@/shared/types/types';
+    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;
+}