Support changing playback rate (#275)

* initial idea for playback rate

* Add transparency to dropdown

* Move playback speed component to right controls

* Set mpv speed on startup

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Kendall Garner 2023-10-23 00:47:44 +00:00 committed by GitHub
parent 742b13d65e
commit 2664a80851
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 85 additions and 12 deletions

View file

@ -1,6 +1,12 @@
import { useCallback, useEffect, WheelEvent } from 'react';
import isElectron from 'is-electron';
import { useMuted, usePlayerControls, useVolume } from '/@/renderer/store';
import {
useMuted,
usePlayerControls,
useSetCurrentSpeed,
useSpeed,
useVolume,
} from '/@/renderer/store';
import { useGeneralSettings } from '/@/renderer/store/settings.store';
const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
@ -37,6 +43,8 @@ export const useRightControls = () => {
const volume = useVolume();
const muted = useMuted();
const { volumeWheelStep } = useGeneralSettings();
const speed = useSpeed();
const setCurrentSpeed = useSetCurrentSpeed();
// Ensure that the mpv player volume is set on startup
useEffect(() => {
@ -44,6 +52,7 @@ export const useRightControls = () => {
if (mpvPlayer) {
mpvPlayer.volume(volume);
mpvPlayer.setProperties({ speed });
if (muted) {
mpvPlayer.mute(muted);
@ -53,6 +62,16 @@ export const useRightControls = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleSpeed = useCallback(
(e: number) => {
setCurrentSpeed(e);
if (mpvPlayer) {
mpvPlayer?.setProperties({ speed: e });
}
},
[setCurrentSpeed],
);
const handleVolumeSlider = (e: number) => {
mpvPlayer?.volume(e);
remote?.updateVolume(e);
@ -123,6 +142,7 @@ export const useRightControls = () => {
return {
handleMute,
handleSpeed,
handleVolumeDown,
handleVolumeSlider,
handleVolumeSliderState,