frigate/web/src/utils/recordingReviewUrl.ts

57 lines
1.3 KiB
TypeScript
Raw Normal View History

Feature: Share Timestamped URL for Camera Footage History (#22537) * Initial copy timestamp url implementation * revise url format * Implement share timestamp dialog * Use translations * Add comments * Add validations to shared link * Switch to searchEffect implementation * Add missing accessibility related dialog description * Change URL format to unix timestamps * Remove unnecessary useEffect * Remove duplicated dialog title * Fixes/improvements based off PR review comments * Add missing cancel button & separators to dialog * Make share description clearer * Bugfix: guard against showing toasts twice Because this effect ends up running multiple times * Clamp future timestamps to now * Revert "Bugfix: guard against showing toasts twice" This reverts commit 99fa5e1deebdc3a91a4b9015f5a46a36545bf349. * Use normal separator Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Fixes based off PR review comments * Bugfix: Share dialog was not receiving the player timestamp after removing key that triggered remounts * Defer `setRecording` and return true from hook for cleanup * Remove timeout defer hack in favor of refactored hook * Attempt to replay video muted on NotAllowedError * Use separate persistent mute and temporary forced mute states * Align cancel button with other dialogs * Prevent wrapping on dialog title * Remove extra "back" button on mobile drawer * Fix back navigation when coming from direct shared timestamp links * Use new timeformat hook * Simplify dialog radio buttons * Apply suggestions from code review Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
2026-04-20 15:35:25 +03:00
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();
}