Add volume wheel scroll & new slider component

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,
   };
 };