chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

UI fixes (#9986)

Browse Source 
* scroll minimap to keep it in view

* remove console log

* change ref

* rebase to dev

* rebase to dev

* rebase to dev

* fix history flexbox and live extra scrollbar

* remove extra class
This commit is contained in:
Josh Hawkins
2024-02-22 21:15:50 -06:00
committed by GitHub
parent f84d2db406
commit a6aa5328aa
5 changed files with 204 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -195,8 +195,8 @@ export default function DesktopEventView({
}
return (
<div className="relative w-full h-full">
<div className="absolute flex justify-between left-0 top-0 right-0">
<div className="flex flex-col w-full h-full">
<div className="flex justify-between mb-2">
<ToggleGroup
type="single"
defaultValue="alert"
@@ -261,55 +261,59 @@ export default function DesktopEventView({
</Button>
)}
<div
ref={contentRef}
className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
>
{currentItems ? (
currentItems.map((value, segIdx) => {
const lastRow = segIdx == reviewItems[severity].length - 1;
const relevantPreview = Object.values(relevantPreviews || []).find(
(preview) =>
preview.camera == value.camera &&
preview.start < value.start_time &&
preview.end > value.end_time
);
<div className="flex h-full overflow-hidden">
<div
ref={contentRef}
className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
>
{currentItems ? (
currentItems.map((value, segIdx) => {
const lastRow = segIdx == reviewItems[severity].length - 1;
const relevantPreview = Object.values(
relevantPreviews || []
).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={() => markItemAsReviewed(value.id)}
onClick={() => onSelectReview(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={() => markItemAsReviewed(value.id)}
onClick={() => onSelectReview(value.id)}
/>
</div>
{lastRow && !reachedEnd && <ActivityIndicator />}
</div>
{lastRow && !reachedEnd && <ActivityIndicator />}
</div>
);
})
) : (
<div ref={lastReviewRef} />
)}
</div>
<div className="absolute top-12 right-0 bottom-0">
<EventReviewTimeline
segmentDuration={60}
timestampSpread={15}
timelineStart={timeRange.before}
timelineEnd={timeRange.after}
showMinimap
minimapStartTime={minimapBounds.start}
minimapEndTime={minimapBounds.end}
events={reviewItems.all}
severityType={severity}
contentRef={contentRef}
/>
);
})
) : (
<div ref={lastReviewRef} />
)}
</div>
<div className="md:w-[100px] overflow-y-auto no-scrollbar">
<EventReviewTimeline
segmentDuration={60}
timestampSpread={15}
timelineStart={timeRange.before}
timelineEnd={timeRange.after}
showMinimap
minimapStartTime={minimapBounds.start}
minimapEndTime={minimapBounds.end}
events={reviewItems.all}
severityType={severity}
contentRef={contentRef}
/>
</div>
</div>
</div>
);