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

Revert "Early 0.18 work (#22138)" (#22142)

Browse Source 
This reverts commit d24b96d3bb.
This commit is contained in:
Nicolas Mowen
2026-02-26 21:27:31 -07:00
committed by GitHub
parent d24b96d3bb
commit 451d6f5c22
107 changed files with 1049 additions and 6765 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/api/ws.tsx
-38
View File
@@ -11,7 +11,6 @@ import {
TrackedObjectUpdateReturnType,
TriggerStatus,
FrigateAudioDetections,
Job,
} from "@/types/ws";
import { FrigateStats } from "@/types/stats";
import { createContainer } from "react-tracked";
@@ -652,40 +651,3 @@ export function useTriggers(): { payload: TriggerStatus } {
: { name: "", camera: "", event_id: "", type: "", score: 0 };
return { payload: useDeepMemo(parsed) };
}
export function useJobStatus(
jobType: string,
revalidateOnFocus: boolean = true,
): { payload: Job | null } {
const {
value: { payload },
send: sendCommand,
} = useWs("job_state", "jobState");
const jobData = useDeepMemo(
payload && typeof payload === "string" ? JSON.parse(payload) : {},
);
const currentJob = jobData[jobType] || null;
useEffect(() => {
let listener: (() => void) | undefined;
if (revalidateOnFocus) {
sendCommand("jobState");
listener = () => {
if (document.visibilityState === "visible") {
sendCommand("jobState");
}
};
addEventListener("visibilitychange", listener);
}
return () => {
if (listener) {
removeEventListener("visibilitychange", listener);
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [revalidateOnFocus]);
return { payload: currentJob as Job | null };
}
web/src/components/auth/ProtectedRoute.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export default function ProtectedRoute({
return <Outlet />;
}
// Authenticated mode (external port): require login
// Authenticated mode (8971): require login
if (!auth.user) {
return (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
web/src/components/camera/ConnectionQualityIndicator.tsx
-76
View File
@@ -1,76 +0,0 @@
import { useTranslation } from "react-i18next";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
type ConnectionQualityIndicatorProps = {
quality: "excellent" | "fair" | "poor" | "unusable";
expectedFps: number;
reconnects: number;
stalls: number;
};
export function ConnectionQualityIndicator({
quality,
expectedFps,
reconnects,
stalls,
}: ConnectionQualityIndicatorProps) {
const { t } = useTranslation(["views/system"]);
const getColorClass = (quality: string): string => {
switch (quality) {
case "excellent":
return "bg-success";
case "fair":
return "bg-yellow-500";
case "poor":
return "bg-orange-500";
case "unusable":
return "bg-destructive";
default:
return "bg-gray-500";
}
};
const qualityLabel = t(`cameras.connectionQuality.${quality}`);
return (
<Tooltip>
<TooltipTrigger asChild>
<div
className={cn(
"inline-block size-3 cursor-pointer rounded-full",
getColorClass(quality),
)}
/>
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<div className="space-y-2">
<div className="font-semibold">
{t("cameras.connectionQuality.title")}
</div>
<div className="text-sm">
<div className="capitalize">{qualityLabel}</div>
<div className="mt-2 space-y-1 text-xs">
<div>
{t("cameras.connectionQuality.expectedFps")}:{" "}
{expectedFps.toFixed(1)} {t("cameras.connectionQuality.fps")}
</div>
<div>
{t("cameras.connectionQuality.reconnectsLastHour")}:{" "}
{reconnects}
</div>
<div>
{t("cameras.connectionQuality.stallsLastHour")}: {stalls}
</div>
</div>
</div>
</div>
</TooltipContent>
</Tooltip>
);
}
web/src/components/card/ExportCard.tsx
+97 -137
View File
@@ -1,8 +1,9 @@
import ActivityIndicator from "../indicators/activity-indicator";
import { LuTrash } from "react-icons/lu";
import { Button } from "../ui/button";
import { useCallback, useMemo, useState } from "react";
import { isMobile } from "react-device-detect";
import { FiMoreVertical } from "react-icons/fi";
import { useCallback, useState } from "react";
import { isDesktop, isMobile } from "react-device-detect";
import { FaDownload, FaPlay, FaShareAlt } from "react-icons/fa";
import { Skeleton } from "../ui/skeleton";
import {
Dialog,
@@ -13,81 +14,35 @@ import {
} from "../ui/dialog";
import { Input } from "../ui/input";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { DeleteClipType, Export, ExportCase } from "@/types/export";
import { DeleteClipType, Export } from "@/types/export";
import { MdEditSquare } from "react-icons/md";
import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils";
import { shareOrCopy } from "@/utils/browserUtil";
import { useTranslation } from "react-i18next";
import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
import BlurredIconButton from "../button/BlurredIconButton";
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
import { useIsAdmin } from "@/hooks/use-is-admin";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { FaFolder } from "react-icons/fa";
type CaseCardProps = {
className: string;
exportCase: ExportCase;
exports: Export[];
onSelect: () => void;
};
export function CaseCard({
className,
exportCase,
exports,
onSelect,
}: CaseCardProps) {
const firstExport = useMemo(
() => exports.find((exp) => exp.thumb_path && exp.thumb_path.length > 0),
[exports],
);
return (
<div
className={cn(
"relative flex aspect-video size-full cursor-pointer items-center justify-center overflow-hidden rounded-lg bg-secondary md:rounded-2xl",
className,
)}
onClick={() => onSelect()}
>
{firstExport && (
<img
className="absolute inset-0 size-full object-cover"
src={`${baseUrl}${firstExport.thumb_path.replace("/media/frigate/", "")}`}
alt=""
/>
)}
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16 bg-gradient-to-t from-black/60 to-transparent" />
<div className="absolute bottom-2 left-2 z-20 flex items-center justify-start gap-2 text-white">
<FaFolder />
<div className="capitalize">{exportCase.name}</div>
</div>
</div>
);
}
type ExportCardProps = {
type ExportProps = {
className: string;
exportedRecording: Export;
onSelect: (selected: Export) => void;
onRename: (original: string, update: string) => void;
onDelete: ({ file, exportName }: DeleteClipType) => void;
onAssignToCase?: (selected: Export) => void;
};
export function ExportCard({
export default function ExportCard({
className,
exportedRecording,
onSelect,
onRename,
onDelete,
onAssignToCase,
}: ExportCardProps) {
}: ExportProps) {
const { t } = useTranslation(["views/exports"]);
const isAdmin = useIsAdmin();
const [hovered, setHovered] = useState(false);
const [loading, setLoading] = useState(
exportedRecording.thumb_path.length > 0,
);
@@ -181,14 +136,12 @@ export function ExportCard({
<div
className={cn(
"relative flex aspect-video cursor-pointer items-center justify-center rounded-lg bg-black md:rounded-2xl",
"relative flex aspect-video items-center justify-center rounded-lg bg-black md:rounded-2xl",
className,
)}
onClick={() => {
if (!exportedRecording.in_progress) {
onSelect(exportedRecording);
}
}}
onMouseEnter={isDesktop ? () => setHovered(true) : undefined}
onMouseLeave={isDesktop ? () => setHovered(false) : undefined}
onClick={isDesktop ? undefined : () => setHovered(!hovered)}
>
{exportedRecording.in_progress ? (
<ActivityIndicator />
@@ -205,88 +158,95 @@ export function ExportCard({
)}
</>
)}
{!exportedRecording.in_progress && (
<div className="absolute bottom-2 right-3 z-40">
<DropdownMenu modal={false}>
<DropdownMenuTrigger>
<BlurredIconButton
aria-label={t("tooltip.editName")}
onClick={(e) => e.stopPropagation()}
>
<FiMoreVertical className="size-5" />
</BlurredIconButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
className="cursor-pointer"
aria-label={t("tooltip.shareExport")}
onClick={(e) => {
e.stopPropagation();
shareOrCopy(
`${baseUrl}export?id=${exportedRecording.id}`,
exportedRecording.name.replaceAll("_", " "),
);
}}
>
{t("tooltip.shareExport")}
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer"
aria-label={t("tooltip.downloadVideo")}
>
{hovered && (
<>
<div className="absolute inset-0 rounded-lg bg-black bg-opacity-60 md:rounded-2xl" />
<div className="absolute right-3 top-2">
<div className="flex items-center justify-center gap-4">
{!exportedRecording.in_progress && (
<Tooltip>
<TooltipTrigger asChild>
<BlurredIconButton
onClick={() =>
shareOrCopy(
`${baseUrl}export?id=${exportedRecording.id}`,
exportedRecording.name.replaceAll("_", " "),
)
}
>
<FaShareAlt className="size-4" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>{t("tooltip.shareExport")}</TooltipContent>
</Tooltip>
)}
{!exportedRecording.in_progress && (
<a
download
href={`${baseUrl}${exportedRecording.video_path.replace("/media/frigate/", "")}`}
onClick={(e) => e.stopPropagation()}
>
{t("tooltip.downloadVideo")}
<Tooltip>
<TooltipTrigger asChild>
<BlurredIconButton>
<FaDownload className="size-4" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>
{t("tooltip.downloadVideo")}
</TooltipContent>
</Tooltip>
</a>
</DropdownMenuItem>
{isAdmin && onAssignToCase && (
<DropdownMenuItem
className="cursor-pointer"
aria-label={t("tooltip.assignToCase")}
onClick={(e) => {
e.stopPropagation();
onAssignToCase(exportedRecording);
}}
>
{t("tooltip.assignToCase")}
</DropdownMenuItem>
)}
{isAdmin && !exportedRecording.in_progress && (
<Tooltip>
<TooltipTrigger asChild>
<BlurredIconButton
onClick={() =>
setEditName({
original: exportedRecording.name,
update: undefined,
})
}
>
<MdEditSquare className="size-4" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>{t("tooltip.editName")}</TooltipContent>
</Tooltip>
)}
{isAdmin && (
<DropdownMenuItem
className="cursor-pointer"
aria-label={t("tooltip.editName")}
onClick={(e) => {
e.stopPropagation();
setEditName({
original: exportedRecording.name,
update: undefined,
});
}}
>
{t("tooltip.editName")}
</DropdownMenuItem>
<Tooltip>
<TooltipTrigger asChild>
<BlurredIconButton
onClick={() =>
onDelete({
file: exportedRecording.id,
exportName: exportedRecording.name,
})
}
>
<LuTrash className="size-4 fill-destructive text-destructive hover:text-white" />
</BlurredIconButton>
</TooltipTrigger>
<TooltipContent>{t("tooltip.deleteExport")}</TooltipContent>
</Tooltip>
)}
{isAdmin && (
<DropdownMenuItem
className="cursor-pointer"
aria-label={t("tooltip.deleteExport")}
onClick={(e) => {
e.stopPropagation();
onDelete({
file: exportedRecording.id,
exportName: exportedRecording.name,
});
}}
>
{t("tooltip.deleteExport")}
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</div>
{!exportedRecording.in_progress && (
<Button
className="absolute left-1/2 top-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 cursor-pointer text-white hover:bg-transparent hover:text-white"
aria-label={t("button.play", { ns: "common" })}
variant="ghost"
onClick={() => {
onSelect(exportedRecording);
}}
>
<FaPlay />
</Button>
)}
</>
)}
{loading && (
<Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
web/src/components/filter/ExportFilterGroup.tsx
-67
View File
@@ -1,67 +0,0 @@
import { cn } from "@/lib/utils";
import {
DEFAULT_EXPORT_FILTERS,
ExportFilter,
ExportFilters,
} from "@/types/export";
import { CamerasFilterButton } from "./CamerasFilterButton";
import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
import { useMemo } from "react";
import { FrigateConfig } from "@/types/frigateConfig";
import useSWR from "swr";
type ExportFilterGroupProps = {
className: string;
filters?: ExportFilters[];
filter?: ExportFilter;
onUpdateFilter: (filter: ExportFilter) => void;
};
export default function ExportFilterGroup({
className,
filter,
filters = DEFAULT_EXPORT_FILTERS,
onUpdateFilter,
}: ExportFilterGroupProps) {
const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false,
});
const allowedCameras = useAllowedCameras();
const filterValues = useMemo(
() => ({
cameras: allowedCameras,
}),
[allowedCameras],
);
const groups = useMemo(() => {
if (!config) {
return [];
}
return Object.entries(config.camera_groups).sort(
(a, b) => a[1].order - b[1].order,
);
}, [config]);
return (
<div
className={cn(
"scrollbar-container flex justify-center gap-2 overflow-x-auto",
className,
)}
>
{filters.includes("cameras") && (
<CamerasFilterButton
allCameras={filterValues.cameras}
groups={groups}
selectedCameras={filter?.cameras}
hideText={false}
updateCameraFilter={(newCameras) => {
onUpdateFilter({ ...filter, cameras: newCameras });
}}
/>
)}
</div>
);
}
web/src/components/overlay/ExportDialog.tsx
+2 -61
View File
@@ -22,14 +22,7 @@ import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { TimezoneAwareCalendar } from "./ReviewActivityCalendar";
import {
Select,
SelectContent,
SelectItem,
SelectSeparator,
SelectTrigger,
SelectValue,
} from "../ui/select";
import { SelectSeparator } from "../ui/select";
import { isDesktop, isIOS, isMobile } from "react-device-detect";
import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
import SaveExportOverlay from "./SaveExportOverlay";
@@ -38,7 +31,6 @@ import { baseUrl } from "@/api/baseUrl";
import { cn } from "@/lib/utils";
import { GenericVideoPlayer } from "../player/GenericVideoPlayer";
import { useTranslation } from "react-i18next";
import { ExportCase } from "@/types/export";
const EXPORT_OPTIONS = [
"1",
@@ -75,9 +67,6 @@ export default function ExportDialog({
}: ExportDialogProps) {
const { t } = useTranslation(["components/dialog"]);
const [name, setName] = useState("");
const [selectedCaseId, setSelectedCaseId] = useState<string | undefined>(
undefined,
);
const onStartExport = useCallback(() => {
if (!range) {
@@ -100,7 +89,6 @@ export default function ExportDialog({
{
playback: "realtime",
name,
export_case_id: selectedCaseId || undefined,
},
)
.then((response) => {
@@ -114,7 +102,6 @@ export default function ExportDialog({
),
});
setName("");
setSelectedCaseId(undefined);
setRange(undefined);
setMode("none");
}
@@ -131,11 +118,10 @@ export default function ExportDialog({
{ position: "top-center" },
);
});
}, [camera, name, range, selectedCaseId, setRange, setName, setMode, t]);
}, [camera, name, range, setRange, setName, setMode, t]);
const handleCancel = useCallback(() => {
setName("");
setSelectedCaseId(undefined);
setMode("none");
setRange(undefined);
}, [setMode, setRange]);
@@ -204,10 +190,8 @@ export default function ExportDialog({
currentTime={currentTime}
range={range}
name={name}
selectedCaseId={selectedCaseId}
onStartExport={onStartExport}
setName={setName}
setSelectedCaseId={setSelectedCaseId}
setRange={setRange}
setMode={setMode}
onCancel={handleCancel}
@@ -223,10 +207,8 @@ type ExportContentProps = {
currentTime: number;
range?: TimeRange;
name: string;
selectedCaseId?: string;
onStartExport: () => void;
setName: (name: string) => void;
setSelectedCaseId: (caseId: string | undefined) => void;
setRange: (range: TimeRange | undefined) => void;
setMode: (mode: ExportMode) => void;
onCancel: () => void;
@@ -236,17 +218,14 @@ export function ExportContent({
currentTime,
range,
name,
selectedCaseId,
onStartExport,
setName,
setSelectedCaseId,
setRange,
setMode,
onCancel,
}: ExportContentProps) {
const { t } = useTranslation(["components/dialog"]);
const [selectedOption, setSelectedOption] = useState<ExportOption>("1");
const { data: cases } = useSWR<ExportCase[]>("cases");
const onSelectTime = useCallback(
(option: ExportOption) => {
@@ -341,44 +320,6 @@ export function ExportContent({
value={name}
onChange={(e) => setName(e.target.value)}
/>
<div className="my-4">
<Label className="text-sm text-secondary-foreground">
{t("export.case.label", { defaultValue: "Case (optional)" })}
</Label>
<Select
value={selectedCaseId || "none"}
onValueChange={(value) =>
setSelectedCaseId(value === "none" ? undefined : value)
}
>
<SelectTrigger className="mt-2">
<SelectValue
placeholder={t("export.case.placeholder", {
defaultValue: "Select a case (optional)",
})}
/>
</SelectTrigger>
<SelectContent>
<SelectItem
value="none"
className="cursor-pointer hover:bg-accent hover:text-accent-foreground"
>
{t("label.none", { ns: "common" })}
</SelectItem>
{cases
?.sort((a, b) => a.name.localeCompare(b.name))
.map((caseItem) => (
<SelectItem
key={caseItem.id}
value={caseItem.id}
className="cursor-pointer hover:bg-accent hover:text-accent-foreground"
>
{caseItem.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{isDesktop && <SelectSeparator className="my-4 bg-secondary" />}
<DialogFooter
className={isDesktop ? "" : "mt-3 flex flex-col-reverse gap-4"}
web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+1 -9
View File
@@ -75,9 +75,6 @@ export default function MobileReviewSettingsDrawer({
// exports
const [name, setName] = useState("");
const [selectedCaseId, setSelectedCaseId] = useState<string | undefined>(
undefined,
);
const onStartExport = useCallback(() => {
if (!range) {
toast.error(t("toast.error.noValidTimeSelected"), {
@@ -99,7 +96,6 @@ export default function MobileReviewSettingsDrawer({
{
playback: "realtime",
name,
export_case_id: selectedCaseId || undefined,
},
)
.then((response) => {
@@ -118,7 +114,6 @@ export default function MobileReviewSettingsDrawer({
},
);
setName("");
setSelectedCaseId(undefined);
setRange(undefined);
setMode("none");
}
@@ -138,7 +133,7 @@ export default function MobileReviewSettingsDrawer({
},
);
});
}, [camera, name, range, selectedCaseId, setRange, setName, setMode, t]);
}, [camera, name, range, setRange, setName, setMode, t]);
// filters
@@ -205,10 +200,8 @@ export default function MobileReviewSettingsDrawer({
currentTime={currentTime}
range={range}
name={name}
selectedCaseId={selectedCaseId}
onStartExport={onStartExport}
setName={setName}
setSelectedCaseId={setSelectedCaseId}
setRange={setRange}
setMode={(mode) => {
setMode(mode);
@@ -220,7 +213,6 @@ export default function MobileReviewSettingsDrawer({
onCancel={() => {
setMode("none");
setRange(undefined);
setSelectedCaseId(undefined);
setDrawerMode("select");
}}
/>
web/src/components/overlay/dialog/OptionAndInputDialog.tsx
-166
View File
@@ -1,166 +0,0 @@
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { isMobile } from "react-device-detect";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
type Option = {
value: string;
label: string;
};
type OptionAndInputDialogProps = {
open: boolean;
title: string;
description?: string;
options: Option[];
newValueKey: string;
initialValue?: string;
nameLabel: string;
descriptionLabel: string;
setOpen: (open: boolean) => void;
onSave: (value: string) => void;
onCreateNew: (name: string, description: string) => void;
};
export default function OptionAndInputDialog({
open,
title,
description,
options,
newValueKey,
initialValue,
nameLabel,
descriptionLabel,
setOpen,
onSave,
onCreateNew,
}: OptionAndInputDialogProps) {
const { t } = useTranslation("common");
const firstOption = useMemo(() => options[0]?.value, [options]);
const [selectedValue, setSelectedValue] = useState<string | undefined>(
initialValue ?? firstOption,
);
const [name, setName] = useState("");
const [descriptionValue, setDescriptionValue] = useState("");
useEffect(() => {
if (open) {
setSelectedValue(initialValue ?? firstOption);
setName("");
setDescriptionValue("");
}
}, [open, initialValue, firstOption]);
const isNew = selectedValue === newValueKey;
const disableSave = !selectedValue || (isNew && name.trim().length === 0);
const handleSave = () => {
if (!selectedValue) {
return;
}
const trimmedName = name.trim();
const trimmedDescription = descriptionValue.trim();
if (isNew) {
onCreateNew(trimmedName, trimmedDescription);
} else {
onSave(selectedValue);
}
setOpen(false);
};
return (
<Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
<DialogContent
className={cn("space-y-4", isMobile && "px-4")}
onOpenAutoFocus={(e) => {
if (isMobile) {
e.preventDefault();
}
}}
>
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>}
</DialogHeader>
<div className="space-y-2">
<Select
value={selectedValue}
onValueChange={(val) => setSelectedValue(val)}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{options.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{isNew && (
<div className="space-y-4">
<div className="space-y-1">
<label className="text-sm font-medium text-secondary-foreground">
{nameLabel}
</label>
<Input value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div className="space-y-1">
<label className="text-sm font-medium text-secondary-foreground">
{descriptionLabel}
</label>
<Input
value={descriptionValue}
onChange={(e) => setDescriptionValue(e.target.value)}
/>
</div>
</div>
)}
<DialogFooter className={cn("pt-2", isMobile && "gap-2")}>
<Button
type="button"
variant="outline"
onClick={() => {
setOpen(false);
}}
>
{t("button.cancel")}
</Button>
<Button
type="button"
variant="select"
disabled={disableSave}
onClick={handleSave}
>
{t("button.save")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
web/src/components/player/JSMpegPlayer.tsx
+6 -22
View File
@@ -118,8 +118,6 @@ export default function JSMpegPlayer({
const videoWrapper = videoRef.current;
const canvas = canvasRef.current;
let videoElement: JSMpeg.VideoElement | null = null;
let socket: WebSocket | null = null;
let socketMessageHandler: ((event: MessageEvent) => void) | null = null;
let frameCount = 0;
@@ -154,14 +152,12 @@ export default function JSMpegPlayer({
videoElement.player.source &&
videoElement.player.source.socket
) {
socket = videoElement.player.source.socket as WebSocket;
socketMessageHandler = (event: MessageEvent) => {
const socket = videoElement.player.source.socket;
socket.addEventListener("message", (event: MessageEvent) => {
if (event.data instanceof ArrayBuffer) {
bytesReceivedRef.current += event.data.byteLength;
}
};
socket.addEventListener("message", socketMessageHandler);
});
}
// Update stats every second
@@ -201,23 +197,11 @@ export default function JSMpegPlayer({
}
if (videoElement) {
try {
videoElement.player?.destroy();
// this causes issues in react strict mode
// https://stackoverflow.com/questions/76822128/issue-with-cycjimmy-jsmpeg-player-in-react-18-cannot-read-properties-of-null-o
videoElement.destroy();
// eslint-disable-next-line no-empty
} catch (e) {}
if (videoWrapper) {
videoWrapper.innerHTML = "";
// @ts-expect-error playerInstance is set by jsmpeg
videoWrapper.playerInstance = null;
}
}
if (socket) {
if (socketMessageHandler) {
socket.removeEventListener("message", socketMessageHandler);
}
socket = null;
socketMessageHandler = null;
}
};
}
web/src/components/player/LivePlayer.tsx
-27
View File
@@ -82,11 +82,6 @@ export default function LivePlayer({
const internalContainerRef = useRef<HTMLDivElement | null>(null);
const cameraName = useCameraFriendlyName(cameraConfig);
// player is showing on a dashboard if containerRef is not provided
const inDashboard = containerRef?.current == null;
// stats
const [stats, setStats] = useState<PlayerStatsType>({
@@ -421,28 +416,6 @@ export default function LivePlayer({
/>
</div>
{offline && inDashboard && (
<>
<div className="absolute inset-0 rounded-lg bg-black/50 md:rounded-2xl" />
<div className="absolute inset-0 left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
<div className="flex flex-col items-center justify-center gap-2 rounded-lg bg-background/50 p-3 text-center">
<div className="text-md">{t("streamOffline.title")}</div>
<TbExclamationCircle className="size-6" />
<p className="text-center text-sm">
<Trans
ns="components/player"
values={{
cameraName: cameraName,
}}
>
streamOffline.desc
</Trans>
</p>
</div>
</div>
</>
)}
{offline && !showStillWithoutActivity && cameraEnabled && (
<div className="absolute inset-0 left-1/2 top-1/2 flex h-96 w-96 -translate-x-1/2 -translate-y-1/2">
<div className="flex flex-col items-center justify-center rounded-lg bg-background/50 p-5">
web/src/hooks/use-allowed-cameras.ts
+1 -1
View File
@@ -12,7 +12,7 @@ export function useAllowedCameras() {
if (
auth.user?.role === "viewer" ||
auth.user?.role === "admin" ||
!auth.isAuthenticated // anonymous internal port
!auth.isAuthenticated // anonymous port 5000
) {
// return all cameras
return config?.cameras ? Object.keys(config.cameras) : [];
web/src/pages/Exports.tsx
+55 -467
View File
@@ -1,5 +1,5 @@
import { baseUrl } from "@/api/baseUrl";
import { CaseCard, ExportCard } from "@/components/card/ExportCard";
import ExportCard from "@/components/card/ExportCard";
import {
AlertDialog,
AlertDialogCancel,
@@ -11,144 +11,64 @@ import {
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import Heading from "@/components/ui/heading";
import { Input } from "@/components/ui/input";
import { Toaster } from "@/components/ui/sonner";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { useSearchEffect } from "@/hooks/use-overlay-state";
import { useHistoryBack } from "@/hooks/use-history-back";
import { useApiFilterArgs } from "@/hooks/use-api-filter";
import { cn } from "@/lib/utils";
import {
DeleteClipType,
Export,
ExportCase,
ExportFilter,
} from "@/types/export";
import OptionAndInputDialog from "@/components/overlay/dialog/OptionAndInputDialog";
import { DeleteClipType, Export } from "@/types/export";
import axios from "axios";
import {
MutableRefObject,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import { isMobile, isMobileOnly } from "react-device-detect";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { isMobile } from "react-device-detect";
import { useTranslation } from "react-i18next";
import { LuFolderX } from "react-icons/lu";
import { toast } from "sonner";
import useSWR from "swr";
import ExportFilterGroup from "@/components/filter/ExportFilterGroup";
// always parse these as string arrays
const EXPORT_FILTER_ARRAY_KEYS = ["cameras"];
function Exports() {
const { t } = useTranslation(["views/exports"]);
const { data: exports, mutate } = useSWR<Export[]>("exports");
useEffect(() => {
document.title = t("documentTitle");
}, [t]);
// Filters
const [exportFilter, setExportFilter, exportSearchParams] =
useApiFilterArgs<ExportFilter>(EXPORT_FILTER_ARRAY_KEYS);
// Data
const { data: cases, mutate: updateCases } = useSWR<ExportCase[]>("cases");
const { data: rawExports, mutate: updateExports } = useSWR<Export[]>(
exportSearchParams && Object.keys(exportSearchParams).length > 0
? ["exports", exportSearchParams]
: "exports",
);
const exportsByCase = useMemo<{ [caseId: string]: Export[] }>(() => {
const grouped: { [caseId: string]: Export[] } = {};
(rawExports ?? []).forEach((exp) => {
const caseId = exp.export_case || "none";
if (!grouped[caseId]) {
grouped[caseId] = [];
}
grouped[caseId].push(exp);
});
return grouped;
}, [rawExports]);
const filteredCases = useMemo<ExportCase[]>(() => {
if (!cases) {
return [];
}
return cases.filter((caseItem) => {
const caseExports = exportsByCase[caseItem.id];
return caseExports?.length;
});
}, [cases, exportsByCase]);
const exports = useMemo<Export[]>(
() => exportsByCase["none"] || [],
[exportsByCase],
);
const mutate = useCallback(() => {
updateExports();
updateCases();
}, [updateExports, updateCases]);
// Search
const [search, setSearch] = useState("");
const filteredExports = useMemo(() => {
if (!search || !exports) {
return exports;
}
return exports.filter((exp) =>
exp.name
.toLowerCase()
.replaceAll("_", " ")
.includes(search.toLowerCase()),
);
}, [exports, search]);
// Viewing
const [selected, setSelected] = useState<Export>();
const [selectedCaseId, setSelectedCaseId] = useState<string | undefined>(
undefined,
);
const [selectedAspect, setSelectedAspect] = useState(0.0);
// Handle browser back button to deselect case before navigating away
useHistoryBack({
enabled: true,
open: selectedCaseId !== undefined,
onClose: () => setSelectedCaseId(undefined),
});
useSearchEffect("id", (id) => {
if (!rawExports) {
if (!exports) {
return false;
}
setSelected(rawExports.find((exp) => exp.id == id));
setSelected(exports.find((exp) => exp.id == id));
return true;
});
useSearchEffect("caseId", (caseId: string) => {
if (!filteredCases) {
return false;
}
const exists = filteredCases.some((c) => c.id === caseId);
if (!exists) {
return false;
}
setSelectedCaseId(caseId);
return true;
});
// Modifying
// Deleting
const [deleteClip, setDeleteClip] = useState<DeleteClipType | undefined>();
const [exportToAssign, setExportToAssign] = useState<Export | undefined>();
const onHandleDelete = useCallback(() => {
if (!deleteClip) {
@@ -163,6 +83,8 @@ function Exports() {
});
}, [deleteClip, mutate]);
// Renaming
const onHandleRename = useCallback(
(id: string, update: string) => {
axios
@@ -185,7 +107,7 @@ function Exports() {
});
});
},
[mutate, setDeleteClip, t],
[mutate, t],
);
// Keyboard Listener
@@ -193,27 +115,10 @@ function Exports() {
const contentRef = useRef<HTMLDivElement | null>(null);
useKeyboardListener([], undefined, contentRef);
const selectedCase = useMemo(
() => filteredCases?.find((c) => c.id === selectedCaseId),
[filteredCases, selectedCaseId],
);
const resetCaseDialog = useCallback(() => {
setExportToAssign(undefined);
}, []);
return (
<div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
<Toaster closeButton={true} />
<CaseAssignmentDialog
exportToAssign={exportToAssign}
cases={cases}
selectedCaseId={selectedCaseId}
onClose={resetCaseDialog}
mutate={mutate}
/>
<AlertDialog
open={deleteClip != undefined}
onOpenChange={() => setDeleteClip(undefined)}
@@ -282,364 +187,47 @@ function Exports() {
</DialogContent>
</Dialog>
<div
className={cn(
"flex w-full flex-col items-start space-y-2 pr-2 md:mb-2 lg:relative lg:h-10 lg:flex-row lg:items-center lg:space-y-0",
isMobileOnly && "mb-2 h-auto flex-wrap gap-2 space-y-0",
)}
>
<div className="w-full">
{exports && (
<div className="flex w-full items-center justify-center p-2">
<Input
className="text-md w-full bg-muted md:w-1/2"
className="text-md w-full bg-muted md:w-1/3"
placeholder={t("search")}
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</div>
<ExportFilterGroup
className="w-full justify-between md:justify-start lg:justify-end"
filter={exportFilter}
filters={["cameras"]}
onUpdateFilter={setExportFilter}
/>
</div>
{selectedCase ? (
<CaseView
contentRef={contentRef}
selectedCase={selectedCase}
exports={exportsByCase[selectedCase.id] || []}
search={search}
setSelected={setSelected}
renameClip={onHandleRename}
setDeleteClip={setDeleteClip}
onAssignToCase={setExportToAssign}
/>
) : (
<AllExportsView
contentRef={contentRef}
search={search}
cases={filteredCases}
exports={exports}
exportsByCase={exportsByCase}
setSelectedCaseId={setSelectedCaseId}
setSelected={setSelected}
renameClip={onHandleRename}
setDeleteClip={setDeleteClip}
onAssignToCase={setExportToAssign}
/>
)}
</div>
);
}
type AllExportsViewProps = {
contentRef: MutableRefObject<HTMLDivElement | null>;
search: string;
cases?: ExportCase[];
exports: Export[];
exportsByCase: { [caseId: string]: Export[] };
setSelectedCaseId: (id: string) => void;
setSelected: (e: Export) => void;
renameClip: (id: string, update: string) => void;
setDeleteClip: (d: DeleteClipType | undefined) => void;
onAssignToCase: (e: Export) => void;
};
function AllExportsView({
contentRef,
search,
cases,
exports,
exportsByCase,
setSelectedCaseId,
setSelected,
renameClip,
setDeleteClip,
onAssignToCase,
}: AllExportsViewProps) {
const { t } = useTranslation(["views/exports"]);
// Filter
const filteredCases = useMemo(() => {
if (!search || !cases) {
return cases || [];
}
return cases.filter(
(caseItem) =>
caseItem.name.toLowerCase().includes(search.toLowerCase()) ||
(caseItem.description &&
caseItem.description.toLowerCase().includes(search.toLowerCase())),
);
}, [search, cases]);
const filteredExports = useMemo<Export[]>(() => {
if (!search) {
return exports;
}
return exports.filter((exp) =>
exp.name
.toLowerCase()
.replaceAll("_", " ")
.includes(search.toLowerCase()),
);
}, [exports, search]);
return (
<div className="w-full overflow-hidden">
{filteredCases?.length || filteredExports.length ? (
<div
ref={contentRef}
className="scrollbar-container flex size-full flex-col gap-4 overflow-y-auto"
>
{filteredCases.length > 0 && (
<div className="space-y-2">
<Heading as="h4">{t("headings.cases")}</Heading>
<div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{cases?.map((item) => (
<CaseCard
key={item.id}
className={
search == "" || filteredCases?.includes(item)
? ""
: "hidden"
}
exportCase={item}
exports={exportsByCase[item.id] || []}
onSelect={() => {
setSelectedCaseId(item.id);
}}
/>
))}
</div>
</div>
)}
{filteredExports.length > 0 && (
<div className="space-y-4">
<Heading as="h4">{t("headings.uncategorizedExports")}</Heading>
<div
ref={contentRef}
className="scrollbar-container grid gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
{exports.map((item) => (
<ExportCard
key={item.name}
className={
search == "" || filteredExports.includes(item)
? ""
: "hidden"
}
exportedRecording={item}
onSelect={setSelected}
onRename={renameClip}
onDelete={({ file, exportName }) =>
setDeleteClip({ file, exportName })
}
onAssignToCase={onAssignToCase}
/>
))}
</div>
</div>
)}
</div>
) : (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuFolderX className="size-16" />
{t("noExports")}
</div>
)}
</div>
);
}
type CaseViewProps = {
contentRef: MutableRefObject<HTMLDivElement | null>;
selectedCase: ExportCase;
exports?: Export[];
search: string;
setSelected: (e: Export) => void;
renameClip: (id: string, update: string) => void;
setDeleteClip: (d: DeleteClipType | undefined) => void;
onAssignToCase: (e: Export) => void;
};
function CaseView({
contentRef,
selectedCase,
exports,
search,
setSelected,
renameClip,
setDeleteClip,
onAssignToCase,
}: CaseViewProps) {
const filteredExports = useMemo<Export[]>(() => {
const caseExports = (exports || []).filter(
(e) => e.export_case == selectedCase.id,
);
if (!search) {
return caseExports;
}
return caseExports.filter((exp) =>
exp.name
.toLowerCase()
.replaceAll("_", " ")
.includes(search.toLowerCase()),
);
}, [selectedCase, exports, search]);
return (
<div className="flex size-full flex-col gap-8 overflow-hidden">
<div className="flex shrink-0 flex-col gap-1">
<Heading className="capitalize" as="h2">
{selectedCase.name}
</Heading>
<div className="text-secondary-foreground">
{selectedCase.description}
</div>
</div>
<div
ref={contentRef}
className="scrollbar-container grid min-h-0 flex-1 content-start gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
{exports?.map((item) => (
<ExportCard
key={item.name}
className={filteredExports.includes(item) ? "" : "hidden"}
exportedRecording={item}
onSelect={setSelected}
onRename={renameClip}
onDelete={({ file, exportName }) =>
setDeleteClip({ file, exportName })
}
onAssignToCase={onAssignToCase}
/>
))}
<div className="w-full overflow-hidden">
{exports && filteredExports && filteredExports.length > 0 ? (
<div
ref={contentRef}
className="scrollbar-container grid size-full gap-2 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
{Object.values(exports).map((item) => (
<ExportCard
key={item.id}
className={
search == "" || filteredExports.includes(item) ? "" : "hidden"
}
exportedRecording={item}
onSelect={setSelected}
onRename={onHandleRename}
onDelete={({ file, exportName }) =>
setDeleteClip({ file, exportName })
}
/>
))}
</div>
) : exports !== undefined ? (
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
<LuFolderX className="size-16" />
{t("noExports")}
</div>
) : null}
</div>
</div>
);
}
type CaseAssignmentDialogProps = {
exportToAssign?: Export;
cases?: ExportCase[];
selectedCaseId?: string;
onClose: () => void;
mutate: () => void;
};
function CaseAssignmentDialog({
exportToAssign,
cases,
selectedCaseId,
onClose,
mutate,
}: CaseAssignmentDialogProps) {
const { t } = useTranslation(["views/exports"]);
const caseOptions = useMemo(
() => [
...(cases ?? [])
.map((c) => ({
value: c.id,
label: c.name,
}))
.sort((cA, cB) => cA.label.localeCompare(cB.label)),
{
value: "new",
label: t("caseDialog.newCaseOption"),
},
],
[cases, t],
);
const handleSave = useCallback(
async (caseId: string) => {
if (!exportToAssign) return;
try {
await axios.patch(`export/${exportToAssign.id}/case`, {
export_case_id: caseId,
});
mutate();
onClose();
} catch (error: unknown) {
const apiError = error as {
response?: { data?: { message?: string; detail?: string } };
};
const errorMessage =
apiError.response?.data?.message ||
apiError.response?.data?.detail ||
"Unknown error";
toast.error(t("toast.error.assignCaseFailed", { errorMessage }), {
position: "top-center",
});
}
},
[exportToAssign, mutate, onClose, t],
);
const handleCreateNew = useCallback(
async (name: string, description: string) => {
if (!exportToAssign) return;
try {
const createResp = await axios.post("cases", {
name,
description,
});
const newCaseId: string | undefined = createResp.data?.id;
if (newCaseId) {
await axios.patch(`export/${exportToAssign.id}/case`, {
export_case_id: newCaseId,
});
}
mutate();
onClose();
} catch (error: unknown) {
const apiError = error as {
response?: { data?: { message?: string; detail?: string } };
};
const errorMessage =
apiError.response?.data?.message ||
apiError.response?.data?.detail ||
"Unknown error";
toast.error(t("toast.error.assignCaseFailed", { errorMessage }), {
position: "top-center",
});
}
},
[exportToAssign, mutate, onClose, t],
);
if (!exportToAssign) {
return null;
}
return (
<OptionAndInputDialog
open={!!exportToAssign}
title={t("caseDialog.title")}
description={t("caseDialog.description")}
setOpen={(open) => {
if (!open) {
onClose();
}
}}
options={caseOptions}
nameLabel={t("caseDialog.nameLabel")}
descriptionLabel={t("caseDialog.descriptionLabel")}
initialValue={selectedCaseId}
newValueKey="new"
onSave={handleSave}
onCreateNew={handleCreateNew}
/>
);
}
export default Exports;
export default Exports;
web/src/pages/Settings.tsx
-6
View File
@@ -36,7 +36,6 @@ import NotificationView from "@/views/settings/NotificationsSettingsView";
import EnrichmentsSettingsView from "@/views/settings/EnrichmentsSettingsView";
import UiSettingsView from "@/views/settings/UiSettingsView";
import FrigatePlusSettingsView from "@/views/settings/FrigatePlusSettingsView";
import MaintenanceSettingsView from "@/views/settings/MaintenanceSettingsView";
import { useSearchEffect } from "@/hooks/use-overlay-state";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useInitialCameraState } from "@/api/ws";
@@ -82,7 +81,6 @@ const allSettingsViews = [
"roles",
"notifications",
"frigateplus",
"maintenance",
] as const;
type SettingsType = (typeof allSettingsViews)[number];
@@ -122,10 +120,6 @@ const settingsGroups = [
label: "frigateplus",
items: [{ key: "frigateplus", component: FrigatePlusSettingsView }],
},
{
label: "maintenance",
items: [{ key: "maintenance", component: MaintenanceSettingsView }],
},
];
const CAMERA_SELECT_BUTTON_PAGES = [
web/src/types/export.ts
-19
View File
@@ -6,28 +6,9 @@ export type Export = {
video_path: string;
thumb_path: string;
in_progress: boolean;
export_case?: string;
};
export type ExportCase = {
id: string;
name: string;
description: string;
created_at: number;
updated_at: number;
};
export type DeleteClipType = {
file: string;
exportName: string;
};
// filtering
const EXPORT_FILTERS = ["cameras"] as const;
export type ExportFilters = (typeof EXPORT_FILTERS)[number];
export const DEFAULT_EXPORT_FILTERS: ExportFilters[] = ["cameras"];
export type ExportFilter = {
cameras?: string[];
};
web/src/types/frigateConfig.ts
+2
View File
@@ -197,6 +197,7 @@ export interface CameraConfig {
days: number;
mode: string;
};
sync_recordings: boolean;
};
review: {
alerts: {
@@ -541,6 +542,7 @@ export interface FrigateConfig {
days: number;
mode: string;
};
sync_recordings: boolean;
};
rtmp: {
web/src/types/stats.ts
+1 -7
View File
@@ -24,10 +24,6 @@ export type CameraStats = {
pid: number;
process_fps: number;
skipped_fps: number;
connection_quality: "excellent" | "fair" | "poor" | "unusable";
expected_fps: number;
reconnects_last_hour: number;
stalls_last_hour: number;
};
export type CpuStats = {
@@ -41,7 +37,6 @@ export type DetectorStats = {
detection_start: number;
inference_speed: number;
pid: number;
temperature?: number;
};
export type EmbeddingsStats = {
@@ -61,13 +56,11 @@ export type GpuStats = {
enc?: string;
dec?: string;
pstate?: string;
temp?: number;
};
export type NpuStats = {
npu: number;
mem: string;
temp?: number;
};
export type GpuInfo = "vainfo" | "nvinfo";
@@ -75,6 +68,7 @@ export type GpuInfo = "vainfo" | "nvinfo";
export type ServiceStats = {
last_updated: number;
storage: { [path: string]: StorageStats };
temperatures: { [apex: string]: number };
uptime: number;
latest_version: string;
version: string;
web/src/types/ws.ts
-29
View File
@@ -126,32 +126,3 @@ export type TriggerStatus = {
type: string;
score: number;
};
export type MediaSyncStats = {
files_checked: number;
orphans_found: number;
orphans_deleted: number;
aborted: boolean;
error: string | null;
};
export type MediaSyncTotals = {
files_checked: number;
orphans_found: number;
orphans_deleted: number;
};
export type MediaSyncResults = {
[mediaType: string]: MediaSyncStats | MediaSyncTotals;
totals: MediaSyncTotals;
};
export type Job = {
id: string;
job_type: string;
status: string;
results?: MediaSyncResults;
start_time?: number;
end_time?: number;
error_message?: string;
};
web/src/views/settings/MaintenanceSettingsView.tsx
-442
View File
@@ -1,442 +0,0 @@
import Heading from "@/components/ui/heading";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Toaster } from "@/components/ui/sonner";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
import axios from "axios";
import { toast } from "sonner";
import { useJobStatus } from "@/api/ws";
import { Switch } from "@/components/ui/switch";
import { LuCheck, LuX } from "react-icons/lu";
import { cn } from "@/lib/utils";
import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
import { MediaSyncStats } from "@/types/ws";
export default function MaintenanceSettingsView() {
const { t } = useTranslation("views/settings");
const [selectedMediaTypes, setSelectedMediaTypes] = useState<string[]>([
"all",
]);
const [dryRun, setDryRun] = useState(true);
const [force, setForce] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
const MEDIA_TYPES = [
{ id: "event_snapshots", label: t("maintenance.sync.event_snapshots") },
{ id: "event_thumbnails", label: t("maintenance.sync.event_thumbnails") },
{ id: "review_thumbnails", label: t("maintenance.sync.review_thumbnails") },
{ id: "previews", label: t("maintenance.sync.previews") },
{ id: "exports", label: t("maintenance.sync.exports") },
{ id: "recordings", label: t("maintenance.sync.recordings") },
];
// Subscribe to media sync status via WebSocket
const { payload: currentJob } = useJobStatus("media_sync");
const isJobRunning = Boolean(
currentJob &&
(currentJob.status === "queued" || currentJob.status === "running"),
);
const handleMediaTypeChange = useCallback((id: string, checked: boolean) => {
setSelectedMediaTypes((prev) => {
if (id === "all") {
return checked ? ["all"] : [];
}
let next = prev.filter((t) => t !== "all");
if (checked) {
next.push(id);
} else {
next = next.filter((t) => t !== id);
}
return next.length === 0 ? ["all"] : next;
});
}, []);
const handleStartSync = useCallback(async () => {
setIsSubmitting(true);
try {
const response = await axios.post(
"/media/sync",
{
dry_run: dryRun,
media_types: selectedMediaTypes,
force: force,
},
{
headers: {
"Content-Type": "application/json",
},
},
);
if (response.status === 202) {
toast.success(t("maintenance.sync.started"), {
position: "top-center",
closeButton: true,
});
} else if (response.status === 409) {
toast.error(t("maintenance.sync.alreadyRunning"), {
position: "top-center",
closeButton: true,
});
}
} catch {
toast.error(t("maintenance.sync.error"), {
position: "top-center",
closeButton: true,
});
} finally {
setIsSubmitting(false);
}
}, [selectedMediaTypes, dryRun, force, t]);
return (
<>
<div className="flex size-full flex-col md:flex-row">
<Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto px-2 md:order-none">
<div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
<div className="col-span-1">
<Heading as="h4" className="mb-2">
{t("maintenance.sync.title")}
</Heading>
<div className="max-w-6xl">
<div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 text-sm text-primary-variant">
<p>{t("maintenance.sync.desc")}</p>
</div>
</div>
<div className="space-y-6">
{/* Media Types Selection */}
<div>
<Label className="mb-2 flex flex-row items-center text-base">
{t("maintenance.sync.mediaTypes")}
</Label>
<div className="max-w-md space-y-2 rounded-lg bg-secondary p-4">
<div className="flex items-center justify-between">
<Label
htmlFor="all-media"
className="cursor-pointer font-medium"
>
{t("maintenance.sync.allMedia")}
</Label>
<Switch
id="all-media"
checked={selectedMediaTypes.includes("all")}
onCheckedChange={(checked) =>
handleMediaTypeChange("all", checked)
}
disabled={isJobRunning}
/>
</div>
<div className="ml-4 space-y-2">
{MEDIA_TYPES.map((type) => (
<div
key={type.id}
className="flex items-center justify-between"
>
<Label htmlFor={type.id} className="cursor-pointer">
{type.label}
</Label>
<Switch
id={type.id}
checked={
selectedMediaTypes.includes("all") ||
selectedMediaTypes.includes(type.id)
}
onCheckedChange={(checked) =>
handleMediaTypeChange(type.id, checked)
}
disabled={
isJobRunning || selectedMediaTypes.includes("all")
}
/>
</div>
))}
</div>
</div>
</div>
{/* Options */}
<div className="space-y-4">
<div className="flex flex-col">
<div className="flex flex-row items-center">
<Switch
id="dry-run"
className="mr-3"
checked={dryRun}
onCheckedChange={setDryRun}
disabled={isJobRunning}
/>
<div className="space-y-0.5">
<Label htmlFor="dry-run" className="cursor-pointer">
{t("maintenance.sync.dryRun")}
</Label>
<p className="text-xs text-muted-foreground">
{dryRun
? t("maintenance.sync.dryRunEnabled")
: t("maintenance.sync.dryRunDisabled")}
</p>
</div>
</div>
</div>
<div className="flex flex-col">
<div className="flex flex-row items-center">
<Switch
id="force"
className="mr-3"
checked={force}
onCheckedChange={setForce}
disabled={isJobRunning}
/>
<div className="space-y-0.5">
<Label htmlFor="force" className="cursor-pointer">
{t("maintenance.sync.force")}
</Label>
<p className="text-xs text-muted-foreground">
{t("maintenance.sync.forceDesc")}
</p>
</div>
</div>
</div>
</div>
{/* Action Buttons */}
<div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[50%]">
<Button
onClick={handleStartSync}
disabled={isJobRunning || isSubmitting}
className="flex flex-1"
variant={"select"}
>
{(isSubmitting || isJobRunning) && (
<ActivityIndicator className="mr-2 size-6" />
)}
{isJobRunning
? t("maintenance.sync.running")
: t("maintenance.sync.start")}
</Button>
</div>
</div>
</div>
<div className="col-span-1">
<div className="mt-4 gap-2 space-y-3 md:mt-8">
<Separator className="my-2 flex bg-secondary md:hidden" />
<div className="flex flex-row items-center justify-between rounded-lg bg-card p-3 md:mr-2">
<Heading as="h4" className="my-2">
{t("maintenance.sync.currentStatus")}
</Heading>
<div
className={cn(
"flex flex-row items-center gap-2",
currentJob?.status === "success" && "text-green-500",
currentJob?.status === "failed" && "text-destructive",
)}
>
{currentJob?.status === "success" && (
<LuCheck className="size-5" />
)}
{currentJob?.status === "failed" && (
<LuX className="size-5" />
)}
{(currentJob?.status === "running" ||
currentJob?.status === "queued") && (
<ActivityIndicator className="size-5" />
)}
{t(
`maintenance.sync.status.${currentJob?.status ?? "notRunning"}`,
)}
</div>
</div>
{/* Current Job Status */}
<div className="space-y-2 text-sm">
{currentJob?.start_time && (
<div className="flex gap-1">
<span className="text-muted-foreground">
{t("maintenance.sync.startTime")}:
</span>
<span className="font-mono">
{formatUnixTimestampToDateTime(
currentJob?.start_time ?? "-",
)}
</span>
</div>
)}
{currentJob?.end_time && (
<div className="flex gap-1">
<span className="text-muted-foreground">
{t("maintenance.sync.endTime")}:
</span>
<span className="font-mono">
{formatUnixTimestampToDateTime(currentJob?.end_time)}
</span>
</div>
)}
{currentJob?.results && (
<div className="mt-2 space-y-2 md:mr-2">
<p className="text-sm font-medium text-muted-foreground">
{t("maintenance.sync.results")}
</p>
<div className="rounded-md border border-secondary">
{/* Individual media type results */}
<div className="divide-y divide-secondary">
{Object.entries(currentJob.results)
.filter(([key]) => key !== "totals")
.map(([mediaType, stats]) => {
const mediaStats = stats as MediaSyncStats;
return (
<div key={mediaType} className="p-3 pb-3">
<p className="mb-1 font-medium capitalize">
{t(`maintenance.sync.${mediaType}`)}
</p>
<div className="ml-2 space-y-0.5">
<div className="flex justify-between">
<span className="text-muted-foreground">
{t(
"maintenance.sync.resultsFields.filesChecked",
)}
</span>
<span>{mediaStats.files_checked}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">
{t(
"maintenance.sync.resultsFields.orphansFound",
)}
</span>
<span
className={
mediaStats.orphans_found > 0
? "text-yellow-500"
: ""
}
>
{mediaStats.orphans_found}
</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">
{t(
"maintenance.sync.resultsFields.orphansDeleted",
)}
</span>
<span
className={cn(
"text-muted-foreground",
mediaStats.orphans_deleted > 0 &&
"text-success",
mediaStats.orphans_deleted === 0 &&
mediaStats.aborted &&
"text-destructive",
)}
>
{mediaStats.orphans_deleted}
</span>
</div>
{mediaStats.aborted && (
<div className="flex items-center gap-2 text-destructive">
<LuX className="size-4" />
{t(
"maintenance.sync.resultsFields.aborted",
)}
</div>
)}
{mediaStats.error && (
<div className="text-destructive">
{t(
"maintenance.sync.resultsFields.error",
)}
{": "}
{mediaStats.error}
</div>
)}
</div>
</div>
);
})}
</div>
{/* Totals */}
{currentJob.results.totals && (
<div className="border-t border-secondary bg-background_alt p-3">
<p className="mb-1 font-medium">
{t("maintenance.sync.resultsFields.totals")}
</p>
<div className="ml-2 space-y-0.5">
<div className="flex justify-between">
<span className="text-muted-foreground">
{t(
"maintenance.sync.resultsFields.filesChecked",
)}
</span>
<span className="font-medium">
{currentJob.results.totals.files_checked}
</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">
{t(
"maintenance.sync.resultsFields.orphansFound",
)}
</span>
<span
className={
currentJob.results.totals.orphans_found > 0
? "font-medium text-yellow-500"
: "font-medium"
}
>
{currentJob.results.totals.orphans_found}
</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">
{t(
"maintenance.sync.resultsFields.orphansDeleted",
)}
</span>
<span
className={cn(
"text-medium",
currentJob.results.totals.orphans_deleted >
0
? "text-success"
: "text-muted-foreground",
)}
>
{currentJob.results.totals.orphans_deleted}
</span>
</div>
</div>
</div>
)}
</div>
</div>
)}
{currentJob?.error_message && (
<div className="text-destructive">
<p className="text-muted-foreground">
{t("maintenance.sync.errorLabel")}
</p>
<p>{currentJob?.error_message}</p>
</div>
)}
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
web/src/views/system/CameraMetrics.tsx
+2 -32
View File
@@ -1,7 +1,6 @@
import { useFrigateStats } from "@/api/ws";
import { CameraLineGraph } from "@/components/graph/LineGraph";
import CameraInfoDialog from "@/components/overlay/CameraInfoDialog";
import { ConnectionQualityIndicator } from "@/components/camera/ConnectionQualityIndicator";
import { Skeleton } from "@/components/ui/skeleton";
import { FrigateConfig } from "@/types/frigateConfig";
import { FrigateStats } from "@/types/stats";
@@ -283,37 +282,8 @@ export default function CameraMetrics({
)}
<div className="flex w-full flex-col gap-3">
<div className="flex flex-row items-center justify-between">
<div className="flex items-center gap-2">
<div className="text-sm font-medium text-muted-foreground smart-capitalize">
<CameraNameLabel camera={camera} />
</div>
{statsHistory.length > 0 &&
statsHistory[statsHistory.length - 1]?.cameras[
camera.name
] && (
<ConnectionQualityIndicator
quality={
statsHistory[statsHistory.length - 1]?.cameras[
camera.name
]?.connection_quality
}
expectedFps={
statsHistory[statsHistory.length - 1]?.cameras[
camera.name
]?.expected_fps || 0
}
reconnects={
statsHistory[statsHistory.length - 1]?.cameras[
camera.name
]?.reconnects_last_hour || 0
}
stalls={
statsHistory[statsHistory.length - 1]?.cameras[
camera.name
]?.stalls_last_hour || 0
}
/>
)}
<div className="text-sm font-medium text-muted-foreground smart-capitalize">
<CameraNameLabel camera={camera} />
</div>
<Tooltip>
<TooltipTrigger>
web/src/views/system/GeneralMetrics.tsx
+20 -133
View File
@@ -127,6 +127,13 @@ export default function GeneralMetrics({
return undefined;
}
if (
statsHistory.length > 0 &&
Object.keys(statsHistory[0].service.temperatures).length == 0
) {
return undefined;
}
const series: {
[key: string]: { name: string; data: { x: number; y: number }[] };
} = {};
@@ -136,22 +143,22 @@ export default function GeneralMetrics({
return;
}
Object.entries(stats.detectors).forEach(([key, detectorStats]) => {
if (detectorStats.temperature === undefined) {
Object.entries(stats.detectors).forEach(([key], cIdx) => {
if (!key.includes("coral")) {
return;
}
if (!(key in series)) {
series[key] = {
name: key,
data: [],
};
}
if (cIdx <= Object.keys(stats.service.temperatures).length) {
if (!(key in series)) {
series[key] = {
name: key,
data: [],
};
}
series[key].data.push({
x: statsIdx + 1,
y: Math.round(detectorStats.temperature),
});
const temp = Object.values(stats.service.temperatures)[cIdx];
series[key].data.push({ x: statsIdx + 1, y: Math.round(temp) });
}
});
});
@@ -368,40 +375,6 @@ export default function GeneralMetrics({
return Object.keys(series).length > 0 ? Object.values(series) : undefined;
}, [statsHistory]);
const gpuTempSeries = useMemo(() => {
if (!statsHistory) {
return [];
}
const series: {
[key: string]: { name: string; data: { x: number; y: number }[] };
} = {};
let hasValidGpu = false;
statsHistory.forEach((stats, statsIdx) => {
if (!stats) {
return;
}
Object.entries(stats.gpu_usages || {}).forEach(([key, stats]) => {
if (!(key in series)) {
series[key] = { name: key, data: [] };
}
if (stats.temp !== undefined) {
hasValidGpu = true;
series[key].data.push({ x: statsIdx + 1, y: stats.temp });
}
});
});
if (!hasValidGpu) {
return [];
}
return Object.keys(series).length > 0 ? Object.values(series) : undefined;
}, [statsHistory]);
// Check if Intel GPU has all 0% usage values (known bug)
const showIntelGpuWarning = useMemo(() => {
if (!statsHistory || statsHistory.length < 3) {
@@ -482,40 +455,6 @@ export default function GeneralMetrics({
return Object.keys(series).length > 0 ? Object.values(series) : [];
}, [statsHistory]);
const npuTempSeries = useMemo(() => {
if (!statsHistory) {
return [];
}
const series: {
[key: string]: { name: string; data: { x: number; y: number }[] };
} = {};
let hasValidNpu = false;
statsHistory.forEach((stats, statsIdx) => {
if (!stats) {
return;
}
Object.entries(stats.npu_usages || {}).forEach(([key, stats]) => {
if (!(key in series)) {
series[key] = { name: key, data: [] };
}
if (stats.temp !== undefined) {
hasValidNpu = true;
series[key].data.push({ x: statsIdx + 1, y: stats.temp });
}
});
});
if (!hasValidNpu) {
return [];
}
return Object.keys(series).length > 0 ? Object.values(series) : undefined;
}, [statsHistory]);
// other processes stats
const hardwareType = useMemo(() => {
@@ -737,11 +676,7 @@ export default function GeneralMetrics({
<div
className={cn(
"mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2",
gpuTempSeries?.length && "md:grid-cols-3",
gpuEncSeries?.length && "xl:grid-cols-4",
gpuEncSeries?.length &&
gpuTempSeries?.length &&
"3xl:grid-cols-5",
gpuEncSeries?.length && "md:grid-cols-4",
)}
>
{statsHistory[0]?.gpu_usages && (
@@ -876,30 +811,6 @@ export default function GeneralMetrics({
) : (
<Skeleton className="aspect-video w-full" />
)}
{statsHistory.length != 0 ? (
<>
{gpuTempSeries && gpuTempSeries?.length != 0 && (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">
{t("general.hardwareInfo.gpuTemperature")}
</div>
{gpuTempSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
graphId={`${series.name}-temp`}
name={series.name}
unit="°C"
threshold={DetectorTempThreshold}
updateTimes={updateTimes}
data={[series]}
/>
))}
</div>
)}
</>
) : (
<Skeleton className="aspect-video w-full" />
)}
{statsHistory[0]?.npu_usages && (
<>
@@ -923,30 +834,6 @@ export default function GeneralMetrics({
) : (
<Skeleton className="aspect-video w-full" />
)}
{statsHistory.length != 0 ? (
<>
{npuTempSeries && npuTempSeries?.length != 0 && (
<div className="rounded-lg bg-background_alt p-2.5 md:rounded-2xl">
<div className="mb-5">
{t("general.hardwareInfo.npuTemperature")}
</div>
{npuTempSeries.map((series) => (
<ThresholdBarGraph
key={series.name}
graphId={`${series.name}-temp`}
name={series.name}
unit="°C"
threshold={DetectorTempThreshold}
updateTimes={updateTimes}
data={[series]}
/>
))}
</div>
)}
</>
) : (
<Skeleton className="aspect-video w-full" />
)}
</>
)}
</>