large performance refactor

2026-05-08 04:50:12 +02:00 · 2025-11-26 13:54:45 -08:00
parent 948f428546
commit 60cdea6787
32 changed files with 1030 additions and 502 deletions
@@ -140,6 +140,12 @@ function createPlayerEvents(callbacks: PlayerEventsCallbacks): PlayerEvents {
    return {
        cleanup: () => {
            unsubscribers.forEach((unsubscribe) => unsubscribe());
+            if (callbacks.onUserRating) {
+                eventEmitter.off('USER_RATING', callbacks.onUserRating);
+            }
+            if (callbacks.onUserFavorite) {
+                eventEmitter.off('USER_FAVORITE', callbacks.onUserFavorite);
+            }
        },
    };
 }
@@ -2,8 +2,10 @@ import { useEffect } from 'react';

 import { eventEmitter } from '/@/renderer/events/event-emitter';
 import { UserFavoriteEventPayload, UserRatingEventPayload } from '/@/renderer/events/events';
+import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
 import { MpvPlayer } from '/@/renderer/features/player/audio-player/mpv-player';
 import { WebPlayer } from '/@/renderer/features/player/audio-player/web-player';
+import { usePowerSaveBlocker } from '/@/renderer/features/player/hooks/use-power-save-blocker';
 import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
 import {
    updateQueueFavorites,
@@ -19,6 +21,8 @@ export const AudioPlayers = () => {
    const serverId = useCurrentServerId();

    useScrobble();
+    usePowerSaveBlocker();
+    useDiscordRpc();

    // Listen to favorite and rating events to update queue songs
    useEffect(() => {
@@ -18,167 +18,233 @@ import { Icon } from '/@/shared/components/icon/icon';
 import { PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/shared/types/types';

 export const CenterControls = () => {
-    const { t } = useTranslation();
-    const queryClient = useQueryClient();
-    const currentSong = usePlayerSong();
    const skip = useSettingsStore((state) => state.general.skipButtons);
-    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
-    const status = usePlayerStatus();
-    const repeat = usePlayerRepeat();
-    const shuffle = usePlayerShuffle();
-
-    const {
-        mediaNext,
-        mediaPrevious,
-        mediaSkipBackward,
-        mediaSkipForward,
-        mediaStop,
-        mediaTogglePlayPause,
-        toggleRepeat,
-        toggleShuffle,
-    } = usePlayer();

    return (
        <>
            <div className={styles.controlsContainer}>
                <div className={styles.buttonsContainer}>
-                    <PlayerButton
-                        icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
-                        onClick={mediaStop}
-                        tooltip={{
-                            label: t('player.stop', { postProcess: 'sentenceCase' }),
-                            openDelay: 0,
-                        }}
-                        variant="tertiary"
-                    />
-                    <PlayerButton
-                        icon={
-                            <Icon
-                                fill={shuffle === PlayerShuffle.NONE ? 'default' : 'primary'}
-                                icon="mediaShuffle"
-                                size={buttonSize}
-                            />
-                        }
-                        isActive={shuffle !== PlayerShuffle.NONE}
-                        onClick={toggleShuffle}
-                        tooltip={{
-                            label:
-                                shuffle === PlayerShuffle.NONE
-                                    ? t('player.shuffle', {
-                                          context: 'off',
-                                          postProcess: 'sentenceCase',
-                                      })
-                                    : t('player.shuffle', { postProcess: 'sentenceCase' }),
-                            openDelay: 0,
-                        }}
-                        variant="tertiary"
-                    />
-                    <PlayerButton
-                        icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
-                        onClick={mediaPrevious}
-                        tooltip={{
-                            label: t('player.previous', { postProcess: 'sentenceCase' }),
-                            openDelay: 0,
-                        }}
-                        variant="secondary"
-                    />
-                    {skip?.enabled && (
-                        <PlayerButton
-                            icon={
-                                <Icon fill="default" icon="mediaStepBackward" size={buttonSize} />
-                            }
-                            onClick={mediaSkipBackward}
-                            tooltip={{
-                                label: t('player.skip', {
-                                    context: 'back',
-                                    postProcess: 'sentenceCase',
-                                }),
-
-                                openDelay: 0,
-                            }}
-                            variant="secondary"
-                        />
-                    )}
-                    <PlayButton
-                        disabled={currentSong?.id === undefined}
-                        isPaused={status === PlayerStatus.PAUSED}
-                        onClick={mediaTogglePlayPause}
-                    />
-                    {skip?.enabled && (
-                        <PlayerButton
-                            icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
-                            onClick={mediaSkipForward}
-                            tooltip={{
-                                label: t('player.skip', {
-                                    context: 'forward',
-                                    postProcess: 'sentenceCase',
-                                }),
-
-                                openDelay: 0,
-                            }}
-                            variant="secondary"
-                        />
-                    )}
-                    <PlayerButton
-                        icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
-                        onClick={mediaNext}
-                        tooltip={{
-                            label: t('player.next', { postProcess: 'sentenceCase' }),
-                            openDelay: 0,
-                        }}
-                        variant="secondary"
-                    />
-                    <PlayerButton
-                        icon={
-                            repeat === PlayerRepeat.ONE ? (
-                                <Icon fill="primary" icon="mediaRepeatOne" size={buttonSize} />
-                            ) : (
-                                <Icon
-                                    fill={repeat === PlayerRepeat.NONE ? 'default' : 'primary'}
-                                    icon="mediaRepeat"
-                                    size={buttonSize}
-                                />
-                            )
-                        }
-                        isActive={repeat !== PlayerRepeat.NONE}
-                        onClick={toggleRepeat}
-                        tooltip={{
-                            label: `${
-                                repeat === PlayerRepeat.NONE
-                                    ? t('player.repeat', {
-                                          context: 'off',
-                                          postProcess: 'sentenceCase',
-                                      })
-                                    : repeat === PlayerRepeat.ALL
-                                      ? t('player.repeat', {
-                                            context: 'all',
-                                            postProcess: 'sentenceCase',
-                                        })
-                                      : t('player.repeat', {
-                                            context: 'one',
-                                            postProcess: 'sentenceCase',
-                                        })
-                            }`,
-                            openDelay: 0,
-                        }}
-                        variant="tertiary"
-                    />
-                    <PlayerButton
-                        icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
-                        onClick={() =>
-                            openShuffleAllModal({
-                                queryClient,
-                            })
-                        }
-                        tooltip={{
-                            label: t('player.playRandom', { postProcess: 'sentenceCase' }),
-                            openDelay: 0,
-                        }}
-                        variant="tertiary"
-                    />
+                    <StopButton />
+                    <ShuffleButton />
+                    <PreviousButton />
+                    {skip?.enabled && <SkipBackwardButton />}
+                    <CenterPlayButton />
+                    {skip?.enabled && <SkipForwardButton />}
+                    <NextButton />
+                    <RepeatButton />
+                    <ShuffleAllButton />
                </div>
            </div>
            <PlayerbarSlider />
        </>
    );
 };
+
+const StopButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaStop } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaStop" size={buttonSize - 2} />}
+            onClick={mediaStop}
+            tooltip={{
+                label: t('player.stop', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="tertiary"
+        />
+    );
+};
+
+const ShuffleButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const shuffle = usePlayerShuffle();
+    const { toggleShuffle } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={
+                <Icon
+                    fill={shuffle === PlayerShuffle.NONE ? 'default' : 'primary'}
+                    icon="mediaShuffle"
+                    size={buttonSize}
+                />
+            }
+            isActive={shuffle !== PlayerShuffle.NONE}
+            onClick={toggleShuffle}
+            tooltip={{
+                label:
+                    shuffle === PlayerShuffle.NONE
+                        ? t('player.shuffle', {
+                              context: 'off',
+                              postProcess: 'sentenceCase',
+                          })
+                        : t('player.shuffle', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="tertiary"
+        />
+    );
+};
+
+const PreviousButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaPrevious } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaPrevious" size={buttonSize} />}
+            onClick={mediaPrevious}
+            tooltip={{
+                label: t('player.previous', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="secondary"
+        />
+    );
+};
+
+const SkipBackwardButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaSkipBackward } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaStepBackward" size={buttonSize} />}
+            onClick={mediaSkipBackward}
+            tooltip={{
+                label: t('player.skip', {
+                    context: 'back',
+                    postProcess: 'sentenceCase',
+                }),
+                openDelay: 0,
+            }}
+            variant="secondary"
+        />
+    );
+};
+
+const CenterPlayButton = () => {
+    const currentSong = usePlayerSong();
+    const status = usePlayerStatus();
+    const { mediaTogglePlayPause } = usePlayer();
+
+    return (
+        <PlayButton
+            disabled={currentSong?.id === undefined}
+            isPaused={status === PlayerStatus.PAUSED}
+            onClick={mediaTogglePlayPause}
+        />
+    );
+};
+
+const SkipForwardButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaSkipForward } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaStepForward" size={buttonSize} />}
+            onClick={mediaSkipForward}
+            tooltip={{
+                label: t('player.skip', {
+                    context: 'forward',
+                    postProcess: 'sentenceCase',
+                }),
+                openDelay: 0,
+            }}
+            variant="secondary"
+        />
+    );
+};
+
+const NextButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const { mediaNext } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaNext" size={buttonSize} />}
+            onClick={mediaNext}
+            tooltip={{
+                label: t('player.next', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="secondary"
+        />
+    );
+};
+
+const RepeatButton = () => {
+    const { t } = useTranslation();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+    const repeat = usePlayerRepeat();
+    const { toggleRepeat } = usePlayer();
+
+    return (
+        <PlayerButton
+            icon={
+                repeat === PlayerRepeat.ONE ? (
+                    <Icon fill="primary" icon="mediaRepeatOne" size={buttonSize} />
+                ) : (
+                    <Icon
+                        fill={repeat === PlayerRepeat.NONE ? 'default' : 'primary'}
+                        icon="mediaRepeat"
+                        size={buttonSize}
+                    />
+                )
+            }
+            isActive={repeat !== PlayerRepeat.NONE}
+            onClick={toggleRepeat}
+            tooltip={{
+                label: `${
+                    repeat === PlayerRepeat.NONE
+                        ? t('player.repeat', {
+                              context: 'off',
+                              postProcess: 'sentenceCase',
+                          })
+                        : repeat === PlayerRepeat.ALL
+                          ? t('player.repeat', {
+                                context: 'all',
+                                postProcess: 'sentenceCase',
+                            })
+                          : t('player.repeat', {
+                                context: 'one',
+                                postProcess: 'sentenceCase',
+                            })
+                }`,
+                openDelay: 0,
+            }}
+            variant="tertiary"
+        />
+    );
+};
+
+const ShuffleAllButton = () => {
+    const { t } = useTranslation();
+    const queryClient = useQueryClient();
+    const buttonSize = useSettingsStore((state) => state.general.buttonSize);
+
+    return (
+        <PlayerButton
+            icon={<Icon fill="default" icon="mediaRandom" size={buttonSize} />}
+            onClick={() =>
+                openShuffleAllModal({
+                    queryClient,
+                })
+            }
+            tooltip={{
+                label: t('player.playRandom', { postProcess: 'sentenceCase' }),
+                openDelay: 0,
+            }}
+            variant="tertiary"
+        />
+    );
+};
@@ -3,18 +3,19 @@ import { AnimatePresence, LayoutGroup, motion } from 'motion/react';
 import React, { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, Link } from 'react-router';
+import { shallow } from 'zustand/shallow';

 import styles from './left-controls.module.css';

 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
+    useAppStore,
    useAppStoreActions,
    useFullScreenPlayerStore,
    useHotkeySettings,
    usePlayerSong,
    useSetFullScreenPlayerStore,
-    useSidebarStore,
 } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Group } from '/@/shared/components/group/group';
