From 28d3f55fbc0e291ec3d76f472acf51751bac5026 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 27 Mar 2024 13:15:39 -0600
Subject: [PATCH] Fix mobile layout jumping

---
 web/src/components/player/HlsVideoPlayer.tsx             | 4 ++--
 web/src/components/player/dynamic/DynamicVideoPlayer.tsx | 5 +++--
 web/src/views/events/RecordingView.tsx                   | 6 +++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index e0d42d6e6..7941680d1 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -89,7 +89,7 @@ export default function HlsVideoPlayer({
 
   return (
     <div
-      className={`relative ${visible ? "visible" : "hidden"}`}
+      className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`}
       onMouseOver={
         isDesktop
           ? () => {
@@ -110,7 +110,7 @@ export default function HlsVideoPlayer({
         <TransformComponent>
           <video
             ref={videoRef}
-            className={`${className ?? ""} bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
+            className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
             preload="auto"
             autoPlay
             controls={false}
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 77e3b78a5..5e9d9eb78 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -9,6 +9,7 @@ import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
 import { DynamicVideoController } from "./DynamicVideoController";
 import HlsVideoPlayer from "../HlsVideoPlayer";
 import { TimeRange, Timeline } from "@/types/timeline";
+import { isDesktop } from "react-device-detect";
 
 /**
  * Dynamically switches between video playback and scrubbing preview player.
@@ -170,7 +171,7 @@ export default function DynamicVideoPlayer({
   return (
     <div className={`relative ${className ?? ""}`}>
       <HlsVideoPlayer
-        className={`w-full ${grow ?? ""}`}
+        className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}
         videoRef={playerRef}
         visible={!(isScrubbing || isLoading)}
         currentSource={source}
@@ -194,7 +195,7 @@ export default function DynamicVideoPlayer({
         )}
       </HlsVideoPlayer>
       <PreviewPlayer
-        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${grow}`}
+        className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}`}
         camera={camera}
         timeRange={timeRange}
         cameraPreviews={cameraPreviews}
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index b297c0639..766464817 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -208,6 +208,10 @@ export function RecordingView({
   }, [config, mainCamera]);
 
   const grow = useMemo(() => {
+    if (isMobile) {
+      return "";
+    }
+
     if (mainCameraAspect == "wide") {
       return "w-full aspect-wide";
     } else if (isDesktop && mainCameraAspect == "tall") {
@@ -313,7 +317,7 @@ export function RecordingView({
       </div>
 
       <div
-        className={`flex h-full my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col"}`}
+        className={`flex h-full my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
       >
         <div className="flex flex-1 flex-wrap">
           <div