Fixes/improvements based off PR review comments

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.",
       "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");
+              const initialTimestamp = Math.floor(currentTime);
-              onShareTimestampClick();
+
+              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";
@@ -22,7 +23,6 @@ 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 = {
@@ -42,15 +42,19 @@ export default function ShareTimestampDialog({
   const [selectedOption, setSelectedOption] = useState<"current" | "custom">(
     "current",
   );
-  const [customTimestamp, setCustomTimestamp] = useState(
+  const [openedCurrentTime, setOpenedCurrentTime] = useState(
     Math.floor(currentTime),
   );
+  const [customTimestamp, setCustomTimestamp] = useState(openedCurrentTime);
 
   const handleOpenChange = useCallback(
     (nextOpen: boolean) => {
       if (nextOpen) {
+        const initialTimestamp = Math.floor(currentTime);
+
+        setOpenedCurrentTime(initialTimestamp);
         setSelectedOption("current");
-        setCustomTimestamp(Math.floor(currentTime));
+        setCustomTimestamp(initialTimestamp);
       }
 
       onOpenChange(nextOpen);
@@ -60,7 +64,7 @@ export default function ShareTimestampDialog({
 
   const content = (
     <ShareTimestampContent
-      currentTime={currentTime}
+      currentTime={openedCurrentTime}
       selectedOption={selectedOption}
       setSelectedOption={setSelectedOption}
       customTimestamp={customTimestamp}
@@ -108,15 +112,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");
@@ -191,16 +197,28 @@ function ShareTimestampContent({
         </div>
       </RadioGroup>
 
-      <div className="mt-4">
+      <DialogFooter
+        className={isDesktop ? "mt-4" : "mt-4 flex flex-col-reverse gap-4"}
+      >
+        {onCancel && (
+          <Button
+            className={isDesktop ? "p-2" : "w-full"}
+            variant="ghost"
+            size="sm"
+            onClick={onCancel}
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+        )}
         <Button
-          className="w-full justify-between gap-3"
+          className={isDesktop ? "" : "w-full"}
           variant="select"
+          size="sm"
           onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
         >
-          <span>{t("button.shareTimestampUrl", { ns: "common" })}</span>
+          {t("recording.shareTimestamp.button", { ns: "components/dialog" })}
-          <LuShare2 className="size-4" />
         </Button>
-      </div>
+      </DialogFooter>
     </div>
   );
 }
@@ -298,7 +316,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/utils/recordingReviewUrl.ts

@@ -12,7 +12,14 @@ 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;
@@ -20,7 +27,7 @@ export function parseRecordingReviewLink(
 
   const parsedTimestamp = Number(timestamp);
 
-  if (!Number.isFinite(parsedTimestamp)) {
+  if (!Number.isFinite(parsedTimestamp) || parsedTimestamp <= 0) {
     return undefined;
   }
 
@@ -38,7 +45,7 @@ export function createRecordingReviewUrl(
   const normalizedPathname = pathname.startsWith("/")
     ? pathname
     : `/${pathname}`;
-  const reviewLink = `${state.camera}|${Math.floor(state.timestamp)}`;
+  const reviewLink = `${state.camera}_${Math.floor(state.timestamp)}`;
 
   return `${url.origin}${normalizedPathname}?${RECORDING_REVIEW_LINK_PARAM}=${reviewLink}`;
 }

web/src/views/recording/RecordingView.tsx

@@ -210,6 +210,9 @@ 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),
+  );
 
   // move to next clip
 
@@ -686,15 +689,19 @@ export function RecordingView({
                 setMotionOnly={() => {}}
               />
             )}
-            <ShareTimestampDialog
+            {isDesktop && (
-              currentTime={currentTime}
+              <ShareTimestampDialog
-              open={shareTimestampOpen}
+                key={shareTimestampAtOpen}
-              onOpenChange={setShareTimestampOpen}
+                currentTime={shareTimestampAtOpen}
-              onShareTimestamp={onShareReviewLink}
+                open={shareTimestampOpen}
-            />
+                onOpenChange={setShareTimestampOpen}
+                onShareTimestamp={onShareReviewLink}
+              />
+            )}
             {isDesktop && (
               <ActionsDropdown
                 onShareTimestampClick={() => {
+                  setShareTimestampAtOpen(Math.floor(currentTime));
                   setShareTimestampOpen(true);
                 }}
                 onDebugReplayClick={() => {
@@ -776,9 +783,7 @@ export function RecordingView({
                   mainControllerRef.current?.pause();
                 }
               }}
-              onShareTimestampClick={() => {
+              onShareTimestamp={onShareReviewLink}
-                setShareTimestampOpen(true);
-              }}
               onUpdateFilter={updateFilter}
               setRange={setExportRange}
               setMode={setExportMode}