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

reduce preview calculations on rerenders

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-29 12:36:05 -07:00
parent feb4a6fb32
commit 540a33fcdc
2 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,7 @@ import { useSwipeable } from "react-swipeable";
type PreviewPlayerProps = { type PreviewPlayerProps = {
review: ReviewSegment; review: ReviewSegment;
relevantPreview?: Preview; allPreviews?: Preview[];
autoPlayback?: boolean; autoPlayback?: boolean;
setReviewed?: (reviewId: string) => void; setReviewed?: (reviewId: string) => void;
onTimeUpdate?: (time: number | undefined) => void; onTimeUpdate?: (time: number | undefined) => void;
@ -49,7 +49,7 @@ type Preview = {
export default function PreviewThumbnailPlayer({ export default function PreviewThumbnailPlayer({
review, review,
relevantPreview, allPreviews,
setReviewed, setReviewed,
onClick, onClick,
onTimeUpdate, onTimeUpdate,
@ -87,6 +87,17 @@ export default function PreviewThumbnailPlayer({
// playback // playback
const relevantPreview = useMemo(
() =>
Object.values(allPreviews || []).find(
(preview) =>
preview.camera == review.camera &&
preview.start < review.start_time &&
preview.end > review.end_time,
),
[allPreviews],
);
const playingBack = useMemo(() => playback, [playback]); const playingBack = useMemo(() => playback, [playback]);
const onPlayback = useCallback( const onPlayback = useCallback(

10
web/src/views/events/EventView.tsx
View File

@ -305,14 +305,6 @@ export default function EventView({
currentItems.map((value, segIdx) => { currentItems.map((value, segIdx) => {
const lastRow = segIdx == reviewItems[severity].length - 1; const lastRow = segIdx == reviewItems[severity].length - 1;
const selected = selectedReviews.includes(value.id); const selected = selectedReviews.includes(value.id);
const relevantPreview = Object.values(
relevantPreviews || [],
).find(
(preview) =>
preview.camera == value.camera &&
preview.start < value.start_time &&
preview.end > value.end_time,
);
return ( return (
<div <div
@ -328,7 +320,7 @@ export default function EventView({
<div className="aspect-video rounded-lg overflow-hidden"> <div className="aspect-video rounded-lg overflow-hidden">
<PreviewThumbnailPlayer <PreviewThumbnailPlayer
review={value} review={value}
relevantPreview={relevantPreview} allPreviews={relevantPreviews}
setReviewed={markItemAsReviewed} setReviewed={markItemAsReviewed}
onTimeUpdate={setPreviewTime} onTimeUpdate={setPreviewTime}
onClick={onSelectReview} onClick={onSelectReview}