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

@@ -11,12 +11,14 @@ import { FaFilm } from "react-icons/fa6";
 type ActionsDropdownProps = {
   onDebugReplayClick: () => void;
   onExportClick: () => void;
+  onShareTimestampClick: () => void;
 };
 
 export default function ActionsDropdown({
   onDebugReplayClick,
   onExportClick,
-}: ActionsDropdownProps) {
+  onShareTimestampClick,
+}: Readonly<ActionsDropdownProps>) {
   const { t } = useTranslation(["components/dialog", "views/replay", "common"]);
 
   return (
@@ -37,6 +39,9 @@ export default function ActionsDropdown({
         <DropdownMenuItem onClick={onExportClick}>
           {t("menu.export", { ns: "common" })}
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={onShareTimestampClick}>
+          {t("recording.shareTimestamp.label", { ns: "components/dialog" })}
+        </DropdownMenuItem>
         <DropdownMenuItem onClick={onDebugReplayClick}>
           {t("title", { ns: "views/replay" })}
         </DropdownMenuItem>

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 (

web/src/components/overlay/ShareTimestampDialog.tsx

@@ -0,0 +1,369 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Drawer, DrawerContent } from "@/components/ui/drawer";
+import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
+import { useFormattedTimestamp, useTimeFormat } from "@/hooks/use-date-utils";
+import { cn } from "@/lib/utils";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { getUTCOffset } from "@/utils/dateUtil";
+import { useCallback, useMemo, useState } from "react";
+import useSWR from "swr";
+import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
+import { FaCalendarAlt } from "react-icons/fa";
+import { isDesktop, isIOS, isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+
+type ShareTimestampDialogProps = {
+  currentTime: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedOption: "current" | "custom";
+  setSelectedOption: (option: "current" | "custom") => void;
+  customTimestamp: number;
+  setCustomTimestamp: (timestamp: number) => void;
+  onShareTimestamp: (timestamp: number) => void;
+};
+
+export default function ShareTimestampDialog({
+  currentTime,
+  open,
+  onOpenChange,
+  selectedOption,
+  setSelectedOption,
+  customTimestamp,
+  setCustomTimestamp,
+  onShareTimestamp,
+}: Readonly<ShareTimestampDialogProps>) {
+  const { t } = useTranslation(["components/dialog"]);
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => onOpenChange(nextOpen),
+    [onOpenChange],
+  );
+
+  const content = (
+    <ShareTimestampContent
+      currentTime={currentTime}
+      selectedOption={selectedOption}
+      setSelectedOption={setSelectedOption}
+      customTimestamp={customTimestamp}
+      setCustomTimestamp={setCustomTimestamp}
+      onShareTimestamp={(timestamp) => {
+        onShareTimestamp(timestamp);
+        onOpenChange(false);
+      }}
+      onCancel={() => onOpenChange(false)}
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={handleOpenChange}>
+        <DrawerContent className="mx-4 rounded-lg px-4 pb-4 md:rounded-2xl">
+          {content}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:rounded-lg md:rounded-2xl">
+        <DialogHeader>
+          <DialogTitle className="whitespace-nowrap">
+            {t("recording.shareTimestamp.title", { ns: "components/dialog" })}
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            {t("recording.shareTimestamp.description", {
+              ns: "components/dialog",
+            })}
+          </DialogDescription>
+        </DialogHeader>
+        {content}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+type ShareTimestampContentProps = {
+  currentTime: number;
+  selectedOption: "current" | "custom";
+  setSelectedOption: (option: "current" | "custom") => void;
+  customTimestamp: number;
+  setCustomTimestamp: (timestamp: number) => void;
+  onShareTimestamp: (timestamp: number) => void;
+  onCancel?: () => void;
+};
+
+export function ShareTimestampContent({
+  currentTime,
+  selectedOption,
+  setSelectedOption,
+  customTimestamp,
+  setCustomTimestamp,
+  onShareTimestamp,
+  onCancel,
+}: Readonly<ShareTimestampContentProps>) {
+  const { t } = useTranslation(["common", "components/dialog"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const timeFormat = useTimeFormat(config);
+  const currentTimestampLabel = useFormattedTimestamp(
+    currentTime,
+    timeFormat == "24hour"
+      ? t("time.formattedTimestamp.24hour")
+      : t("time.formattedTimestamp.12hour"),
+    config?.ui.timezone,
+  );
+  const selectedTimestamp =
+    selectedOption === "current" ? currentTime : customTimestamp;
+
+  return (
+    <div className="w-full">
+      <div className="space-y-1">
+        <div className="text-sm text-muted-foreground">
+          {t("recording.shareTimestamp.description", {
+            ns: "components/dialog",
+          })}
+        </div>
+      </div>
+
+      {isDesktop && <Separator className="my-4 bg-secondary" />}
+
+      <RadioGroup
+        className="mt-4 flex flex-col gap-4"
+        value={selectedOption}
+        onValueChange={(value) =>
+          setSelectedOption(value as "current" | "custom")
+        }
+      >
+        <div className="flex items-center gap-2">
+          <RadioGroupItem
+            className={
+              selectedOption == "current"
+                ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+            }
+            id="share-current"
+            value="current"
+          />
+          <Label className="cursor-pointer text-sm" htmlFor="share-current">
+            {currentTimestampLabel}
+          </Label>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <RadioGroupItem
+            className={
+              selectedOption == "custom"
+                ? "bg-selected from-selected/50 to-selected/90 text-selected"
+                : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
+            }
+            id="share-custom"
+            value="custom"
+          />
+          <div className="space-y-3">
+            <Label className="cursor-pointer text-sm" htmlFor="share-custom">
+              {t("recording.shareTimestamp.custom", {
+                ns: "components/dialog",
+              })}
+            </Label>
+            {selectedOption === "custom" && (
+              <CustomTimestampSelector
+                timestamp={customTimestamp}
+                setTimestamp={setCustomTimestamp}
+                label={t("recording.shareTimestamp.custom", {
+                  ns: "components/dialog",
+                })}
+              />
+            )}
+          </div>
+        </div>
+      </RadioGroup>
+
+      {isDesktop && <Separator className="my-4 bg-secondary" />}
+
+      <DialogFooter
+        className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-4")}
+      >
+        {onCancel && (
+          <button
+            type="button"
+            className={cn(
+              "cursor-pointer p-2 text-center",
+              !isDesktop && "w-full",
+            )}
+            onClick={onCancel}
+          >
+            {t("button.cancel", { ns: "common" })}
+          </button>
+        )}
+        <Button
+          className={cn(!isDesktop && "w-full")}
+          variant="select"
+          size="sm"
+          onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
+        >
+          {t("recording.shareTimestamp.button", { ns: "components/dialog" })}
+        </Button>
+      </DialogFooter>
+    </div>
+  );
+}
+
+type CustomTimestampSelectorProps = {
+  timestamp: number;
+  setTimestamp: (timestamp: number) => void;
+  label: string;
+};
+
+function CustomTimestampSelector({
+  timestamp,
+  setTimestamp,
+  label,
+}: Readonly<CustomTimestampSelectorProps>) {
+  const { t } = useTranslation(["common"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const timeFormat = useTimeFormat(config);
+
+  const timezoneOffset = useMemo(
+    () =>
+      config?.ui.timezone
+        ? Math.round(getUTCOffset(new Date(), config.ui.timezone))
+        : undefined,
+    [config?.ui.timezone],
+  );
+  const localTimeOffset = useMemo(
+    () =>
+      Math.round(
+        getUTCOffset(
+          new Date(),
+          Intl.DateTimeFormat().resolvedOptions().timeZone,
+        ),
+      ),
+    [],
+  );
+  const offsetDeltaSeconds = useMemo(() => {
+    if (timezoneOffset === undefined) {
+      return 0;
+    }
+
+    // the picker edits a timestamp in the configured UI timezone,
+    // but the stored value remains a unix timestamp
+    return (timezoneOffset - localTimeOffset) * 60;
+  }, [timezoneOffset, localTimeOffset]);
+
+  const displayTimestamp = useMemo(
+    () => timestamp + offsetDeltaSeconds,
+    [timestamp, offsetDeltaSeconds],
+  );
+
+  const formattedTimestamp = useFormattedTimestamp(
+    displayTimestamp,
+    timeFormat == "24hour"
+      ? t("time.formattedTimestamp.24hour")
+      : t("time.formattedTimestamp.12hour"),
+  );
+
+  const clock = useMemo(() => {
+    const date = new Date(displayTimestamp * 1000);
+    return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, "0")}`;
+  }, [displayTimestamp]);
+
+  const [selectorOpen, setSelectorOpen] = useState(false);
+
+  const setFromDisplayDate = useCallback(
+    (date: Date) => {
+      // convert the edited display time back into the underlying Unix timestamp
+      setTimestamp(date.getTime() / 1000 - offsetDeltaSeconds);
+    },
+    [offsetDeltaSeconds, setTimestamp],
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex items-center rounded-lg bg-secondary text-secondary-foreground",
+        isDesktop ? "gap-2 px-2" : "pl-2",
+      )}
+    >
+      <FaCalendarAlt />
+      <div className="flex flex-wrap items-center">
+        <Popover
+          open={selectorOpen}
+          onOpenChange={(open) => {
+            if (!open) {
+              setSelectorOpen(false);
+            }
+          }}
+        >
+          <PopoverTrigger asChild>
+            <Button
+              className={cn("text-primary", !isDesktop && "text-xs")}
+              aria-label={label}
+              variant={selectorOpen ? "select" : "default"}
+              size="sm"
+              onClick={() => setSelectorOpen(true)}
+            >
+              {formattedTimestamp}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="flex flex-col items-center">
+            <TimezoneAwareCalendar
+              timezone={config?.ui.timezone}
+              selectedDay={new Date(displayTimestamp * 1000)}
+              onSelect={(day) => {
+                if (!day) {
+                  return;
+                }
+
+                const nextTimestamp = new Date(displayTimestamp * 1000);
+                nextTimestamp.setFullYear(
+                  day.getFullYear(),
+                  day.getMonth(),
+                  day.getDate(),
+                );
+                setFromDisplayDate(nextTimestamp);
+              }}
+            />
+            <div className="my-3 h-px w-full bg-secondary" />
+            <input
+              className="text-md mx-4 w-full border border-input bg-background p-1 text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+              id="shareTimestamp"
+              type="time"
+              value={clock}
+              step={isIOS ? "60" : "1"}
+              onChange={(e) => {
+                const nextClock = e.target.value;
+                const [hour, minute, second] = isIOS
+                  ? [...nextClock.split(":"), "00"]
+                  : nextClock.split(":");
+                const nextTimestamp = new Date(displayTimestamp * 1000);
+                nextTimestamp.setHours(
+                  Number.parseInt(hour),
+                  Number.parseInt(minute),
+                  Number.parseInt(second ?? "0"),
+                  0,
+                );
+                setFromDisplayDate(nextTimestamp);
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}