From 223b6c19defdeeed3974ccfa5dcf05ad9864b03b Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 28 Mar 2024 15:10:27 -0600
Subject: [PATCH] Clean up desktop sizing

---
 web/src/components/player/PreviewPlayer.tsx |  8 ++++
 web/src/views/events/RecordingView.tsx      | 49 +++++++++++----------
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index 1a1ae3fcb..7164bf108 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -23,6 +23,7 @@ type PreviewPlayerProps = {
   cameraPreviews: Preview[];
   startTime?: number;
   isScrubbing: boolean;
+  forceAspect?: number;
   onControllerReady: (controller: PreviewController) => void;
   onClick?: () => void;
 };
@@ -33,6 +34,7 @@ export default function PreviewPlayer({
   cameraPreviews,
   startTime,
   isScrubbing,
+  forceAspect,
   onControllerReady,
   onClick,
 }: PreviewPlayerProps) {
@@ -60,6 +62,7 @@ export default function PreviewPlayer({
       cameraPreviews={cameraPreviews}
       startTime={startTime}
       isScrubbing={isScrubbing}
+      forceAspect={forceAspect}
       currentHourFrame={currentHourFrame}
       onControllerReady={onControllerReady}
       onClick={onClick}
@@ -89,6 +92,7 @@ type PreviewVideoPlayerProps = {
   cameraPreviews: Preview[];
   startTime?: number;
   isScrubbing: boolean;
+  forceAspect?: number;
   currentHourFrame?: string;
   onControllerReady: (controller: PreviewVideoController) => void;
   onClick?: () => void;
@@ -101,6 +105,7 @@ function PreviewVideoPlayer({
   cameraPreviews,
   startTime,
   isScrubbing,
+  forceAspect,
   currentHourFrame,
   onControllerReady,
   onClick,
@@ -232,6 +237,9 @@ function PreviewVideoPlayer({
   return (
     <div
       className={`relative rounded-2xl bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
+      style={{
+        aspectRatio: forceAspect,
+      }}
       onClick={onClick}
     >
       {currentHourFrame && (
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 8f7a733c0..abfc76991 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -351,6 +351,12 @@ export function RecordingView({
                   ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"}`
                   : `w-full ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}`
               }
+              style={{
+                aspectRatio:
+                  mainCameraAspect == "tall"
+                    ? getCameraAspect(mainCamera)
+                    : undefined,
+              }}
             >
               <DynamicVideoPlayer
                 className={grow}
@@ -379,32 +385,29 @@ export function RecordingView({
               >
                 {allCameras.map((cam) => {
                   if (cam !== mainCamera) {
-                    return (
-                      <div
+                    const preview = (
+                      <PreviewPlayer
                         key={cam}
-                        className={`${mainCameraAspect == "wide" ? "h-full flex-grow" : ""}`}
-                        style={{
-                          aspectRatio:
-                            mainCameraAspect == "wide"
-                              ? undefined
-                              : getCameraAspect(cam),
+                        className={`${mainCameraAspect == "wide" ? "flex-grow" : ""}`}
+                        camera={cam}
+                        timeRange={currentTimeRange}
+                        cameraPreviews={allPreviews ?? []}
+                        startTime={startTime}
+                        isScrubbing={scrubbing}
+                        forceAspect={getCameraAspect(cam)}
+                        onControllerReady={(controller) => {
+                          previewRefs.current[cam] = controller;
+                          controller.scrubToTimestamp(startTime);
                         }}
-                      >
-                        <PreviewPlayer
-                          className="h-full"
-                          camera={cam}
-                          timeRange={currentTimeRange}
-                          cameraPreviews={allPreviews ?? []}
-                          startTime={startTime}
-                          isScrubbing={scrubbing}
-                          onControllerReady={(controller) => {
-                            previewRefs.current[cam] = controller;
-                            controller.scrubToTimestamp(startTime);
-                          }}
-                          onClick={() => onSelectCamera(cam)}
-                        />
-                      </div>
+                        onClick={() => onSelectCamera(cam)}
+                      />
                     );
+
+                    if (mainCameraAspect == "tall") {
+                      return <div key={`${cam}-t`}>{preview}</div>;
+                    }
+
+                    return preview;
                   }
                   return null;
                 })}