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

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

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