From ed2ccde910a3fe1e9173ccb3c6c9019713bb87e5 Mon Sep 17 00:00:00 2001
From: Markus <marksdestiny@hotmail.com>
Date: Mon, 8 Jan 2024 01:06:54 +0100
Subject: [PATCH 1/3] Change playback speed selector to slider

---
 .../player/components/right-controls.tsx      | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index 93b3327b8..baf814c01 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/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)');
@@ -210,7 +209,10 @@ export const RightControls = () => {
                 align="center"
                 spacing="xs"
             >
-                <DropdownMenu>
+                <DropdownMenu
+                    position="top-end"
+                    width={425}
+                >
                     <DropdownMenu.Target>
                         <PlayerButton
                             icon={<>{speed} x</>}
@@ -222,14 +224,15 @@ export const RightControls = () => {
                         />
                     </DropdownMenu.Target>
                     <DropdownMenu.Dropdown>
-                        {PLAYBACK_SPEEDS.map((speed) => (
-                            <DropdownMenu.Item
-                                key={`speed-select-${speed}`}
-                                onClick={() => handleSpeed(Number(speed))}
-                            >
-                                {speed}
-                            </DropdownMenu.Item>
-                        ))}
+                        <DropdownMenu.Item closeMenuOnClick={false}>
+                            <Slider
+                                defaultValue={speed}
+                                max={2}
+                                min={0.25}
+                                step={0.05}
+                                onChange={handleSpeed}
+                            />
+                        </DropdownMenu.Item>
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
                 <PlayerButton

From 8ba51b58ba75283a41add15a8b9daa3ff3e6891a Mon Sep 17 00:00:00 2001
From: Markus <marksdestiny@hotmail.com>
Date: Mon, 8 Jan 2024 02:35:48 +0100
Subject: [PATCH 2/3] Improve playback speed bar

Display BPM
Improve style
Add markers
---
 .../player/components/right-controls.tsx      | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index baf814c01..724b3a04e 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -109,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,6 +218,9 @@ export const RightControls = () => {
                 spacing="xs"
             >
                 <DropdownMenu
+                    withArrow
+                    arrowOffset={12}
+                    offset={0}
                     position="top-end"
                     width={425}
                 >
@@ -226,11 +237,20 @@ export const RightControls = () => {
                     <DropdownMenu.Dropdown>
                         <DropdownMenu.Item closeMenuOnClick={false}>
                             <Slider
-                                defaultValue={speed}
-                                max={2}
-                                min={0.25}
-                                step={0.05}
+                                label={formatPlaybackSpeedSliderLabel}
+                                marks={[
+                                    { label: '0.5', value: 0.5 },
+                                    { label: '0.75', value: 0.75 },
+                                    { label: '1', value: 1 },
+                                    { label: '1.25', value: 1.25 },
+                                    { label: '1.5', value: 1.5 },
+                                ]}
+                                max={1.5}
+                                min={0.5}
+                                step={0.01}
+                                value={speed}
                                 onChange={handleSpeed}
+                                onDoubleClick={() => handleSpeed(1)}
                             />
                         </DropdownMenu.Item>
                     </DropdownMenu.Dropdown>

From 42575521a4e01076fe8e1268df2ab44edfedda9c Mon Sep 17 00:00:00 2001
From: Markus <marksdestiny@hotmail.com>
Date: Mon, 8 Jan 2024 03:03:14 +0100
Subject: [PATCH 3/3] Improve playback speed slider style

---
 .../player/components/right-controls.tsx      | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index 724b3a04e..6ae0de9e0 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -235,24 +235,30 @@ export const RightControls = () => {
                         />
                     </DropdownMenu.Target>
                     <DropdownMenu.Dropdown>
-                        <DropdownMenu.Item closeMenuOnClick={false}>
-                            <Slider
-                                label={formatPlaybackSpeedSliderLabel}
-                                marks={[
-                                    { label: '0.5', value: 0.5 },
-                                    { label: '0.75', value: 0.75 },
-                                    { label: '1', value: 1 },
-                                    { label: '1.25', value: 1.25 },
-                                    { label: '1.5', value: 1.5 },
-                                ]}
-                                max={1.5}
-                                min={0.5}
-                                step={0.01}
-                                value={speed}
-                                onChange={handleSpeed}
-                                onDoubleClick={() => handleSpeed(1)}
-                            />
-                        </DropdownMenu.Item>
+                        <Slider
+                            label={formatPlaybackSpeedSliderLabel}
+                            marks={[
+                                { label: '0.5', value: 0.5 },
+                                { label: '0.75', value: 0.75 },
+                                { label: '1', value: 1 },
+                                { 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