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

Be smarter about paging empty

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-22 06:58:27 -07:00
parent 230c8ffae9
commit 64a1ebaa0f
2 changed files with 71 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
web/src/views/events/DesktopEventView.tsx
View File

@ -116,15 +116,15 @@ export default function DesktopEventView() {
[reviewPages] [reviewPages]
); );
useEffect(() => { const currentItems = useMemo(() => {
if (!reviewItems || !reviewItems.all) { const current = reviewItems[severity];
return
if (!current || current.length == 0) {
return null;
} }
if (reviewItems.all.length > 0 && reviewItems[severity].length == 0) { return current;
setSize(size + 1) }, [reviewItems, severity]);
}
}, [reviewItems, severity])
// review interaction // review interaction
@ -311,32 +311,36 @@ export default function DesktopEventView() {
ref={contentRef} ref={contentRef}
className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar" className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
> >
{reviewItems[severity]?.map((value, segIdx) => { {currentItems ? (
const lastRow = segIdx == reviewItems[severity].length - 1; currentItems.map((value, segIdx) => {
const relevantPreview = Object.values(allPreviews || []).find( const lastRow = segIdx == reviewItems[severity].length - 1;
(preview) => const relevantPreview = Object.values(allPreviews || []).find(
preview.camera == value.camera && (preview) =>
preview.start < value.start_time && preview.camera == value.camera &&
preview.end > value.end_time preview.start < value.start_time &&
); preview.end > value.end_time
);
return ( return (
<div <div
key={value.id} key={value.id}
ref={lastRow ? lastReviewRef : minimapRef} ref={lastRow ? lastReviewRef : minimapRef}
data-start={value.start_time} data-start={value.start_time}
> >
<div className="h-[234px] aspect-video rounded-lg overflow-hidden"> <div className="h-[234px] aspect-video rounded-lg overflow-hidden">
<PreviewThumbnailPlayer <PreviewThumbnailPlayer
review={value} review={value}
relevantPreview={relevantPreview} relevantPreview={relevantPreview}
setReviewed={() => setReviewed(value.id)} setReviewed={() => setReviewed(value.id)}
/> />
</div>
{lastRow && !isDone && <ActivityIndicator />}
</div> </div>
{lastRow && !isDone && <ActivityIndicator />} );
</div> })
); ) : (
})} <div ref={lastReviewRef} />
)}
</div> </div>
<div className="absolute top-12 right-0 bottom-0"> <div className="absolute top-12 right-0 bottom-0">
{after != 0 && ( {after != 0 && (

68
web/src/views/events/MobileEventView.tsx
View File

@ -106,15 +106,15 @@ export default function MobileEventView() {
[reviewPages] [reviewPages]
); );
useEffect(() => { const currentItems = useMemo(() => {
if (!reviewItems || !reviewItems.all) { const current = reviewItems[severity];
return
if (!current || current.length == 0) {
return null;
} }
if (reviewItems.all.length > 0 && reviewItems[severity].length == 0) { return current;
setSize(size + 1) }, [reviewItems, severity]);
}
}, [reviewItems, severity, size])
// review interaction // review interaction
@ -288,33 +288,37 @@ export default function MobileEventView() {
ref={contentRef} ref={contentRef}
className="w-full h-full grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto" className="w-full h-full grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto"
> >
{reviewItems[severity]?.map((value, segIdx) => { {currentItems ? (
const lastRow = segIdx == reviewItems[severity].length - 1; currentItems.map((value, segIdx) => {
const relevantPreview = Object.values(allPreviews || []).find( const lastRow = segIdx == reviewItems[severity].length - 1;
(preview) => const relevantPreview = Object.values(allPreviews || []).find(
preview.camera == value.camera && (preview) =>
preview.start < value.start_time && preview.camera == value.camera &&
preview.end > value.end_time preview.start < value.start_time &&
); preview.end > value.end_time
);
return ( return (
<div <div
key={value.id} key={value.id}
ref={lastRow ? lastReviewRef : minimapRef} ref={lastRow ? lastReviewRef : minimapRef}
data-start={value.start_time} data-start={value.start_time}
> >
<div className="w-full aspect-video rounded-lg overflow-hidden"> <div className="w-full aspect-video rounded-lg overflow-hidden">
<PreviewThumbnailPlayer <PreviewThumbnailPlayer
review={value} review={value}
relevantPreview={relevantPreview} relevantPreview={relevantPreview}
autoPlayback={minimapBounds.end == value.start_time} autoPlayback={minimapBounds.end == value.start_time}
setReviewed={() => setReviewed(value.id)} setReviewed={() => setReviewed(value.id)}
/> />
</div>
{lastRow && !isDone && <ActivityIndicator />}
</div> </div>
{lastRow && !isDone && <ActivityIndicator />} );
</div> })
); ) : (
})} <div ref={lastReviewRef} />
)}
</div> </div>
</> </>
); );