Add volume wheel scroll & new slider component

This commit is contained in:
jeffvli 2023-01-30 21:34:27 -08:00
parent 01fdd25406
commit 4cbc28a087
8 changed files with 178 additions and 103 deletions

View file

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