From 612562c0092727af55f2c426c0d6bc13150205b0 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 2 Aug 2024 06:49:37 -0600
Subject: [PATCH] Fix tall videos from covering height in export page

---
 web/src/pages/Exports.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 411a53e6a..6d00c92fa 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -13,6 +13,7 @@ import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Toaster } from "@/components/ui/sonner";
+import { cn } from "@/lib/utils";
 import { DeleteClipType, Export } from "@/types/export";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -92,6 +93,7 @@ function Exports() {
   // Viewing
 
   const [selected, setSelected] = useState<Export>();
+  const [selectedAspect, setSelectedAspect] = useState(0.0);
 
   return (
     <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
@@ -129,15 +131,25 @@ function Exports() {
           }
         }}
       >
-        <DialogContent className="max-w-7xl">
-          <DialogTitle>{selected?.name}</DialogTitle>
+        <DialogContent className="max-w-[80%]">
+          <DialogTitle className="capitalize">
+            {selected?.name?.replaceAll("_", " ")}
+          </DialogTitle>
           <video
-            className="size-full rounded-lg md:rounded-2xl"
+            className={cn(
+              "size-full rounded-lg md:rounded-2xl",
+              selectedAspect < 1.5 ? "aspect-video h-full" : "",
+            )}
             playsInline
             preload="auto"
             autoPlay
             controls
             muted
+            onLoadedData={(e) =>
+              setSelectedAspect(
+                e.currentTarget.videoWidth / e.currentTarget.videoHeight,
+              )
+            }
           >
             <source
               src={`${baseUrl}${selected?.video_path?.replace("/media/frigate/", "")}`}