Add volume wheel scroll & new slider component

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

@@ -13,6 +13,7 @@ import {
 } from '/@/renderer/store';
 import { usePlayerType, useSettingsStore } from '/@/renderer/store/settings.store';
 import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
+import debounce from 'lodash/debounce';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
@@ -439,19 +440,21 @@ export const useCenterControls = (args: { playersRef: any }) => {
     }
   };
 
+  const debouncedSeek = debounce((e: number) => {
+    if (isMpvPlayer) {
+      mpvPlayer.seekTo(e);
+    } else {
+      currentPlayerRef.seekTo(e);
+    }
+  }, 100);
+
   const handleSeekSlider = useCallback(
     (e: number | any) => {
       setCurrentTime(e);
-
       handleScrobbleFromSeek(e);
-
-      if (isMpvPlayer) {
-        mpvPlayer.seekTo(e);
-      } else {
-        currentPlayerRef.seekTo(e);
-      }
+      debouncedSeek(e);
     },
-    [currentPlayerRef, handleScrobbleFromSeek, isMpvPlayer, setCurrentTime],
+    [debouncedSeek, handleScrobbleFromSeek, setCurrentTime],
   );
 
   const handleQuit = useCallback(() => {

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

@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, WheelEvent } from 'react';
 import isElectron from 'is-electron';
 import { useMuted, usePlayerControls, useVolume } from '/@/renderer/store';
+import { useGeneralSettings } from '/@/renderer/store/settings.store';
 
 const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
 
@@ -8,6 +9,7 @@ export const useRightControls = () => {
   const { setVolume, setMuted } = usePlayerControls();
   const volume = useVolume();
   const muted = useMuted();
+  const { volumeWheelStep } = useGeneralSettings();
 
   // Ensure that the mpv player volume is set on startup
   useEffect(() => {
@@ -31,6 +33,18 @@ export const useRightControls = () => {
     setVolume(e);
   };
 
+  const handleVolumeWheel = (e: WheelEvent<HTMLDivElement>) => {
+    let newVolume;
+    if (e.deltaY > 0) {
+      newVolume = volume - volumeWheelStep;
+    } else {
+      newVolume = volume + volumeWheelStep;
+    }
+
+    mpvPlayer.volume(newVolume);
+    setVolume(newVolume);
+  };
+
   const handleMute = () => {
     setMuted(!muted);
     mpvPlayer.mute();
@@ -40,5 +54,6 @@ export const useRightControls = () => {
     handleMute,
     handleVolumeSlider,
     handleVolumeSliderState,
+    handleVolumeWheel,
   };
 };