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}

174
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,95 +144,97 @@ 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">
{timelineStack.playbackItems.map((timeline) => { <div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto">
const isInitiallySelected = {timelineStack.playbackItems.map((timeline) => {
initialPlayback.range.start == timeline.range.start; const isInitiallySelected =
const isSelected = initialPlayback.range.start == timeline.range.start;
timeline.range.start == selectedPlayback.range.start; const isSelected =
const graphData = timelineGraphData[timeline.range.start]; timeline.range.start == selectedPlayback.range.start;
const graphData = timelineGraphData[timeline.range.start];
return ( return (
<div <div
ref={isInitiallySelected ? initialScrollRef : null} ref={isInitiallySelected ? initialScrollRef : null}
key={timeline.range.start} key={timeline.range.start}
> >
{isSelected ? ( {isSelected ? (
<div className="p-2 relative bg-secondary bg-opacity-30 rounded-md"> <div className="p-2 relative bg-secondary bg-opacity-30 rounded-md">
<ActivityScrubber <ActivityScrubber
timeBars={ timeBars={
isSelected isSelected
? [ ? [
{
time: new Date(
Math.max(timeline.range.start, timelineTime) *
1000
),
id: "playback",
},
]
: []
}
options={{
snap: null,
min: new Date(timeline.range.start * 1000),
max: new Date(timeline.range.end * 1000),
start: new Date(timeline.range.start * 1000),
end: new Date(timeline.range.end * 1000),
zoomable: false,
height: "120px",
}}
timechangeHandler={(data) => {
controllerRef.current?.scrubToTimestamp(
data.time.getTime() / 1000
);
setTimelineTime(data.time.getTime() / 1000);
}}
timechangedHandler={(data) => {
controllerRef.current?.seekToTimestamp(
data.time.getTime() / 1000,
true
);
}}
/>
{isSelected && graphData && (
<div className="absolute left-2 right-2 top-0 h-[84px]">
<TimelineGraph
id={timeline.range.start.toString()}
data={[
{ {
time: new Date( name: "Motion",
Math.max(timeline.range.start, timelineTime) * data: graphData.motion,
1000
),
id: "playback",
}, },
] ]}
: [] objects={graphData.objects}
} start={graphData.motion[0].x.getTime()}
options={{ end={graphData.motion.at(-1)!!.x.getTime()}
snap: null, />
min: new Date(timeline.range.start * 1000), </div>
max: new Date(timeline.range.end * 1000), )}
start: new Date(timeline.range.start * 1000), </div>
end: new Date(timeline.range.end * 1000), ) : (
zoomable: false, <TimelineBar
height: "120px", startTime={timeline.range.start}
}} graphData={graphData}
timechangeHandler={(data) => { onClick={() => {
controllerRef.current?.scrubToTimestamp( setSelectedPlayback(timeline);
data.time.getTime() / 1000
); let startTs;
setTimelineTime(data.time.getTime() / 1000); if (timeline.timelineItems.length > 0) {
}} startTs = selectedPlayback.timelineItems[0].timestamp;
timechangedHandler={(data) => { } else {
controllerRef.current?.seekToTimestamp( startTs = timeline.range.start;
data.time.getTime() / 1000, }
true
); controllerRef.current?.seekToTimestamp(startTs, true);
}} }}
/> />
{isSelected && graphData && ( )}
<div className="absolute left-2 right-2 top-0 h-[84px]"> </div>
<TimelineGraph );
id={timeline.range.start.toString()} })}
data={[ </div>
{
name: "Motion",
data: graphData.motion,
},
]}
objects={graphData.objects}
start={graphData.motion[0].x.getTime()}
end={graphData.motion.at(-1)!!.x.getTime()}
/>
</div>
)}
</div>
) : (
<TimelineBar
startTime={timeline.range.start}
graphData={graphData}
onClick={() => {
setSelectedPlayback(timeline);
let startTs;
if (timeline.timelineItems.length > 0) {
startTs = selectedPlayback.timelineItems[0].timestamp;
} else {
startTs = timeline.range.start;
}
controllerRef.current?.seekToTimestamp(startTs, true);
}}
/>
)}
</div>
);
})}
</div> </div>
</div> </div>
); );