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

rebase to dev

Browse Source
This commit is contained in:
Josh Hawkins 2024-02-22 13:10:52 -06:00
parent 568148a451
commit 986a19cdd6
3 changed files with 153 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/hooks/use-handle-dragging.ts
View File

@ -1,4 +1,4 @@
import { useCallback } from "react"; import { useCallback, useEffect } from "react";
interface DragHandlerProps { interface DragHandlerProps {
contentRef: React.RefObject<HTMLElement>; contentRef: React.RefObject<HTMLElement>;
@ -128,6 +128,17 @@ function useDraggableHandler({
] ]
); );
useEffect(() => {
// TODO: determine when we want to do this
const handlebar = scrollTimeRef.current;
if (handlebar && showHandlebar) {
// handlebar.scrollIntoView({
// behavior: "smooth",
// block: "center",
// });
}
}, []);
return { handleMouseDown, handleMouseUp, handleMouseMove }; return { handleMouseDown, handleMouseUp, handleMouseMove };
} }

173
web/src/pages/UIPlayground.tsx
View File

@ -170,101 +170,104 @@ function UIPlayground() {
return ( return (
<> <>
<div className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"> <div className="w-full h-full">
<div className="relative w-full h-full mt-4 mr-5"> <div className="flex h-full">
<Heading as="h2">UI Playground</Heading> <div className="flex-1 content-start gap-2 overflow-y-auto no-scrollbar mt-4 mr-5">
<Heading as="h2">UI Playground</Heading>
<Heading as="h4" className="my-5">
Scrubber
</Heading>
<p className="text-small">
Shows the 10 most recent events within the last 4 hours
</p>
{!config && <ActivityIndicator />}
{config && (
<div>
{events && events.length > 0 && (
<>
<ActivityScrubber
items={eventsToScrubberItems(events)}
selectHandler={onSelect}
/>
</>
)}
</div>
)}
{config && (
<div>
{timeline && (
<>
<TimelineScrubber eventID={timeline} />
</>
)}
</div>
)}
<div ref={contentRef}>
<Heading as="h4" className="my-5"> <Heading as="h4" className="my-5">
Timeline Scrubber
</Heading>
<p className="text-small">Handlebar timestamp: {handlebarTime}</p>
<p>
<Button onClick={handleZoomOut} disabled={zoomLevel === 0}>
Zoom Out
</Button>
<Button
onClick={handleZoomIn}
disabled={zoomLevel === possibleZoomLevels.length - 1}
>
Zoom In
</Button>
</p>
<Heading as="h4" className="my-5">
Color scheme
</Heading> </Heading>
<p className="text-small"> <p className="text-small">
Colors as set by the current theme. See the{" "} Shows the 10 most recent events within the last 4 hours
<a
className="underline"
href="https://ui.shadcn.com/docs/theming"
>
shadcn theming docs
</a>{" "}
for usage.
</p> </p>
<div className="my-5"> {!config && <ActivityIndicator />}
{colors.map((color, index) => (
<ColorSwatch {config && (
key={index} <div>
name={color} {events && events.length > 0 && (
value={`hsl(var(--${color}))`} <>
/> <ActivityScrubber
))} items={eventsToScrubberItems(events)}
selectHandler={onSelect}
/>
</>
)}
</div>
)}
{config && (
<div>
{timeline && (
<>
<TimelineScrubber eventID={timeline} />
</>
)}
</div>
)}
<div ref={contentRef}>
<Heading as="h4" className="my-5">
Timeline
</Heading>
<p className="text-small">Handlebar timestamp: {handlebarTime}</p>
<p>
<Button onClick={handleZoomOut} disabled={zoomLevel === 0}>
Zoom Out
</Button>
<Button
onClick={handleZoomIn}
disabled={zoomLevel === possibleZoomLevels.length - 1}
>
Zoom In
</Button>
</p>
<Heading as="h4" className="my-5">
Color scheme
</Heading>
<p className="text-small">
Colors as set by the current theme. See the{" "}
<a
className="underline"
href="https://ui.shadcn.com/docs/theming"
>
shadcn theming docs
</a>{" "}
for usage.
</p>
<div className="my-5">
{colors.map((color, index) => (
<ColorSwatch
key={index}
name={color}
value={`hsl(var(--${color}))`}
/>
))}
</div>
</div> </div>
</div> </div>
<div className="w-[100px] overflow-y-auto no-scrollbar">
<EventReviewTimeline
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
showMinimap // show / hide the minimap
minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm)
minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
events={mockEvents} // events, including new has_been_reviewed and severity properties
severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
/>
</div>
</div> </div>
</div> </div>
<div className="absolute top-12 right-0 bottom-0">
<EventReviewTimeline
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
showMinimap // show / hide the minimap
minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm)
minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
events={mockEvents} // events, including new has_been_reviewed and severity properties
severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
/>
</div>
</> </>
); );
} }

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

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