mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-05-09 15:05:26 +03:00
Compare commits
No commits in common. "6cdf4fe3b8867dbd925fbf549b896b626ba13895" and "d7f42735fcd890d5e1fa88ad420bd2789f069c4b" have entirely different histories.
6cdf4fe3b8
...
d7f42735fc
@ -106,17 +106,10 @@ 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/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
|
||||
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
|
||||
|
||||
# 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
|
||||
@ -124,10 +117,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/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
|
||||
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
|
||||
# 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
|
||||
|
||||
@ -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:.2f} MB have been cleared. Retained recordings must be deleted."
|
||||
f"Could not clear {hourly_bandwidth} MB, currently {deleted_segments_size} 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:.2f} MB of recordings")
|
||||
logger.info(f"Cleaned up {deleted_segments_size} MB of recordings")
|
||||
|
||||
logger.debug(f"Expiring {len(deleted_recordings)} recordings")
|
||||
# delete up to 100,000 at a time
|
||||
|
||||
@ -152,14 +152,6 @@
|
||||
}
|
||||
},
|
||||
"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,8 +4,7 @@
|
||||
"noPreviewFoundFor": "No Preview Found for {{cameraName}}",
|
||||
"submitFrigatePlus": {
|
||||
"title": "Submit this frame to Frigate+?",
|
||||
"submit": "Submit",
|
||||
"previewError": "Could not load snapshot preview. The recording may not be available at this time."
|
||||
"submit": "Submit"
|
||||
},
|
||||
"livePlayerRequiredIOSVersion": "iOS 17.1 or greater is required for this live stream type.",
|
||||
"streamOffline": {
|
||||
|
||||
@ -45,9 +45,7 @@
|
||||
},
|
||||
"documentTitle": "Review - Frigate",
|
||||
"recordings": {
|
||||
"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."
|
||||
"documentTitle": "Recordings - Frigate"
|
||||
},
|
||||
"calendarFilter": {
|
||||
"last24Hours": "Last 24 Hours"
|
||||
|
||||
@ -31,8 +31,6 @@ 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: [
|
||||
|
||||
@ -27,12 +27,10 @@ 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: ["expire_time"],
|
||||
hiddenFields: [],
|
||||
advancedFields: ["expire_time", "enhancement"],
|
||||
overrideFields: ["enabled", "min_area", "enhancement"],
|
||||
},
|
||||
|
||||
@ -3,11 +3,6 @@ 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",
|
||||
|
||||
@ -45,10 +45,6 @@ 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"],
|
||||
|
||||
@ -9,13 +9,11 @@ import {
|
||||
import { Children, useState, useEffect, useRef } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
import RestartRequiredIndicator from "@/components/indicators/RestartRequiredIndicator";
|
||||
import { LuChevronDown, LuChevronRight, LuExternalLink } from "react-icons/lu";
|
||||
import { LuChevronDown, LuChevronRight } 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,
|
||||
@ -180,7 +178,6 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
|
||||
"views/settings",
|
||||
"common",
|
||||
]);
|
||||
const { getLocaleDocUrl } = useDocDomain();
|
||||
const objectRequiresRestart = requiresRestartForFieldPath(
|
||||
fieldPath,
|
||||
restartRequired,
|
||||
@ -303,17 +300,6 @@ 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;
|
||||
@ -480,20 +466,6 @@ 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" />
|
||||
|
||||
@ -11,14 +11,12 @@ import { FaFilm } from "react-icons/fa6";
|
||||
type ActionsDropdownProps = {
|
||||
onDebugReplayClick: () => void;
|
||||
onExportClick: () => void;
|
||||
onShareTimestampClick: () => void;
|
||||
};
|
||||
|
||||
export default function ActionsDropdown({
|
||||
onDebugReplayClick,
|
||||
onExportClick,
|
||||
onShareTimestampClick,
|
||||
}: Readonly<ActionsDropdownProps>) {
|
||||
}: ActionsDropdownProps) {
|
||||
const { t } = useTranslation(["components/dialog", "views/replay", "common"]);
|
||||
|
||||
return (
|
||||
@ -39,9 +37,6 @@ 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>
|
||||
|
||||
@ -113,19 +113,18 @@ export function DebugReplayContent({
|
||||
{isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
|
||||
|
||||
<DialogFooter
|
||||
className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
|
||||
className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
|
||||
>
|
||||
<Button
|
||||
className={isDesktop ? "" : "w-full"}
|
||||
aria-label={t("button.cancel", { ns: "common" })}
|
||||
variant="outline"
|
||||
<div
|
||||
className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
|
||||
onClick={onCancel}
|
||||
>
|
||||
{t("button.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
className={isDesktop ? "" : "w-full"}
|
||||
variant="select"
|
||||
size="sm"
|
||||
disabled={isStarting}
|
||||
onClick={() => {
|
||||
if (selectedOption === "timeline") {
|
||||
|
||||
@ -1043,21 +1043,20 @@ export function ExportContent({
|
||||
|
||||
{isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
|
||||
<DialogFooter
|
||||
className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-2"}
|
||||
className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
|
||||
>
|
||||
<Button
|
||||
className={isDesktop ? "" : "w-full"}
|
||||
aria-label={t("button.cancel", { ns: "common" })}
|
||||
variant="outline"
|
||||
<div
|
||||
className={`cursor-pointer p-2 text-center ${isDesktop ? "" : "w-full"}`}
|
||||
onClick={onCancel}
|
||||
>
|
||||
{t("button.cancel", { ns: "common" })}
|
||||
</Button>
|
||||
</div>
|
||||
{activeTab === "export" ? (
|
||||
<Button
|
||||
className={isDesktop ? "" : "w-full"}
|
||||
aria-label={t("export.selectOrExport")}
|
||||
variant="select"
|
||||
size="sm"
|
||||
disabled={isStartingExport}
|
||||
onClick={async () => {
|
||||
if (selectedOption == "timeline") {
|
||||
|
||||
@ -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, LuShare2 } from "react-icons/lu";
|
||||
import { LuBug } from "react-icons/lu";
|
||||
import { TimeRange } from "@/types/timeline";
|
||||
import { ExportContent, ExportPreviewDialog, ExportTab } from "./ExportDialog";
|
||||
import {
|
||||
@ -27,7 +27,6 @@ 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"
|
||||
@ -35,15 +34,13 @@ type DrawerMode =
|
||||
| "export"
|
||||
| "calendar"
|
||||
| "filter"
|
||||
| "debug-replay"
|
||||
| "share-timestamp";
|
||||
| "debug-replay";
|
||||
|
||||
const DRAWER_FEATURES = [
|
||||
"export",
|
||||
"calendar",
|
||||
"filter",
|
||||
"debug-replay",
|
||||
"share-timestamp",
|
||||
] as const;
|
||||
export type DrawerFeatures = (typeof DRAWER_FEATURES)[number];
|
||||
const DEFAULT_DRAWER_FEATURES: DrawerFeatures[] = [
|
||||
@ -51,7 +48,6 @@ const DEFAULT_DRAWER_FEATURES: DrawerFeatures[] = [
|
||||
"calendar",
|
||||
"filter",
|
||||
"debug-replay",
|
||||
"share-timestamp",
|
||||
];
|
||||
|
||||
type MobileReviewSettingsDrawerProps = {
|
||||
@ -72,7 +68,6 @@ 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;
|
||||
@ -96,7 +91,6 @@ export default function MobileReviewSettingsDrawer({
|
||||
debugReplayRange,
|
||||
setDebugReplayMode = () => {},
|
||||
setDebugReplayRange = () => {},
|
||||
onShareTimestamp = () => {},
|
||||
onUpdateFilter,
|
||||
setRange,
|
||||
setMode,
|
||||
@ -106,7 +100,6 @@ export default function MobileReviewSettingsDrawer({
|
||||
"views/recording",
|
||||
"components/dialog",
|
||||
"views/replay",
|
||||
"common",
|
||||
]);
|
||||
const navigate = useNavigate();
|
||||
const [drawerMode, setDrawerMode] = useState<DrawerMode>("none");
|
||||
@ -115,15 +108,6 @@ 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
|
||||
|
||||
@ -339,27 +323,6 @@ 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"
|
||||
@ -572,28 +535,6 @@ 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 (
|
||||
|
||||
@ -1,366 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@ -636,13 +636,6 @@ 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 />;
|
||||
}
|
||||
@ -690,7 +683,6 @@ export function TrackingDetails({
|
||||
onTimeUpdate={handleTimeUpdate}
|
||||
onSeekToTime={handleSeekToTime}
|
||||
onUploadFrame={onUploadFrameToPlus}
|
||||
getSnapshotUrl={getSnapshotUrlForPlus}
|
||||
onPlaying={() => setIsVideoLoading(false)}
|
||||
setFullResolution={setFullResolution}
|
||||
toggleFullscreen={toggleFullscreen}
|
||||
@ -875,7 +867,6 @@ export function TrackingDetails({
|
||||
getZoneColor={getZoneColor}
|
||||
effectiveTime={effectiveTime}
|
||||
isTimelineActive={isWithinEventRange}
|
||||
annotationOffset={annotationOffset}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@ -899,7 +890,6 @@ type LifecycleIconRowProps = {
|
||||
getZoneColor: (zoneName: string) => number[] | undefined;
|
||||
effectiveTime?: number;
|
||||
isTimelineActive?: boolean;
|
||||
annotationOffset: number;
|
||||
};
|
||||
|
||||
function LifecycleIconRow({
|
||||
@ -910,7 +900,6 @@ function LifecycleIconRow({
|
||||
getZoneColor,
|
||||
effectiveTime,
|
||||
isTimelineActive,
|
||||
annotationOffset,
|
||||
}: LifecycleIconRowProps) {
|
||||
const { t } = useTranslation(["views/explore", "components/player"]);
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
@ -1217,7 +1206,7 @@ function LifecycleIconRow({
|
||||
className="cursor-pointer"
|
||||
onSelect={async () => {
|
||||
const resp = await axios.post(
|
||||
`/${item.camera}/plus/${item.timestamp + annotationOffset / 1000}`,
|
||||
`/${item.camera}/plus/${item.timestamp}`,
|
||||
);
|
||||
|
||||
if (resp && resp.status == 200) {
|
||||
|
||||
@ -53,7 +53,6 @@ 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;
|
||||
@ -79,7 +78,6 @@ export default function HlsVideoPlayer({
|
||||
onSeekToTime,
|
||||
setFullResolution,
|
||||
onUploadFrame,
|
||||
getSnapshotUrl,
|
||||
toggleFullscreen,
|
||||
onError,
|
||||
isDetailMode = false,
|
||||
@ -218,11 +216,7 @@ export default function HlsVideoPlayer({
|
||||
|
||||
const [tallCamera, setTallCamera] = useState(false);
|
||||
const [isPlaying, setIsPlaying] = useState(true);
|
||||
const [persistedMuted, setPersistedMuted] = useUserPersistence(
|
||||
"hlsPlayerMuted",
|
||||
true,
|
||||
);
|
||||
const [temporaryMuted, setTemporaryMuted] = useState(false);
|
||||
const [muted, setMuted] = useUserPersistence("hlsPlayerMuted", true);
|
||||
const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
|
||||
const [defaultPlaybackRate] = useUserPersistence("playbackRate", 1);
|
||||
const [playbackRate, setPlaybackRate] = useOverlayState(
|
||||
@ -238,16 +232,6 @@ 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;
|
||||
@ -313,7 +297,7 @@ export default function HlsVideoPlayer({
|
||||
fullscreen: supportsFullscreen,
|
||||
}}
|
||||
setControlsOpen={setControlsOpen}
|
||||
setMuted={onSetMuted}
|
||||
setMuted={(muted) => setMuted(muted)}
|
||||
playbackRate={playbackRate ?? 1}
|
||||
hotKeys={hotKeys}
|
||||
onPlayPause={onPlayPause}
|
||||
@ -333,13 +317,6 @@ 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();
|
||||
|
||||
@ -427,20 +404,9 @@ export default function HlsVideoPlayer({
|
||||
: undefined
|
||||
}
|
||||
onVolumeChange={() => {
|
||||
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);
|
||||
setVolume(videoRef.current?.volume ?? 1.0, true);
|
||||
if (!frigateControls) {
|
||||
setMuted(videoRef.current?.muted);
|
||||
}
|
||||
}}
|
||||
onPlay={() => {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
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 {
|
||||
@ -72,7 +71,6 @@ type VideoControlsProps = {
|
||||
onSeek: (diff: number) => void;
|
||||
onSetPlaybackRate: (rate: number) => void;
|
||||
onUploadFrame?: () => void;
|
||||
getSnapshotUrl?: () => string | undefined;
|
||||
toggleFullscreen?: () => void;
|
||||
containerRef?: React.MutableRefObject<HTMLDivElement | null>;
|
||||
};
|
||||
@ -94,7 +92,6 @@ export default function VideoControls({
|
||||
onSeek,
|
||||
onSetPlaybackRate,
|
||||
onUploadFrame,
|
||||
getSnapshotUrl,
|
||||
toggleFullscreen,
|
||||
containerRef,
|
||||
}: VideoControlsProps) {
|
||||
@ -291,7 +288,6 @@ export default function VideoControls({
|
||||
}
|
||||
}}
|
||||
onUploadFrame={onUploadFrame}
|
||||
getSnapshotUrl={getSnapshotUrl}
|
||||
containerRef={containerRef}
|
||||
fullscreen={fullscreen}
|
||||
/>
|
||||
@ -310,7 +306,6 @@ type FrigatePlusUploadButtonProps = {
|
||||
onOpen: () => void;
|
||||
onClose: () => void;
|
||||
onUploadFrame: () => void;
|
||||
getSnapshotUrl?: () => string | undefined;
|
||||
containerRef?: React.MutableRefObject<HTMLDivElement | null>;
|
||||
fullscreen?: boolean;
|
||||
};
|
||||
@ -319,14 +314,12 @@ function FrigatePlusUploadButton({
|
||||
onOpen,
|
||||
onClose,
|
||||
onUploadFrame,
|
||||
getSnapshotUrl,
|
||||
containerRef,
|
||||
fullscreen,
|
||||
}: FrigatePlusUploadButtonProps) {
|
||||
const { t } = useTranslation(["components/player"]);
|
||||
|
||||
const [previewUrl, setPreviewUrl] = useState<string>();
|
||||
const [previewError, setPreviewError] = useState(false);
|
||||
const [videoImg, setVideoImg] = useState<string>();
|
||||
|
||||
return (
|
||||
<AlertDialog
|
||||
@ -341,13 +334,6 @@ 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];
|
||||
@ -359,7 +345,7 @@ function FrigatePlusUploadButton({
|
||||
|
||||
if (context) {
|
||||
context.drawImage(video, 0, 0, videoSize[0], videoSize[1]);
|
||||
setPreviewUrl(canvas.toDataURL("image/webp"));
|
||||
setVideoImg(canvas.toDataURL("image/webp"));
|
||||
}
|
||||
}
|
||||
}}
|
||||
@ -376,29 +362,14 @@ function FrigatePlusUploadButton({
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{t("submitFrigatePlus.title")}</AlertDialogTitle>
|
||||
</AlertDialogHeader>
|
||||
{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)}
|
||||
/>
|
||||
)}
|
||||
<img className="aspect-video w-full object-contain" src={videoImg} />
|
||||
<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>
|
||||
|
||||
@ -6,7 +6,6 @@ import {
|
||||
calculateInpointOffset,
|
||||
calculateSeekPosition,
|
||||
} from "@/utils/videoUtil";
|
||||
import { playWithTemporaryMuteFallback } from "@/utils/videoUtil.ts";
|
||||
|
||||
type PlayerMode = "playback" | "scrubbing";
|
||||
|
||||
@ -108,7 +107,7 @@ export class DynamicVideoController {
|
||||
return new Promise((resolve) => {
|
||||
const onSeekedHandler = () => {
|
||||
this.playerController.removeEventListener("seeked", onSeekedHandler);
|
||||
playWithTemporaryMuteFallback(this.playerController);
|
||||
this.playerController.play();
|
||||
resolve(undefined);
|
||||
};
|
||||
|
||||
|
||||
@ -181,21 +181,6 @@ 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(
|
||||
@ -327,7 +312,6 @@ export default function DynamicVideoPlayer({
|
||||
}}
|
||||
setFullResolution={setFullResolution}
|
||||
onUploadFrame={onUploadFrameToPlus}
|
||||
getSnapshotUrl={getSnapshotUrlForPlus}
|
||||
toggleFullscreen={toggleFullscreen}
|
||||
onError={(error) => {
|
||||
if (error == "stalled" && !isScrubbing) {
|
||||
|
||||
@ -21,10 +21,6 @@ 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";
|
||||
@ -32,7 +28,6 @@ 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() {
|
||||
@ -133,14 +128,6 @@ 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);
|
||||
@ -156,7 +143,10 @@ export default function Events() {
|
||||
const startTime = resp.data.start_time - REVIEW_PADDING;
|
||||
const date = new Date(startTime * 1000);
|
||||
|
||||
setReviewFilter(getReviewDayBounds(date));
|
||||
setReviewFilter({
|
||||
after: getBeginningOfDayTimestamp(date),
|
||||
before: getEndOfDayTimestamp(date),
|
||||
});
|
||||
setRecording(
|
||||
{
|
||||
camera: resp.data.camera,
|
||||
@ -244,51 +234,6 @@ 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));
|
||||
|
||||
@ -40,7 +40,6 @@ export type RecordingStartingPoint = {
|
||||
startTime: number;
|
||||
severity: ReviewSeverity;
|
||||
timelineType?: TimelineType;
|
||||
navigationSource?: "shared-link";
|
||||
};
|
||||
|
||||
export type RecordingPlayerError = "stalled" | "startup";
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
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();
|
||||
}
|
||||
@ -78,20 +78,3 @@ 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;
|
||||
});
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@ import {
|
||||
isTablet,
|
||||
} from "react-device-detect";
|
||||
import { IoMdArrowRoundBack } from "react-icons/io";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import useSWR from "swr";
|
||||
import { TimeRange, TimelineType } from "@/types/timeline";
|
||||
@ -77,9 +77,6 @@ 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
|
||||
|
||||
@ -107,10 +104,9 @@ export function RecordingView({
|
||||
updateFilter,
|
||||
refreshData,
|
||||
}: RecordingViewProps) {
|
||||
const { t } = useTranslation(["views/events", "components/dialog"]);
|
||||
const { t } = useTranslation(["views/events"]);
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// recordings summary
|
||||
@ -209,16 +205,6 @@ 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
|
||||
|
||||
@ -331,34 +317,6 @@ 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) {
|
||||
@ -609,7 +567,7 @@ export function RecordingView({
|
||||
className="flex items-center gap-2.5 rounded-lg"
|
||||
aria-label={t("label.back", { ns: "common" })}
|
||||
size="sm"
|
||||
onClick={handleBack}
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
|
||||
{isDesktop && (
|
||||
@ -705,28 +663,8 @@ 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);
|
||||
@ -806,7 +744,6 @@ export function RecordingView({
|
||||
mainControllerRef.current?.pause();
|
||||
}
|
||||
}}
|
||||
onShareTimestamp={onShareReviewLink}
|
||||
onUpdateFilter={updateFilter}
|
||||
setRange={setExportRange}
|
||||
setMode={setExportMode}
|
||||
|
||||
@ -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-1">
|
||||
<Heading as="h4" className="mb-2">
|
||||
{t("triggers.management.title")}
|
||||
</Heading>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
@ -495,17 +495,6 @@ 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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user