From e6ba4ab79d04bbddcfc15cb92024a3149d1cbd04 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 30 Apr 2024 05:57:12 -0600
Subject: [PATCH] Only use resolution for main camera

---
 web/src/types/record.ts                |  3 +++
 web/src/views/events/RecordingView.tsx | 17 +++++++++--------
 web/src/views/live/LiveCameraView.tsx  |  4 ++--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/web/src/types/record.ts b/web/src/types/record.ts
index 1efa8565f..d3fcfce94 100644
--- a/web/src/types/record.ts
+++ b/web/src/types/record.ts
@@ -38,3 +38,6 @@ export type RecordingStartingPoint = {
   startTime: number;
   severity: ReviewSeverity;
 };
+
+export const ASPECT_VERTICAL_LAYOUT = 1.5;
+export const ASPECT_WIDE_LAYOUT = 2;
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index d5c36318d..4e90937df 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -42,6 +42,7 @@ import Logo from "@/components/Logo";
 import { Skeleton } from "@/components/ui/skeleton";
 import { FaVideo } from "react-icons/fa";
 import { VideoResolutionType } from "@/types/live";
+import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
 
 const SEGMENT_DURATION = 30;
 
@@ -215,19 +216,19 @@ export function RecordingView({
         return undefined;
       }
 
+      if (cam == mainCamera && fullResolution.width && fullResolution.height) {
+        return fullResolution.width / fullResolution.height;
+      }
+
       const camera = config.cameras[cam];
 
       if (!camera) {
         return undefined;
       }
 
-      if (fullResolution.width && fullResolution.height) {
-        return fullResolution.width / fullResolution.height;
-      } else {
-        return camera.detect.width / camera.detect.height;
-      }
+      return camera.detect.width / camera.detect.height;
     },
-    [config, fullResolution],
+    [config, fullResolution, mainCamera],
   );
 
   const mainCameraAspect = useMemo(() => {
@@ -235,9 +236,9 @@ export function RecordingView({
 
     if (!aspectRatio) {
       return "normal";
-    } else if (aspectRatio > 2) {
+    } else if (aspectRatio > ASPECT_WIDE_LAYOUT) {
       return "wide";
-    } else if (aspectRatio < 16 / 9) {
+    } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
       return "tall";
     } else {
       return "normal";
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 705920299..ca8bc968f 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -167,7 +167,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
       if (isPortrait) {
         return "absolute left-2 right-2 top-[50%] -translate-y-[50%]";
       } else {
-        if (aspect > 16 / 9) {
+        if (aspect > 1.5) {
           return "p-2 absolute left-0 top-[50%] -translate-y-[50%]";
         } else {
           return "p-2 absolute top-2 bottom-2 left-[50%] -translate-x-[50%]";
@@ -176,7 +176,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
     }
 
     if (fullscreen) {
-      if (aspect > 16 / 9) {
+      if (aspect > 1.5) {
         return "absolute inset-x-2 top-[50%] -translate-y-[50%]";
       } else {
         return "absolute inset-y-2 left-[50%] -translate-x-[50%]";