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

simplify and fix layout system for timeline

Browse Source
This commit is contained in:
Nicolas Mowen 2024-01-30 10:08:23 -07:00
parent 54b0462f07
commit 8f3457aa66
2 changed files with 89 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/History.tsx
View File

@ -268,7 +268,7 @@ function TimelineViewer({
return ( return (
<Dialog open={playback != undefined} onOpenChange={(_) => onClose()}> <Dialog open={playback != undefined} onOpenChange={(_) => onClose()}>
<DialogContent className="w-[70%] max-w-[1920px]"> <DialogContent className="w-[70%] max-w-[1920px] h-[90%]">
{timelineData && playback && ( {timelineData && playback && (
<DesktopTimelineView <DesktopTimelineView
timelineData={timelineData} timelineData={timelineData}

8
web/src/views/history/DesktopTimelineView.tsx
View File

@ -108,8 +108,8 @@ export default function DesktopTimelineView({
} }
return ( return (
<div className="w-full xl:h-[586px] 2xl:h-[660px] 3xl:h-[880px] 4xl:h-[1080px]"> <div className="w-full flex flex-col">
<div className="flex h-[60%]"> <div className="flex max-h-[60%]">
<DynamicVideoPlayer <DynamicVideoPlayer
className="w-2/3 bg-black flex justify-center items-center" className="w-2/3 bg-black flex justify-center items-center"
camera={initialPlayback.camera} camera={initialPlayback.camera}
@ -144,7 +144,8 @@ export default function DesktopTimelineView({
})} })}
</div> </div>
</div> </div>
<div className="mt-4 w-full h-[40%] overflow-scroll"> <div className="mt-4 w-full h-full relative">
<div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto">
{timelineStack.playbackItems.map((timeline) => { {timelineStack.playbackItems.map((timeline) => {
const isInitiallySelected = const isInitiallySelected =
initialPlayback.range.start == timeline.range.start; initialPlayback.range.start == timeline.range.start;
@ -235,5 +236,6 @@ export default function DesktopTimelineView({
})} })}
</div> </div>
</div> </div>
</div>
); );
} }