Fix desktop vertical camera view

web/src/components/player/HlsVideoPlayer.tsx

@@ -88,26 +88,33 @@ export default function HlsVideoPlayer({
   const [controlsOpen, setControlsOpen] = useState(false);
 
   return (
-    <div
-      className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`}
-      onMouseOver={
-        isDesktop
-          ? () => {
-              setControls(true);
-            }
-          : undefined
-      }
-      onMouseOut={
-        isDesktop
-          ? () => {
-              setControls(controlsOpen);
-            }
-          : undefined
-      }
-      onClick={isDesktop ? undefined : () => setControls(!controls)}
-    >
-      <TransformWrapper minScale={1.0}>
-        <TransformComponent>
+    <TransformWrapper minScale={1.0}>
+      <div
+        className={`relative w-full ${className ?? ""} ${visible ? "visible" : "hidden"}`}
+        onMouseOver={
+          isDesktop
+            ? () => {
+                setControls(true);
+              }
+            : undefined
+        }
+        onMouseOut={
+          isDesktop
+            ? () => {
+                setControls(controlsOpen);
+              }
+            : undefined
+        }
+        onClick={isDesktop ? undefined : () => setControls(!controls)}
+      >
+        <TransformComponent
+          wrapperStyle={{
+            width: "100%",
+          }}
+          contentStyle={{
+            width: "100%",
+          }}
+        >
           <video
             ref={videoRef}
             className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
@@ -154,41 +161,41 @@ export default function HlsVideoPlayer({
             }}
           />
         </TransformComponent>
-      </TransformWrapper>
-      <VideoControls
-        className="absolute bottom-5 left-1/2 -translate-x-1/2"
-        video={videoRef.current}
-        isPlaying={isPlaying}
-        show={controls}
-        controlsOpen={controlsOpen}
-        setControlsOpen={setControlsOpen}
-        playbackRate={videoRef.current?.playbackRate ?? 1}
-        hotKeys={hotKeys}
-        onPlayPause={(play) => {
-          if (!videoRef.current) {
-            return;
-          }
+        <VideoControls
+          className="absolute bottom-5 left-1/2 -translate-x-1/2"
+          video={videoRef.current}
+          isPlaying={isPlaying}
+          show={controls}
+          controlsOpen={controlsOpen}
+          setControlsOpen={setControlsOpen}
+          playbackRate={videoRef.current?.playbackRate ?? 1}
+          hotKeys={hotKeys}
+          onPlayPause={(play) => {
+            if (!videoRef.current) {
+              return;
+            }
 
-          if (play) {
-            videoRef.current.play();
-          } else {
-            videoRef.current.pause();
-          }
-        }}
-        onSeek={(diff) => {
-          const currentTime = videoRef.current?.currentTime;
+            if (play) {
+              videoRef.current.play();
+            } else {
+              videoRef.current.pause();
+            }
+          }}
+          onSeek={(diff) => {
+            const currentTime = videoRef.current?.currentTime;
 
-          if (!videoRef.current || !currentTime) {
-            return;
-          }
+            if (!videoRef.current || !currentTime) {
+              return;
+            }
 
-          videoRef.current.currentTime = Math.max(0, currentTime + diff);
-        }}
-        onSetPlaybackRate={(rate) =>
-          videoRef.current ? (videoRef.current.playbackRate = rate) : null
-        }
-      />
-      {children}
-    </div>
+            videoRef.current.currentTime = Math.max(0, currentTime + diff);
+          }}
+          onSetPlaybackRate={(rate) =>
+            videoRef.current ? (videoRef.current.playbackRate = rate) : null
+          }
+        />
+        {children}
+      </div>
+    </TransformWrapper>
   );
 }

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

@@ -55,7 +55,7 @@ export default function DynamicVideoPlayer({
     if (aspectRatio > 2) {
       return "";
     } else if (aspectRatio < 16 / 9) {
-      return "aspect-tall";
+      return isDesktop ? "" : "aspect-tall";
     } else {
       return "aspect-video";
     }
@@ -169,7 +169,7 @@ export default function DynamicVideoPlayer({
   }, [controller, recordings]);
 
   return (
-    <div className={`relative ${className ?? ""}`}>
+    <div className={`w-full relative ${className ?? ""}`}>
       <HlsVideoPlayer
         className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}
         videoRef={playerRef}

web/src/views/events/RecordingView.tsx

@@ -215,7 +215,7 @@ export function RecordingView({
     if (mainCameraAspect == "wide") {
       return "w-full aspect-wide";
     } else if (isDesktop && mainCameraAspect == "tall") {
-      return "h-full aspect-tall";
+      return "h-full aspect-tall flex flex-col justify-center";
     } else {
       return "w-full aspect-video";
     }
@@ -327,7 +327,7 @@ export function RecordingView({
               key={mainCamera}
               className={
                 isDesktop
-                  ? `flex justify-center items mb-5 ${mainCameraAspect == "tall" ? "h-[96%]" : "w-[82%]"}`
+                  ? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-full" : "w-[82%]"}`
                   : `w-full ${mainCameraAspect == "wide" ? "" : "aspect-video"}`
               }
             >