Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-14 10:35:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve video progress/playback keybinds

Browse Source
This commit is contained in:
qtchaos 2023-12-28 21:43:52 +02:00
parent 8fa90689f6
commit 9f7432450b
No known key found for this signature in database
GPG Key ID: 7DA98B2B9EF06A90
1 changed files with 35 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/player/internals/KeyboardEvents.tsx
View File

@ -9,6 +9,8 @@ import { useEmpheralVolumeStore } from "@/stores/volume";
export function KeyboardEvents() { export function KeyboardEvents() {
const router = useOverlayRouter(""); const router = useOverlayRouter("");
const display = usePlayerStore((s) => s.display); const display = usePlayerStore((s) => s.display);
const mediaProgress = usePlayerStore((s) => s.progress);
const { isSeeking } = usePlayerStore((s) => s.interface);
const mediaPlaying = usePlayerStore((s) => s.mediaPlaying); const mediaPlaying = usePlayerStore((s) => s.mediaPlaying);
const time = usePlayerStore((s) => s.progress.time); const time = usePlayerStore((s) => s.progress.time);
const { setVolume, toggleMute } = useVolume(); const { setVolume, toggleMute } = useVolume();
@ -27,6 +29,8 @@ export function KeyboardEvents() {
toggleLastUsed, toggleLastUsed,
display, display,
mediaPlaying, mediaPlaying,
mediaProgress,
isSeeking,
isRolling, isRolling,
time, time,
router, router,
@ -40,6 +44,8 @@ export function KeyboardEvents() {
toggleLastUsed, toggleLastUsed,
display, display,
mediaPlaying, mediaPlaying,
mediaProgress,
isSeeking,
isRolling, isRolling,
time, time,
router, router,
@ -52,6 +58,8 @@ export function KeyboardEvents() {
toggleLastUsed, toggleLastUsed,
display, display,
mediaPlaying, mediaPlaying,
mediaProgress,
isSeeking,
isRolling, isRolling,
time, time,
router, router,
@ -83,11 +91,38 @@ export function KeyboardEvents() {
); );
if (k === "m") dataRef.current.toggleMute(); if (k === "m") dataRef.current.toggleMute();
// Video playback speed
if (k === ">" || k === "<") {
const playbackRates = [0.25, 0.5, 1, 1.5, 2];
const idx = playbackRates.indexOf(
dataRef.current.mediaPlaying?.playbackRate,
);
const nextIdx = idx + (k === ">" ? 1 : -1);
const next = playbackRates[nextIdx];
if (next) dataRef.current.display?.setPlaybackRate(next);
}
// Video progress // Video progress
if (k === "ArrowRight") if (k === "ArrowRight")
dataRef.current.display?.setTime(dataRef.current.time + 5); dataRef.current.display?.setTime(dataRef.current.time + 5);
if (k === "ArrowLeft") if (k === "ArrowLeft")
dataRef.current.display?.setTime(dataRef.current.time - 5); dataRef.current.display?.setTime(dataRef.current.time - 5);
if (k === "j")
dataRef.current.display?.setTime(dataRef.current.time - 10);
if (k === "l")
dataRef.current.display?.setTime(dataRef.current.time + 10);
if (k === "." && dataRef.current.mediaPlaying?.isPaused)
dataRef.current.display?.setTime(dataRef.current.time + 1);
if (k === "," && dataRef.current.mediaPlaying?.isPaused)
dataRef.current.display?.setTime(dataRef.current.time - 1);
if (/\d/.exec(k) && !dataRef.current.isSeeking) {
const num = parseInt(k, 10);
if (num === 0) dataRef.current.display?.setTime(0);
const percent = num / 10;
dataRef.current.display?.setTime(
dataRef.current.mediaProgress.duration * percent,
);
}
// Utils // Utils
if (k === "f") dataRef.current.display?.toggleFullscreen(); if (k === "f") dataRef.current.display?.toggleFullscreen();