Defer setRecording and return true from hook for cleanup

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

web/public/locales/en/common.json

@@ -131,8 +131,6 @@
     "close": "Close",
     "copy": "Copy",
     "copiedToClipboard": "Copied to clipboard",
-    "shareTimestamp": "Share Timestamp",
-    "shareTimestampUrl": "Share Timestamp URL",
     "back": "Back",
     "history": "History",
     "fullscreen": "Fullscreen",

web/public/locales/en/components/dialog.json

@@ -100,11 +100,13 @@
   },
   "recording": {
     "shareTimestamp": {
+      "label": "Share Timestamp",
       "title": "Share Review Timestamp",
-      "description": "Share the current player position or choose a custom timestamp.",
+      "description": "Share a timestamped URL of current player position or choose a custom timestamp. Note that this is not a public share URL and is only accessible to users with access to Frigate and this camera.",
       "current": "Current Player Timestamp",
       "custom": "Custom Timestamp",
       "customDescription": "Pick a specific point in time to share.",
+      "button": "Share Timestamp URL",
       "shareTitle": "Frigate Review Timestamp: {{camera}}"
     },
     "confirmDelete": {

web/src/components/overlay/ActionsDropdown.tsx

@@ -40,7 +40,7 @@ export default function ActionsDropdown({
           {t("menu.export", { ns: "common" })}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={onShareTimestampClick}>
-          {t("button.shareTimestamp", { ns: "common" })}
+          {t("recording.shareTimestamp.label", { ns: "components/dialog" })}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={onDebugReplayClick}>
           {t("title", { ns: "views/replay" })}

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -26,6 +26,7 @@ import SaveExportOverlay from "./SaveExportOverlay";
 import { isIOS, isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { ShareTimestampContent } from "./ShareTimestampDialog";
 
 type DrawerMode =
   | "none"
@@ -70,7 +71,7 @@ type MobileReviewSettingsDrawerProps = {
   debugReplayRange?: TimeRange;
   setDebugReplayMode?: (mode: ExportMode) => void;
   setDebugReplayRange?: (range: TimeRange | undefined) => void;
-  onShareTimestampClick?: () => void;
+  onShareTimestamp?: (timestamp: number) => void;
   onUpdateFilter: (filter: ReviewFilter) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
@@ -94,7 +95,7 @@ export default function MobileReviewSettingsDrawer({
   debugReplayRange,
   setDebugReplayMode = () => {},
   setDebugReplayRange = () => {},
-  onShareTimestampClick = () => {},
+  onShareTimestamp = () => {},
   onUpdateFilter,
   setRange,
   setMode,
@@ -112,6 +113,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
 
@@ -284,14 +294,22 @@ export default function MobileReviewSettingsDrawer({
         {features.includes("share-timestamp") && (
           <Button
             className="flex w-full items-center justify-center gap-2"
-            aria-label={t("button.shareTimestamp", { ns: "common" })}
+            aria-label={t("recording.shareTimestamp.label", {
+              ns: "components/dialog",
+            })}
             onClick={() => {
-              setDrawerMode("none");
-              onShareTimestampClick();
+              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("button.shareTimestamp", { ns: "common" })}
+            {t("recording.shareTimestamp.label", {
+              ns: "components/dialog",
+            })}
           </Button>
         )}
         {features.includes("calendar") && (
@@ -496,6 +514,34 @@ 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-0 text-selected"
+            onClick={() => setDrawerMode("select")}
+          >
+            {t("button.back", { ns: "common" })}
+          </div>
+          <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

@@ -3,6 +3,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
@@ -14,7 +15,9 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
 import { useFormattedTimestamp } 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";
@@ -22,13 +25,16 @@ 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;
+  selectedOption: "current" | "custom";
+  setSelectedOption: (option: "current" | "custom") => void;
+  customTimestamp: number;
+  setCustomTimestamp: (timestamp: number) => void;
   onShareTimestamp: (timestamp: number) => void;
 };
 
@@ -36,26 +42,17 @@ export default function ShareTimestampDialog({
   currentTime,
   open,
   onOpenChange,
+  selectedOption,
+  setSelectedOption,
+  customTimestamp,
+  setCustomTimestamp,
   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],
+    (nextOpen: boolean) => onOpenChange(nextOpen),
+    [onOpenChange],
   );
 
   const content = (
@@ -69,6 +66,7 @@ export default function ShareTimestampDialog({
         onShareTimestamp(timestamp);
         onOpenChange(false);
       }}
+      onCancel={() => onOpenChange(false)}
     />
   );
 
@@ -108,15 +106,17 @@ type ShareTimestampContentProps = {
   customTimestamp: number;
   setCustomTimestamp: (timestamp: number) => void;
   onShareTimestamp: (timestamp: number) => void;
+  onCancel?: () => void;
 };
 
-function ShareTimestampContent({
+export function ShareTimestampContent({
   currentTime,
   selectedOption,
   setSelectedOption,
   customTimestamp,
   setCustomTimestamp,
   onShareTimestamp,
+  onCancel,
 }: Readonly<ShareTimestampContentProps>) {
   const { t } = useTranslation(["common", "components/dialog"]);
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -140,6 +140,8 @@ function ShareTimestampContent({
         </div>
       </div>
 
+      {isDesktop && <Separator className="my-4 bg-secondary" />}
+
       <RadioGroup
         className="mt-4 flex flex-col gap-4"
         value={selectedOption}
@@ -191,16 +193,32 @@ function ShareTimestampContent({
         </div>
       </RadioGroup>
 
-      <div className="mt-4">
+      {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="w-full justify-between gap-3"
+          className={cn(!isDesktop && "w-full")}
           variant="select"
+          size="sm"
           onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
         >
-          <span>{t("button.shareTimestampUrl", { ns: "common" })}</span>
-          <LuShare2 className="size-4" />
+          {t("recording.shareTimestamp.button", { ns: "components/dialog" })}
         </Button>
-      </div>
+      </DialogFooter>
     </div>
   );
 }
@@ -275,7 +293,10 @@ function CustomTimestampSelector({
 
   return (
     <div
-      className={`flex items-center rounded-lg bg-secondary text-secondary-foreground ${isDesktop ? "gap-2 px-2" : "pl-2"}`}
+      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">
@@ -289,7 +310,7 @@ function CustomTimestampSelector({
         >
           <PopoverTrigger asChild>
             <Button
-              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
+              className={cn("text-primary", !isDesktop && "text-xs")}
               aria-label={label}
               variant={selectorOpen ? "select" : "default"}
               size="sm"
@@ -298,7 +319,7 @@ function CustomTimestampSelector({
               {formattedTimestamp}
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="flex flex-col items-center" disablePortal>
+          <PopoverContent className="flex flex-col items-center">
             <TimezoneAwareCalendar
               timezone={config?.ui.timezone}
               selectedDay={new Date(displayTimestamp * 1000)}

web/src/pages/Events.tsx

@@ -272,19 +272,21 @@ export default function Events() {
       ...reviewFilter,
       ...getReviewDayBounds(new Date(reviewLink.timestamp * 1000)),
     });
-    setRecording(
-      {
-        camera: reviewLink.camera,
-        startTime: reviewLink.timestamp,
-        // severity not actually applicable here, but the type requires it
-        // this pattern is also used LiveCameraView to enter recording view
-        severity: "alert",
-        timelineType: notificationTab,
-      },
-      true,
-    );
+    globalThis.setTimeout(() => {
+      setRecording(
+        {
+          camera: reviewLink.camera,
+          startTime: reviewLink.timestamp,
+          // severity not actually applicable here, but the type requires it
+          // this pattern is also used LiveCameraView to enter recording view
+          severity: "alert",
+          timelineType: notificationTab,
+        },
+        true,
+      );
+    }, 0);
 
-    return false;
+    return true;
   });
 
   // review paging

web/src/utils/recordingReviewUrl.ts

@@ -1,3 +1,5 @@
+import { baseUrl } from "@/api/baseUrl.ts";
+
 export const RECORDING_REVIEW_LINK_PARAM = "timestamp";
 
 export type RecordingReviewLinkState = {
@@ -12,21 +14,30 @@ export function parseRecordingReviewLink(
     return undefined;
   }
 
-  const [camera, timestamp] = value.split("|");
+  const separatorIndex = value.lastIndexOf("_");
+
+  if (separatorIndex <= 0 || separatorIndex == value.length - 1) {
+    return undefined;
+  }
+
+  const camera = value.slice(0, separatorIndex);
+  const timestamp = value.slice(separatorIndex + 1);
 
   if (!camera || !timestamp) {
     return undefined;
   }
 
   const parsedTimestamp = Number(timestamp);
+  const now = Math.floor(Date.now() / 1000);
 
-  if (!Number.isFinite(parsedTimestamp)) {
+  if (!Number.isFinite(parsedTimestamp) || parsedTimestamp <= 0) {
     return undefined;
   }
 
   return {
     camera,
-    timestamp: Math.floor(parsedTimestamp),
+    // clamp future timestamps to now
+    timestamp: Math.min(Math.floor(parsedTimestamp), now),
   };
 }
 
@@ -34,11 +45,12 @@ export function createRecordingReviewUrl(
   pathname: string,
   state: RecordingReviewLinkState,
 ): string {
-  const url = new URL(globalThis.location.href);
-  const normalizedPathname = pathname.startsWith("/")
-    ? pathname
-    : `/${pathname}`;
-  const reviewLink = `${state.camera}|${Math.floor(state.timestamp)}`;
+  const url = new URL(baseUrl);
+  url.pathname = pathname.startsWith("/") ? pathname : `/${pathname}`;
+  url.searchParams.set(
+    RECORDING_REVIEW_LINK_PARAM,
+    `${state.camera}_${Math.floor(state.timestamp)}`,
+  );
 
-  return `${url.origin}${normalizedPathname}?${RECORDING_REVIEW_LINK_PARAM}=${reviewLink}`;
+  return url.toString();
 }

web/src/views/recording/RecordingView.tsx

@@ -210,6 +210,15 @@ export function RecordingView({
   const [debugReplayMode, setDebugReplayMode] = useState<ExportMode>("none");
   const [debugReplayRange, setDebugReplayRange] = useState<TimeRange>();
   const [shareTimestampOpen, setShareTimestampOpen] = useState(false);
+  const [shareTimestampAtOpen, setShareTimestampAtOpen] = useState(
+    Math.floor(startTime),
+  );
+  const [shareTimestampOption, setShareTimestampOption] = useState<
+    "current" | "custom"
+  >("current");
+  const [customShareTimestamp, setCustomShareTimestamp] = useState(
+    Math.floor(startTime),
+  );
 
   // move to next clip
 
@@ -686,15 +695,26 @@ export function RecordingView({
                 setMotionOnly={() => {}}
               />
             )}
-            <ShareTimestampDialog
-              currentTime={currentTime}
-              open={shareTimestampOpen}
-              onOpenChange={setShareTimestampOpen}
-              onShareTimestamp={onShareReviewLink}
-            />
+            {isDesktop && (
+              <ShareTimestampDialog
+                currentTime={shareTimestampAtOpen}
+                open={shareTimestampOpen}
+                onOpenChange={setShareTimestampOpen}
+                selectedOption={shareTimestampOption}
+                setSelectedOption={setShareTimestampOption}
+                customTimestamp={customShareTimestamp}
+                setCustomTimestamp={setCustomShareTimestamp}
+                onShareTimestamp={onShareReviewLink}
+              />
+            )}
             {isDesktop && (
               <ActionsDropdown
                 onShareTimestampClick={() => {
+                  const initialTimestamp = Math.floor(currentTime);
+
+                  setShareTimestampAtOpen(initialTimestamp);
+                  setShareTimestampOption("current");
+                  setCustomShareTimestamp(initialTimestamp);
                   setShareTimestampOpen(true);
                 }}
                 onDebugReplayClick={() => {
@@ -776,9 +796,7 @@ export function RecordingView({
                   mainControllerRef.current?.pause();
                 }
               }}
-              onShareTimestampClick={() => {
-                setShareTimestampOpen(true);
-              }}
+              onShareTimestamp={onShareReviewLink}
               onUpdateFilter={updateFilter}
               setRange={setExportRange}
               setMode={setExportMode}