From 54b0462f07509231fbc3855e33f610d759d53e24 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 30 Jan 2024 09:34:52 -0700
Subject: [PATCH] Improve height scaling of dialog

---
 web/src/components/card/TimelineItemCard.tsx  | 10 ++--
 web/src/pages/History.tsx                     |  2 +-
 web/src/views/history/DesktopTimelineView.tsx | 46 +++++++++----------
 web/tailwind.config.js                        |  1 +
 4 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/web/src/components/card/TimelineItemCard.tsx b/web/src/components/card/TimelineItemCard.tsx
index fa3eb408c..ea278921b 100644
--- a/web/src/components/card/TimelineItemCard.tsx
+++ b/web/src/components/card/TimelineItemCard.tsx
@@ -23,18 +23,16 @@ export default function TimelineItemCard({
 
   return (
     <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}
     >
-      <div className="p-2">
+      <div className="w-32 xl:w-40 3xl:w-[180px] 4xl:w-60 p-2">
         <VideoPlayer
           options={{
             preload: "auto",
-            height: "114",
-            width: "202",
             autoplay: true,
             controls: false,
-            fluid: false,
+            aspectRatio: "16:9",
             muted: true,
             loadingSpinner: false,
             poster: relevantPreview
@@ -71,7 +69,7 @@ export default function TimelineItemCard({
           })}
         </div>
         <Button
-          className="absolute bottom-1 right-1"
+          className="absolute bottom-1 right-1 hidden xl:flex"
           size="sm"
           variant="secondary"
         >
diff --git a/web/src/pages/History.tsx b/web/src/pages/History.tsx
index 45098778c..f2be21c68 100644
--- a/web/src/pages/History.tsx
+++ b/web/src/pages/History.tsx
@@ -268,7 +268,7 @@ function TimelineViewer({
 
   return (
     <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 && (
           <DesktopTimelineView
             timelineData={timelineData}
diff --git a/web/src/views/history/DesktopTimelineView.tsx b/web/src/views/history/DesktopTimelineView.tsx
index 56be89272..de85eb0fa 100644
--- a/web/src/views/history/DesktopTimelineView.tsx
+++ b/web/src/views/history/DesktopTimelineView.tsx
@@ -108,30 +108,28 @@ export default function DesktopTimelineView({
   }
 
   return (
-    <div className="w-full">
-      <div className="flex">
-        <>
-          <DynamicVideoPlayer
-            className="w-2/3 bg-black flex justify-center items-center"
-            camera={initialPlayback.camera}
-            timeRange={selectedPlayback.range}
-            cameraPreviews={cameraPreviews}
-            onControllerReady={(controller) => {
-              controllerRef.current = controller;
-              controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
-                setTimelineTime(timestamp);
-              });
+    <div className="w-full xl:h-[586px] 2xl:h-[660px] 3xl:h-[880px] 4xl:h-[1080px]">
+      <div className="flex h-[60%]">
+        <DynamicVideoPlayer
+          className="w-2/3 bg-black flex justify-center items-center"
+          camera={initialPlayback.camera}
+          timeRange={selectedPlayback.range}
+          cameraPreviews={cameraPreviews}
+          onControllerReady={(controller) => {
+            controllerRef.current = controller;
+            controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
+              setTimelineTime(timestamp);
+            });
 
-              if (initialPlayback.timelineItems.length > 0) {
-                controllerRef.current?.seekToTimestamp(
-                  selectedPlayback.timelineItems[0].timestamp,
-                  true
-                );
-              }
-            }}
-          />
-        </>
-        <div className="px-2 h-[608px] w-1/3 overflow-y-auto overflow-x-hidden">
+            if (initialPlayback.timelineItems.length > 0) {
+              controllerRef.current?.seekToTimestamp(
+                selectedPlayback.timelineItems[0].timestamp,
+                true
+              );
+            }
+          }}
+        />
+        <div className="px-2 h-full w-1/3 overflow-y-auto overflow-x-hidden">
           {selectedPlayback.timelineItems.map((timeline) => {
             return (
               <TimelineItemCard
@@ -146,7 +144,7 @@ export default function DesktopTimelineView({
           })}
         </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) => {
           const isInitiallySelected =
             initialPlayback.range.start == timeline.range.start;
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 696829f5e..dc84c91b1 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -80,6 +80,7 @@ module.exports = {
         "xs": "480px",
         "2xl": "1440px",
         "3xl": "1920px",
+        "4xl": "2560px",
       },
     },
   },