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

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 (
<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}
>
<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 (
<div className="w-full flex flex-col">
<div className="flex max-h-[60%]">
<div className="flex mt-2 max-h-[60%]">
<DynamicVideoPlayer
className="w-2/3 bg-black flex justify-center items-center"
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">
{selectedPlayback.timelineItems.map((timeline) => {
return (
<TimelineItemCard
key={timeline.timestamp}
timeline={timeline}
relevantPreview={selectedPlayback.relevantPreview}
onSelect={() => {
controllerRef.current?.seekToTimelineItem(timeline);
}}
/>
);
})}
<div className="relative h-full w-1/3">
<div className="absolute px-2 left-0 top-0 right-0 bottom-0 overflow-y-auto overflow-x-hidden">
{selectedPlayback.timelineItems.map((timeline) => {
return (
<TimelineItemCard
key={timeline.timestamp}
timeline={timeline}
relevantPreview={selectedPlayback.relevantPreview}
onSelect={() => {
controllerRef.current?.seekToTimelineItem(timeline);
}}
/>
);
})}
</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">
{timelineStack.playbackItems.map((timeline) => {
const isInitiallySelected =