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/SaveExportOverlay.tsx

@@ -0,0 +1,45 @@
+import { LuX } from "react-icons/lu";
+import { Button } from "../ui/button";
+import { FaCompactDisc } from "react-icons/fa";
+
+type SaveExportOverlayProps = {
+  className: string;
+  show: boolean;
+  onSave: () => void;
+  onCancel: () => void;
+};
+export default function SaveExportOverlay({
+  className,
+  show,
+  onSave,
+  onCancel,
+}: SaveExportOverlayProps) {
+  return (
+    <div className={className}>
+      <div
+        className={`flex justify-center px-2 gap-2 items-center pointer-events-auto rounded-lg *:text-white ${
+          show ? "animate-in slide-in-from-top duration-500" : "invisible"
+        }  text-center mt-5 mx-auto`}
+      >
+        <Button
+          className="flex items-center gap-1"
+          variant="select"
+          size="sm"
+          onClick={onSave}
+        >
+          <FaCompactDisc />
+          Save Export
+        </Button>
+        <Button
+          className="flex items-center gap-1"
+          size="sm"
+          variant="secondary"
+          onClick={onCancel}
+        >
+          <LuX />
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}