Implement share timestamp dialog

web/src/components/overlay/ActionsDropdown.tsx

@@ -11,11 +11,13 @@ import { FaFilm } from "react-icons/fa6";
 type ActionsDropdownProps = {
   onDebugReplayClick: () => void;
   onExportClick: () => void;
+  onShareTimestampClick: () => void;
 };
 
 export default function ActionsDropdown({
   onDebugReplayClick,
   onExportClick,
+  onShareTimestampClick,
 }: ActionsDropdownProps) {
   const { t } = useTranslation(["components/dialog", "views/replay", "common"]);
 
@@ -37,6 +39,9 @@ export default function ActionsDropdown({
         <DropdownMenuItem onClick={onExportClick}>
           {t("menu.export", { ns: "common" })}
         </DropdownMenuItem>
+        <DropdownMenuItem onClick={onShareTimestampClick}>
+          Share Timestamp
+        </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 } from "./ExportDialog";
 import {
@@ -33,13 +33,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[] = [
@@ -47,6 +49,7 @@ const DEFAULT_DRAWER_FEATURES: DrawerFeatures[] = [
   "calendar",
   "filter",
   "debug-replay",
+  "share-timestamp",
 ];
 
 type MobileReviewSettingsDrawerProps = {
@@ -67,6 +70,7 @@ type MobileReviewSettingsDrawerProps = {
   debugReplayRange?: TimeRange;
   setDebugReplayMode?: (mode: ExportMode) => void;
   setDebugReplayRange?: (range: TimeRange | undefined) => void;
+  onShareTimestampClick?: () => void;
   onUpdateFilter: (filter: ReviewFilter) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
@@ -90,6 +94,7 @@ export default function MobileReviewSettingsDrawer({
   debugReplayRange,
   setDebugReplayMode = () => {},
   setDebugReplayRange = () => {},
+  onShareTimestampClick = () => {},
   onUpdateFilter,
   setRange,
   setMode,
@@ -275,6 +280,19 @@ export default function MobileReviewSettingsDrawer({
             {t("export")}
           </Button>
         )}
+        {features.includes("share-timestamp") && (
+          <Button
+            className="flex w-full items-center justify-center gap-2"
+            aria-label="Share timestamp"
+            onClick={() => {
+              setDrawerMode("none");
+              onShareTimestampClick();
+            }}
+          >
+            <LuShare2 className="size-5 rounded-md bg-secondary-foreground stroke-secondary p-1" />
+            Share Timestamp
+          </Button>
+        )}
         {features.includes("calendar") && (
           <Button
             className="flex w-full items-center justify-center gap-2"

web/src/components/overlay/ShareTimestampDialog.tsx

@@ -0,0 +1,326 @@
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  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 { useFormattedTimestamp } from "@/hooks/use-date-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 { LuShare2 } from "react-icons/lu";
+import { useTranslation } from "react-i18next";
+
+type ShareTimestampDialogProps = {
+  currentTime: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onShareTimestamp: (timestamp: number) => void;
+};
+
+export default function ShareTimestampDialog({
+  currentTime,
+  open,
+  onOpenChange,
+  onShareTimestamp,
+}: Readonly<ShareTimestampDialogProps>) {
+  const { t } = useTranslation(["components/dialog"]);
+  const [selectedOption, setSelectedOption] = useState<"current" | "custom">(
+    "current",
+  );
+  const [customTimestamp, setCustomTimestamp] = useState(
+    Math.floor(currentTime),
+  );
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen) {
+        setSelectedOption("current");
+        setCustomTimestamp(Math.floor(currentTime));
+      }
+
+      onOpenChange(nextOpen);
+    },
+    [currentTime, onOpenChange],
+  );
+
+  const content = (
+    <ShareTimestampContent
+      currentTime={currentTime}
+      selectedOption={selectedOption}
+      setSelectedOption={setSelectedOption}
+      customTimestamp={customTimestamp}
+      setCustomTimestamp={setCustomTimestamp}
+      onShareTimestamp={(timestamp) => {
+        onShareTimestamp(timestamp);
+        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>
+            {t("recording.shareTimestamp.title", { ns: "components/dialog" })}
+          </DialogTitle>
+        </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;
+};
+
+function ShareTimestampContent({
+  currentTime,
+  selectedOption,
+  setSelectedOption,
+  customTimestamp,
+  setCustomTimestamp,
+  onShareTimestamp,
+}: ShareTimestampContentProps) {
+  const { t } = useTranslation(["common"]);
+  const { data: config } = useSWR<FrigateConfig>("config");
+  const currentTimestampLabel = useFormattedTimestamp(
+    currentTime,
+    config?.ui.time_format == "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 font-medium">Share Review Timestamp</div>
+        <div className="text-sm text-muted-foreground">
+          Share the current player position or choose a custom timestamp.
+        </div>
+      </div>
+
+      <RadioGroup
+        className="mt-4 flex flex-col gap-4"
+        value={selectedOption}
+        onValueChange={(value) =>
+          setSelectedOption(value as "current" | "custom")
+        }
+      >
+        <div className="space-y-2 rounded-lg border bg-secondary/40 p-3">
+          <div className="flex items-start gap-2">
+            <RadioGroupItem id="share-current" value="current" />
+            <Label className="cursor-pointer space-y-1" htmlFor="share-current">
+              <div className="text-sm font-medium">
+                Current Player Timestamp
+              </div>
+              <div className="text-sm text-muted-foreground">
+                {currentTimestampLabel}
+              </div>
+            </Label>
+          </div>
+        </div>
+
+        <div className="space-y-3 rounded-lg border bg-secondary/40 p-3">
+          <div className="flex items-start gap-2">
+            <RadioGroupItem id="share-custom" value="custom" />
+            <Label className="cursor-pointer space-y-1" htmlFor="share-custom">
+              <div className="text-sm font-medium">Custom Timestamp</div>
+              <div className="text-sm text-muted-foreground">
+                Pick a specific point in time to share.
+              </div>
+            </Label>
+          </div>
+          {selectedOption === "custom" && (
+            <CustomTimestampSelector
+              timestamp={customTimestamp}
+              setTimestamp={setCustomTimestamp}
+              label="Custom Timestamp"
+            />
+          )}
+        </div>
+      </RadioGroup>
+
+      <div className="mt-4">
+        <Button
+          className="w-full justify-between gap-3"
+          variant="select"
+          onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
+        >
+          <span>Share Timestamp Link</span>
+          <LuShare2 className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+type CustomTimestampSelectorProps = {
+  timestamp: number;
+  setTimestamp: (timestamp: number) => void;
+  label: string;
+};
+
+function CustomTimestampSelector({
+  timestamp,
+  setTimestamp,
+  label,
+}: CustomTimestampSelectorProps) {
+  const { t } = useTranslation(["common"]);
+  const { data: config } = useSWR<FrigateConfig>("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;
+    }
+
+    return (timezoneOffset - localTimeOffset) * 60;
+  }, [timezoneOffset, localTimeOffset]);
+
+  const displayTimestamp = useMemo(
+    () => timestamp + offsetDeltaSeconds,
+    [timestamp, offsetDeltaSeconds],
+  );
+
+  const formattedTimestamp = useFormattedTimestamp(
+    displayTimestamp,
+    config?.ui.time_format == "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) => {
+      setTimestamp(date.getTime() / 1000 - offsetDeltaSeconds);
+    },
+    [offsetDeltaSeconds, setTimestamp],
+  );
+
+  return (
+    <div
+      className={`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={`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" disablePortal>
+            <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(
+                  parseInt(hour),
+                  parseInt(minute),
+                  parseInt(second ?? "0"),
+                  0,
+                );
+                setFromDisplayDate(nextTimestamp);
+              }}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}

web/src/views/recording/RecordingView.tsx

@@ -42,7 +42,6 @@ import {
   isTablet,
 } from "react-device-detect";
 import { IoMdArrowRoundBack } from "react-icons/io";
-import { LuCopy } from "react-icons/lu";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Toaster } from "@/components/ui/sonner";
 import useSWR from "swr";
@@ -78,8 +77,8 @@ import {
   GenAISummaryDialog,
   GenAISummaryChip,
 } from "@/components/overlay/chip/GenAISummaryChip";
-import copy from "copy-to-clipboard";
+import ShareTimestampDialog from "@/components/overlay/ShareTimestampDialog";
-import { toast } from "sonner";
+import { shareOrCopy } from "@/utils/browserUtil";
 import { createRecordingReviewUrl } from "@/utils/recordingReviewUrl";
 
 const DATA_REFRESH_TIME = 600000; // 10 minutes
@@ -211,6 +210,7 @@ export function RecordingView({
 
   const [debugReplayMode, setDebugReplayMode] = useState<ExportMode>("none");
   const [debugReplayRange, setDebugReplayRange] = useState<TimeRange>();
+  const [shareTimestampOpen, setShareTimestampOpen] = useState(false);
 
   // move to next clip
 
@@ -333,21 +333,21 @@ export function RecordingView({
     manuallySetCurrentTime(startTime);
   }, [startTime, manuallySetCurrentTime]);
 
-  const onCopyReviewLink = useCallback(() => {
+  const onShareReviewLink = useCallback(
-    const reviewUrl = createRecordingReviewUrl(
+    (timestamp: number) => {
-      location.pathname,
+      const reviewUrl = createRecordingReviewUrl(
-      {
+        location.pathname,
-        camera: mainCamera,
+        {
-        timestamp: Math.floor(currentTime),
+          camera: mainCamera,
-      },
+          timestamp: Math.floor(timestamp),
-      config?.ui.timezone,
+        },
-    );
+        config?.ui.timezone,
+      );
 
-    copy(reviewUrl);
+      shareOrCopy(reviewUrl, `Frigate Review Timestamp: ${mainCamera}`);
-    toast.success(t("toast.copyUrlToClipboard", { ns: "common" }), {
+    },
-      position: "top-center",
+    [location.pathname, mainCamera, config?.ui.timezone],
-    });
+  );
-  }, [location.pathname, mainCamera, currentTime, config?.ui.timezone, t]);
 
   useEffect(() => {
     if (!scrubbing) {
@@ -695,21 +695,17 @@ export function RecordingView({
                 setMotionOnly={() => {}}
               />
             )}
-            <Button
+            <ShareTimestampDialog
-              className="flex items-center gap-2.5 rounded-lg"
+              currentTime={currentTime}
-              aria-label={t("button.copy", { ns: "common" })}
+              open={shareTimestampOpen}
-              size="sm"
+              onOpenChange={setShareTimestampOpen}
-              onClick={onCopyReviewLink}
+              onShareTimestamp={onShareReviewLink}
-            >
+            />
-              <LuCopy className="size-4 text-secondary-foreground" />
-              {isDesktop && (
-                <div className="text-primary">
-                  {t("button.copy", { ns: "common" })}
-                </div>
-              )}
-            </Button>
             {isDesktop && (
               <ActionsDropdown
+                onShareTimestampClick={() => {
+                  setShareTimestampOpen(true);
+                }}
                 onDebugReplayClick={() => {
                   const now = new Date(timeRange.before * 1000);
                   now.setHours(now.getHours() - 1);
@@ -789,6 +785,9 @@ export function RecordingView({
                   mainControllerRef.current?.pause();
                 }
               }}
+              onShareTimestampClick={() => {
+                setShareTimestampOpen(true);
+              }}
               onUpdateFilter={updateFilter}
               setRange={setExportRange}
               setMode={setExportMode}