From 5e2225b8ac371b991aad06ed4f9e0e9dfbe63e10 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sat, 30 Dec 2023 11:51:02 -0700
Subject: [PATCH] Set aspect ratio for player correctly

---
 web/src/components/player/PreviewThumbnailPlayer.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index f27d7a2fb..896beecab 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -214,10 +214,11 @@ function PreviewContent({
   } else {
     return (
       <>
-        <div className={`${getPreviewWidth(camera, config)}`}>
+        <div className="w-full">
           <VideoPlayer
             options={{
               preload: "auto",
+              aspectRatio: "16:9",
               autoplay: true,
               controls: false,
               muted: true,
@@ -263,12 +264,12 @@ function isCurrentHour(timestamp: number) {
 function getPreviewWidth(camera: string, config: FrigateConfig) {
   const detect = config.cameras[camera].detect;
 
-  if (detect.width / detect.height < 1.0) {
-    return "w-[120px]";
+  if (detect.width / detect.height < 1) {
+    return "w-1/2";
   }
 
-  if (detect.width / detect.height < 1.4) {
-    return "w-[208px]";
+  if (detect.width / detect.height < 16 / 9) {
+    return "w-2/3";
   }
 
   return "w-full";