administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Further improve loading

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-11 18:19:59 -06:00
parent 13cac082d5
commit 111bffb3c8
1 changed files with 50 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -290,7 +290,7 @@ export default function EventView({
reviewItems={reviewItems} reviewItems={reviewItems}
relevantPreviews={relevantPreviews} relevantPreviews={relevantPreviews}
selectedReviews={selectedReviews} selectedReviews={selectedReviews}
itemsToReview={reviewCounts[severity]} itemsToReview={reviewCounts[severityToggle]}
severity={severity} severity={severity}
filter={filter} filter={filter}
timeRange={timeRange} timeRange={timeRange}
@ -533,7 +533,7 @@ function DetectionReview({
className="absolute left-1/2 -translate-x-1/2 z-50 pointer-events-none" className="absolute left-1/2 -translate-x-1/2 z-50 pointer-events-none"
contentRef={contentRef} contentRef={contentRef}
reviewItems={currentItems} reviewItems={currentItems}
itemsToReview={itemsToReview} itemsToReview={loading ? 0 : itemsToReview}
pullLatestData={pullLatestData} pullLatestData={pullLatestData}
/> />
)} )}
@ -544,7 +544,7 @@ function DetectionReview({
</div> </div>
)} )}
{currentItems?.length === 0 && ( {!loading && currentItems?.length === 0 && (
<div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex flex-col justify-center items-center text-center"> <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex flex-col justify-center items-center text-center">
<LuFolderCheck className="size-16" /> <LuFolderCheck className="size-16" />
There are no {severity.replace(/_/g, " ")}s to review There are no {severity.replace(/_/g, " ")}s to review
@ -555,50 +555,56 @@ function DetectionReview({
className="w-full mx-2 px-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4" className="w-full mx-2 px-1 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
ref={contentRef} ref={contentRef}
> >
{currentItems && {!loading && currentItems
currentItems.map((value) => { ? currentItems.map((value) => {
const selected = selectedReviews.includes(value.id); const selected = selectedReviews.includes(value.id);
return ( return (
<div <div
key={value.id} key={value.id}
ref={minimapRef} ref={minimapRef}
data-start={value.start_time} data-start={value.start_time}
data-segment-start={ data-segment-start={
alignStartDateToTimeline(value.start_time) - segmentDuration alignStartDateToTimeline(value.start_time) -
} segmentDuration
className="review-item relative rounded-lg" }
> className="review-item relative rounded-lg"
<div className="aspect-video rounded-lg overflow-hidden"> >
<PreviewThumbnailPlayer <div className="aspect-video rounded-lg overflow-hidden">
review={value} <PreviewThumbnailPlayer
allPreviews={relevantPreviews} review={value}
timeRange={timeRange} allPreviews={relevantPreviews}
setReviewed={markItemAsReviewed} timeRange={timeRange}
scrollLock={scrollLock} setReviewed={markItemAsReviewed}
onTimeUpdate={onPreviewTimeUpdate} scrollLock={scrollLock}
onClick={onSelectReview} onTimeUpdate={onPreviewTimeUpdate}
onClick={onSelectReview}
/>
</div>
<div
className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${selected ? `outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-transparent duration-500"}`}
/> />
</div> </div>
<div );
className={`review-item-ring pointer-events-none z-10 absolute rounded-lg inset-0 size-full -outline-offset-[2.8px] outline outline-[3px] ${selected ? `outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-transparent duration-500"}`} })
/> : Array(itemsToReview)
</div> .fill(0)
); .map(() => <Skeleton className="size-full aspect-video" />)}
})} {!loading &&
{(currentItems?.length ?? 0) > 0 && (itemsToReview ?? 0) > 0 && ( (currentItems?.length ?? 0) > 0 &&
<div className="col-span-full flex justify-center items-center"> (itemsToReview ?? 0) > 0 && (
<Button <div className="col-span-full flex justify-center items-center">
className="text-white" <Button
variant="select" className="text-white"
onClick={() => { variant="select"
markAllItemsAsReviewed(currentItems ?? []); onClick={() => {
}} markAllItemsAsReviewed(currentItems ?? []);
> }}
Mark these items as reviewed >
</Button> Mark these items as reviewed
</div> </Button>
)} </div>
)}
</div> </div>
</div> </div>
<div className="w-[65px] md:w-[110px] flex flex-row"> <div className="w-[65px] md:w-[110px] flex flex-row">