Fix frigate+ submit and recordings layouts for portrait cameras (#10486)

* Fix plus submission dialog

* Different layout for portrait recordings

* Fix now preview found pulsing

* Fix bug with uneven milliseconds

* Improve consistency of video scaling

web/src/pages/SubmitPlus.tsx

@@ -26,6 +26,8 @@ import { FaList, FaVideo } from "react-icons/fa";
 import useSWR from "swr";
 
 export default function SubmitPlus() {
+  const { data: config } = useSWR<FrigateConfig>("config");
+
   // filters
 
   const [selectedCameras, setSelectedCameras] = useState<string[]>();
@@ -45,6 +47,24 @@ export default function SubmitPlus() {
   ]);
   const [upload, setUpload] = useState<Event>();
 
+  const grow = useMemo(() => {
+    if (!config || !upload) {
+      return "";
+    }
+
+    const camera = config.cameras[upload.camera];
+
+    if (!camera) {
+      return "";
+    }
+
+    if (camera.detect.width / camera.detect.height < 16 / 9) {
+      return "aspect-video object-contain";
+    }
+
+    return "";
+  }, [config, upload]);
+
   const onSubmitToPlus = useCallback(
     async (falsePositive: boolean) => {
       if (!upload) {
@@ -102,7 +122,7 @@ export default function SubmitPlus() {
                 </DialogDescription>
               </DialogHeader>
               <img
-                className="flex-grow-0"
+                className={`w-full ${grow} bg-black`}
                 src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
                 alt={`${upload?.label}`}
               />