@@ -31,7 +32,15 @@ export const LeftControls = () => {
    const { setSideBar } = useAppStoreActions();
    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
-    const { collapsed, image } = useSidebarStore();
+
+    const { collapsed, image } = useAppStore(
+        (state) => ({
+            collapsed: state.sidebar.collapsed,
+            image: state.sidebar.image,
+        }),
+        shallow,
+    );
+
    const hideImage = image && !collapsed;
    const currentSong = usePlayerSong();
    const title = currentSong?.name;
@@ -27,7 +27,7 @@ export const PlayerbarSlider = () => {
    const formattedTimeRemaining = formatDuration((currentTime - songDuration) * 1000 || 0);
    const formattedTime = formatDuration(currentTime * 1000 || 0);

-    const { showTimeRemaining } = useAppStore();
+    const showTimeRemaining = useAppStore((state) => state.showTimeRemaining);
    const { setShowTimeRemaining } = useAppStoreActions();

    useRemote();
@@ -7,7 +7,6 @@ import { CenterControls } from '/@/renderer/features/player/components/center-co
 import { LeftControls } from '/@/renderer/features/player/components/left-controls';
 import { MobilePlayerbar } from '/@/renderer/features/player/components/mobile-playerbar';
 import { RightControls } from '/@/renderer/features/player/components/right-controls';
-import { usePowerSaveBlocker } from '/@/renderer/features/player/hooks/use-power-save-blocker';
 import { useIsMobile } from '/@/renderer/hooks/use-is-mobile';
 import { useFullScreenPlayerStore, useSetFullScreenPlayerStore } from '/@/renderer/store';
 import { useGeneralSettings } from '/@/renderer/store/settings.store';
@@ -19,8 +18,6 @@ export const Playerbar = () => {
    const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
    const isMobile = useIsMobile();

-    usePowerSaveBlocker();
-
    const handleToggleFullScreenPlayer = (e?: KeyboardEvent | MouseEvent<HTMLDivElement>) => {
        e?.stopPropagation();
        setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
@@ -46,22 +43,6 @@ export const Playerbar = () => {
                    <RightControls />
                </div>
            </div>
-            {/* {playbackType === PlayerType.WEB && (
-                <AudioPlayer
-                    // autoNext={autoNextFn}
-                    crossfadeDuration={settings.crossfadeDuration}
-                    crossfadeStyle={settings.crossfadeStyle}
-                    currentPlayer={player}
-                    muted={muted}
-                    playbackStyle={settings.style}
-                    player1={player1}
-                    player2={player2}
-                    ref={playersRef}
-                    status={status}
-                    style={settings.style as any}
-                    volume={(volume / 100) ** 2}
-                />
-            )} */}
        </div>
    );
 };
@@ -1,3 +1,4 @@
+import { t } from 'i18next';
 import { useCallback, WheelEvent } from 'react';
 import { useTranslation } from 'react-i18next';

@@ -14,9 +15,10 @@ import {
    useHotkeySettings,
    usePlayerData,
    usePlayerMuted,
+    usePlayerSong,
    usePlayerVolume,
    useSettingsStore,
-    useSidebarStore,
+    useSidebarRightExpanded,
 } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Flex } from '/@/shared/components/flex/flex';
@@ -51,19 +53,61 @@ const calculateVolumeDown = (volume: number, volumeWheelStep: number) => {
 };

 export const RightControls = () => {
+    return (
+        <Flex align="flex-end" direction="column" h="100%" px="1rem" py="0.5rem">
+            <Group h="calc(100% / 3)">
+                <RatingButton />
+            </Group>
+            <Group align="center" gap="xs" wrap="nowrap">
+                <PlayerConfig />
+                <FavoriteButton />
+                <QueueButton />
+                <VolumeButton />
+            </Group>
+            <Group h="calc(100% / 3)" />
+        </Flex>
+    );
+};
+
+const QueueButton = () => {
    const { t } = useTranslation();
-    const isMinWidth = useMediaQuery('(max-width: 480px)');
-    const volume = usePlayerVolume();
-    const muted = usePlayerMuted();
-    const server = useCurrentServer();
-    const { currentSong, previousSong } = usePlayerData();
+    const isSidebarRightExpanded = useSidebarRightExpanded();
    const { setSideBar } = useAppStoreActions();
-    const { rightExpanded: isQueueExpanded } = useSidebarStore();
+
    const { bindings } = useHotkeySettings();
-    const { volumeWheelStep } = useGeneralSettings();
-    const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
-    const { mediaToggleMute, setVolume } = usePlayer();
-    const updateRatingMutation = useSetRating({});
+
+    const handleToggleQueue = () => {
+        setSideBar({ rightExpanded: !isSidebarRightExpanded });
+    };
+
+    useHotkeys([
+        [bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
+    ]);
+
+    return (
+        <ActionIcon
+            icon={isSidebarRightExpanded ? 'panelRightClose' : 'panelRightOpen'}
+            iconProps={{
+                size: 'lg',
+            }}
+            onClick={(e) => {
+                e.stopPropagation();
+                handleToggleQueue();
+            }}
+            size="sm"
+            tooltip={{
+                label: t('player.viewQueue', { postProcess: 'titleCase' }),
+                openDelay: 0,
+            }}
+            variant="subtle"
+        />
+    );
+};
+
+const FavoriteButton = () => {
+    const currentSong = usePlayerSong();
+    const { bindings } = useHotkeySettings();
+
    const addToFavoritesMutation = useCreateFavorite({});
    const removeFromFavoritesMutation = useDeleteFavorite({});

@@ -79,19 +123,6 @@ export const RightControls = () => {
        });
    };

-    const handleUpdateRating = (rating: number) => {
-        if (!currentSong) return;
-
-        updateRatingMutation.mutate({
-            apiClientProps: { serverId: currentSong?._serverId || '' },
-            query: {
-                id: [currentSong.id],
-                rating,
-                type: LibraryItem.SONG,
-            },
-        });
-    };
-
    const handleRemoveFromFavorites = (song: QueueSong | undefined) => {
        if (!song?.id) return;

@@ -114,6 +145,136 @@ export const RightControls = () => {
        }
    };

+    useFavoritePreviousSongHotkeys({
+        handleAddToFavorites,
+        handleRemoveFromFavorites,
+        handleToggleFavorite,
+    });
+
+    useHotkeys([
+        [
+            bindings.favoriteCurrentAdd.isGlobal ? '' : bindings.favoriteCurrentAdd.hotkey,
+            () => handleAddToFavorites(currentSong),
+        ],
+        [
+            bindings.favoriteCurrentRemove.isGlobal ? '' : bindings.favoriteCurrentRemove.hotkey,
+            () => handleRemoveFromFavorites(currentSong),
+        ],
+        [
+            bindings.favoriteCurrentToggle.isGlobal ? '' : bindings.favoriteCurrentToggle.hotkey,
+            () => handleToggleFavorite(currentSong),
+        ],
+    ]);
+
+    return (
+        <ActionIcon
+            icon="favorite"
+            iconProps={{
+                fill: currentSong?.userFavorite ? 'primary' : undefined,
+                size: 'lg',
+            }}
+            onClick={(e) => {
+                e.stopPropagation();
+                handleToggleFavorite(currentSong);
+            }}
+            size="sm"
+            tooltip={{
+                label: currentSong?.userFavorite
+                    ? t('player.unfavorite', { postProcess: 'titleCase' })
+                    : t('player.favorite', { postProcess: 'titleCase' }),
+                openDelay: 0,
+            }}
+            variant="subtle"
+        />
+    );
+};
+
+const useFavoritePreviousSongHotkeys = ({
+    handleAddToFavorites,
+    handleRemoveFromFavorites,
+    handleToggleFavorite,
+}: {
+    handleAddToFavorites: (song: QueueSong | undefined) => void;
+    handleRemoveFromFavorites: (song: QueueSong | undefined) => void;
+    handleToggleFavorite: (song: QueueSong | undefined) => void;
+}) => {
+    const { bindings } = useHotkeySettings();
+    const { previousSong } = usePlayerData();
+
+    useHotkeys([
+        [
+            bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
+            () => handleAddToFavorites(previousSong),
+        ],
+        [
+            bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
+            () => handleRemoveFromFavorites(previousSong),
+        ],
+        [
+            bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
+            () => handleToggleFavorite(previousSong),
+        ],
+    ]);
+
+    return null;
+};
+
+const RatingButton = () => {
+    const server = useCurrentServer();
+    const currentSong = usePlayerSong();
+    const updateRatingMutation = useSetRating({});
+
+    const isSongDefined = Boolean(currentSong?.id);
+    const showRating =
+        isSongDefined &&
+        (server?.type === ServerType.NAVIDROME || server?.type === ServerType.SUBSONIC);
+
+    const handleUpdateRating = (rating: number) => {
+        if (!currentSong) return;
+
+        updateRatingMutation.mutate({
+            apiClientProps: { serverId: currentSong?._serverId || '' },
+            query: {
+                id: [currentSong.id],
+                rating,
+                type: LibraryItem.SONG,
+            },
+        });
+    };
+
+    const { bindings } = useHotkeySettings();
+
+    useHotkeys([
+        [bindings.rate0.isGlobal ? '' : bindings.rate0.hotkey, () => handleUpdateRating(0)],
+        [bindings.rate1.isGlobal ? '' : bindings.rate1.hotkey, () => handleUpdateRating(1)],
+        [bindings.rate2.isGlobal ? '' : bindings.rate2.hotkey, () => handleUpdateRating(2)],
+        [bindings.rate3.isGlobal ? '' : bindings.rate3.hotkey, () => handleUpdateRating(3)],
+        [bindings.rate4.isGlobal ? '' : bindings.rate4.hotkey, () => handleUpdateRating(4)],
+        [bindings.rate5.isGlobal ? '' : bindings.rate5.hotkey, () => handleUpdateRating(5)],
+    ]);
+
+    return (
+        <>
+            {showRating && (
+                <Rating
+                    onChange={handleUpdateRating}
+                    size="xs"
+                    value={currentSong?.userRating || 0}
+                />
+            )}
+        </>
+    );
+};
+
+const VolumeButton = () => {
+    const { bindings } = useHotkeySettings();
+    const volume = usePlayerVolume();
+    const muted = usePlayerMuted();
+    const { volumeWheelStep } = useGeneralSettings();
+    const volumeWidth = useSettingsStore((state) => state.general.volumeWidth);
+    const { mediaToggleMute, setVolume } = usePlayer();
+    const isMinWidth = useMediaQuery('(max-width: 480px)');
+
    const handleVolumeDown = useCallback(() => {
        setVolume(volume - 1);
    }, [setVolume, volume]);
@@ -122,10 +283,6 @@ export const RightControls = () => {
        setVolume(volume + 1);
    }, [setVolume, volume]);

-    const handleMute = useCallback(() => {
-        mediaToggleMute();
-    }, [mediaToggleMute]);
-
    const handleVolumeSlider = useCallback(
        (e: number) => {
            setVolume(e);
@@ -133,6 +290,10 @@ export const RightControls = () => {
        [setVolume],
    );

+    const handleMute = useCallback(() => {
+        mediaToggleMute();
+    }, [mediaToggleMute]);
+
    const handleVolumeWheel = useCallback(
        (e: WheelEvent<HTMLButtonElement | HTMLDivElement>) => {
            let volumeToSet;
@@ -146,132 +307,43 @@ export const RightControls = () => {
        },
        [setVolume, volume, volumeWheelStep],
    );
-
-    const handleToggleQueue = () => {
-        setSideBar({ rightExpanded: !isQueueExpanded });
-    };
-
-    const isSongDefined = Boolean(currentSong?.id);
-    const showRating =
-        isSongDefined &&
-        (server?.type === ServerType.NAVIDROME || server?.type === ServerType.SUBSONIC);
-
    useHotkeys([
        [bindings.volumeDown.isGlobal ? '' : bindings.volumeDown.hotkey, handleVolumeDown],
        [bindings.volumeUp.isGlobal ? '' : bindings.volumeUp.hotkey, handleVolumeUp],
        [bindings.volumeMute.isGlobal ? '' : bindings.volumeMute.hotkey, handleMute],
-        [bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
-        [
-            bindings.favoriteCurrentAdd.isGlobal ? '' : bindings.favoriteCurrentAdd.hotkey,
-            () => handleAddToFavorites(currentSong),
-        ],
-        [
-            bindings.favoriteCurrentRemove.isGlobal ? '' : bindings.favoriteCurrentRemove.hotkey,
-            () => handleRemoveFromFavorites(currentSong),
-        ],
-        [
-            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.rate0.isGlobal ? '' : bindings.rate0.hotkey, () => handleUpdateRating(0)],
-        [bindings.rate1.isGlobal ? '' : bindings.rate1.hotkey, () => handleUpdateRating(1)],
-        [bindings.rate2.isGlobal ? '' : bindings.rate2.hotkey, () => handleUpdateRating(2)],
-        [bindings.rate3.isGlobal ? '' : bindings.rate3.hotkey, () => handleUpdateRating(3)],
-        [bindings.rate4.isGlobal ? '' : bindings.rate4.hotkey, () => handleUpdateRating(4)],
-        [bindings.rate5.isGlobal ? '' : bindings.rate5.hotkey, () => handleUpdateRating(5)],
    ]);

    return (
-        <Flex align="flex-end" direction="column" h="100%" px="1rem" py="0.5rem">
-            <Group h="calc(100% / 3)">
-                {showRating && (
-                    <Rating
-                        onChange={handleUpdateRating}
-                        size="xs"
-                        value={currentSong?.userRating || 0}
-                    />
-                )}
-            </Group>
-            <Group align="center" gap="xs" wrap="nowrap">
-                <PlayerConfig />
-                <ActionIcon
-                    icon="favorite"
-                    iconProps={{
-                        fill: currentSong?.userFavorite ? 'primary' : undefined,
-                        size: 'lg',
-                    }}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        handleToggleFavorite(currentSong);
-                    }}
-                    size="sm"
-                    tooltip={{
-                        label: currentSong?.userFavorite
-                            ? t('player.unfavorite', { postProcess: 'titleCase' })
-                            : t('player.favorite', { postProcess: 'titleCase' }),
-                        openDelay: 0,
-                    }}
-                    variant="subtle"
-                />
-                <ActionIcon
-                    icon={isQueueExpanded ? 'panelRightClose' : 'panelRightOpen'}
-                    iconProps={{
-                        size: 'lg',
-                    }}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        handleToggleQueue();
-                    }}
-                    size="sm"
-                    tooltip={{
-                        label: t('player.viewQueue', { postProcess: 'titleCase' }),
-                        openDelay: 0,
-                    }}
-                    variant="subtle"
-                />
-                <ActionIcon
-                    icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
-                    iconProps={{
-                        color: muted ? 'muted' : undefined,
-                        size: 'xl',
-                    }}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        handleMute();
-                    }}
+        <>
+            <ActionIcon
+                icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
+                iconProps={{
+                    color: muted ? 'muted' : undefined,
+                    size: 'xl',
+                }}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    handleMute();
+                }}
+                onWheel={handleVolumeWheel}
+                size="sm"
+                tooltip={{
+                    label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
+                    openDelay: 0,
+                }}
+                variant="subtle"
+            />
+            {!isMinWidth ? (
+                <CustomPlayerbarSlider
+                    max={100}
+                    min={0}
+                    onChange={handleVolumeSlider}
                    onWheel={handleVolumeWheel}
-                    size="sm"
-                    tooltip={{
-                        label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
-                        openDelay: 0,
-                    }}
-                    variant="subtle"
+                    size={6}
+                    value={volume}
+                    w={volumeWidth}
                />
-                {!isMinWidth ? (
-                    <CustomPlayerbarSlider
-                        max={100}
-                        min={0}
-                        onChange={handleVolumeSlider}
-                        onWheel={handleVolumeWheel}
-                        size={6}
-                        value={volume}
-                        w={volumeWidth}
-                    />
-                ) : null}
-            </Group>
-            <Group h="calc(100% / 3)" />
-        </Flex>
+            ) : null}
+        </>
    );
 };
@@ -60,7 +60,7 @@ const checkScrobbleConditions = (args: {
 export const useScrobble = () => {
    const scrobbleSettings = usePlaybackSettings().scrobble;
    const isScrobbleEnabled = scrobbleSettings?.enabled;
-    const isPrivateModeEnabled = useAppStore().privateMode;
+    const isPrivateModeEnabled = useAppStore((state) => state.privateMode);
    const sendScrobble = useSendScrobble();

    const [isCurrentSongScrobbled, setIsCurrentSongScrobbled] = useState(false);