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/app.tsx

@@ -100,7 +100,8 @@ export const App = () => {
 
             if (!isRunning) {
                 const extraParameters = useSettingsStore.getState().playback.mpvExtraParameters;
-                const properties = {
+                const properties: Record<string, any> = {
+                    speed: usePlayerStore.getState().current.speed,
                     ...getMpvProperties(useSettingsStore.getState().playback.mpvProperties),
                 };
 

src/renderer/components/audio-player/index.tsx

@@ -10,6 +10,7 @@ import {
 import { useSettingsStore } from '/@/renderer/store/settings.store';
 import type { CrossfadeStyle } from '/@/renderer/types';
 import { PlaybackStyle, PlayerStatus } from '/@/renderer/types';
+import { useSpeed } from '/@/renderer/store';
 
 interface AudioPlayerProps extends ReactPlayerProps {
     crossfadeDuration: number;
@@ -59,6 +60,7 @@ export const AudioPlayer = forwardRef(
         const [isTransitioning, setIsTransitioning] = useState(false);
         const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
         const playback = useSettingsStore((state) => state.playback.mpvProperties);
+        const playbackSpeed = useSpeed();
 
         const [webAudio, setWebAudio] = useState<WebAudio | null>(null);
         const [player1Source, setPlayer1Source] = useState<MediaElementAudioSourceNode | null>(
@@ -307,6 +309,7 @@ export const AudioPlayer = forwardRef(
                     }}
                     height={0}
                     muted={muted}
+                    playbackRate={playbackSpeed}
                     playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
                     progressInterval={isTransitioning ? 10 : 250}
                     url={player1?.streamUrl}
@@ -325,6 +328,7 @@ export const AudioPlayer = forwardRef(
                     }}
                     height={0}
                     muted={muted}
+                    playbackRate={playbackSpeed}
                     playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
                     progressInterval={isTransitioning ? 10 : 250}
                     url={player2?.streamUrl}

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 } =
+    const {
-        useRightControls();
+        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}
                 />
+                {!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,

src/renderer/store/player.store.ts

@@ -18,6 +18,7 @@ export interface PlayerState {
         seek: boolean;
         shuffledIndex: number;
         song?: QueueSong;
+        speed: number;
         status: PlayerStatus;
         time: number;
     };
@@ -81,6 +82,7 @@ export interface PlayerSlice extends PlayerState {
         reorderQueue: (rowUniqueIds: string[], afterUniqueId?: string) => PlayerData;
         restoreQueue: (data: Partial<PlayerState>) => PlayerData;
         setCurrentIndex: (index: number) => PlayerData;
+        setCurrentSpeed: (speed: number) => void;
         setCurrentTime: (time: number, seek?: boolean) => void;
         setCurrentTrack: (uniqueId: string) => PlayerData;
         setFavorite: (ids: string[], favorite: boolean) => string[];
@@ -750,6 +752,11 @@ export const usePlayerStore = create<PlayerSlice>()(
 
                             return get().actions.getPlayerData();
                         },
+                        setCurrentSpeed: (speed) => {
+                            set((state) => {
+                                state.current.speed = speed;
+                            });
+                        },
                         setCurrentTime: (time, seek = false) => {
                             set((state) => {
                                 state.current.seek = seek;
@@ -924,6 +931,7 @@ export const usePlayerStore = create<PlayerSlice>()(
                         seek: false,
                         shuffledIndex: 0,
                         song: {} as QueueSong,
+                        speed: 1.0,
                         status: PlayerStatus.PAUSED,
                         time: 0,
                     },
@@ -1038,6 +1046,10 @@ export const useVolume = () => usePlayerStore((state) => state.volume);
 
 export const useMuted = () => usePlayerStore((state) => state.muted);
 
+export const useSpeed = () => usePlayerStore((state) => state.current.speed);
+
+export const useSetCurrentSpeed = () => usePlayerStore((state) => state.actions.setCurrentSpeed);
+
 export const useSetQueueFavorite = () => usePlayerStore((state) => state.actions.setFavorite);
 
 export const useSetQueueRating = () => usePlayerStore((state) => state.actions.setRating);

src/renderer/themes/default.scss

@@ -70,7 +70,7 @@
     --input-placeholder-fg: rgb(107, 108, 109);
     --input-active-fg: rgb(193, 193, 193);
     --input-active-bg: rgba(255, 255, 255, 10%);
-    --dropdown-menu-bg: rgb(32, 32, 32);
+    --dropdown-menu-bg: rgba(32, 32, 32, 95%);
     --dropdown-menu-fg: rgb(235, 235, 235);
     --dropdown-menu-item-padding: 0.8rem;
     --dropdown-menu-item-font-size: 1rem;