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/components/player/HlsVideoPlayer.tsx

@@ -59,6 +59,7 @@ export default function HlsVideoPlayer({
 
   const hlsRef = useRef<Hls>();
   const [useHlsCompat, setUseHlsCompat] = useState(false);
+  const [loadedMetadata, setLoadedMetadata] = useState(false);
 
   useEffect(() => {
     if (!videoRef.current) {
@@ -153,7 +154,7 @@ export default function HlsVideoPlayer({
 
   return (
     <div
-      className={`relative ${className ?? ""}`}
+      className={`relative`}
       onMouseOver={
         isDesktop
           ? () => {
@@ -174,7 +175,7 @@ export default function HlsVideoPlayer({
         <TransformComponent>
           <video
             ref={videoRef}
-            className="size-full rounded-2xl"
+            className={`${className ?? ""} bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
             preload="auto"
             autoPlay
             controls={false}
@@ -204,6 +205,7 @@ export default function HlsVideoPlayer({
                 : undefined
             }
             onLoadedData={onPlayerLoaded}
+            onLoadedMetadata={() => setLoadedMetadata(true)}
             onEnded={onClipEnded}
             onError={(e) => {
               if (

web/src/components/player/PreviewPlayer.tsx

@@ -211,7 +211,7 @@ function PreviewVideoPlayer({
       </video>
       {!loaded && <Skeleton className="absolute inset-0" />}
       {cameraPreviews && !currentPreview && (
-        <div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-2xl align-center text-center">
+        <div className="absolute inset-0 bg-black text-white rounded-2xl flex justify-center items-center">
           No Preview Found
         </div>
       )}

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -38,16 +38,23 @@ export default function DynamicVideoPlayer({
   const { data: config } = useSWR<FrigateConfig>("config");
 
   // playback behavior
-  const wideVideo = useMemo(() => {
+
+  const grow = useMemo(() => {
     if (!config) {
-      return false;
+      return "aspect-video";
     }
 
-    return (
+    const aspectRatio =
       config.cameras[camera].detect.width /
-        config.cameras[camera].detect.height >
-      1.7
-    );
+      config.cameras[camera].detect.height;
+
+    if (aspectRatio > 2) {
+      return "";
+    } else if (aspectRatio < 16 / 9) {
+      return "aspect-tall";
+    } else {
+      return "aspect-video";
+    }
   }, [camera, config]);
 
   // controlling playback
@@ -163,7 +170,7 @@ export default function DynamicVideoPlayer({
         className={`w-full relative ${isScrubbing || isLoading ? "hidden" : "visible"}`}
       >
         <HlsVideoPlayer
-          className={`${wideVideo ? "" : "aspect-video"}`}
+          className={`${grow}`}
           videoRef={playerRef}
           currentSource={source}
           onTimeUpdate={onTimeUpdate}
@@ -180,7 +187,7 @@ export default function DynamicVideoPlayer({
         </HlsVideoPlayer>
       </div>
       <PreviewPlayer
-        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className ?? ""}`}
+        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${grow}`}
         camera={camera}
         timeRange={timeRange}
         cameraPreviews={cameraPreviews}

web/src/pages/Events.tsx

@@ -118,6 +118,7 @@ export default function Events() {
       endDate.setHours(0, 0, 0, 0);
     } else {
       endDate = new Date();
+      endDate.setMilliseconds(0);
     }
 
     return {

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}`}
               />

web/src/views/events/RecordingView.tsx

@@ -170,21 +170,34 @@ export function DesktopRecordingView({
       : null,
   );
 
-  const grow = useMemo(() => {
+  const mainCameraAspect = useMemo(() => {
     if (!config) {
-      return "aspect-video";
+      return "normal";
     }
 
     const aspectRatio =
       config.cameras[mainCamera].detect.width /
       config.cameras[mainCamera].detect.height;
+
     if (aspectRatio > 2) {
-      return "aspect-wide";
+      return "wide";
+    } else if (aspectRatio < 16 / 9) {
+      return "tall";
     } else {
-      return "aspect-video";
+      return "normal";
     }
   }, [config, mainCamera]);
 
+  const grow = useMemo(() => {
+    if (mainCameraAspect == "wide") {
+      return "w-full aspect-wide";
+    } else if (mainCameraAspect == "tall") {
+      return "h-full aspect-tall";
+    } else {
+      return "w-full aspect-video";
+    }
+  }, [mainCameraAspect]);
+
   return (
     <div ref={contentRef} className="relative size-full">
       <Button
@@ -197,13 +210,15 @@ export function DesktopRecordingView({
 
       <div className="flex h-full justify-center overflow-hidden">
         <div className="flex flex-1 flex-wrap">
-          <div className="w-full flex flex-col h-full px-2 justify-center items-center">
+          <div
+            className={`size-full flex px-2 items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center"}`}
+          >
             <div
               key={mainCamera}
-              className="w-[82%] flex justify-center items mb-5"
+              className={`flex justify-center items mb-5 ${mainCameraAspect == "tall" ? "h-[96%]" : "w-[82%]"}`}
             >
               <DynamicVideoPlayer
-                className={`w-full ${grow}`}
+                className={grow}
                 camera={mainCamera}
                 timeRange={currentTimeRange}
                 cameraPreviews={allPreviews ?? []}
@@ -222,13 +237,17 @@ export function DesktopRecordingView({
                 isScrubbing={scrubbing}
               />
             </div>
-            <div className="w-full flex justify-center gap-2 overflow-x-auto">
+            <div
+              className={`flex justify-center gap-2 ${mainCameraAspect == "tall" ? "h-full flex-col overflow-y-auto items-center" : "w-full overflow-x-auto"}`}
+            >
               {allCameras.map((cam) => {
                 if (cam !== mainCamera) {
                   return (
                     <div key={cam}>
                       <PreviewPlayer
-                        className="size-full"
+                        className={
+                          mainCameraAspect == "tall" ? "" : "size-full"
+                        }
                         camera={cam}
                         timeRange={currentTimeRange}
                         cameraPreviews={allPreviews ?? []}