Improve the playback speed control (#437)

* Change playback speed selector to slider

* Improve playback speed bar

Display BPM
Improve style
Add markers

* Improve playback speed slider style

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

@@ -28,12 +28,11 @@ import { LibraryItem, QueueSong, ServerType, Song } from '/@/renderer/api/types'
 import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
 import { DropdownMenu, Rating } from '/@/renderer/components';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
+import { Slider } from '/@/renderer/components/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 { t } = useTranslation();
     const isMinWidth = useMediaQuery('(max-width: 480px)');
@@ -110,6 +109,14 @@ export const RightControls = () => {
         setSideBar({ rightExpanded: !isQueueExpanded });
     };
 
+    const formatPlaybackSpeedSliderLabel = (value: number) => {
+        const bpm = Number(currentSong?.bpm);
+        if (bpm > 0) {
+            return `${value} x / ${(bpm * value).toFixed(1)} BPM`;
+        }
+        return `${value} x`;
+    };
+
     const isSongDefined = Boolean(currentSong?.id);
     const showRating = isSongDefined && server?.type === ServerType.NAVIDROME;
 
@@ -210,7 +217,13 @@ export const RightControls = () => {
                 align="center"
                 spacing="xs"
             >
-                <DropdownMenu>
+                <DropdownMenu
+                    withArrow
+                    arrowOffset={12}
+                    offset={0}
+                    position="top-end"
+                    width={425}
+                >
                     <DropdownMenu.Target>
                         <PlayerButton
                             icon={<>{speed} x</>}
@@ -222,14 +235,30 @@ export const RightControls = () => {
                         />
                     </DropdownMenu.Target>
                     <DropdownMenu.Dropdown>
-                        {PLAYBACK_SPEEDS.map((speed) => (
+                        <Slider
-                            <DropdownMenu.Item
+                            label={formatPlaybackSpeedSliderLabel}
-                                key={`speed-select-${speed}`}
+                            marks={[
-                                onClick={() => handleSpeed(Number(speed))}
+                                { label: '0.5', value: 0.5 },
-                            >
+                                { label: '0.75', value: 0.75 },
-                                {speed}
+                                { label: '1', value: 1 },
-                            </DropdownMenu.Item>
+                                { label: '1.25', value: 1.25 },
-                        ))}
+                                { label: '1.5', value: 1.5 },
+                            ]}
+                            max={1.5}
+                            min={0.5}
+                            step={0.01}
+                            styles={{
+                                markLabel: {
+                                    paddingTop: '0.5rem',
+                                },
+                                root: {
+                                    margin: '1rem 1rem 2rem 1rem',
+                                },
+                            }}
+                            value={speed}
+                            onChange={handleSpeed}
+                            onDoubleClick={() => handleSpeed(1)}
+                        />
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <PlayerButton