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

Use timeout for hover playback

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-20 14:24:05 -07:00
parent 97a3cea308
commit 84366608d2
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,6 +39,7 @@ export default function PreviewThumbnailPlayer({
const playerRef = useRef<Player | null>(null); const playerRef = useRef<Player | null>(null);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
const [progress, setProgress] = useState(0); const [progress, setProgress] = useState(0);
@ -49,8 +50,17 @@ export default function PreviewThumbnailPlayer({
} }
if (isHovered) { if (isHovered) {
setHover(true); setHoverTimeout(
setTimeout(() => {
setHover(true);
setHoverTimeout(null);
}, 500)
);
} else { } else {
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
setHover(false); setHover(false);
setProgress(0); setProgress(0);
@ -62,7 +72,7 @@ export default function PreviewThumbnailPlayer({
} }
} }
}, },
[relevantPreview, review, playerRef] [hoverTimeout, relevantPreview, review, playerRef]
); );
const autoPlayObserver = useRef<IntersectionObserver | null>(); const autoPlayObserver = useRef<IntersectionObserver | null>();
@ -234,7 +244,7 @@ function PreviewContent({
controls: false, controls: false,
muted: true, muted: true,
fluid: true, fluid: true,
aspectRatio: '16:9', aspectRatio: "16:9",
loadingSpinner: false, loadingSpinner: false,
sources: relevantPreview sources: relevantPreview
? [ ? [
@ -253,7 +263,11 @@ function PreviewContent({
return; return;
} }
const playerStartTime = review.start_time - relevantPreview.start; // start with a bit of padding
const playerStartTime = Math.max(
0,
review.start_time - relevantPreview.start - 8
);
player.playbackRate(slowPlayack ? 2 : 8); player.playbackRate(slowPlayack ? 2 : 8);
player.currentTime(playerStartTime); player.currentTime(playerStartTime);

10
web/src/pages/Events.tsx
View File

@ -19,7 +19,7 @@ import { MdCircle } from "react-icons/md";
import useSWR from "swr"; import useSWR from "swr";
import useSWRInfinite from "swr/infinite"; import useSWRInfinite from "swr/infinite";
const API_LIMIT = 100; const API_LIMIT = 250;
export default function Events() { export default function Events() {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
@ -245,7 +245,7 @@ export default function Events() {
value="alert" value="alert"
aria-label="Select alerts" aria-label="Select alerts"
> >
<MdCircle className="w-2 h-2 mr-[10px] text-danger" /> <MdCircle className="w-2 h-2 mr-[10px] text-severity_alert" />
Alerts Alerts
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem
@ -255,7 +255,7 @@ export default function Events() {
value="detection" value="detection"
aria-label="Select detections" aria-label="Select detections"
> >
<MdCircle className="w-2 h-2 mr-[10px] text-orange-400" /> <MdCircle className="w-2 h-2 mr-[10px] text-severity_detection" />
Detections Detections
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem
@ -265,7 +265,7 @@ export default function Events() {
value="significant_motion" value="significant_motion"
aria-label="Select motion" aria-label="Select motion"
> >
<MdCircle className="w-2 h-2 mr-[10px] text-yellow-400" /> <MdCircle className="w-2 h-2 mr-[10px] text-severity_motion" />
Motion Motion
</ToggleGroupItem> </ToggleGroupItem>
</ToggleGroup> </ToggleGroup>
@ -314,7 +314,7 @@ export default function Events() {
); );
})} })}
</div> </div>
<div className="absolute top-0 right-0 bottom-0"> <div className="absolute top-12 right-0 bottom-0">
<EventReviewTimeline <EventReviewTimeline
segmentDuration={60} // seconds per segment segmentDuration={60} // seconds per segment
timestampSpread={15} // minutes between each major timestamp timestampSpread={15} // minutes between each major timestamp