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

Improve height scaling of dialog

Browse Source
This commit is contained in:
Nicolas Mowen 2024-01-30 09:34:52 -07:00
parent bf51fb3eac
commit 54b0462f07
4 changed files with 28 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,18 +23,16 @@ export default function TimelineItemCard({
return ( return (
<Card <Card
className="relative m-2 flex w-full h-32 cursor-pointer" className="relative m-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
onClick={onSelect} onClick={onSelect}
> >
<div className="p-2"> <div className="w-32 xl:w-40 3xl:w-[180px] 4xl:w-60 p-2">
<VideoPlayer <VideoPlayer
options={{ options={{
preload: "auto", preload: "auto",
height: "114",
width: "202",
autoplay: true, autoplay: true,
controls: false, controls: false,
fluid: false, aspectRatio: "16:9",
muted: true, muted: true,
loadingSpinner: false, loadingSpinner: false,
poster: relevantPreview poster: relevantPreview
@ -71,7 +69,7 @@ export default function TimelineItemCard({
})} })}
</div> </div>
<Button <Button
className="absolute bottom-1 right-1" className="absolute bottom-1 right-1 hidden xl:flex"
size="sm" size="sm"
variant="secondary" variant="secondary"
> >

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-h-[82%] max-w-full"> <DialogContent className="w-[70%] max-w-[1920px]">
{timelineData && playback && ( {timelineData && playback && (
<DesktopTimelineView <DesktopTimelineView
timelineData={timelineData} timelineData={timelineData}

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

@ -108,9 +108,8 @@ export default function DesktopTimelineView({
} }
return ( return (
<div className="w-full"> <div className="w-full xl:h-[586px] 2xl:h-[660px] 3xl:h-[880px] 4xl:h-[1080px]">
<div className="flex"> <div className="flex 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}
@ -130,8 +129,7 @@ export default function DesktopTimelineView({
} }
}} }}
/> />
</> <div className="px-2 h-full w-1/3 overflow-y-auto overflow-x-hidden">
<div className="px-2 h-[608px] w-1/3 overflow-y-auto overflow-x-hidden">
{selectedPlayback.timelineItems.map((timeline) => { {selectedPlayback.timelineItems.map((timeline) => {
return ( return (
<TimelineItemCard <TimelineItemCard
@ -146,7 +144,7 @@ export default function DesktopTimelineView({
})} })}
</div> </div>
</div> </div>
<div className="m-1 w-full max-h-72 2xl:max-h-80 3xl:max-h-96 overflow-auto"> <div className="mt-4 w-full h-[40%] overflow-scroll">
{timelineStack.playbackItems.map((timeline) => { {timelineStack.playbackItems.map((timeline) => {
const isInitiallySelected = const isInitiallySelected =
initialPlayback.range.start == timeline.range.start; initialPlayback.range.start == timeline.range.start;

1
web/tailwind.config.js
View File

@ -80,6 +80,7 @@ module.exports = {
"xs": "480px", "xs": "480px",
"2xl": "1440px", "2xl": "1440px",
"3xl": "1920px", "3xl": "1920px",
"4xl": "2560px",
}, },
}, },
}, },