Support changing playback rate (#275)

* initial idea for playback rate

* Add transparency to dropdown

* Move playback speed component to right controls

* Set mpv speed on startup

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>

src/renderer/features/player/components/player-button.tsx

@@ -103,6 +103,7 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
     }
 
     &:hover {
+        color: var(--playerbar-btn-fg-hover);
         background: var(--playerbar-btn-bg-hover);
 
         svg {

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

@@ -17,18 +17,21 @@ import {
     useHotkeySettings,
     useMuted,
     useSidebarStore,
+    useSpeed,
     useVolume,
 } from '/@/renderer/store';
 import { useRightControls } from '../hooks/use-right-controls';
 import { PlayerButton } from './player-button';
 import { LibraryItem, ServerType, Song } from '/@/renderer/api/types';
 import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
-import { Rating } from '/@/renderer/components';
+import { DropdownMenu, Rating } from '/@/renderer/components';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 
 const ipc = isElectron() ? window.electron.ipc : null;
 const remote = isElectron() ? window.electron.remote : null;
 
+const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
+
 export const RightControls = () => {
     const isMinWidth = useMediaQuery('(max-width: 480px)');
     const volume = useVolume();
@@ -38,8 +41,16 @@ export const RightControls = () => {
     const { setSideBar } = useAppStoreActions();
     const { rightExpanded: isQueueExpanded } = useSidebarStore();
     const { bindings } = useHotkeySettings();
-    const { handleVolumeSlider, handleVolumeWheel, handleMute, handleVolumeDown, handleVolumeUp } =
-        useRightControls();
+    const {
+        handleVolumeSlider,
+        handleVolumeWheel,
+        handleMute,
+        handleVolumeDown,
+        handleVolumeUp,
+        handleSpeed,
+    } = useRightControls();
+
+    const speed = useSpeed();
 
     const updateRatingMutation = useSetRating({});
     const addToFavoritesMutation = useCreateFavorite({});
@@ -184,6 +195,28 @@ export const RightControls = () => {
                 align="center"
                 spacing="xs"
             >
+                <DropdownMenu>
+                    <DropdownMenu.Target>
+                        <PlayerButton
+                            icon={<>{speed} x</>}
+                            tooltip={{
+                                label: 'Playback speed',
+                                openDelay: 500,
+                            }}
+                            variant="secondary"
+                        />
+                    </DropdownMenu.Target>
+                    <DropdownMenu.Dropdown>
+                        {PLAYBACK_SPEEDS.map((speed) => (
+                            <DropdownMenu.Item
+                                key={`speed-select-${speed}`}
+                                onClick={() => handleSpeed(Number(speed))}
+                            >
+                                {speed}
+                            </DropdownMenu.Item>
+                        ))}
+                    </DropdownMenu.Dropdown>
+                </DropdownMenu>
                 <PlayerButton
                     icon={
                         currentSong?.userFavorite ? (
@@ -209,12 +242,14 @@ export const RightControls = () => {
                     variant="secondary"
                     onClick={handleToggleFavorite}
                 />
-                <PlayerButton
-                    icon={<HiOutlineQueueList size="1.1rem" />}
-                    tooltip={{ label: 'View queue', openDelay: 500 }}
-                    variant="secondary"
-                    onClick={handleToggleQueue}
-                />
+                {!isMinWidth ? (
+                    <PlayerButton
+                        icon={<HiOutlineQueueList size="1.1rem" />}
+                        tooltip={{ label: 'View queue', openDelay: 500 }}
+                        variant="secondary"
+                        onClick={handleToggleQueue}
+                    />
+                ) : null}
                 <Group
                     noWrap
                     spacing="xs"

src/renderer/features/player/hooks/use-right-controls.ts

@@ -1,6 +1,12 @@
 import { useCallback, useEffect, WheelEvent } from 'react';
 import isElectron from 'is-electron';
-import { useMuted, usePlayerControls, useVolume } from '/@/renderer/store';
+import {
+    useMuted,
+    usePlayerControls,
+    useSetCurrentSpeed,
+    useSpeed,
+    useVolume,
+} from '/@/renderer/store';
 import { useGeneralSettings } from '/@/renderer/store/settings.store';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
@@ -37,6 +43,8 @@ export const useRightControls = () => {
     const volume = useVolume();
     const muted = useMuted();
     const { volumeWheelStep } = useGeneralSettings();
+    const speed = useSpeed();
+    const setCurrentSpeed = useSetCurrentSpeed();
 
     // Ensure that the mpv player volume is set on startup
     useEffect(() => {
@@ -44,6 +52,7 @@ export const useRightControls = () => {
 
         if (mpvPlayer) {
             mpvPlayer.volume(volume);
+            mpvPlayer.setProperties({ speed });
 
             if (muted) {
                 mpvPlayer.mute(muted);
@@ -53,6 +62,16 @@ export const useRightControls = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const handleSpeed = useCallback(
+        (e: number) => {
+            setCurrentSpeed(e);
+            if (mpvPlayer) {
+                mpvPlayer?.setProperties({ speed: e });
+            }
+        },
+        [setCurrentSpeed],
+    );
+
     const handleVolumeSlider = (e: number) => {
         mpvPlayer?.volume(e);
         remote?.updateVolume(e);
@@ -123,6 +142,7 @@ export const useRightControls = () => {
 
     return {
         handleMute,
+        handleSpeed,
         handleVolumeDown,
         handleVolumeSlider,
         handleVolumeSliderState,