administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-09 08:37:37 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge a785ea2e67 into 8f13932c64

Browse Source
This commit is contained in:
Otto 2026-04-08 17:39:40 +03:00 committed by GitHub
commit 0f14612bf9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 678 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/public/locales/en/components/dialog.json
View File

@ -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": {

4
web/public/locales/en/views/events.json
View File

@ -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"

7
web/src/components/overlay/ActionsDropdown.tsx
View File

@ -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>

63
web/src/components/overlay/MobileReviewSettingsDrawer.tsx
View File

@ -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 (

369
web/src/components/overlay/ShareTimestampDialog.tsx Normal file
View File

@ -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>
);
}

35
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -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 (!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={() => {

3
web/src/components/player/dynamic/DynamicVideoController.ts
View File

@ -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);
};

63
web/src/pages/Events.tsx
View File

@ -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({
after: getBeginningOfDayTimestamp(date),
before: getEndOfDayTimestamp(date),
});
setReviewFilter(getReviewDayBounds(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));

1
web/src/types/record.ts
View File

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

56
web/src/utils/recordingReviewUrl.ts Normal file
View File

@ -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();
}

17
web/src/utils/videoUtil.ts
View File

@ -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;
});
}

69
web/src/views/recording/RecordingView.tsx
View File

@ -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}