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

Fix scaling for long timeline lists

Browse Source
This commit is contained in:
Nicolas Mowen 2024-01-31 06:29:37 -07:00
parent af3f6dadcb
commit 77c061e68c
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/card/TimelineItemCard.tsx
View File

@ -47,7 +47,7 @@ export default function TimelineItemCard({
return ( return (
<Card <Card
className="relative m-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer" className="relative mx-2 mb-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
onClick={onSelect} onClick={onSelect}
> >
<div className="w-32 xl:w-40 3xl:w-44 4xl:w-60 p-2"> <div className="w-32 xl:w-40 3xl:w-44 4xl:w-60 p-2">

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

@ -109,7 +109,7 @@ export default function DesktopTimelineView({
return ( return (
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<div className="flex max-h-[60%]"> <div className="flex mt-2 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}
@ -129,22 +129,24 @@ export default function DesktopTimelineView({
} }
}} }}
/> />
<div className="px-2 h-full w-1/3 overflow-y-auto overflow-x-hidden"> <div className="relative h-full w-1/3">
{selectedPlayback.timelineItems.map((timeline) => { <div className="absolute px-2 left-0 top-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden">
return ( {selectedPlayback.timelineItems.map((timeline) => {
<TimelineItemCard return (
key={timeline.timestamp} <TimelineItemCard
timeline={timeline} key={timeline.timestamp}
relevantPreview={selectedPlayback.relevantPreview} timeline={timeline}
onSelect={() => { relevantPreview={selectedPlayback.relevantPreview}
controllerRef.current?.seekToTimelineItem(timeline); onSelect={() => {
}} controllerRef.current?.seekToTimelineItem(timeline);
/> }}
); />
})} );
})}
</div>
</div> </div>
</div> </div>
<div className="mt-4 w-full h-full relative"> <div className="relative mt-4 w-full h-full">
<div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto"> <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 =