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

Fixes/improvements based off PR review comments

Browse Source
This commit is contained in:
0x464e 2026-03-20 18:27:36 +02:00
parent 6fa64a8db3
commit 5dad8cfb2d
No known key found for this signature in database
GPG Key ID: E6D221DF6CBFBFFA
7 changed files with 108 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/public/locales/en/common.json
View File

@ -131,8 +131,6 @@
"close": "Close",
"copy": "Copy",
"copiedToClipboard": "Copied to clipboard",
"shareTimestamp": "Share Timestamp",
"shareTimestampUrl": "Share Timestamp URL",
"back": "Back",
"history": "History",
"fullscreen": "Fullscreen",

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

@ -100,11 +100,13 @@
},
"recording": {
"shareTimestamp": {
"label": "Share Timestamp",
"title": "Share Review Timestamp",
"description": "Share the current player position or choose a custom timestamp.",
"current": "Current Player Timestamp",
"custom": "Custom Timestamp",
"customDescription": "Pick a specific point in time to share.",
"button": "Share Timestamp URL",
"shareTitle": "Frigate Review Timestamp: {{camera}}"
},
"confirmDelete": {

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

@ -40,7 +40,7 @@ export default function ActionsDropdown({
{t("menu.export", { ns: "common" })}
</DropdownMenuItem>
<DropdownMenuItem onClick={onShareTimestampClick}>
{t("button.shareTimestamp", { ns: "common" })}
{t("recording.shareTimestamp.label", { ns: "components/dialog" })}
</DropdownMenuItem>
<DropdownMenuItem onClick={onDebugReplayClick}>
{t("title", { ns: "views/replay" })}

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

@ -26,6 +26,7 @@ import SaveExportOverlay from "./SaveExportOverlay";
import { isIOS, isMobile } from "react-device-detect";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { ShareTimestampContent } from "./ShareTimestampDialog";
type DrawerMode =
| "none"
@ -70,7 +71,7 @@ type MobileReviewSettingsDrawerProps = {
debugReplayRange?: TimeRange;
setDebugReplayMode?: (mode: ExportMode) => void;
setDebugReplayRange?: (range: TimeRange | undefined) => void;
onShareTimestampClick?: () => void;
onShareTimestamp?: (timestamp: number) => void;
onUpdateFilter: (filter: ReviewFilter) => void;
setRange: (range: TimeRange | undefined) => void;
setMode: (mode: ExportMode) => void;
@ -94,7 +95,7 @@ export default function MobileReviewSettingsDrawer({
debugReplayRange,
setDebugReplayMode = () => {},
setDebugReplayRange = () => {},
onShareTimestampClick = () => {},
onShareTimestamp = () => {},
onUpdateFilter,
setRange,
setMode,
@ -112,6 +113,15 @@ export default function MobileReviewSettingsDrawer({
"1" | "5" | "custom" | "timeline"
>("1");
const [isDebugReplayStarting, setIsDebugReplayStarting] = useState(false);
const [selectedShareOption, setSelectedShareOption] = useState<
"current" | "custom"
>("current");
const [shareTimestampAtOpen, setShareTimestampAtOpen] = useState(
Math.floor(currentTime),
);
const [customShareTimestamp, setCustomShareTimestamp] = useState(
Math.floor(currentTime),
);
// exports
@ -284,14 +294,22 @@ export default function MobileReviewSettingsDrawer({
{features.includes("share-timestamp") && (
<Button
className="flex w-full items-center justify-center gap-2"
aria-label={t("button.shareTimestamp", { ns: "common" })}
aria-label={t("recording.shareTimestamp.label", {
ns: "components/dialog",
})}
onClick={() => {
setDrawerMode("none");
onShareTimestampClick();
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("button.shareTimestamp", { ns: "common" })}
{t("recording.shareTimestamp.label", {
ns: "components/dialog",
})}
</Button>
)}
{features.includes("calendar") && (
@ -496,6 +514,34 @@ export default function MobileReviewSettingsDrawer({
}}
/>
);
} else if (drawerMode == "share-timestamp") {
content = (
<div className="w-full">
<div className="relative h-8 w-full">
<div
className="absolute left-0 text-selected"
onClick={() => setDrawerMode("select")}
>
{t("button.back", { ns: "common" })}
</div>
<div className="absolute left-1/2 -translate-x-1/2 text-muted-foreground">
{t("recording.shareTimestamp.title", { ns: "components/dialog" })}
</div>
</div>
<ShareTimestampContent
currentTime={shareTimestampAtOpen}
selectedOption={selectedShareOption}
setSelectedOption={setSelectedShareOption}
customTimestamp={customShareTimestamp}
setCustomTimestamp={setCustomShareTimestamp}
onShareTimestamp={(timestamp) => {
onShareTimestamp(timestamp);
setDrawerMode("none");
}}
onCancel={() => setDrawerMode("select")}
/>
</div>
);
}
return (

40
web/src/components/overlay/ShareTimestampDialog.tsx
View File

@ -3,6 +3,7 @@ import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
@ -22,7 +23,6 @@ import useSWR from "swr";
import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
import { FaCalendarAlt } from "react-icons/fa";
import { isDesktop, isIOS, isMobile } from "react-device-detect";
import { LuShare2 } from "react-icons/lu";
import { useTranslation } from "react-i18next";
type ShareTimestampDialogProps = {
@ -42,15 +42,19 @@ export default function ShareTimestampDialog({
const [selectedOption, setSelectedOption] = useState<"current" | "custom">(
"current",
);
const [customTimestamp, setCustomTimestamp] = useState(
const [openedCurrentTime, setOpenedCurrentTime] = useState(
Math.floor(currentTime),
);
const [customTimestamp, setCustomTimestamp] = useState(openedCurrentTime);
const handleOpenChange = useCallback(
(nextOpen: boolean) => {
if (nextOpen) {
const initialTimestamp = Math.floor(currentTime);
setOpenedCurrentTime(initialTimestamp);
setSelectedOption("current");
setCustomTimestamp(Math.floor(currentTime));
setCustomTimestamp(initialTimestamp);
}
onOpenChange(nextOpen);
@ -60,7 +64,7 @@ export default function ShareTimestampDialog({
const content = (
<ShareTimestampContent
currentTime={currentTime}
currentTime={openedCurrentTime}
selectedOption={selectedOption}
setSelectedOption={setSelectedOption}
customTimestamp={customTimestamp}
@ -108,15 +112,17 @@ type ShareTimestampContentProps = {
customTimestamp: number;
setCustomTimestamp: (timestamp: number) => void;
onShareTimestamp: (timestamp: number) => void;
onCancel?: () => void;
};
function ShareTimestampContent({
export function ShareTimestampContent({
currentTime,
selectedOption,
setSelectedOption,
customTimestamp,
setCustomTimestamp,
onShareTimestamp,
onCancel,
}: Readonly<ShareTimestampContentProps>) {
const { t } = useTranslation(["common", "components/dialog"]);
const { data: config } = useSWR<FrigateConfig>("config");
@ -191,16 +197,28 @@ function ShareTimestampContent({
</div>
</RadioGroup>
<div className="mt-4">
<DialogFooter
className={isDesktop ? "mt-4" : "mt-4 flex flex-col-reverse gap-4"}
>
{onCancel && (
<Button
className={isDesktop ? "p-2" : "w-full"}
variant="ghost"
size="sm"
onClick={onCancel}
>
{t("button.cancel", { ns: "common" })}
</Button>
)}
<Button
className="w-full justify-between gap-3"
className={isDesktop ? "" : "w-full"}
variant="select"
size="sm"
onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
>
<span>{t("button.shareTimestampUrl", { ns: "common" })}</span>
<LuShare2 className="size-4" />
{t("recording.shareTimestamp.button", { ns: "components/dialog" })}
</Button>
</div>
</DialogFooter>
</div>
);
}
@ -298,7 +316,7 @@ function CustomTimestampSelector({
{formattedTimestamp}
</Button>
</PopoverTrigger>
<PopoverContent className="flex flex-col items-center" disablePortal>
<PopoverContent className="flex flex-col items-center">
<TimezoneAwareCalendar
timezone={config?.ui.timezone}
selectedDay={new Date(displayTimestamp * 1000)}

13
web/src/utils/recordingReviewUrl.ts
View File

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

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

@ -210,6 +210,9 @@ export function RecordingView({
const [debugReplayMode, setDebugReplayMode] = useState<ExportMode>("none");
const [debugReplayRange, setDebugReplayRange] = useState<TimeRange>();
const [shareTimestampOpen, setShareTimestampOpen] = useState(false);
const [shareTimestampAtOpen, setShareTimestampAtOpen] = useState(
Math.floor(startTime),
);
// move to next clip
@ -686,15 +689,19 @@ export function RecordingView({
setMotionOnly={() => {}}
/>
)}
<ShareTimestampDialog
currentTime={currentTime}
open={shareTimestampOpen}
onOpenChange={setShareTimestampOpen}
onShareTimestamp={onShareReviewLink}
/>
{isDesktop && (
<ShareTimestampDialog
key={shareTimestampAtOpen}
currentTime={shareTimestampAtOpen}
open={shareTimestampOpen}
onOpenChange={setShareTimestampOpen}
onShareTimestamp={onShareReviewLink}
/>
)}
{isDesktop && (
<ActionsDropdown
onShareTimestampClick={() => {
setShareTimestampAtOpen(Math.floor(currentTime));
setShareTimestampOpen(true);
}}
onDebugReplayClick={() => {
@ -776,9 +783,7 @@ export function RecordingView({
mainControllerRef.current?.pause();
}
}}
onShareTimestampClick={() => {
setShareTimestampOpen(true);
}}
onShareTimestamp={onShareReviewLink}
onUpdateFilter={updateFilter}
setRange={setExportRange}
setMode={setExportMode}