web/public/locales/en/common.json

@@ -131,6 +131,8 @@
     "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,13 +100,11 @@
   },
   "recording": {
     "shareTimestamp": {
-      "label": "Share Timestamp",
       "title": "Share Review 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.",
+      "description": "Share the current player position or choose a custom timestamp.",
       "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("recording.shareTimestamp.label", { ns: "components/dialog" })}
+          {t("button.shareTimestamp", { ns: "common" })}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={onDebugReplayClick}>
           {t("title", { ns: "views/replay" })}

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -26,7 +26,6 @@ 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"
@@ -71,7 +70,7 @@ type MobileReviewSettingsDrawerProps = {
   debugReplayRange?: TimeRange;
   setDebugReplayMode?: (mode: ExportMode) => void;
   setDebugReplayRange?: (range: TimeRange | undefined) => void;
-  onShareTimestamp?: (timestamp: number) => void;
+  onShareTimestampClick?: () => void;
   onUpdateFilter: (filter: ReviewFilter) => void;
   setRange: (range: TimeRange | undefined) => void;
   setMode: (mode: ExportMode) => void;
@@ -95,7 +94,7 @@ export default function MobileReviewSettingsDrawer({
   debugReplayRange,
   setDebugReplayMode = () => {},
   setDebugReplayRange = () => {},
-  onShareTimestamp = () => {},
+  onShareTimestampClick = () => {},
   onUpdateFilter,
   setRange,
   setMode,
@@ -113,15 +112,6 @@ 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
 
@@ -294,22 +284,14 @@ export default function MobileReviewSettingsDrawer({
         {features.includes("share-timestamp") && (
           <Button
             className="flex w-full items-center justify-center gap-2"
-            aria-label={t("recording.shareTimestamp.label", {
-              ns: "components/dialog",
-            })}
+            aria-label={t("button.shareTimestamp", { ns: "common" })}
             onClick={() => {
-              const initialTimestamp = Math.floor(currentTime);
-
-              setShareTimestampAtOpen(initialTimestamp);
-              setCustomShareTimestamp(initialTimestamp);
-              setSelectedShareOption("current");
-              setDrawerMode("share-timestamp");
+              setDrawerMode("none");
+              onShareTimestampClick();
             }}
           >
             <LuShare2 className="size-5 rounded-md bg-secondary-foreground stroke-secondary p-1" />
-            {t("recording.shareTimestamp.label", {
-              ns: "components/dialog",
-            })}
+            {t("button.shareTimestamp", { ns: "common" })}
           </Button>
         )}
         {features.includes("calendar") && (
@@ -514,34 +496,6 @@ 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,7 +3,6 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
@@ -15,9 +14,7 @@ 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";
@@ -25,16 +22,13 @@ 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;
 };
 
@@ -42,17 +36,26 @@ 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) => onOpenChange(nextOpen),
-    [onOpenChange],
+    (nextOpen: boolean) => {
+      if (nextOpen) {
+        setSelectedOption("current");
+        setCustomTimestamp(Math.floor(currentTime));
+      }
+
+      onOpenChange(nextOpen);
+    },
+    [currentTime, onOpenChange],
   );
 
   const content = (
@@ -66,7 +69,6 @@ export default function ShareTimestampDialog({
         onShareTimestamp(timestamp);
         onOpenChange(false);
       }}
-      onCancel={() => onOpenChange(false)}
     />
   );
 
@@ -106,17 +108,15 @@ type ShareTimestampContentProps = {
   customTimestamp: number;
   setCustomTimestamp: (timestamp: number) => void;
   onShareTimestamp: (timestamp: number) => void;
-  onCancel?: () => void;
 };
 
-export function ShareTimestampContent({
+function ShareTimestampContent({
   currentTime,
   selectedOption,
   setSelectedOption,
   customTimestamp,
   setCustomTimestamp,
   onShareTimestamp,
-  onCancel,
 }: Readonly<ShareTimestampContentProps>) {
   const { t } = useTranslation(["common", "components/dialog"]);
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -140,8 +140,6 @@ export function ShareTimestampContent({
         </div>
       </div>
 
-      {isDesktop && <Separator className="my-4 bg-secondary" />}
-
       <RadioGroup
         className="mt-4 flex flex-col gap-4"
         value={selectedOption}
@@ -193,32 +191,16 @@ export function ShareTimestampContent({
         </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>
-        )}
+      <div className="mt-4">
         <Button
-          className={cn(!isDesktop && "w-full")}
+          className="w-full justify-between gap-3"
           variant="select"
-          size="sm"
           onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
         >
-          {t("recording.shareTimestamp.button", { ns: "components/dialog" })}
+          <span>{t("button.shareTimestampUrl", { ns: "common" })}</span>
+          <LuShare2 className="size-4" />
         </Button>
-      </DialogFooter>
+      </div>
     </div>
   );
 }
@@ -293,10 +275,7 @@ function CustomTimestampSelector({
 
   return (
     <div
-      className={cn(
-        "flex items-center rounded-lg bg-secondary text-secondary-foreground",
-        isDesktop ? "gap-2 px-2" : "pl-2",
-      )}
+      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">
@@ -310,7 +289,7 @@ function CustomTimestampSelector({
         >
           <PopoverTrigger asChild>
             <Button
-              className={cn("text-primary", !isDesktop && "text-xs")}
+              className={`text-primary ${isDesktop ? "" : "text-xs"}`}
               aria-label={label}
               variant={selectorOpen ? "select" : "default"}
               size="sm"
@@ -319,7 +298,7 @@ function CustomTimestampSelector({
               {formattedTimestamp}
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="flex flex-col items-center">
+          <PopoverContent className="flex flex-col items-center" disablePortal>
             <TimezoneAwareCalendar
               timezone={config?.ui.timezone}
               selectedDay={new Date(displayTimestamp * 1000)}

web/src/pages/Events.tsx

@@ -272,21 +272,19 @@ export default function Events() {
       ...reviewFilter,
       ...getReviewDayBounds(new Date(reviewLink.timestamp * 1000)),
     });
-    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);
+    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,
+    );
 
-    return true;
+    return false;
   });
 
   // review paging

web/src/utils/recordingReviewUrl.ts

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

web/src/views/recording/RecordingView.tsx

@@ -210,15 +210,6 @@ 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
 
@@ -695,26 +686,15 @@ export function RecordingView({
                 setMotionOnly={() => {}}
               />
             )}
-            {isDesktop && (
-              <ShareTimestampDialog
-                currentTime={shareTimestampAtOpen}
-                open={shareTimestampOpen}
-                onOpenChange={setShareTimestampOpen}
-                selectedOption={shareTimestampOption}
-                setSelectedOption={setShareTimestampOption}
-                customTimestamp={customShareTimestamp}
-                setCustomTimestamp={setCustomShareTimestamp}
-                onShareTimestamp={onShareReviewLink}
-              />
-            )}
+            <ShareTimestampDialog
+              currentTime={currentTime}
+              open={shareTimestampOpen}
+              onOpenChange={setShareTimestampOpen}
+              onShareTimestamp={onShareReviewLink}
+            />
             {isDesktop && (
               <ActionsDropdown
                 onShareTimestampClick={() => {
-                  const initialTimestamp = Math.floor(currentTime);
-
-                  setShareTimestampAtOpen(initialTimestamp);
-                  setShareTimestampOption("current");
-                  setCustomShareTimestamp(initialTimestamp);
                   setShareTimestampOpen(true);
                 }}
                 onDebugReplayClick={() => {
@@ -796,7 +776,9 @@ export function RecordingView({
                   mainControllerRef.current?.pause();
                 }
               }}
-              onShareTimestamp={onShareReviewLink}
+              onShareTimestampClick={() => {
+                setShareTimestampOpen(true);
+              }}
               onUpdateFilter={updateFilter}
               setRange={setExportRange}
               setMode={setExportMode}