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/overlay/MobileCameraDrawer.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { Button } from "../ui/button";
+import { FaVideo } from "react-icons/fa";
+import { isMobile } from "react-device-detect";
+
+type MobileCameraDrawerProps = {
+  allCameras: string[];
+  selected: string;
+  onSelectCamera: (cam: string) => void;
+};
+export default function MobileCameraDrawer({
+  allCameras,
+  selected,
+  onSelectCamera,
+}: MobileCameraDrawerProps) {
+  const [cameraDrawer, setCameraDrawer] = useState(false);
+
+  if (!isMobile) {
+    return;
+  }
+
+  return (
+    <Drawer open={cameraDrawer} onOpenChange={setCameraDrawer}>
+      <DrawerTrigger asChild>
+        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
+          <FaVideo className="text-muted-foreground" />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent className="max-h-[75dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">
+        {allCameras.map((cam) => (
+          <div
+            key={cam}
+            className={`w-full mx-4 py-2 text-center capitalize ${cam == selected ? "bg-secondary rounded-lg" : ""}`}
+            onClick={() => {
+              onSelectCamera(cam);
+              setCameraDrawer(false);
+            }}
+          >
+            {cam.replaceAll("_", " ")}
+          </div>
+        ))}
+      </DrawerContent>
+    </Drawer>
+  );
+}