Merge a785ea2e67 into 8f13932c64

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

@@ -99,6 +99,14 @@
     }
   },
   "recording": {
+    "shareTimestamp": {
+      "label": "Share Timestamp",
+      "title": "Share 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.",
+      "custom": "Custom Timestamp",
+      "button": "Share Timestamp URL",
+      "shareTitle": "Frigate Review Timestamp: {{camera}}"
+    },
     "confirmDelete": {
       "title": "Confirm Delete",
       "desc": {

web/public/locales/en/views/events.json

@@ -45,7 +45,9 @@
   },
   "documentTitle": "Review - Frigate",
   "recordings": {
-    "documentTitle": "Recordings - Frigate"
+    "documentTitle": "Recordings - Frigate",
+    "invalidSharedLink": "Unable to open timestamped recording link due to parsing error.",
+    "invalidSharedCamera": "Unable to open timestamped recording link due to an unknown or unauthorized camera."
   },
   "calendarFilter": {
     "last24Hours": "Last 24 Hours"

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 } from "./ExportDialog";
 import {
@@ -26,6 +26,7 @@ import SaveExportOverlay from "./SaveExportOverlay";
 import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { ShareTimestampContent } from "./ShareTimestampDialog";
 
 type DrawerMode =
   | "none"
@@ -33,13 +34,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 +50,7 @@ const DEFAULT_DRAWER_FEATURES: DrawerFeatures[] = [
   "calendar",
   "filter",
   "debug-replay",
+  "share-timestamp",
 ];
 
 type MobileReviewSettingsDrawerProps = {
@@ -67,6 +71,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;
@@ -90,6 +95,7 @@ export default function MobileReviewSettingsDrawer({
   debugReplayRange,
   setDebugReplayMode = () => {},
   setDebugReplayRange = () => {},
+  onShareTimestamp = () => {},
   onUpdateFilter,
   setRange,
   setMode,
@@ -99,6 +105,7 @@ export default function MobileReviewSettingsDrawer({
     "views/recording",
     "components/dialog",
     "views/replay",
+    "common",
   ]);
   const navigate = useNavigate();
   const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
@@ -106,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
 
@@ -275,6 +291,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"
@@ -477,6 +514,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-start 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-start 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>
+  );
+}

web/src/components/player/HlsVideoPlayer.tsx

@@ -216,7 +216,11 @@ export default function HlsVideoPlayer({
 
   const [tallCamera, setTallCamera] = useState(false);
   const [isPlaying, setIsPlaying] = useState(true);
-  const [muted, setMuted] = useUserPersistence("hlsPlayerMuted", true);
+  const [persistedMuted, setPersistedMuted] = useUserPersistence(
+    "hlsPlayerMuted",
+    true,
+  );
+  const [temporaryMuted, setTemporaryMuted] = useState(false);
   const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
   const [defaultPlaybackRate] = useUserPersistence("playbackRate", 1);
   const [playbackRate, setPlaybackRate] = useOverlayState(
@@ -232,6 +236,16 @@ export default function HlsVideoPlayer({
     height: number;
   }>({ width: 0, height: 0 });
 
+  const muted = persistedMuted || temporaryMuted;
+
+  const onSetMuted = useCallback(
+    (muted: boolean) => {
+      setTemporaryMuted(false);
+      setPersistedMuted(muted);
+    },
+    [setPersistedMuted],
+  );
+
   useEffect(() => {
     if (!isDesktop) {
       return;
@@ -297,7 +311,7 @@ export default function HlsVideoPlayer({
             fullscreen: supportsFullscreen,
           }}
           setControlsOpen={setControlsOpen}
-          setMuted={(muted) => setMuted(muted)}
+          setMuted={onSetMuted}
           playbackRate={playbackRate ?? 1}
           hotKeys={hotKeys}
           onPlayPause={onPlayPause}
@@ -404,9 +418,20 @@ export default function HlsVideoPlayer({
                 : undefined
             }
             onVolumeChange={() => {
-              setVolume(videoRef.current?.volume ?? 1.0, true);
+              if (!videoRef.current) {
-              if (!frigateControls) {
+                return;
-                setMuted(videoRef.current?.muted);
+              }
+
+              setVolume(videoRef.current.volume ?? 1.0, true);
+
+              if (frigateControls) {
+                if (videoRef.current.muted && !persistedMuted) {
+                  setTemporaryMuted(true);
+                } else if (!videoRef.current.muted && temporaryMuted) {
+                  setTemporaryMuted(false);
+                }
+              } else {
+                setPersistedMuted(videoRef.current.muted);
               }
             }}
             onPlay={() => {

web/src/components/player/dynamic/DynamicVideoController.ts

@@ -6,6 +6,7 @@ import {
   calculateInpointOffset,
   calculateSeekPosition,
 } from "@/utils/videoUtil";
+import { playWithTemporaryMuteFallback } from "@/utils/videoUtil.ts";
 
 type PlayerMode = "playback" | "scrubbing";
 
@@ -107,7 +108,7 @@ export class DynamicVideoController {
     return new Promise((resolve) => {
       const onSeekedHandler = () => {
         this.playerController.removeEventListener("seeked", onSeekedHandler);
-        this.playerController.play();
+        playWithTemporaryMuteFallback(this.playerController);
         resolve(undefined);
       };
 

web/src/pages/Events.tsx

@@ -21,12 +21,17 @@ import {
   getBeginningOfDayTimestamp,
   getEndOfDayTimestamp,
 } from "@/utils/dateUtil";
+import {
+  parseRecordingReviewLink,
+  RECORDING_REVIEW_LINK_PARAM,
+} from "@/utils/recordingReviewUrl";
 import EventView from "@/views/events/EventView";
 import MotionSearchView from "@/views/motion-search/MotionSearchView";
 import { RecordingView } from "@/views/recording/RecordingView";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import useSWR from "swr";
 
 export default function Events() {
@@ -127,6 +132,14 @@ export default function Events() {
   const [notificationTab, setNotificationTab] =
     useState<TimelineType>("timeline");
 
+  const getReviewDayBounds = useCallback((date: Date) => {
+    const now = Date.now() / 1000;
+    return {
+      after: getBeginningOfDayTimestamp(date),
+      before: Math.min(getEndOfDayTimestamp(date), now),
+    };
+  }, []);
+
   useSearchEffect("tab", (tab: string) => {
     if (tab === "timeline" || tab === "events" || tab === "detail") {
       setNotificationTab(tab as TimelineType);
@@ -142,10 +155,7 @@ export default function Events() {
           const startTime = resp.data.start_time - REVIEW_PADDING;
           const date = new Date(startTime * 1000);
 
-          setReviewFilter({
+          setReviewFilter(getReviewDayBounds(date));
-            after: getBeginningOfDayTimestamp(date),
-            before: getEndOfDayTimestamp(date),
-          });
           setRecording(
             {
               camera: resp.data.camera,
@@ -233,6 +243,51 @@ export default function Events() {
     [recording, setRecording, setReviewFilter],
   );
 
+  useSearchEffect(RECORDING_REVIEW_LINK_PARAM, (reviewLinkValue: string) => {
+    if (!config) {
+      return false;
+    }
+
+    const reviewLink = parseRecordingReviewLink(reviewLinkValue);
+
+    if (!reviewLink) {
+      toast.error(t("recordings.invalidSharedLink"), {
+        position: "top-center",
+      });
+      return true;
+    }
+
+    const validCamera =
+      config.cameras[reviewLink.camera] &&
+      allowedCameras.includes(reviewLink.camera);
+
+    if (!validCamera) {
+      toast.error(t("recordings.invalidSharedCamera"), {
+        position: "top-center",
+      });
+      return true;
+    }
+
+    setReviewFilter({
+      ...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,
+        navigationSource: "shared-link",
+      },
+      true,
+    );
+
+    return true;
+  });
+
   // review paging
 
   const [beforeTs, setBeforeTs] = useState(Math.ceil(Date.now() / 1000));

web/src/types/record.ts

@@ -40,6 +40,7 @@ export type RecordingStartingPoint = {
   startTime: number;
   severity: ReviewSeverity;
   timelineType?: TimelineType;
+  navigationSource?: "shared-link";
 };
 
 export type RecordingPlayerError = "stalled" | "startup";

web/src/utils/recordingReviewUrl.ts

@@ -0,0 +1,56 @@
+import { baseUrl } from "@/api/baseUrl.ts";
+
+export const RECORDING_REVIEW_LINK_PARAM = "timestamp";
+
+export type RecordingReviewLinkState = {
+  camera: string;
+  timestamp: number;
+};
+
+export function parseRecordingReviewLink(
+  value: string | null,
+): RecordingReviewLinkState | undefined {
+  if (!value) {
+    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);
+
+  if (!camera || !timestamp) {
+    return undefined;
+  }
+
+  const parsedTimestamp = Number(timestamp);
+  const now = Math.floor(Date.now() / 1000);
+
+  if (!Number.isFinite(parsedTimestamp) || parsedTimestamp <= 0) {
+    return undefined;
+  }
+
+  return {
+    camera,
+    // clamp future timestamps to now
+    timestamp: Math.min(Math.floor(parsedTimestamp), now),
+  };
+}
+
+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)}`,
+  );
+
+  return url.toString();
+}

web/src/utils/videoUtil.ts

@@ -78,3 +78,20 @@ export function calculateSeekPosition(
 
   return seekSeconds >= 0 ? seekSeconds : undefined;
 }
+
+/**
+ * Attempts to play the video, and if it fails due to a NotAllowedError (often caused by browser autoplay restrictions),
+ * it temporarily mutes the video and tries to play again.
+ * @param video - The HTMLVideoElement to play
+ */
+export function playWithTemporaryMuteFallback(video: HTMLVideoElement) {
+  return video.play().catch((error: { name?: string }) => {
+    if (error.name === "NotAllowedError" && !video.muted) {
+      video.muted = true;
+
+      return video.play().catch(() => undefined);
+    }
+
+    throw error;
+  });
+}

web/src/views/recording/RecordingView.tsx

@@ -42,7 +42,7 @@ import {
   isTablet,
 } from "react-device-detect";
 import { IoMdArrowRoundBack } from "react-icons/io";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Toaster } from "@/components/ui/sonner";
 import useSWR from "swr";
 import { TimeRange, TimelineType } from "@/types/timeline";
@@ -77,6 +77,9 @@ import {
   GenAISummaryDialog,
   GenAISummaryChip,
 } from "@/components/overlay/chip/GenAISummaryChip";
+import ShareTimestampDialog from "@/components/overlay/ShareTimestampDialog";
+import { shareOrCopy } from "@/utils/browserUtil";
+import { createRecordingReviewUrl } from "@/utils/recordingReviewUrl";
 
 const DATA_REFRESH_TIME = 600000; // 10 minutes
 
@@ -104,9 +107,10 @@ export function RecordingView({
   updateFilter,
   refreshData,
 }: RecordingViewProps) {
-  const { t } = useTranslation(["views/events"]);
+  const { t } = useTranslation(["views/events", "components/dialog"]);
   const { data: config } = useSWR<FrigateConfig>("config");
   const navigate = useNavigate();
+  const location = useLocation();
   const contentRef = useRef<HTMLDivElement | null>(null);
 
   // recordings summary
@@ -205,6 +209,16 @@ 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
 
@@ -317,6 +331,34 @@ export function RecordingView({
     [currentTimeRange, updateSelectedSegment],
   );
 
+  const onShareReviewLink = useCallback(
+    (timestamp: number) => {
+      const reviewUrl = createRecordingReviewUrl(location.pathname, {
+        camera: mainCamera,
+        timestamp: Math.floor(timestamp),
+      });
+
+      shareOrCopy(
+        reviewUrl,
+        t("recording.shareTimestamp.shareTitle", {
+          ns: "components/dialog",
+          camera: mainCamera,
+        }),
+      );
+    },
+    [location.pathname, mainCamera, t],
+  );
+
+  const handleBack = useCallback(() => {
+    // if we came from a direct share link, there is no history to go back to, so navigate to the homepage instead
+    if (recording?.navigationSource === "shared-link") {
+      navigate("/");
+      return;
+    }
+
+    navigate(-1);
+  }, [navigate, recording?.navigationSource]);
+
   useEffect(() => {
     if (!scrubbing) {
       if (Math.abs(currentTime - playerTime) > 10) {
@@ -567,7 +609,7 @@ export function RecordingView({
               className="flex items-center gap-2.5 rounded-lg"
               aria-label={t("label.back", { ns: "common" })}
               size="sm"
-              onClick={() => navigate(-1)}
+              onClick={handleBack}
             >
               <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
               {isDesktop && (
@@ -663,8 +705,28 @@ export function RecordingView({
                 setMotionOnly={() => {}}
               />
             )}
+            {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={() => {
                   const now = new Date(timeRange.before * 1000);
                   now.setHours(now.getHours() - 1);
@@ -744,6 +806,7 @@ export function RecordingView({
                   mainControllerRef.current?.pause();
                 }
               }}
+              onShareTimestamp={onShareReviewLink}
               onUpdateFilter={updateFilter}
               setRange={setExportRange}
               setMode={setExportMode}