mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-04-03 22:04:53 +03:00
Implement share timestamp dialog
This commit is contained in:
0x464e
parent
05d29ebc93
commit
9524f8c4e5
@ -11,11 +11,13 @@ import { FaFilm } from "react-icons/fa6";
|
||||
type ActionsDropdownProps = {
|
||||
onDebugReplayClick: () => void;
|
||||
onExportClick: () => void;
|
||||
onShareTimestampClick: () => void;
|
||||
};
|
||||
|
||||
export default function ActionsDropdown({
|
||||
onDebugReplayClick,
|
||||
onExportClick,
|
||||
onShareTimestampClick,
|
||||
}: ActionsDropdownProps) {
|
||||
const { t } = useTranslation(["components/dialog", "views/replay", "common"]);
|
||||
|
||||
@ -37,6 +39,9 @@ export default function ActionsDropdown({
|
||||
<DropdownMenuItem onClick={onExportClick}>
|
||||
{t("menu.export", { ns: "common" })}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={onShareTimestampClick}>
|
||||
Share Timestamp
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={onDebugReplayClick}>
|
||||
{t("title", { ns: "views/replay" })}
|
||||
</DropdownMenuItem>
|
||||
|
||||
@ -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 {
|
||||
@ -33,13 +33,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 +49,7 @@ const DEFAULT_DRAWER_FEATURES: DrawerFeatures[] = [
|
||||
"calendar",
|
||||
"filter",
|
||||
"debug-replay",
|
||||
"share-timestamp",
|
||||
];
|
||||
|
||||
type MobileReviewSettingsDrawerProps = {
|
||||
@ -67,6 +70,7 @@ type MobileReviewSettingsDrawerProps = {
|
||||
debugReplayRange?: TimeRange;
|
||||
setDebugReplayMode?: (mode: ExportMode) => void;
|
||||
setDebugReplayRange?: (range: TimeRange | undefined) => void;
|
||||
onShareTimestampClick?: () => void;
|
||||
onUpdateFilter: (filter: ReviewFilter) => void;
|
||||
setRange: (range: TimeRange | undefined) => void;
|
||||
setMode: (mode: ExportMode) => void;
|
||||
@ -90,6 +94,7 @@ export default function MobileReviewSettingsDrawer({
|
||||
debugReplayRange,
|
||||
setDebugReplayMode = () => {},
|
||||
setDebugReplayRange = () => {},
|
||||
onShareTimestampClick = () => {},
|
||||
onUpdateFilter,
|
||||
setRange,
|
||||
setMode,
|
||||
@ -275,6 +280,19 @@ export default function MobileReviewSettingsDrawer({
|
||||
{t("export")}
|
||||
</Button>
|
||||
)}
|
||||
{features.includes("share-timestamp") && (
|
||||
<Button
|
||||
className="flex w-full items-center justify-center gap-2"
|
||||
aria-label="Share timestamp"
|
||||
onClick={() => {
|
||||
setDrawerMode("none");
|
||||
onShareTimestampClick();
|
||||
}}
|
||||
>
|
||||
<LuShare2 className="size-5 rounded-md bg-secondary-foreground stroke-secondary p-1" />
|
||||
Share Timestamp
|
||||
</Button>
|
||||
)}
|
||||
{features.includes("calendar") && (
|
||||
<Button
|
||||
className="flex w-full items-center justify-center gap-2"
|
||||
|
||||
326
web/src/components/overlay/ShareTimestampDialog.tsx
Normal file
326
web/src/components/overlay/ShareTimestampDialog.tsx
Normal file
@ -0,0 +1,326 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
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 { useFormattedTimestamp } from "@/hooks/use-date-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 { LuShare2 } from "react-icons/lu";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type ShareTimestampDialogProps = {
|
||||
currentTime: number;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onShareTimestamp: (timestamp: number) => void;
|
||||
};
|
||||
|
||||
export default function ShareTimestampDialog({
|
||||
currentTime,
|
||||
open,
|
||||
onOpenChange,
|
||||
onShareTimestamp,
|
||||
}: Readonly<ShareTimestampDialogProps>) {
|
||||
const { t } = useTranslation(["components/dialog"]);
|
||||
const [selectedOption, setSelectedOption] = useState<"current" | "custom">(
|
||||
"current",
|
||||
);
|
||||
const [customTimestamp, setCustomTimestamp] = useState(
|
||||
Math.floor(currentTime),
|
||||
);
|
||||
|
||||
const handleOpenChange = useCallback(
|
||||
(nextOpen: boolean) => {
|
||||
if (nextOpen) {
|
||||
setSelectedOption("current");
|
||||
setCustomTimestamp(Math.floor(currentTime));
|
||||
}
|
||||
|
||||
onOpenChange(nextOpen);
|
||||
},
|
||||
[currentTime, onOpenChange],
|
||||
);
|
||||
|
||||
const content = (
|
||||
<ShareTimestampContent
|
||||
currentTime={currentTime}
|
||||
selectedOption={selectedOption}
|
||||
setSelectedOption={setSelectedOption}
|
||||
customTimestamp={customTimestamp}
|
||||
setCustomTimestamp={setCustomTimestamp}
|
||||
onShareTimestamp={(timestamp) => {
|
||||
onShareTimestamp(timestamp);
|
||||
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>
|
||||
{t("recording.shareTimestamp.title", { ns: "components/dialog" })}
|
||||
</DialogTitle>
|
||||
</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;
|
||||
};
|
||||
|
||||
function ShareTimestampContent({
|
||||
currentTime,
|
||||
selectedOption,
|
||||
setSelectedOption,
|
||||
customTimestamp,
|
||||
setCustomTimestamp,
|
||||
onShareTimestamp,
|
||||
}: ShareTimestampContentProps) {
|
||||
const { t } = useTranslation(["common"]);
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const currentTimestampLabel = useFormattedTimestamp(
|
||||
currentTime,
|
||||
config?.ui.time_format == "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 font-medium">Share Review Timestamp</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Share the current player position or choose a custom timestamp.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RadioGroup
|
||||
className="mt-4 flex flex-col gap-4"
|
||||
value={selectedOption}
|
||||
onValueChange={(value) =>
|
||||
setSelectedOption(value as "current" | "custom")
|
||||
}
|
||||
>
|
||||
<div className="space-y-2 rounded-lg border bg-secondary/40 p-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<RadioGroupItem id="share-current" value="current" />
|
||||
<Label className="cursor-pointer space-y-1" htmlFor="share-current">
|
||||
<div className="text-sm font-medium">
|
||||
Current Player Timestamp
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{currentTimestampLabel}
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 rounded-lg border bg-secondary/40 p-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<RadioGroupItem id="share-custom" value="custom" />
|
||||
<Label className="cursor-pointer space-y-1" htmlFor="share-custom">
|
||||
<div className="text-sm font-medium">Custom Timestamp</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Pick a specific point in time to share.
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
{selectedOption === "custom" && (
|
||||
<CustomTimestampSelector
|
||||
timestamp={customTimestamp}
|
||||
setTimestamp={setCustomTimestamp}
|
||||
label="Custom Timestamp"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</RadioGroup>
|
||||
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
className="w-full justify-between gap-3"
|
||||
variant="select"
|
||||
onClick={() => onShareTimestamp(Math.floor(selectedTimestamp))}
|
||||
>
|
||||
<span>Share Timestamp Link</span>
|
||||
<LuShare2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type CustomTimestampSelectorProps = {
|
||||
timestamp: number;
|
||||
setTimestamp: (timestamp: number) => void;
|
||||
label: string;
|
||||
};
|
||||
|
||||
function CustomTimestampSelector({
|
||||
timestamp,
|
||||
setTimestamp,
|
||||
label,
|
||||
}: CustomTimestampSelectorProps) {
|
||||
const { t } = useTranslation(["common"]);
|
||||
const { data: config } = useSWR<FrigateConfig>("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;
|
||||
}
|
||||
|
||||
return (timezoneOffset - localTimeOffset) * 60;
|
||||
}, [timezoneOffset, localTimeOffset]);
|
||||
|
||||
const displayTimestamp = useMemo(
|
||||
() => timestamp + offsetDeltaSeconds,
|
||||
[timestamp, offsetDeltaSeconds],
|
||||
);
|
||||
|
||||
const formattedTimestamp = useFormattedTimestamp(
|
||||
displayTimestamp,
|
||||
config?.ui.time_format == "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) => {
|
||||
setTimestamp(date.getTime() / 1000 - offsetDeltaSeconds);
|
||||
},
|
||||
[offsetDeltaSeconds, setTimestamp],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`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={`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" disablePortal>
|
||||
<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(
|
||||
parseInt(hour),
|
||||
parseInt(minute),
|
||||
parseInt(second ?? "0"),
|
||||
0,
|
||||
);
|
||||
setFromDisplayDate(nextTimestamp);
|
||||
}}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -42,7 +42,6 @@ import {
|
||||
isTablet,
|
||||
} from "react-device-detect";
|
||||
import { IoMdArrowRoundBack } from "react-icons/io";
|
||||
import { LuCopy } from "react-icons/lu";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import useSWR from "swr";
|
||||
@ -78,8 +77,8 @@ import {
|
||||
GenAISummaryDialog,
|
||||
GenAISummaryChip,
|
||||
} from "@/components/overlay/chip/GenAISummaryChip";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { toast } from "sonner";
|
||||
import ShareTimestampDialog from "@/components/overlay/ShareTimestampDialog";
|
||||
import { shareOrCopy } from "@/utils/browserUtil";
|
||||
import { createRecordingReviewUrl } from "@/utils/recordingReviewUrl";
|
||||
|
||||
const DATA_REFRESH_TIME = 600000; // 10 minutes
|
||||
@ -211,6 +210,7 @@ export function RecordingView({
|
||||
|
||||
const [debugReplayMode, setDebugReplayMode] = useState<ExportMode>("none");
|
||||
const [debugReplayRange, setDebugReplayRange] = useState<TimeRange>();
|
||||
const [shareTimestampOpen, setShareTimestampOpen] = useState(false);
|
||||
|
||||
// move to next clip
|
||||
|
||||
@ -333,21 +333,21 @@ export function RecordingView({
|
||||
manuallySetCurrentTime(startTime);
|
||||
}, [startTime, manuallySetCurrentTime]);
|
||||
|
||||
const onCopyReviewLink = useCallback(() => {
|
||||
const reviewUrl = createRecordingReviewUrl(
|
||||
location.pathname,
|
||||
{
|
||||
camera: mainCamera,
|
||||
timestamp: Math.floor(currentTime),
|
||||
},
|
||||
config?.ui.timezone,
|
||||
);
|
||||
const onShareReviewLink = useCallback(
|
||||
(timestamp: number) => {
|
||||
const reviewUrl = createRecordingReviewUrl(
|
||||
location.pathname,
|
||||
{
|
||||
camera: mainCamera,
|
||||
timestamp: Math.floor(timestamp),
|
||||
},
|
||||
config?.ui.timezone,
|
||||
);
|
||||
|
||||
copy(reviewUrl);
|
||||
toast.success(t("toast.copyUrlToClipboard", { ns: "common" }), {
|
||||
position: "top-center",
|
||||
});
|
||||
}, [location.pathname, mainCamera, currentTime, config?.ui.timezone, t]);
|
||||
shareOrCopy(reviewUrl, `Frigate Review Timestamp: ${mainCamera}`);
|
||||
},
|
||||
[location.pathname, mainCamera, config?.ui.timezone],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!scrubbing) {
|
||||
@ -695,21 +695,17 @@ export function RecordingView({
|
||||
setMotionOnly={() => {}}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
className="flex items-center gap-2.5 rounded-lg"
|
||||
aria-label={t("button.copy", { ns: "common" })}
|
||||
size="sm"
|
||||
onClick={onCopyReviewLink}
|
||||
>
|
||||
<LuCopy className="size-4 text-secondary-foreground" />
|
||||
{isDesktop && (
|
||||
<div className="text-primary">
|
||||
{t("button.copy", { ns: "common" })}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<ShareTimestampDialog
|
||||
currentTime={currentTime}
|
||||
open={shareTimestampOpen}
|
||||
onOpenChange={setShareTimestampOpen}
|
||||
onShareTimestamp={onShareReviewLink}
|
||||
/>
|
||||
{isDesktop && (
|
||||
<ActionsDropdown
|
||||
onShareTimestampClick={() => {
|
||||
setShareTimestampOpen(true);
|
||||
}}
|
||||
onDebugReplayClick={() => {
|
||||
const now = new Date(timeRange.before * 1000);
|
||||
now.setHours(now.getHours() - 1);
|
||||
@ -789,6 +785,9 @@ export function RecordingView({
|
||||
mainControllerRef.current?.pause();
|
||||
}
|
||||
}}
|
||||
onShareTimestampClick={() => {
|
||||
setShareTimestampOpen(true);
|
||||
}}
|
||||
onUpdateFilter={updateFilter}
|
||||
setRange={setExportRange}
|
||||
setMode={setExportMode}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user