Clean up desktop sizing

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 && (

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
-                        key={cam}
-                        className={`${mainCameraAspect == "wide" ? "h-full flex-grow" : ""}`}
-                        style={{
-                          aspectRatio:
-                            mainCameraAspect == "wide"
-                              ? undefined
-                              : getCameraAspect(cam),
-                        }}
-                      >
+                    const preview = (
                       <PreviewPlayer
-                          className="h-full"
+                        key={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);
                         }}
                         onClick={() => onSelectCamera(cam)}
                       />
-                      </div>
                     );
+
+                    if (mainCameraAspect == "tall") {
+                      return <div key={`${cam}-t`}>{preview}</div>;
+                    }
+
+                    return preview;
                   }
                   return null;
                 })}