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}