Mobile recordings redesign (#10711)

* Only show back button text on desktop

* Add mobile camera drawer to separate component

* Use bottom sheet for export on mobile

* Add intermediary mobile bottom sheet

* fix filter

* Fix mobile layout jumping

* Fix desktop vertical camera view

* Fix horizontal camera list

* Add overlay instead of using same button for timeline exports

* Don't use native hls for now

* Fix export bottom sheet

* Fix scrolling

* Simplify checks

* Adjust hls compat approach

* Fix events shadow

* Make corners consistent

* Make corners consistent

* fix max drawer height

* Use separate buttons for export control

* Add icons

* Fix list views

* Fix new items to review

* bottom padding on bottom sheets

* bottom padding on bottom sheets

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.
@@ -54,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";
     }
@@ -168,9 +169,9 @@ export default function DynamicVideoPlayer({
   }, [controller, recordings]);
 
   return (
-    <div className={`relative ${className ?? ""}`}>
+    <div className={`w-full 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}