re-implement playerbar controls

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 { 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 />
         </>
     );
 };

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

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,
-    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>
     );
 };

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