Update player/shared components

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

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { usePlayerStore } from '../../../store';
+import { mpvPlayer } from '../utils/mpvPlayer';
+
+export const useRightControls = () => {
+  const setSettings = usePlayerStore((state) => state.setSettings);
+  const volume = usePlayerStore((state) => state.settings.volume);
+  const muted = usePlayerStore((state) => state.settings.muted);
+
+  // Ensure that the mpv player volume is set on startup
+  useEffect(() => {
+    mpvPlayer.volume(volume);
+
+    if (muted) {
+      mpvPlayer.mute();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleVolumeSlider = (e: number) => {
+    mpvPlayer.volume(e);
+  };
+
+  const handleVolumeSliderState = (e: number) => {
+    setSettings({ volume: e });
+  };
+
+  const handleMute = () => {
+    setSettings({ muted: !muted });
+    mpvPlayer.mute();
+  };
+
+  return {
+    handleMute,
+    handleVolumeSlider,
+    handleVolumeSliderState,
+  };
+};