administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fix touch controls for mobile

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-12 11:06:11 -06:00
parent 7550ad627c
commit a14198be7e
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/player/DynamicVideoPlayer.tsx
View File

@ -152,6 +152,19 @@ export default function DynamicVideoPlayer({
onKeyboardShortcut,
);
// mobile tap controls
useEffect(() => {
if (isDesktop || !playerRef) {
return;
}
const callback = () => setControls(!controls);
playerRef.on("touchstart", callback);
return () => playerRef.off("touchstart", callback);
}, [controls, playerRef]);
// initial state
const initialPlaybackSource = useMemo(() => {
@ -238,14 +251,6 @@ export default function DynamicVideoPlayer({
}
: undefined
}
onClick={
isMobile
? (e) => {
e.stopPropagation();
setControls(!controls);
}
: undefined
}
>
<div className={`w-full relative ${isScrubbing ? "hidden" : "visible"}`}>
<VideoPlayer
@ -255,9 +260,8 @@ export default function DynamicVideoPlayer({
sources: [initialPlaybackSource],
aspectRatio: wideVideo ? undefined : "16:9",
controls: false,
nativeControlsForTouch: true,
nativeControlsForTouch: false,
}}
seekOptions={{ forward: 10, backward: 5 }}
onReady={(player) => {
setPlayerRef(player);
}}