administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 12:15:25 +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 [visible, setVisible] = useState(false);
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
const [hover, setHover] = useState(false);
const [progress, setProgress] = useState(0);
@ -49,8 +50,17 @@ export default function PreviewThumbnailPlayer({
}
if (isHovered) {
setHover(true);
setHoverTimeout(
setTimeout(() => {
setHover(true);
setHoverTimeout(null);
}, 500)
);
} else {
if (hoverTimeout) {
clearTimeout(hoverTimeout);
}
setHover(false);
setProgress(0);
@ -62,7 +72,7 @@ export default function PreviewThumbnailPlayer({
}
}
},
[relevantPreview, review, playerRef]
[hoverTimeout, relevantPreview, review, playerRef]
);
const autoPlayObserver = useRef<IntersectionObserver | null>();
@ -234,7 +244,7 @@ function PreviewContent({
controls: false,
muted: true,
fluid: true,
aspectRatio: '16:9',
aspectRatio: "16:9",
loadingSpinner: false,
sources: relevantPreview
? [
@ -253,7 +263,11 @@ function PreviewContent({
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.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 useSWRInfinite from "swr/infinite";
const API_LIMIT = 100;
const API_LIMIT = 250;
export default function Events() {
const { data: config } = useSWR<FrigateConfig>("config");
@ -245,7 +245,7 @@ export default function Events() {
value="alert"
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
</ToggleGroupItem>
<ToggleGroupItem
@ -255,7 +255,7 @@ export default function Events() {
value="detection"
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
</ToggleGroupItem>
<ToggleGroupItem
@ -265,7 +265,7 @@ export default function Events() {
value="significant_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
</ToggleGroupItem>
</ToggleGroup>
@ -314,7 +314,7 @@ export default function Events() {
);
})}
</div>
<div className="absolute top-0 right-0 bottom-0">
<div className="absolute top-12 right-0 bottom-0">
<EventReviewTimeline
segmentDuration={60} // seconds per segment
timestampSpread={15} // minutes between each major timestamp