Feature: Share Timestamped URL for Camera Footage History (#22537)

* Initial copy timestamp url implementation

* revise url format

* Implement share timestamp dialog

* Use translations

* Add comments

* Add validations to shared link

* Switch to searchEffect implementation

* Add missing accessibility related dialog description

* Change URL format to unix timestamps

* Remove unnecessary useEffect

* Remove duplicated dialog title

* Fixes/improvements based off PR review comments

* Add missing cancel button & separators to dialog

* Make share description clearer

* Bugfix: guard against showing toasts twice
Because this effect ends up running multiple times

* Clamp future timestamps to now

* Revert "Bugfix: guard against showing toasts twice"

This reverts commit 99fa5e1dee.

* Use normal separator

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

* Fixes based off PR review comments

* Bugfix: Share dialog was not receiving the player timestamp after removing key that triggered remounts

* Defer `setRecording` and return true from hook for cleanup

* Remove timeout defer hack in favor of refactored hook

* Attempt to replay video muted on NotAllowedError

* Use separate persistent mute and temporary forced mute states

* Align cancel button with other dialogs

* Prevent wrapping on dialog title

* Remove extra "back" button on mobile drawer

* Fix back navigation when coming from direct shared timestamp links

* Use new timeformat hook

* Simplify dialog radio buttons

* Apply suggestions from code review

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { Button } from "../ui/button";
 import { FaArrowDown, FaCalendarAlt, FaCog, FaFilter } from "react-icons/fa";
-import { LuBug } from "react-icons/lu";
+import { LuBug, LuShare2 } from "react-icons/lu";
 import { TimeRange } from "@/types/timeline";
 import { ExportContent, ExportPreviewDialog, ExportTab } from "./ExportDialog";
 import {
@@ -27,6 +27,7 @@ import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { StartExportResponse } from "@/types/export";
+import { ShareTimestampContent } from "./ShareTimestampDialog";
 
 type DrawerMode =
   | "none"
@@ -34,13 +35,15 @@ type DrawerMode =
   | "export"
   | "calendar"
   | "filter"
-  | "debug-replay";
+  | "debug-replay"
+  | "share-timestamp";
 
 const DRAWER_FEATURES = [
   "export",
   "calendar",
   "filter",
   "debug-replay",
+  "share-timestamp",
 ] as const;
 export type DrawerFeatures = (typeof DRAWER_FEATURES)[number];
 const DEFAULT_DRAWER_FEATURES: DrawerFeatures[] = [
@@ -48,6 +51,7 @@ const DEFAULT_DRAWER_FEATURES: DrawerFeatures[] = [
   "calendar",
   "filter",
   "debug-replay",
+  "share-timestamp",
 ];
 
 type MobileReviewSettingsDrawerProps = {
@@ -68,6 +72,7 @@ type MobileReviewSettingsDrawerProps = {
   debugReplayRange?: TimeRange;
   setDebugReplayMode?: (mode: ExportMode) => void;
   setDebugReplayRange?: (range: TimeRange | undefined) => void;
+  onShareTimestamp?: (timestamp: number) => void;
   onUpdateFilter: (filter: ReviewFilter) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
@@ -91,6 +96,7 @@ export default function MobileReviewSettingsDrawer({
   debugReplayRange,
   setDebugReplayMode = () => {},
   setDebugReplayRange = () => {},
+  onShareTimestamp = () => {},
   onUpdateFilter,
   setRange,
   setMode,
@@ -100,6 +106,7 @@ export default function MobileReviewSettingsDrawer({
     "views/recording",
     "components/dialog",
     "views/replay",
+    "common",
   ]);
   const navigate = useNavigate();
   const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
@@ -108,6 +115,15 @@ export default function MobileReviewSettingsDrawer({
     "1" | "5" | "custom" | "timeline"
   >("1");
   const [isDebugReplayStarting, setIsDebugReplayStarting] = useState(false);
+  const [selectedShareOption, setSelectedShareOption] = useState<
+    "current" | "custom"
+  >("current");
+  const [shareTimestampAtOpen, setShareTimestampAtOpen] = useState(
+    Math.floor(currentTime),
+  );
+  const [customShareTimestamp, setCustomShareTimestamp] = useState(
+    Math.floor(currentTime),
+  );
 
   // exports
 
@@ -323,6 +339,27 @@ export default function MobileReviewSettingsDrawer({
             {t("export")}
           </Button>
         )}
+        {features.includes("share-timestamp") && (
+          <Button
+            className="flex w-full items-center justify-center gap-2"
+            aria-label={t("recording.shareTimestamp.label", {
+              ns: "components/dialog",
+            })}
+            onClick={() => {
+              const initialTimestamp = Math.floor(currentTime);
+
+              setShareTimestampAtOpen(initialTimestamp);
+              setCustomShareTimestamp(initialTimestamp);
+              setSelectedShareOption("current");
+              setDrawerMode("share-timestamp");
+            }}
+          >
+            <LuShare2 className="size-5 rounded-md bg-secondary-foreground stroke-secondary p-1" />
+            {t("recording.shareTimestamp.label", {
+              ns: "components/dialog",
+            })}
+          </Button>
+        )}
         {features.includes("calendar") && (
           <Button
             className="flex w-full items-center justify-center gap-2"
@@ -535,6 +572,28 @@ export default function MobileReviewSettingsDrawer({
         }}
       />
     );
+  } else if (drawerMode == "share-timestamp") {
+    content = (
+      <div className="w-full">
+        <div className="relative h-8 w-full">
+          <div className="absolute left-1/2 -translate-x-1/2 text-muted-foreground">
+            {t("recording.shareTimestamp.title", { ns: "components/dialog" })}
+          </div>
+        </div>
+        <ShareTimestampContent
+          currentTime={shareTimestampAtOpen}
+          selectedOption={selectedShareOption}
+          setSelectedOption={setSelectedShareOption}
+          customTimestamp={customShareTimestamp}
+          setCustomTimestamp={setCustomShareTimestamp}
+          onShareTimestamp={(timestamp) => {
+            onShareTimestamp(timestamp);
+            setDrawerMode("none");
+          }}
+          onCancel={() => setDrawerMode("select")}
+        />
+      </div>
+    );
   }
 
   return (