Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

use flexbox for recordings view (#10385)

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-11 17:07:56 -05:00 committed by GitHub
parent 8d4b9bc7ed
commit fa22f01f39
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 79 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
web/src/views/events/RecordingView.tsx
View File

@ -172,88 +172,93 @@ export function DesktopRecordingView({
Back Back
</Button> </Button>
<div className="absolute h-32 left-2 right-28 bottom-4 flex justify-center gap-1"> <div className="flex h-full justify-center overflow-hidden">
{allCameras.map((cam) => { <div className="flex flex-1 flex-wrap">
if (cam == mainCamera) { <div className="flex flex-col h-full px-2 justify-end">
return ( <div key={mainCamera} className="flex justify-center mb-5">
<div
key={cam}
className="fixed left-96 right-96 top-[40%] -translate-y-[50%]"
>
<DynamicVideoPlayer
camera={cam}
timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []}
startTime={playbackStart}
onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller;
controller.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp);
allCameras.forEach((otherCam) => {
if (cam != otherCam) {
videoPlayersRef.current[otherCam]?.scrubToTimestamp(
Math.floor(timestamp),
);
}
});
});
}}
/>
</div>
);
}
return (
<div key={cam} className="aspect-video flex items-center">
<DynamicVideoPlayer <DynamicVideoPlayer
className="size-full" className="w-[85%]"
camera={cam} camera={mainCamera}
timeRange={currentTimeRange} timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []} cameraPreviews={allPreviews ?? []}
previewOnly startTime={playbackStart}
onControllerReady={(controller) => { onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller; videoPlayersRef.current[mainCamera] = controller;
controller.scrubToTimestamp(startTime, true); controller.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp);
allCameras.forEach((otherCam) => {
if (mainCamera != otherCam) {
videoPlayersRef.current[otherCam]?.scrubToTimestamp(
Math.floor(timestamp),
);
}
});
});
}} }}
onClick={() => onSelectCamera(cam)}
/> />
</div> </div>
); <div className="flex justify-end gap-2 overflow-x-auto">
})} {allCameras.map((cam) => {
</div> if (cam !== mainCamera) {
return (
<div
key={cam}
className="aspect-video flex items-center we-[300px]"
>
<DynamicVideoPlayer
className="size-full"
camera={cam}
timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []}
previewOnly
onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller;
controller.scrubToTimestamp(startTime, true);
}}
onClick={() => onSelectCamera(cam)}
/>
</div>
);
}
return null;
})}
</div>
</div>
</div>
<div className="absolute overflow-hidden w-56 inset-y-0 right-0"> <div className="w-[55px] md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
{severity != "significant_motion" ? ( {severity != "significant_motion" ? (
<EventReviewTimeline <EventReviewTimeline
segmentDuration={30} segmentDuration={30}
timestampSpread={15} timestampSpread={15}
timelineStart={timeRange.end} timelineStart={timeRange.end}
timelineEnd={timeRange.start} timelineEnd={timeRange.start}
showHandlebar showHandlebar
handlebarTime={currentTime} handlebarTime={currentTime}
setHandlebarTime={setCurrentTime} setHandlebarTime={setCurrentTime}
events={reviewItems} events={reviewItems}
severityType={severity} severityType={severity}
contentRef={contentRef} contentRef={contentRef}
onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)} onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
/> />
) : ( ) : (
<MotionReviewTimeline <MotionReviewTimeline
segmentDuration={30} segmentDuration={30}
timestampSpread={15} timestampSpread={15}
timelineStart={timeRange.end} timelineStart={timeRange.end}
timelineEnd={timeRange.start} timelineEnd={timeRange.start}
showHandlebar showHandlebar
handlebarTime={currentTime} handlebarTime={currentTime}
setHandlebarTime={setCurrentTime} setHandlebarTime={setCurrentTime}
events={reviewItems} events={reviewItems}
motion_events={motionData ?? []} motion_events={motionData ?? []}
severityType={severity} severityType={severity}
contentRef={contentRef} contentRef={contentRef}
onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)} onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
/> />
)} )}
</div>
</div> </div>
</div> </div>
); );