Update intel runtimes to support Battlemage (#22943)

* apply annotation offset to frigate+ submission frame time

* fix broken docs links with hash fragments that resolve wrong on reload

* undo

* use recording snapshot for frigate+ frame submission from VideoControls

rather than a canvas grab/paint, which may not always align with an ffmpeg snapshot due to keyframes

* add more docs links

- display docs link for main sections on collapsible fields

* dialog button consistency

docker/main/install_deps.sh

@@ -106,10 +106,17 @@ if [[ "${TARGETARCH}" == "amd64" ]]; then
 
     # install legacy and standard intel icd and level-zero-gpu
     # see https://github.com/intel/compute-runtime/blob/master/LEGACY_PLATFORMS.md for more info
+    # newer intel packages (gmmlib 22.9+, igc 2.32+) require libstdc++ >= 13.1 and libzstd >= 1.5.5
+    echo "deb http://deb.debian.org/debian trixie main" > /etc/apt/sources.list.d/trixie.list
+    apt-get -qq update
+    apt-get -qq install -y -t trixie libstdc++6 libzstd1
+    rm -f /etc/apt/sources.list.d/trixie.list
+    apt-get -qq update
+
     # needed core package
-    wget https://github.com/intel/compute-runtime/releases/download/25.13.33276.19/libigdgmm12_22.7.0_amd64.deb
-    dpkg -i libigdgmm12_22.7.0_amd64.deb
-    rm libigdgmm12_22.7.0_amd64.deb
+    wget https://github.com/intel/compute-runtime/releases/download/26.14.37833.4/libigdgmm12_22.9.0_amd64.deb
+    dpkg -i libigdgmm12_22.9.0_amd64.deb
+    rm libigdgmm12_22.9.0_amd64.deb
 
     # legacy packages
     wget https://github.com/intel/compute-runtime/releases/download/24.35.30872.36/intel-opencl-icd-legacy1_24.35.30872.36_amd64.deb
@@ -117,10 +124,10 @@ if [[ "${TARGETARCH}" == "amd64" ]]; then
     wget https://github.com/intel/intel-graphics-compiler/releases/download/igc-1.0.17537.24/intel-igc-opencl_1.0.17537.24_amd64.deb
     wget https://github.com/intel/intel-graphics-compiler/releases/download/igc-1.0.17537.24/intel-igc-core_1.0.17537.24_amd64.deb
     # standard packages
-    wget https://github.com/intel/compute-runtime/releases/download/25.13.33276.19/intel-opencl-icd_25.13.33276.19_amd64.deb
-    wget https://github.com/intel/compute-runtime/releases/download/25.13.33276.19/intel-level-zero-gpu_1.6.33276.19_amd64.deb
-    wget https://github.com/intel/intel-graphics-compiler/releases/download/v2.10.10/intel-igc-opencl-2_2.10.10+18926_amd64.deb
-    wget https://github.com/intel/intel-graphics-compiler/releases/download/v2.10.10/intel-igc-core-2_2.10.10+18926_amd64.deb
+    wget https://github.com/intel/compute-runtime/releases/download/26.14.37833.4/intel-opencl-icd_26.14.37833.4-0_amd64.deb
+    wget https://github.com/intel/compute-runtime/releases/download/26.14.37833.4/libze-intel-gpu1_26.14.37833.4-0_amd64.deb
+    wget https://github.com/intel/intel-graphics-compiler/releases/download/v2.32.7/intel-igc-opencl-2_2.32.7+21184_amd64.deb
+    wget https://github.com/intel/intel-graphics-compiler/releases/download/v2.32.7/intel-igc-core-2_2.32.7+21184_amd64.deb
     # npu packages
     wget https://github.com/oneapi-src/level-zero/releases/download/v1.28.2/level-zero_1.28.2+u22.04_amd64.deb
     wget https://github.com/intel/linux-npu-driver/releases/download/v1.19.0/intel-driver-compiler-npu_1.19.0.20250707-16111289554_ubuntu22.04_amd64.deb

frigate/storage.py

@@ -197,7 +197,7 @@ class StorageMaintainer(threading.Thread):
         # check if need to delete retained segments
         if deleted_segments_size < hourly_bandwidth:
             logger.error(
-                f"Could not clear {hourly_bandwidth} MB, currently {deleted_segments_size} MB have been cleared. Retained recordings must be deleted."
+                f"Could not clear {hourly_bandwidth} MB, currently {deleted_segments_size:.2f} MB have been cleared. Retained recordings must be deleted."
             )
             recordings = (
                 Recordings.select(
@@ -225,7 +225,7 @@ class StorageMaintainer(threading.Thread):
                     # this file was not found so we must assume no space was cleaned up
                     pass
         else:
-            logger.info(f"Cleaned up {deleted_segments_size} MB of recordings")
+            logger.info(f"Cleaned up {deleted_segments_size:.2f} MB of recordings")
 
         logger.debug(f"Expiring {len(deleted_recordings)} recordings")
         # delete up to 100,000 at a time

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

@@ -152,6 +152,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/components/player.json

@@ -4,7 +4,8 @@
   "noPreviewFoundFor": "No Preview Found for {{cameraName}}",
   "submitFrigatePlus": {
     "title": "Submit this frame to Frigate+?",
-    "submit": "Submit"
+    "submit": "Submit",
+    "previewError": "Could not load snapshot preview. The recording may not be available at this time."
   },
   "livePlayerRequiredIOSVersion": "iOS 17.1 or greater is required for this live stream type.",
   "streamOffline": {

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/config-form/section-configs/ffmpeg.ts

@@ -31,6 +31,8 @@ const ffmpeg: SectionConfigOverrides = {
       "inputs.output_args": "/configuration/ffmpeg_presets#output-args-presets",
       "output_args.record": "/configuration/ffmpeg_presets#output-args-presets",
       "inputs.roles": "/configuration/cameras/#setting-up-camera-inputs",
+      apple_compatibility:
+        "/configuration/camera_specific#h265-cameras-via-safari",
     },
     restartRequired: [],
     fieldOrder: [

web/src/components/config-form/section-configs/lpr.ts

@@ -27,10 +27,12 @@ const lpr: SectionConfigOverrides = {
     ],
     fieldDocs: {
       enhancement: "/configuration/license_plate_recognition#enhancement",
+      debug_save_plates:
+        "/configuration/license_plate_recognition/#how-do-i-debug-lpr-issues",
     },
     restartRequired: [],
     fieldOrder: ["enabled", "min_area", "enhancement", "expire_time"],
-    hiddenFields: [],
+    hiddenFields: ["expire_time"],
     advancedFields: ["expire_time", "enhancement"],
     overrideFields: ["enabled", "min_area", "enhancement"],
   },

web/src/components/config-form/section-configs/onvif.ts

@@ -3,6 +3,11 @@ import type { SectionConfigOverrides } from "./types";
 const onvif: SectionConfigOverrides = {
   base: {
     sectionDocs: "/configuration/cameras#setting-up-camera-ptz-controls",
+    fieldDocs: {
+      autotracking: "/configuration/autotracking",
+      "autotracking.calibrate_on_startup":
+        "/configuration/autotracking#calibration",
+    },
     fieldOrder: [
       "host",
       "port",

web/src/components/config-form/section-configs/review.ts

@@ -45,6 +45,10 @@ const review: SectionConfigOverrides = {
     fieldDocs: {
       "alerts.labels": "/configuration/review/#alerts-and-detections",
       "detections.labels": "/configuration/review/#alerts-and-detections",
+      genai: "/configuration/genai/genai_review",
+      "genai.image_source": "/configuration/genai/genai_review#image-source",
+      "genai.additional_concerns":
+        "/configuration/genai/genai_review#additional-concerns",
     },
     restartRequired: [],
     fieldOrder: ["alerts", "detections", "genai", "genai.enabled"],

web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx

@@ -9,11 +9,13 @@ import {
 import { Children, useState, useEffect, useRef } from "react";
 import type { ReactNode } from "react";
 import RestartRequiredIndicator from "@/components/indicators/RestartRequiredIndicator";
-import { LuChevronDown, LuChevronRight } from "react-icons/lu";
+import { LuChevronDown, LuChevronRight, LuExternalLink } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { getTranslatedLabel } from "@/utils/i18n";
 import { requiresRestartForFieldPath } from "@/utils/configUtil";
+import { useDocDomain } from "@/hooks/use-doc-domain";
 import { ConfigFormContext } from "@/types/configForm";
 import {
   buildTranslationPath,
@@ -178,6 +180,7 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     "views/settings",
     "common",
   ]);
+  const { getLocaleDocUrl } = useDocDomain();
   const objectRequiresRestart = requiresRestartForFieldPath(
     fieldPath,
     restartRequired,
@@ -300,6 +303,17 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     schemaDescription;
   inferredDescription = inferredDescription ?? fallbackDescription;
 
+  const pathStringSegments =
+    path?.filter((segment): segment is string => typeof segment === "string") ??
+    [];
+  const fieldDocsKey = translationPath || pathStringSegments.join(".");
+  const fieldDocsPath = fieldDocsKey
+    ? formContext?.fieldDocs?.[fieldDocsKey]
+    : undefined;
+  const fieldDocsUrl = fieldDocsPath
+    ? getLocaleDocUrl(fieldDocsPath)
+    : undefined;
+
   const renderGroupedFields = (items: (typeof properties)[number][]) => {
     if (!items.length) {
       return null;
@@ -466,6 +480,20 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
                     {inferredDescription}
                   </p>
                 )}
+                {fieldDocsUrl && (
+                  <div className="mt-1 flex items-center text-xs text-primary-variant">
+                    <Link
+                      to={fieldDocsUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {t("readTheDocumentation", { ns: "common" })}
+                      <LuExternalLink className="ml-2 inline-flex size-3" />
+                    </Link>
+                  </div>
+                )}
               </div>
               {isOpen ? (
                 <LuChevronDown className="h-4 w-4 shrink-0" />

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/DebugReplayDialog.tsx

@@ -113,18 +113,19 @@ export function DebugReplayContent({
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
 
       <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
+        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
       >
-        <div
-          className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
+        <Button
+          className={isDesktop ? "" : "w-full"}
+          aria-label={t("button.cancel", { ns: "common" })}
+          variant="outline"
           onClick={onCancel}
         >
           {t("button.cancel", { ns: "common" })}
-        </div>
+        </Button>
         <Button
           className={isDesktop ? "" : "w-full"}
           variant="select"
-          size="sm"
           disabled={isStarting}
           onClick={() => {
             if (selectedOption === "timeline") {

web/src/components/overlay/ExportDialog.tsx

@@ -1043,20 +1043,21 @@ export function ExportContent({
 
       {isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
       <DialogFooter
-        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
+        className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
       >
-        <div
-          className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
+        <Button
+          className={isDesktop ? "" : "w-full"}
+          aria-label={t("button.cancel", { ns: "common" })}
+          variant="outline"
           onClick={onCancel}
         >
           {t("button.cancel", { ns: "common" })}
-        </div>
+        </Button>
         {activeTab === "export" ? (
           <Button
             className={isDesktop ? "" : "w-full"}
             aria-label={t("export.selectOrExport")}
             variant="select"
-            size="sm"
             disabled={isStartingExport}
             onClick={async () => {
               if (selectedOption == "timeline") {

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, ExportTab } from "./ExportDialog";
 import {
@@ -27,6 +27,7 @@ import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { StartExportResponse } from "@/types/export";
+import { ShareTimestampContent } from "./ShareTimestampDialog";
 
 type DrawerMode =
   | "none"
@@ -34,13 +35,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[] = [
@@ -48,6 +51,7 @@ const DEFAULT_DRAWER_FEATURES: DrawerFeatures[] = [
   "calendar",
   "filter",
   "debug-replay",
+  "share-timestamp",
 ];
 
 type MobileReviewSettingsDrawerProps = {
@@ -68,6 +72,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;
@@ -91,6 +96,7 @@ export default function MobileReviewSettingsDrawer({
   debugReplayRange,
   setDebugReplayMode = () => {},
   setDebugReplayRange = () => {},
+  onShareTimestamp = () => {},
   onUpdateFilter,
   setRange,
   setMode,
@@ -100,6 +106,7 @@ export default function MobileReviewSettingsDrawer({
     "views/recording",
     "components/dialog",
     "views/replay",
+    "common",
   ]);
   const navigate = useNavigate();
   const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
@@ -108,6 +115,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
 
@@ -323,6 +339,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"
@@ -535,6 +572,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,366 @@
+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-center 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-center 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-2")}
+      >
+        {onCancel && (
+          <Button
+            className={cn(!isDesktop && "w-full")}
+            aria-label={t("button.cancel", { ns: "common" })}
+            variant="outline"
+            onClick={onCancel}
+          >
+            {t("button.cancel", { ns: "common" })}
+          </Button>
+        )}
+        <Button
+          className={cn(!isDesktop && "w-full")}
+          variant="select"
+          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/overlay/detail/TrackingDetails.tsx

@@ -636,6 +636,13 @@ export function TrackingDetails({
     return axios.post(`/${event.camera}/plus/${currentTime}`);
   }, [event.camera, currentTime]);
 
+  const getSnapshotUrlForPlus = useCallback(() => {
+    if (!currentTime) {
+      return undefined;
+    }
+    return `${apiHost}api/${event.camera}/recordings/${currentTime}/snapshot.jpg?height=500`;
+  }, [apiHost, event.camera, currentTime]);
+
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -683,6 +690,7 @@ export function TrackingDetails({
                 onTimeUpdate={handleTimeUpdate}
                 onSeekToTime={handleSeekToTime}
                 onUploadFrame={onUploadFrameToPlus}
+                getSnapshotUrl={getSnapshotUrlForPlus}
                 onPlaying={() => setIsVideoLoading(false)}
                 setFullResolution={setFullResolution}
                 toggleFullscreen={toggleFullscreen}
@@ -867,6 +875,7 @@ export function TrackingDetails({
                             getZoneColor={getZoneColor}
                             effectiveTime={effectiveTime}
                             isTimelineActive={isWithinEventRange}
+                            annotationOffset={annotationOffset}
                           />
                         </div>
                       );
@@ -890,6 +899,7 @@ type LifecycleIconRowProps = {
   getZoneColor: (zoneName: string) => number[] | undefined;
   effectiveTime?: number;
   isTimelineActive?: boolean;
+  annotationOffset: number;
 };
 
 function LifecycleIconRow({
@@ -900,6 +910,7 @@ function LifecycleIconRow({
   getZoneColor,
   effectiveTime,
   isTimelineActive,
+  annotationOffset,
 }: LifecycleIconRowProps) {
   const { t } = useTranslation(["views/explore", "components/player"]);
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -1206,7 +1217,7 @@ function LifecycleIconRow({
                         className="cursor-pointer"
                         onSelect={async () => {
                           const resp = await axios.post(
-                            `/${item.camera}/plus/${item.timestamp}`,
+                            `/${item.camera}/plus/${item.timestamp + annotationOffset / 1000}`,
                           );
 
                           if (resp && resp.status == 200) {

web/src/components/player/HlsVideoPlayer.tsx

@@ -53,6 +53,7 @@ type HlsVideoPlayerProps = {
   onSeekToTime?: (timestamp: number, play?: boolean) => void;
   setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
   onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
+  getSnapshotUrl?: (playTime: number) => string | undefined;
   toggleFullscreen?: () => void;
   onError?: (error: RecordingPlayerError) => void;
   isDetailMode?: boolean;
@@ -78,6 +79,7 @@ export default function HlsVideoPlayer({
   onSeekToTime,
   setFullResolution,
   onUploadFrame,
+  getSnapshotUrl,
   toggleFullscreen,
   onError,
   isDetailMode = false,
@@ -216,7 +218,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 +238,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 +313,7 @@ export default function HlsVideoPlayer({
             fullscreen: supportsFullscreen,
           }}
           setControlsOpen={setControlsOpen}
-          setMuted={(muted) => setMuted(muted)}
+          setMuted={onSetMuted}
           playbackRate={playbackRate ?? 1}
           hotKeys={hotKeys}
           onPlayPause={onPlayPause}
@@ -317,6 +333,13 @@ export default function HlsVideoPlayer({
               videoRef.current.playbackRate = rate;
             }
           }}
+          getSnapshotUrl={() => {
+            const frameTime = getVideoTime();
+            if (!frameTime || !getSnapshotUrl) {
+              return undefined;
+            }
+            return getSnapshotUrl(frameTime);
+          }}
           onUploadFrame={async () => {
             const frameTime = getVideoTime();
 
@@ -404,9 +427,20 @@ export default function HlsVideoPlayer({
                 : undefined
             }
             onVolumeChange={() => {
-              setVolume(videoRef.current?.volume ?? 1.0, true);
-              if (!frigateControls) {
-                setMuted(videoRef.current?.muted);
+              if (!videoRef.current) {
+                return;
+              }
+
+              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/VideoControls.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from "react";
+import { LuFolderX } from "react-icons/lu";
 import { isDesktop, isMobileOnly, isSafari } from "react-device-detect";
 import { LuPause, LuPlay } from "react-icons/lu";
 import {
@@ -71,6 +72,7 @@ type VideoControlsProps = {
   onSeek: (diff: number) => void;
   onSetPlaybackRate: (rate: number) => void;
   onUploadFrame?: () => void;
+  getSnapshotUrl?: () => string | undefined;
   toggleFullscreen?: () => void;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
@@ -92,6 +94,7 @@ export default function VideoControls({
   onSeek,
   onSetPlaybackRate,
   onUploadFrame,
+  getSnapshotUrl,
   toggleFullscreen,
   containerRef,
 }: VideoControlsProps) {
@@ -288,6 +291,7 @@ export default function VideoControls({
             }
           }}
           onUploadFrame={onUploadFrame}
+          getSnapshotUrl={getSnapshotUrl}
           containerRef={containerRef}
           fullscreen={fullscreen}
         />
@@ -306,6 +310,7 @@ type FrigatePlusUploadButtonProps = {
   onOpen: () => void;
   onClose: () => void;
   onUploadFrame: () => void;
+  getSnapshotUrl?: () => string | undefined;
   containerRef?: React.MutableRefObject<HTMLDivElement | null>;
   fullscreen?: boolean;
 };
@@ -314,12 +319,14 @@ function FrigatePlusUploadButton({
   onOpen,
   onClose,
   onUploadFrame,
+  getSnapshotUrl,
   containerRef,
   fullscreen,
 }: FrigatePlusUploadButtonProps) {
   const { t } = useTranslation(["components/player"]);
 
-  const [videoImg, setVideoImg] = useState<string>();
+  const [previewUrl, setPreviewUrl] = useState<string>();
+  const [previewError, setPreviewError] = useState(false);
 
   return (
     <AlertDialog
@@ -334,6 +341,13 @@ function FrigatePlusUploadButton({
           className="size-5 cursor-pointer"
           onClick={() => {
             onOpen();
+            setPreviewError(false);
+
+            const snapshotUrl = getSnapshotUrl?.();
+            if (snapshotUrl) {
+              setPreviewUrl(snapshotUrl);
+              return;
+            }
 
             if (video) {
               const videoSize = [video.clientWidth, video.clientHeight];
@@ -345,7 +359,7 @@ function FrigatePlusUploadButton({
 
               if (context) {
                 context.drawImage(video, 0, 0, videoSize[0], videoSize[1]);
-                setVideoImg(canvas.toDataURL("image/webp"));
+                setPreviewUrl(canvas.toDataURL("image/webp"));
               }
             }
           }}
@@ -362,14 +376,29 @@ function FrigatePlusUploadButton({
         <AlertDialogHeader>
           <AlertDialogTitle>{t("submitFrigatePlus.title")}</AlertDialogTitle>
         </AlertDialogHeader>
-        <img className="aspect-video w-full object-contain" src={videoImg} />
+        {previewError ? (
+          <div className="flex aspect-video w-full flex-col items-center justify-center gap-2 text-center text-muted-foreground">
+            <LuFolderX className="size-12" />
+            <span>{t("submitFrigatePlus.previewError")}</span>
+          </div>
+        ) : (
+          <img
+            className="aspect-video w-full object-contain"
+            src={previewUrl}
+            onError={() => setPreviewError(true)}
+          />
+        )}
         <AlertDialogFooter>
-          <AlertDialogAction className="bg-selected" onClick={onUploadFrame}>
-            {t("submitFrigatePlus.submit")}
-          </AlertDialogAction>
           <AlertDialogCancel>
             {t("button.cancel", { ns: "common" })}
           </AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-selected text-white"
+            onClick={onUploadFrame}
+            disabled={previewError}
+          >
+            {t("submitFrigatePlus.submit")}
+          </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>

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/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -181,6 +181,21 @@ export default function DynamicVideoPlayer({
     [camera, controller],
   );
 
+  const getSnapshotUrlForPlus = useCallback(
+    (playTime: number) => {
+      if (!controller) {
+        return undefined;
+      }
+
+      const time = controller.getProgress(playTime);
+      if (!time) {
+        return undefined;
+      }
+      return `${apiHost}api/${camera}/recordings/${time}/snapshot.jpg?height=500`;
+    },
+    [apiHost, camera, controller],
+  );
+
   // state of playback player
 
   const recordingParams = useMemo(
@@ -312,6 +327,7 @@ export default function DynamicVideoPlayer({
           }}
           setFullResolution={setFullResolution}
           onUploadFrame={onUploadFrameToPlus}
+          getSnapshotUrl={getSnapshotUrlForPlus}
           toggleFullscreen={toggleFullscreen}
           onError={(error) => {
             if (error == "stalled" && !isScrubbing) {

web/src/pages/Events.tsx

@@ -21,6 +21,10 @@ 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";
@@ -28,6 +32,7 @@ import { useFrigateReviews } from "@/api/ws";
 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() {
@@ -128,6 +133,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);
@@ -143,10 +156,7 @@ export default function Events() {
           const startTime = resp.data.start_time - REVIEW_PADDING;
           const date = new Date(startTime * 1000);
 
-          setReviewFilter({
-            after: getBeginningOfDayTimestamp(date),
-            before: getEndOfDayTimestamp(date),
-          });
+          setReviewFilter(getReviewDayBounds(date));
           setRecording(
             {
               camera: resp.data.camera,
@@ -234,6 +244,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}

web/src/views/settings/TriggerView.tsx

@@ -487,7 +487,7 @@ export default function TriggerView({
           <>
             <div className="mb-5 flex flex-row items-center justify-between gap-2">
               <div className="flex flex-col items-start">
-                <Heading as="h4" className="mb-2">
+                <Heading as="h4" className="mb-1">
                   {t("triggers.management.title")}
                 </Heading>
                 <p className="text-sm text-muted-foreground">
@@ -495,6 +495,17 @@ export default function TriggerView({
                     camera: cameraName,
                   })}
                 </p>
+                <div className="mt-1 flex items-center text-sm text-primary-variant">
+                  <Link
+                    to={getLocaleDocUrl("configuration/semantic_search")}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline"
+                  >
+                    {t("readTheDocumentation", { ns: "common" })}{" "}
+                    <LuExternalLink className="ml-2 inline-flex size-3" />
+                  </Link>
+                </div>
               </div>
               <Button
                 className="flex items-center gap-2 self-start sm:self-auto"