Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Move keyboard controls to video controls (#10617)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-22 21:11:50 -06:00 committed by GitHub
parent 4cf19458fe
commit 8e1d18d06b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -1,14 +1,12 @@
import { import {
MutableRefObject, MutableRefObject,
ReactNode, ReactNode,
useCallback,
useEffect, useEffect,
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import Hls from "hls.js"; import Hls from "hls.js";
import { isDesktop, isMobile } from "react-device-detect"; import { isDesktop, isMobile } from "react-device-detect";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch"; import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
import VideoControls from "./VideoControls"; import VideoControls from "./VideoControls";
@ -87,56 +85,6 @@ export default function HlsVideoPlayer({
const [controls, setControls] = useState(isMobile); const [controls, setControls] = useState(isMobile);
const [controlsOpen, setControlsOpen] = useState(false); const [controlsOpen, setControlsOpen] = useState(false);
const onKeyboardShortcut = useCallback(
(key: string, down: boolean, repeat: boolean) => {
if (!videoRef.current) {
return;
}
switch (key) {
case "ArrowLeft":
if (down) {
const currentTime = videoRef.current.currentTime;
if (currentTime) {
videoRef.current.currentTime = Math.max(0, currentTime - 5);
}
}
break;
case "ArrowRight":
if (down) {
const currentTime = videoRef.current.currentTime;
if (currentTime) {
videoRef.current.currentTime = currentTime + 5;
}
}
break;
case "m":
if (down && !repeat && videoRef.current) {
videoRef.current.muted = !videoRef.current.muted;
}
break;
case " ":
if (down && videoRef.current) {
if (videoRef.current.paused) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}
break;
}
},
// only update when preview only changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[videoRef.current],
);
useKeyboardListener(
["ArrowLeft", "ArrowRight", "m", " "],
onKeyboardShortcut,
);
return ( return (
<div <div
className={`relative ${visible ? "visible" : "hidden"}`} className={`relative ${visible ? "visible" : "hidden"}`}

35
web/src/components/player/VideoControls.tsx
View File

@ -17,6 +17,7 @@ import {
MdVolumeUp, MdVolumeUp,
} from "react-icons/md"; } from "react-icons/md";
import { Slider } from "../ui/slider-volume"; import { Slider } from "../ui/slider-volume";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
type VideoControls = { type VideoControls = {
volume?: boolean; volume?: boolean;
@ -100,6 +101,40 @@ export default function VideoControls({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [video?.volume, video?.muted]); }, [video?.volume, video?.muted]);
const onKeyboardShortcut = useCallback(
(key: string, down: boolean, repeat: boolean) => {
switch (key) {
case "ArrowLeft":
if (down) {
onSeek(-10);
}
break;
case "ArrowRight":
if (down) {
onSeek(10);
}
break;
case "m":
if (down && !repeat && video) {
video.muted = !video.muted;
}
break;
case " ":
if (down) {
onPlayPause(!isPlaying);
}
break;
}
},
// only update when preview only changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[video, isPlaying, onSeek],
);
useKeyboardListener(
["ArrowLeft", "ArrowRight", "m", " "],
onKeyboardShortcut,
);
if (!show) { if (!show) {
return; return;
} }