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
2024-03-27 17:03:05 -06:00
parent 559e6910c4
commit 4e800e19ff
11 changed files with 890 additions and 348 deletions
--- a/web/src/components/overlay/MobileTimelineDrawer.tsx
+++ b/web/src/components/overlay/MobileTimelineDrawer.tsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { Button } from "../ui/button";
+import { FaFlag } from "react-icons/fa";
+import { TimelineType } from "@/types/timeline";
+import { isMobile } from "react-device-detect";
+
+type MobileTimelineDrawerProps = {
+  selected: TimelineType;
+  onSelect: (timeline: TimelineType) => void;
+};
+export default function MobileTimelineDrawer({
+  selected,
+  onSelect,
+}: MobileTimelineDrawerProps) {
+  const [drawer, setDrawer] = useState(false);
+
+  if (!isMobile) {
+    return;
+  }
+
+  return (
+    <Drawer open={drawer} onOpenChange={setDrawer}>
+      <DrawerTrigger asChild>
+        <Button className="rounded-lg capitalize" size="sm" variant="secondary">
+          <FaFlag 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">
+        <div
+          className={`w-full mx-4 py-2 text-center capitalize ${selected == "timeline" ? "bg-secondary rounded-lg" : ""}`}
+          onClick={() => {
+            onSelect("timeline");
+            setDrawer(false);
+          }}
+        >
+          Timeline
+        </div>
+        <div
+          className={`w-full mx-4 py-2 text-center capitalize ${selected == "events" ? "bg-secondary rounded-lg" : ""}`}
+          onClick={() => {
+            onSelect("events");
+            setDrawer(false);
+          }}
+        >
+          Events
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}