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 hover logic

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-07 06:23:13 -07:00
parent c7239cefb3
commit 5dbdabeaee
1 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@ -47,14 +47,11 @@ export default function PreviewThumbnailPlayer({
}: PreviewPlayerProps) { }: PreviewPlayerProps) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
const [playback, setPlayback] = useState(false);
const [ignoreClick, setIgnoreClick] = useState(false);
const [imgRef, imgLoaded, onImgLoad] = useImageLoaded(); const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
// interaction // interaction
const [ignoreClick, setIgnoreClick] = useState(false);
const handleOnClick = useCallback( const handleOnClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => { (e: React.MouseEvent<HTMLDivElement>) => {
if (!ignoreClick) { if (!ignoreClick) {
@ -120,38 +117,39 @@ export default function PreviewThumbnailPlayer({
} }
}, [allPreviews, review]); }, [allPreviews, review]);
// Hover Playback
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
const [playback, setPlayback] = useState(false);
const playingBack = useMemo(() => playback, [playback]); const playingBack = useMemo(() => playback, [playback]);
const [isHovered, setIsHovered] = useState(false);
const onPlayback = useCallback( useEffect(() => {
(isHovered: boolean) => { if (isHovered && scrollLock) {
if (isHovered && scrollLock) { return;
return; }
if (isHovered) {
setHoverTimeout(
setTimeout(() => {
setPlayback(true);
setHoverTimeout(null);
}, 500),
);
} else {
if (hoverTimeout) {
clearTimeout(hoverTimeout);
} }
if (isHovered) { setPlayback(false);
setHoverTimeout(
setTimeout(() => {
setPlayback(true);
setHoverTimeout(null);
}, 500),
);
} else {
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
setPlayback(false); if (onTimeUpdate) {
onTimeUpdate(undefined);
if (onTimeUpdate) {
onTimeUpdate(undefined);
}
} }
}, }
// we know that these deps are correct // we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
[hoverTimeout, scrollLock, review], }, [isHovered, scrollLock]);
);
// date // date
@ -163,8 +161,8 @@ export default function PreviewThumbnailPlayer({
return ( return (
<div <div
className="relative size-full cursor-pointer" className="relative size-full cursor-pointer"
onMouseEnter={isMobile ? undefined : () => onPlayback(true)} onMouseEnter={isMobile ? undefined : () => setIsHovered(true)}
onMouseLeave={isMobile ? undefined : () => onPlayback(false)} onMouseLeave={isMobile ? undefined : () => setIsHovered(false)}
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
onClick(review.id, true); onClick(review.id, true);