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

Fix control hovering

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-14 09:19:50 -06:00
parent 14f268e62f
commit 9f099131ff
1 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,6 +81,35 @@ export default function HlsVideoPlayer({
const [controls, setControls] = useState(isMobile);
const [controlsOpen, setControlsOpen] = useState(false);
useEffect(() => {
if (!isDesktop) {
return;
}
const callback = (e: MouseEvent) => {
if (!videoRef.current) {
return;
}
const rect = videoRef.current.getBoundingClientRect();
if (
e.clientX > rect.left &&
e.clientX < rect.right &&
e.clientY > rect.top &&
e.clientY < rect.bottom
) {
setControls(true);
} else {
setControls(controlsOpen);
}
};
window.addEventListener("mousemove", callback);
return () => {
window.removeEventListener("mousemove", callback);
};
}, [videoRef, controlsOpen]);
return (
<TransformWrapper minScale={1.0}>
<VideoControls
@ -126,26 +155,6 @@ export default function HlsVideoPlayer({
height: "100%",
}}
wrapperProps={{
onMouseMove: isDesktop
? (e) => {
if (!videoRef.current) {
return;
}
const rect = videoRef.current.getBoundingClientRect();
if (
e.clientX > rect.left &&
e.clientX < rect.right &&
e.clientY > rect.top &&
e.clientY < rect.bottom
) {
setControls(true);
} else {
setControls(controlsOpen);
}
}
: undefined,
onClick: isDesktop ? undefined : () => setControls(!controls),
}}
contentStyle={{