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

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

@ -172,26 +172,23 @@ 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 <DynamicVideoPlayer
camera={cam} className="w-[85%]"
camera={mainCamera}
timeRange={currentTimeRange} timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []} cameraPreviews={allPreviews ?? []}
startTime={playbackStart} startTime={playbackStart}
onControllerReady={(controller) => { onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller; videoPlayersRef.current[mainCamera] = controller;
controller.onPlayerTimeUpdate((timestamp: number) => { controller.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp); setCurrentTime(timestamp);
allCameras.forEach((otherCam) => { allCameras.forEach((otherCam) => {
if (cam != otherCam) { if (mainCamera != otherCam) {
videoPlayersRef.current[otherCam]?.scrubToTimestamp( videoPlayersRef.current[otherCam]?.scrubToTimestamp(
Math.floor(timestamp), Math.floor(timestamp),
); );
@ -201,11 +198,14 @@ export function DesktopRecordingView({
}} }}
/> />
</div> </div>
); <div className="flex justify-end gap-2 overflow-x-auto">
} {allCameras.map((cam) => {
if (cam !== mainCamera) {
return ( return (
<div key={cam} className="aspect-video flex items-center"> <div
key={cam}
className="aspect-video flex items-center we-[300px]"
>
<DynamicVideoPlayer <DynamicVideoPlayer
className="size-full" className="size-full"
camera={cam} camera={cam}
@ -220,10 +220,14 @@ export function DesktopRecordingView({
/> />
</div> </div>
); );
}
return null;
})} })}
</div> </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}
@ -256,6 +260,7 @@ export function DesktopRecordingView({
)} )}
</div> </div>
</div> </div>
</div>
); );
} }