administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-15 07:35:27 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add play pause via mouse click

Browse Source
This commit is contained in:
Nicolas Mowen 2024-09-26 07:48:31 -06:00
parent ed1ad26c29
commit 7beded9731
1 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,6 +123,23 @@ export default function HlsVideoPlayer({
videoRef.current.playbackRate = currentPlaybackRate;
}, [videoRef, hlsRef, useHlsCompat, currentSource]);
// state handling
const onPlayPause = useCallback(
(play: boolean) => {
if (!videoRef.current) {
return;
}
if (play) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
},
[videoRef],
);
// controls
const [tallCamera, setTallCamera] = useState(false);
@ -191,17 +208,7 @@ export default function HlsVideoPlayer({
setMuted={(muted) => setMuted(muted, true)}
playbackRate={playbackRate ?? 1}
hotKeys={hotKeys}
onPlayPause={(play) => {
if (!videoRef.current) {
return;
}
if (play) {
videoRef.current.play();
} else {
videoRef.current.pause();
}
}}
onPlayPause={onPlayPause}
onSeek={(diff) => {
const currentTime = videoRef.current?.currentTime;
@ -254,12 +261,13 @@ export default function HlsVideoPlayer({
>
<video
ref={videoRef}
className={`size-full rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
className={`size-full rounded-lg bg-black md:rounded-2xl ${loadedMetadata ? "" : "invisible"} cursor-pointer`}
preload="auto"
autoPlay
controls={!frigateControls}
playsInline
muted={muted}
onClick={() => onPlayPause(!isPlaying)}
onVolumeChange={() =>
setVolume(videoRef.current?.volume ?? 1.0, true)
}