From beefc51361661bc87858634111c98fd6a678ada5 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 1 Jun 2024 22:13:37 -0500
Subject: [PATCH] container for birdseye aspect and auto width for mobile time
 pill (#11685)

---
 .../components/timeline/ReviewTimeline.tsx    |  6 +++---
 web/src/views/live/LiveDashboardView.tsx      | 19 ++++++++++++++-----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
index 8f3e4421e..faa22325d 100644
--- a/web/src/components/timeline/ReviewTimeline.tsx
+++ b/web/src/components/timeline/ReviewTimeline.tsx
@@ -352,7 +352,7 @@ export function ReviewTimeline({
                         : segmentDuration < 60
                           ? "w-[80px]"
                           : "w-20"
-                    } h-5 ${isDraggingHandlebar && isMobile ? "fixed left-1/2 top-[18px] z-20 h-[30px] w-32 -translate-x-1/2 transform bg-destructive/80" : "static"} flex items-center justify-center`}
+                    } h-5 ${isDraggingHandlebar && isMobile ? "fixed left-1/2 top-[18px] z-20 h-[30px] w-auto -translate-x-1/2 transform bg-destructive/80 px-3" : "static"} flex items-center justify-center`}
                   >
                     <div
                       ref={handlebarTimeRef}
@@ -390,7 +390,7 @@ export function ReviewTimeline({
                           : segmentDuration < 60
                             ? "w-[80px]"
                             : "w-20"
-                      } h-5 ${isDraggingExportEnd && isMobile ? "fixed left-1/2 top-[18px] z-20 mt-0 h-[30px] w-32 -translate-x-1/2 transform rounded-full bg-selected/80" : "static rounded-tl-lg rounded-tr-lg"} flex items-center justify-center`}
+                      } h-5 ${isDraggingExportEnd && isMobile ? "fixed left-1/2 top-[18px] z-20 mt-0 h-[30px] w-auto -translate-x-1/2 transform rounded-full bg-selected/80 px-3" : "static rounded-tl-lg rounded-tr-lg"} flex items-center justify-center`}
                     >
                       <div
                         ref={exportEndTimeRef}
@@ -432,7 +432,7 @@ export function ReviewTimeline({
                           : segmentDuration < 60
                             ? "w-[80px]"
                             : "w-20"
-                      } h-5 ${isDraggingExportStart && isMobile ? "fixed left-1/2 top-[4px] z-20 mt-0 h-[30px] w-32 -translate-x-1/2 transform rounded-full bg-selected/80" : "static rounded-bl-lg rounded-br-lg"} flex items-center justify-center`}
+                      } h-5 ${isDraggingExportStart && isMobile ? "fixed left-1/2 top-[4px] z-20 mt-0 h-[30px] w-auto -translate-x-1/2 transform rounded-full bg-selected/80 px-3" : "static rounded-bl-lg rounded-br-lg"} flex items-center justify-center`}
                     >
                       <div
                         ref={exportStartTimeRef}
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 4d1e5f53a..ac7ffdebe 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -52,6 +52,7 @@ export default function LiveDashboardView({
 
   const [isEditMode, setIsEditMode] = useState<boolean>(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const birdseyeContainerRef = useRef<HTMLDivElement>(null);
 
   // recent events
 
@@ -241,11 +242,19 @@ export default function LiveDashboardView({
           )}
         >
           {includeBirdseye && birdseyeConfig?.enabled && (
-            <BirdseyeLivePlayer
-              birdseyeConfig={birdseyeConfig}
-              liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
-              onClick={() => onSelectCamera("birdseye")}
-            />
+            <div
+              style={{
+                aspectRatio: birdseyeConfig.width / birdseyeConfig.height,
+              }}
+              ref={birdseyeContainerRef}
+            >
+              <BirdseyeLivePlayer
+                birdseyeConfig={birdseyeConfig}
+                liveMode={birdseyeConfig.restream ? "mse" : "jsmpeg"}
+                onClick={() => onSelectCamera("birdseye")}
+                containerRef={birdseyeContainerRef}
+              />
+            </div>
           )}
           {cameras.map((camera) => {
             let grow;