- >;
onSave?: () => void;
onCancel?: () => void;
+ snapPoints: boolean;
+ setSnapPoints: React.Dispatch>;
};
export default function ObjectMaskEditPane({
@@ -61,6 +63,8 @@ export default function ObjectMaskEditPane({
setIsLoading,
onSave,
onCancel,
+ snapPoints,
+ setSnapPoints,
}: ObjectMaskEditPaneProps) {
const { data: config, mutate: updateConfig } =
useSWR("config");
@@ -272,6 +276,8 @@ export default function ObjectMaskEditPane({
polygons={polygons}
setPolygons={setPolygons}
activePolygonIndex={activePolygonIndex}
+ snapPoints={snapPoints}
+ setSnapPoints={setSnapPoints}
/>
)}
diff --git a/web/src/components/settings/PolygonCanvas.tsx b/web/src/components/settings/PolygonCanvas.tsx
index e6851b63c..9adc2f09e 100644
--- a/web/src/components/settings/PolygonCanvas.tsx
+++ b/web/src/components/settings/PolygonCanvas.tsx
@@ -6,6 +6,7 @@ import type { KonvaEventObject } from "konva/lib/Node";
import { Polygon, PolygonType } from "@/types/canvas";
import { useApiHost } from "@/api";
import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { snapPointToLines } from "@/utils/canvasUtil";
type PolygonCanvasProps = {
containerRef: RefObject
+
+ {averageEstimatedSpeed && (
+
>;
onError?: (error: LivePlayerError) => void;
@@ -26,7 +34,11 @@ function MSEPlayer({
className,
playbackEnabled = true,
audioEnabled = false,
+ volume,
+ playInBackground = false,
pip = false,
+ getStats = false,
+ setStats,
onPlaying,
setFullResolution,
onError,
@@ -57,6 +69,7 @@ function MSEPlayer({
const [connectTS, setConnectTS] = useState(0);
const [bufferTimeout, setBufferTimeout] = useState();
const [errorCount, setErrorCount] = useState(0);
+ const totalBytesLoaded = useRef(0);
const videoRef = useRef(null);
const wsRef = useRef(null);
@@ -316,6 +329,8 @@ function MSEPlayer({
let bufLen = 0;
ondataRef.current = (data) => {
+ totalBytesLoaded.current += data.byteLength;
+
if (sb?.updating || bufLen > 0) {
const b = new Uint8Array(data);
buf.set(b, bufLen);
@@ -508,12 +523,22 @@ function MSEPlayer({
}
};
- document.addEventListener("visibilitychange", listener);
+ if (!playInBackground) {
+ document.addEventListener("visibilitychange", listener);
+ }
return () => {
- document.removeEventListener("visibilitychange", listener);
+ if (!playInBackground) {
+ document.removeEventListener("visibilitychange", listener);
+ }
};
- }, [playbackEnabled, visibilityCheck, onConnect, onDisconnect]);
+ }, [
+ playbackEnabled,
+ visibilityCheck,
+ playInBackground,
+ onConnect,
+ onDisconnect,
+ ]);
// control pip
@@ -525,6 +550,16 @@ function MSEPlayer({
videoRef.current.requestPictureInPicture();
}, [pip, videoRef]);
+ // control volume
+
+ useEffect(() => {
+ if (!videoRef.current || volume == undefined) {
+ return;
+ }
+
+ videoRef.current.volume = volume;
+ }, [volume, videoRef]);
+
// ensure we disconnect for slower connections
useEffect(() => {
@@ -542,6 +577,68 @@ function MSEPlayer({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [playbackEnabled]);
+ // stats
+
+ useEffect(() => {
+ const video = videoRef.current;
+ let lastLoadedBytes = totalBytesLoaded.current;
+ let lastTimestamp = Date.now();
+
+ if (!getStats) return;
+
+ const updateStats = () => {
+ if (video) {
+ const now = Date.now();
+ const bytesLoaded = totalBytesLoaded.current;
+ const timeElapsed = (now - lastTimestamp) / 1000; // seconds
+ const bandwidth = (bytesLoaded - lastLoadedBytes) / timeElapsed / 1024; // kbps
+
+ lastLoadedBytes = bytesLoaded;
+ lastTimestamp = now;
+
+ const latency =
+ video.seekable.length > 0
+ ? Math.max(
+ 0,
+ video.seekable.end(video.seekable.length - 1) -
+ video.currentTime,
+ )
+ : 0;
+
+ const videoQuality = video.getVideoPlaybackQuality();
+ const { totalVideoFrames, droppedVideoFrames } = videoQuality;
+ const droppedFrameRate = totalVideoFrames
+ ? (droppedVideoFrames / totalVideoFrames) * 100
+ : 0;
+
+ setStats?.({
+ streamType: "MSE",
+ bandwidth,
+ latency,
+ totalFrames: totalVideoFrames,
+ droppedFrames: droppedVideoFrames || undefined,
+ decodedFrames: totalVideoFrames - droppedVideoFrames,
+ droppedFrameRate,
+ });
+ }
+ };
+
+ const interval = setInterval(updateStats, 1000); // Update every second
+
+ return () => {
+ clearInterval(interval);
+ setStats?.({
+ streamType: "-",
+ bandwidth: 0,
+ latency: undefined,
+ totalFrames: 0,
+ droppedFrames: undefined,
+ decodedFrames: 0,
+ droppedFrameRate: 0,
+ });
+ };
+ }, [setStats, getStats]);
+
return (
)}
diff --git a/web/src/components/settings/ObjectMaskEditPane.tsx b/web/src/components/settings/ObjectMaskEditPane.tsx
index 44b858183..2c63d2e63 100644
--- a/web/src/components/settings/ObjectMaskEditPane.tsx
+++ b/web/src/components/settings/ObjectMaskEditPane.tsx
@@ -49,6 +49,8 @@ type ObjectMaskEditPaneProps = {
setIsLoading: React.Dispatch
+
+ )}
Estimated Speed
+
+ {averageEstimatedSpeed && (
+
+
+ {averageEstimatedSpeed}{" "}
+ {config?.ui.unit_system == "imperial" ? "mph" : "kph"}{" "}
+ {velocityAngle != undefined && (
+
+
+ )}
+ Camera
@@ -673,7 +721,8 @@ export function ObjectSnapshotTab({
{search.data.type == "object" &&
search.plus_id !== "not_enabled" &&
- search.end_time && (
+ search.end_time &&
+ search.label != "on_demand" && (
+ {showStats && (
+
diff --git a/web/src/components/overlay/dialog/SearchFilterDialog.tsx b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
index 65109591b..23deee531 100644
--- a/web/src/components/overlay/dialog/SearchFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
@@ -71,9 +71,11 @@ export default function SearchFilterDialog({
currentFilter &&
(currentFilter.time_range ||
(currentFilter.min_score ?? 0) > 0.5 ||
+ (currentFilter.min_speed ?? 1) > 1 ||
(currentFilter.has_snapshot ?? 0) === 1 ||
(currentFilter.has_clip ?? 0) === 1 ||
(currentFilter.max_score ?? 1) < 1 ||
+ (currentFilter.max_speed ?? 150) < 150 ||
(currentFilter.zones?.length ?? 0) > 0 ||
(currentFilter.sub_labels?.length ?? 0) > 0),
[currentFilter],
@@ -124,6 +126,14 @@ export default function SearchFilterDialog({
setCurrentFilter({ ...currentFilter, min_score: min, max_score: max })
}
/>
+
+ setCurrentFilter({ ...currentFilter, min_speed: min, max_speed: max })
+ }
+ />
void;
+};
+export function SpeedFilterContent({
+ config,
+ minSpeed,
+ maxSpeed,
+ setSpeedRange,
+}: SpeedFilterContentProps) {
+ return (
+ >({
+ resolver: zodResolver(formSchema),
+ });
+ const fileRef = form.register("text");
+
+ // upload handler
+
+ const onSubmit = useCallback(
+ (data: z.infer) => {
+ if (!data["text"]) {
+ return;
+ }
+
+ onSave(data["text"]);
+ },
+ [onSave],
+ );
+
+ return (
+
+ );
+}
diff --git a/web/src/components/overlay/dialog/UploadImageDialog.tsx b/web/src/components/overlay/dialog/UploadImageDialog.tsx
new file mode 100644
index 000000000..6a01a7fab
--- /dev/null
+++ b/web/src/components/overlay/dialog/UploadImageDialog.tsx
@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+type UploadImageDialogProps = {
+ open: boolean;
+ title: string;
+ description?: string;
+ setOpen: (open: boolean) => void;
+ onSave: (file: File) => void;
+};
+export default function UploadImageDialog({
+ open,
+ title,
+ description,
+ setOpen,
+ onSave,
+}: UploadImageDialogProps) {
+ const formSchema = z.object({
+ file: z.instanceof(FileList, { message: "Please select an image file." }),
+ });
+
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ });
+ const fileRef = form.register("file");
+
+ // upload handler
+
+ const onSubmit = useCallback(
+ (data: z.infer) => {
+ if (!data["file"] || Object.keys(data.file).length == 0) {
+ return;
+ }
+
+ onSave(data["file"]["0"]);
+ },
+ [onSave],
+ );
+
+ return (
+
+ );
+}
diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx
index 2666ac9f7..286f19216 100644
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -58,6 +58,7 @@ export default function BirdseyeLivePlayer({
height={birdseyeConfig.height}
containerRef={containerRef}
playbackEnabled={true}
+ useWebGL={true}
/>
);
} else {
diff --git a/web/src/components/player/GenericVideoPlayer.tsx b/web/src/components/player/GenericVideoPlayer.tsx
index 75f56e96f..c8405b11a 100644
--- a/web/src/components/player/GenericVideoPlayer.tsx
+++ b/web/src/components/player/GenericVideoPlayer.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
import { useVideoDimensions } from "@/hooks/use-video-dimensions";
import HlsVideoPlayer from "./HlsVideoPlayer";
import ActivityIndicator from "../indicators/activity-indicator";
@@ -15,37 +15,61 @@ export function GenericVideoPlayer({
children,
}: GenericVideoPlayerProps) {
const [isLoading, setIsLoading] = useState(true);
+ const [sourceExists, setSourceExists] = useState(true);
const videoRef = useRef(null);
const containerRef = useRef(null);
const { videoDimensions, setVideoResolution } =
useVideoDimensions(containerRef);
+ useEffect(() => {
+ const checkSourceExists = async (url: string) => {
+ try {
+ const response = await fetch(url, { method: "HEAD" });
+ // nginx vod module returns 502 for non existent media
+ // https://github.com/kaltura/nginx-vod-module/issues/468
+ setSourceExists(response.status !== 502 && response.status !== 404);
+ } catch (error) {
+ setSourceExists(false);
+ }
+ };
+
+ checkSourceExists(source);
+ }, [source]);
+
return (
);
diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 0661fb0c9..6c04bb6dd 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -144,7 +144,7 @@ export default function HlsVideoPlayer({
const [tallCamera, setTallCamera] = useState(false);
const [isPlaying, setIsPlaying] = useState(true);
- const [muted, setMuted] = useOverlayState("playerMuted", true);
+ const [muted, setMuted] = usePersistence("hlsPlayerMuted", true);
const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
const [defaultPlaybackRate] = usePersistence("playbackRate", 1);
const [playbackRate, setPlaybackRate] = useOverlayState(
@@ -211,7 +211,7 @@ export default function HlsVideoPlayer({
fullscreen: supportsFullscreen,
}}
setControlsOpen={setControlsOpen}
- setMuted={(muted) => setMuted(muted, true)}
+ setMuted={(muted) => setMuted(muted)}
playbackRate={playbackRate ?? 1}
hotKeys={hotKeys}
onPlayPause={onPlayPause}
@@ -280,9 +280,12 @@ export default function HlsVideoPlayer({
}
: undefined
}
- onVolumeChange={() =>
- setVolume(videoRef.current?.volume ?? 1.0, true)
- }
+ onVolumeChange={() => {
+ setVolume(videoRef.current?.volume ?? 1.0, true);
+ if (!frigateControls) {
+ setMuted(videoRef.current?.muted);
+ }
+ }}
onPlay={() => {
setIsPlaying(true);
diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index 401e85869..3753a9e46 100644
--- a/web/src/components/player/JSMpegPlayer.tsx
+++ b/web/src/components/player/JSMpegPlayer.tsx
@@ -1,6 +1,7 @@
import { baseUrl } from "@/api/baseUrl";
import { useResizeObserver } from "@/hooks/resize-observer";
import { cn } from "@/lib/utils";
+import { PlayerStatsType } from "@/types/live";
// @ts-expect-error we know this doesn't have types
import JSMpeg from "@cycjimmy/jsmpeg-player";
import React, { useEffect, useMemo, useRef, useState } from "react";
@@ -12,6 +13,8 @@ type JSMpegPlayerProps = {
height: number;
containerRef: React.MutableRefObject;
playbackEnabled: boolean;
+ useWebGL: boolean;
+ setStats?: (stats: PlayerStatsType) => void;
onPlaying?: () => void;
};
@@ -22,6 +25,8 @@ export default function JSMpegPlayer({
className,
containerRef,
playbackEnabled,
+ useWebGL = false,
+ setStats,
onPlaying,
}: JSMpegPlayerProps) {
const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
@@ -33,6 +38,9 @@ export default function JSMpegPlayer({
const [hasData, setHasData] = useState(false);
const hasDataRef = useRef(hasData);
const [dimensionsReady, setDimensionsReady] = useState(false);
+ const bytesReceivedRef = useRef(0);
+ const lastTimestampRef = useRef(Date.now());
+ const statsIntervalRef = useRef(null);
const selectedContainerRef = useMemo(
() => (containerRef.current ? containerRef : internalContainerRef),
@@ -111,6 +119,8 @@ export default function JSMpegPlayer({
const canvas = canvasRef.current;
let videoElement: JSMpeg.VideoElement | null = null;
+ let frameCount = 0;
+
setHasData(false);
if (videoWrapper && playbackEnabled) {
@@ -123,21 +133,68 @@ export default function JSMpegPlayer({
{
protocols: [],
audio: false,
- disableGl: camera != "birdseye",
- disableWebAssembly: camera != "birdseye",
+ disableGl: !useWebGL,
+ disableWebAssembly: !useWebGL,
videoBufferSize: 1024 * 1024 * 4,
onVideoDecode: () => {
if (!hasDataRef.current) {
setHasData(true);
onPlayingRef.current?.();
}
+ frameCount++;
},
},
);
+
+ // Set up WebSocket message handler
+ if (
+ videoElement.player &&
+ videoElement.player.source &&
+ videoElement.player.source.socket
+ ) {
+ const socket = videoElement.player.source.socket;
+ socket.addEventListener("message", (event: MessageEvent) => {
+ if (event.data instanceof ArrayBuffer) {
+ bytesReceivedRef.current += event.data.byteLength;
+ }
+ });
+ }
+
+ // Update stats every second
+ statsIntervalRef.current = setInterval(() => {
+ const currentTimestamp = Date.now();
+ const timeDiff = (currentTimestamp - lastTimestampRef.current) / 1000; // in seconds
+ const bitrate = (bytesReceivedRef.current * 8) / timeDiff / 1000; // in kbps
+
+ setStats?.({
+ streamType: "jsmpeg",
+ bandwidth: Math.round(bitrate),
+ totalFrames: frameCount,
+ latency: undefined,
+ droppedFrames: undefined,
+ decodedFrames: undefined,
+ droppedFrameRate: undefined,
+ });
+
+ bytesReceivedRef.current = 0;
+ lastTimestampRef.current = currentTimestamp;
+ }, 1000);
+
+ return () => {
+ if (statsIntervalRef.current) {
+ clearInterval(statsIntervalRef.current);
+ frameCount = 0;
+ statsIntervalRef.current = null;
+ }
+ };
}, 0);
return () => {
clearTimeout(initPlayer);
+ if (statsIntervalRef.current) {
+ clearInterval(statsIntervalRef.current);
+ statsIntervalRef.current = null;
+ }
if (videoElement) {
try {
// this causes issues in react strict mode
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 8038812db..4bd751469 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -11,6 +11,7 @@ import { useCameraActivity } from "@/hooks/use-camera-activity";
import {
LivePlayerError,
LivePlayerMode,
+ PlayerStatsType,
VideoResolutionType,
} from "@/types/live";
import { getIconForLabel } from "@/utils/iconUtil";
@@ -20,20 +21,26 @@ import { cn } from "@/lib/utils";
import { TbExclamationCircle } from "react-icons/tb";
import { TooltipPortal } from "@radix-ui/react-tooltip";
import { baseUrl } from "@/api/baseUrl";
+import { PlayerStats } from "./PlayerStats";
type LivePlayerProps = {
cameraRef?: (ref: HTMLDivElement | null) => void;
containerRef?: React.MutableRefObject;
className?: string;
cameraConfig: CameraConfig;
+ streamName: string;
preferredLiveMode: LivePlayerMode;
showStillWithoutActivity?: boolean;
+ useWebGL: boolean;
windowVisible?: boolean;
playAudio?: boolean;
+ volume?: number;
+ playInBackground: boolean;
micEnabled?: boolean; // only webrtc supports mic
iOSCompatFullScreen?: boolean;
pip?: boolean;
autoLive?: boolean;
+ showStats?: boolean;
onClick?: () => void;
setFullResolution?: React.Dispatch>;
onError?: (error: LivePlayerError) => void;
@@ -45,14 +52,19 @@ export default function LivePlayer({
containerRef,
className,
cameraConfig,
+ streamName,
preferredLiveMode,
showStillWithoutActivity = true,
+ useWebGL = false,
windowVisible = true,
playAudio = false,
+ volume,
+ playInBackground = false,
micEnabled = false,
iOSCompatFullScreen = false,
pip,
autoLive = true,
+ showStats = false,
onClick,
setFullResolution,
onError,
@@ -60,6 +72,18 @@ export default function LivePlayer({
}: LivePlayerProps) {
const internalContainerRef = useRef(null);
+ // stats
+
+ const [stats, setStats] = useState({
+ streamType: "-",
+ bandwidth: 0, // in kbps
+ latency: undefined, // in seconds
+ totalFrames: 0,
+ droppedFrames: undefined,
+ decodedFrames: 0,
+ droppedFrameRate: 0, // percentage
+ });
+
// camera activity
const { activeMotion, activeTracking, objects, offline } =
@@ -144,6 +168,25 @@ export default function LivePlayer({
setLiveReady(false);
}, [preferredLiveMode]);
+ const [key, setKey] = useState(0);
+
+ const resetPlayer = () => {
+ setLiveReady(false);
+ setKey((prevKey) => prevKey + 1);
+ };
+
+ useEffect(() => {
+ if (streamName) {
+ resetPlayer();
+ }
+ }, [streamName]);
+
+ useEffect(() => {
+ if (showStillWithoutActivity && !autoLive) {
+ setLiveReady(false);
+ }
+ }, [showStillWithoutActivity, autoLive]);
+
const playerIsPlaying = useCallback(() => {
setLiveReady(true);
}, []);
@@ -153,15 +196,19 @@ export default function LivePlayer({
}
let player;
- if (!autoLive) {
+ if (!autoLive || !streamName) {
player = null;
} else if (preferredLiveMode == "webrtc") {
player = (
@@ -330,6 +386,9 @@ export default function LivePlayer({
)}
+
+ );
+}
+
type SnapshotClipContentProps = {
config?: FrigateConfig;
hasSnapshot: boolean | undefined;
diff --git a/web/src/components/overlay/dialog/TextEntryDialog.tsx b/web/src/components/overlay/dialog/TextEntryDialog.tsx
new file mode 100644
index 000000000..1b0655078
--- /dev/null
+++ b/web/src/components/overlay/dialog/TextEntryDialog.tsx
@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+type TextEntryDialogProps = {
+ open: boolean;
+ title: string;
+ description?: string;
+ setOpen: (open: boolean) => void;
+ onSave: (text: string) => void;
+};
+export default function TextEntryDialog({
+ open,
+ title,
+ description,
+ setOpen,
+ onSave,
+}: TextEntryDialogProps) {
+ const formSchema = z.object({
+ text: z.string(),
+ });
+
+ const form = useForm
+ Estimated Speed ({config?.ui.unit_system == "metric" ? "kph" : "mph"})
+
+
+ {
+ const value = e.target.value;
+
+ if (value) {
+ setSpeedRange(parseInt(value), maxSpeed ?? 1.0);
+ }
+ }}
+ />
+ setSpeedRange(min, max)}
+ />
+ {
+ const value = e.target.value;
+
+ if (value) {
+ setSpeedRange(minSpeed ?? 1, parseInt(value));
+ }
+ }}
+ />
+
+
- {isLoading && (
-
+ Video not available
+
+ ) : (
+ <>
+ {isLoading && (
+
+ {
+ setIsLoading(false);
+ onPlaying?.();
+ }}
+ setFullResolution={setVideoResolution}
+ />
+ {!isLoading && children}
+
+
)}
-
- {
- setIsLoading(false);
- onPlaying?.();
- }}
- setFullResolution={setVideoResolution}
- />
- {!isLoading && children}
-
+
+
+
+
+
+ Speed Estimation
+
+ {
+ if (
+ checked &&
+ polygons &&
+ activePolygonIndex &&
+ polygons[activePolygonIndex].points.length !== 4
+ ) {
+ toast.error(
+ "Zones with speed estimation must have exactly 4 points.",
+ );
+ return;
+ }
+ const loiteringTime =
+ form.getValues("loitering_time");
+
+ if (checked && loiteringTime && loiteringTime > 0) {
+ toast.error(
+ "Zones with loitering times greater than 0 should not be used with speed estimation.",
+ );
+ }
+ field.onChange(checked);
+ }}
+ />
+
+ handleTouchStart(event, segmentClick)}
diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx
index 157e53749..c8ef5ea75 100644
--- a/web/src/components/timeline/MotionReviewTimeline.tsx
+++ b/web/src/components/timeline/MotionReviewTimeline.tsx
@@ -1,9 +1,22 @@
-import { useCallback, useMemo, useRef, RefObject } from "react";
-import MotionSegment from "./MotionSegment";
+import React, {
+ useCallback,
+ useMemo,
+ useRef,
+ RefObject,
+ useEffect,
+} from "react";
import { useTimelineUtils } from "@/hooks/use-timeline-utils";
-import { MotionData, ReviewSegment, ReviewSeverity } from "@/types/review";
+import {
+ MotionData,
+ ReviewSegment,
+ TimelineZoomDirection,
+} from "@/types/review";
import ReviewTimeline from "./ReviewTimeline";
import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
+import {
+ VirtualizedMotionSegments,
+ VirtualizedMotionSegmentsRef,
+} from "./VirtualizedMotionSegments";
export type MotionReviewTimelineProps = {
segmentDuration: number;
@@ -25,11 +38,12 @@ export type MotionReviewTimelineProps = {
setExportEndTime?: React.Dispatch>;
events: ReviewSegment[];
motion_events: MotionData[];
- severityType: ReviewSeverity;
contentRef: RefObject;
timelineRef?: RefObject;
onHandlebarDraggingChange?: (isDragging: boolean) => void;
dense?: boolean;
+ isZooming: boolean;
+ zoomDirection: TimelineZoomDirection;
};
export function MotionReviewTimeline({
@@ -56,9 +70,12 @@ export function MotionReviewTimeline({
timelineRef,
onHandlebarDraggingChange,
dense = false,
+ isZooming,
+ zoomDirection,
}: MotionReviewTimelineProps) {
const internalTimelineRef = useRef(null);
const selectedTimelineRef = timelineRef || internalTimelineRef;
+ const virtualizedSegmentsRef = useRef(null);
const timelineDuration = useMemo(
() => timelineStart - timelineEnd + 4 * segmentDuration,
@@ -80,90 +97,75 @@ export function MotionReviewTimeline({
motion_events,
);
- // Generate segments for the timeline
- const generateSegments = useCallback(() => {
+ const segmentTimes = useMemo(() => {
const segments = [];
let segmentTime = timelineStartAligned;
- while (segmentTime >= timelineStartAligned - timelineDuration) {
- const motionStart = segmentTime;
- const motionEnd = motionStart + segmentDuration;
+ for (let i = 0; i < Math.ceil(timelineDuration / segmentDuration); i++) {
+ if (!motionOnly) {
+ segments.push(segmentTime);
+ } else {
+ const motionStart = segmentTime;
+ const motionEnd = motionStart + segmentDuration;
+ const overlappingReviewItems = events.some(
+ (item) =>
+ (item.start_time >= motionStart && item.start_time < motionEnd) ||
+ ((item.end_time ?? timelineStart) > motionStart &&
+ (item.end_time ?? timelineStart) <= motionEnd) ||
+ (item.start_time <= motionStart &&
+ (item.end_time ?? timelineStart) >= motionEnd),
+ );
+ const firstHalfMotionValue = getMotionSegmentValue(motionStart);
+ const secondHalfMotionValue = getMotionSegmentValue(
+ motionStart + segmentDuration / 2,
+ );
- const firstHalfMotionValue = getMotionSegmentValue(motionStart);
- const secondHalfMotionValue = getMotionSegmentValue(
- motionStart + segmentDuration / 2,
- );
-
- const segmentMotion =
- firstHalfMotionValue > 0 || secondHalfMotionValue > 0;
- const overlappingReviewItems = events.some(
- (item) =>
- (item.start_time >= motionStart && item.start_time < motionEnd) ||
- ((item.end_time ?? timelineStart) > motionStart &&
- (item.end_time ?? timelineStart) <= motionEnd) ||
- (item.start_time <= motionStart &&
- (item.end_time ?? timelineStart) >= motionEnd),
- );
-
- if ((!segmentMotion || overlappingReviewItems) && motionOnly) {
- // exclude segment if necessary when in motion only mode
- segmentTime -= segmentDuration;
- continue;
+ const segmentMotion =
+ firstHalfMotionValue > 0 || secondHalfMotionValue > 0;
+ if (segmentMotion && !overlappingReviewItems) {
+ segments.push(segmentTime);
+ }
}
-
- segments.push(
-
- {segments}
+
);
}
diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index 903916b97..fa6fdbd80 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -1,14 +1,7 @@
import { useTimelineUtils } from "@/hooks/use-timeline-utils";
import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
import { ReviewSegment } from "@/types/review";
-import React, {
- useCallback,
- useEffect,
- useMemo,
- useRef,
- useState,
-} from "react";
-import scrollIntoView from "scroll-into-view-if-needed";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
import { isMobile } from "react-device-detect";
@@ -27,6 +20,7 @@ type MotionSegmentProps = {
minimapStartTime?: number;
minimapEndTime?: number;
setHandlebarTime?: React.Dispatch>;
+ scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void;
dense: boolean;
};
@@ -42,6 +36,7 @@ export function MotionSegment({
minimapStartTime,
minimapEndTime,
setHandlebarTime,
+ scrollToSegment,
dense,
}: MotionSegmentProps) {
const severityType = "all";
@@ -72,7 +67,10 @@ export function MotionSegment({
);
const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
- const segmentKey = useMemo(() => segmentTime, [segmentTime]);
+ const segmentKey = useMemo(
+ () => `${segmentTime}_${segmentDuration}`,
+ [segmentTime, segmentDuration],
+ );
const maxSegmentWidth = useMemo(() => {
return isMobile ? 30 : 50;
@@ -122,10 +120,7 @@ export function MotionSegment({
// Check if the first segment is out of view
const firstSegment = firstMinimapSegmentRef.current;
if (firstSegment && showMinimap && isFirstSegmentInMinimap) {
- scrollIntoView(firstSegment, {
- scrollMode: "if-needed",
- behavior: "smooth",
- });
+ scrollToSegment(alignedMinimapStartTime);
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -163,44 +158,6 @@ export function MotionSegment({
}
}, [segmentTime, setHandlebarTime]);
- const [segmentRendered, setSegmentRendered] = useState(false);
- const segmentObserverRef = useRef(null);
- const segmentRef = useRef(null);
-
- useEffect(() => {
- const segmentObserver = new IntersectionObserver(
- ([entry]) => {
- if (entry.isIntersecting && !segmentRendered) {
- setSegmentRendered(true);
- }
- },
- { threshold: 0 },
- );
-
- if (segmentRef.current) {
- segmentObserver.observe(segmentRef.current);
- }
-
- segmentObserverRef.current = segmentObserver;
-
- return () => {
- if (segmentObserverRef.current) {
- segmentObserverRef.current.disconnect();
- }
- };
- }, [segmentRendered]);
-
- if (!segmentRendered) {
- return (
-
- );
- }
-
return (
<>
{(((firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0) &&
@@ -209,8 +166,7 @@ export function MotionSegment({
!motionOnly) && (
>;
timelineCollapsed?: boolean;
dense: boolean;
- children: ReactNode[];
+ segments: number[];
+ scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void;
+ isZooming: boolean;
+ zoomDirection: TimelineZoomDirection;
+ children: ReactNode;
};
export function ReviewTimeline({
@@ -51,6 +57,10 @@ export function ReviewTimeline({
setExportEndTime,
timelineCollapsed = false,
dense,
+ segments,
+ scrollToSegment,
+ isZooming,
+ zoomDirection,
children,
}: ReviewTimelineProps) {
const [isDraggingHandlebar, setIsDraggingHandlebar] = useState(false);
@@ -116,7 +126,8 @@ export function ReviewTimeline({
setIsDragging: setIsDraggingHandlebar,
draggableElementTimeRef: handlebarTimeRef,
dense,
- timelineSegments: children,
+ segments,
+ scrollToSegment,
});
const {
@@ -140,7 +151,8 @@ export function ReviewTimeline({
draggableElementTimeRef: exportStartTimeRef,
setDraggableElementPosition: setExportStartPosition,
dense,
- timelineSegments: children,
+ segments,
+ scrollToSegment,
});
const {
@@ -164,7 +176,8 @@ export function ReviewTimeline({
draggableElementTimeRef: exportEndTimeRef,
setDraggableElementPosition: setExportEndPosition,
dense,
- timelineSegments: children,
+ segments,
+ scrollToSegment,
});
const handleHandlebar = useCallback(
@@ -316,18 +329,21 @@ export function ReviewTimeline({
return (
{children}
- {children.length > 0 && (
+ {children && (
<>
{showHandlebar && (
getSeverity(segmentTime, displaySeverityType),
- [getSeverity, segmentTime, displaySeverityType],
- );
-
- const reviewed = useMemo(
- () => getReviewed(segmentTime),
- [getReviewed, segmentTime],
- );
-
- const segmentKey = useMemo(() => segmentTime, [segmentTime]);
-
- const severityColors: { [key: number]: string } = {
- 1: reviewed
+ const severityColors: { [key: string]: string } = {
+ significant_motion: reviewed
? "bg-severity_significant_motion/50"
: "bg-severity_significant_motion",
- 2: reviewed ? "bg-severity_detection/50" : "bg-severity_detection",
- 3: reviewed ? "bg-severity_alert/50" : "bg-severity_alert",
+ detection: reviewed ? "bg-severity_detection/50" : "bg-severity_detection",
+ alert: reviewed ? "bg-severity_alert/50" : "bg-severity_alert",
+ empty: "bg-transparent",
};
+ const height = ((endTime - startTime) / totalDuration) * 100;
+
return (
-
- {severity.map((severityValue: number, index: number) => (
-
- {severityValue === displaySeverityType && (
- ;
+ reviewTimelineRef: React.RefObject;
timelineStart: number;
timelineEnd: number;
segmentDuration: number;
@@ -29,7 +32,6 @@ export function SummaryTimeline({
}: SummaryTimelineProps) {
const summaryTimelineRef = useRef(null);
const visibleSectionRef = useRef(null);
- const [segmentHeight, setSegmentHeight] = useState(0);
const [isDragging, setIsDragging] = useState(false);
const [scrollStartPosition, setScrollStartPosition] = useState(0);
@@ -43,61 +45,89 @@ export function SummaryTimeline({
[timelineEnd, timelineStart, segmentDuration],
);
- const { alignStartDateToTimeline } = useTimelineUtils({
- segmentDuration,
- timelineDuration: reviewTimelineDuration,
- timelineRef: reviewTimelineRef,
- });
-
- const timelineStartAligned = useMemo(
- () => alignStartDateToTimeline(timelineStart) + 2 * segmentDuration,
- [timelineStart, alignStartDateToTimeline, segmentDuration],
+ const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
+ {
+ segmentDuration,
+ timelineDuration: reviewTimelineDuration,
+ timelineRef: reviewTimelineRef,
+ },
);
- // Generate segments for the timeline
- const generateSegments = useCallback(() => {
- const segmentCount = Math.ceil(reviewTimelineDuration / segmentDuration);
+ const consolidatedSegments = useMemo(() => {
+ const filteredEvents = events.filter(
+ (event) => event.severity === severityType,
+ );
- if (segmentHeight) {
- return Array.from({ length: segmentCount }, (_, index) => {
- const segmentTime = timelineStartAligned - index * segmentDuration;
+ const sortedEvents = filteredEvents.sort(
+ (a, b) => a.start_time - b.start_time,
+ );
- return (
- | React.TouchEvent,
@@ -344,11 +353,17 @@ export function SummaryTimeline({
>
- {initialScroll && !endVisible && (
-
- )}
-
-
-
-
+
+
);
}
diff --git a/web/src/components/timeline/SummaryTimeline.tsx b/web/src/components/timeline/SummaryTimeline.tsx
index 7e67b9da6..d17709bdf 100644
--- a/web/src/components/timeline/SummaryTimeline.tsx
+++ b/web/src/components/timeline/SummaryTimeline.tsx
@@ -1,17 +1,20 @@
-import {
- RefObject,
- useCallback,
- useEffect,
- useMemo,
+import React, {
useRef,
useState,
+ useMemo,
+ useCallback,
+ useEffect,
} from "react";
import { SummarySegment } from "./SummarySegment";
+import {
+ ConsolidatedSegmentData,
+ ReviewSegment,
+ ReviewSeverity,
+} from "@/types/review";
import { useTimelineUtils } from "@/hooks/use-timeline-utils";
-import { ReviewSegment, ReviewSeverity } from "@/types/review";
export type SummaryTimelineProps = {
- reviewTimelineRef: RefObject
+
- ))}
+ >
+
- {segments}
+ {consolidatedSegments.map((segment, index) => (
+
;
+ segments: number[];
+ events: ReviewSegment[];
+ segmentDuration: number;
+ timestampSpread: number;
+ showMinimap: boolean;
+ minimapStartTime?: number;
+ minimapEndTime?: number;
+ severityType: ReviewSeverity;
+ contentRef: React.RefObject;
+ setHandlebarTime?: React.Dispatch>;
+ dense: boolean;
+ alignStartDateToTimeline: (timestamp: number) => number;
+};
+
+export interface VirtualizedEventSegmentsRef {
+ scrollToSegment: (
+ segmentTime: number,
+ ifNeeded?: boolean,
+ behavior?: ScrollBehavior,
+ ) => void;
+}
+
+const SEGMENT_HEIGHT = 8;
+const OVERSCAN_COUNT = 20;
+
+export const VirtualizedEventSegments = forwardRef<
+ VirtualizedEventSegmentsRef,
+ VirtualizedEventSegmentsProps
+>(
+ (
+ {
+ timelineRef,
+ segments,
+ events,
+ segmentDuration,
+ timestampSpread,
+ showMinimap,
+ minimapStartTime,
+ minimapEndTime,
+ severityType,
+ contentRef,
+ setHandlebarTime,
+ dense,
+ alignStartDateToTimeline,
+ },
+ ref,
+ ) => {
+ const [visibleRange, setVisibleRange] = useState({ start: 0, end: 0 });
+ const containerRef = useRef(null);
+
+ const updateVisibleRange = useCallback(() => {
+ if (timelineRef.current) {
+ const { scrollTop, clientHeight } = timelineRef.current;
+ const start = Math.max(
+ 0,
+ Math.floor(scrollTop / SEGMENT_HEIGHT) - OVERSCAN_COUNT,
+ );
+ const end = Math.min(
+ segments.length,
+ Math.ceil((scrollTop + clientHeight) / SEGMENT_HEIGHT) +
+ OVERSCAN_COUNT,
+ );
+ setVisibleRange({ start, end });
+ }
+ }, [segments.length, timelineRef]);
+
+ useEffect(() => {
+ const container = timelineRef.current;
+ if (container) {
+ const handleScroll = () => {
+ window.requestAnimationFrame(updateVisibleRange);
+ };
+
+ container.addEventListener("scroll", handleScroll, { passive: true });
+ window.addEventListener("resize", updateVisibleRange);
+
+ updateVisibleRange();
+
+ return () => {
+ container.removeEventListener("scroll", handleScroll);
+ window.removeEventListener("resize", updateVisibleRange);
+ };
+ }
+ }, [updateVisibleRange, timelineRef]);
+
+ const scrollToSegment = useCallback(
+ (
+ segmentTime: number,
+ ifNeeded: boolean = true,
+ behavior: ScrollBehavior = "smooth",
+ ) => {
+ const alignedSegmentTime = alignStartDateToTimeline(segmentTime);
+ const segmentIndex = segments.findIndex(
+ (time) => time === alignedSegmentTime,
+ );
+ if (
+ segmentIndex !== -1 &&
+ containerRef.current &&
+ timelineRef.current
+ ) {
+ const timelineHeight = timelineRef.current.clientHeight;
+ const targetScrollTop = segmentIndex * SEGMENT_HEIGHT;
+ const centeredScrollTop =
+ targetScrollTop - timelineHeight / 2 + SEGMENT_HEIGHT / 2;
+
+ const isVisible =
+ segmentIndex > visibleRange.start + OVERSCAN_COUNT &&
+ segmentIndex < visibleRange.end - OVERSCAN_COUNT;
+
+ if (!ifNeeded || !isVisible) {
+ timelineRef.current.scrollTo({
+ top: Math.max(0, centeredScrollTop),
+ behavior: behavior,
+ });
+ }
+ updateVisibleRange();
+ }
+ },
+ [
+ segments,
+ alignStartDateToTimeline,
+ updateVisibleRange,
+ timelineRef,
+ visibleRange,
+ ],
+ );
+
+ useImperativeHandle(ref, () => ({
+ scrollToSegment,
+ }));
+
+ const totalHeight = segments.length * SEGMENT_HEIGHT;
+ const visibleSegments = segments.slice(
+ visibleRange.start,
+ visibleRange.end,
+ );
+
+ return (
+ ;
+ segments: number[];
+ events: ReviewSegment[];
+ motion_events: MotionData[];
+ segmentDuration: number;
+ timestampSpread: number;
+ showMinimap: boolean;
+ minimapStartTime?: number;
+ minimapEndTime?: number;
+ contentRef: React.RefObject;
+ setHandlebarTime?: React.Dispatch>;
+ dense: boolean;
+ motionOnly: boolean;
+ getMotionSegmentValue: (timestamp: number) => number;
+};
+
+export interface VirtualizedMotionSegmentsRef {
+ scrollToSegment: (
+ segmentTime: number,
+ ifNeeded?: boolean,
+ behavior?: ScrollBehavior,
+ ) => void;
+}
+
+const SEGMENT_HEIGHT = 8;
+const OVERSCAN_COUNT = 20;
+
+export const VirtualizedMotionSegments = forwardRef<
+ VirtualizedMotionSegmentsRef,
+ VirtualizedMotionSegmentsProps
+>(
+ (
+ {
+ timelineRef,
+ segments,
+ events,
+ segmentDuration,
+ timestampSpread,
+ showMinimap,
+ minimapStartTime,
+ minimapEndTime,
+ setHandlebarTime,
+ dense,
+ motionOnly,
+ getMotionSegmentValue,
+ },
+ ref,
+ ) => {
+ const [visibleRange, setVisibleRange] = useState({ start: 0, end: 0 });
+ const containerRef = useRef(null);
+
+ const updateVisibleRange = useCallback(() => {
+ if (timelineRef.current) {
+ const { scrollTop, clientHeight } = timelineRef.current;
+ const start = Math.max(
+ 0,
+ Math.floor(scrollTop / SEGMENT_HEIGHT) - OVERSCAN_COUNT,
+ );
+ const end = Math.min(
+ segments.length,
+ Math.ceil((scrollTop + clientHeight) / SEGMENT_HEIGHT) +
+ OVERSCAN_COUNT,
+ );
+ setVisibleRange({ start, end });
+ }
+ }, [segments.length, timelineRef]);
+
+ useEffect(() => {
+ const container = timelineRef.current;
+ if (container) {
+ const handleScroll = () => {
+ window.requestAnimationFrame(updateVisibleRange);
+ };
+
+ container.addEventListener("scroll", handleScroll, { passive: true });
+ window.addEventListener("resize", updateVisibleRange);
+
+ updateVisibleRange();
+
+ return () => {
+ container.removeEventListener("scroll", handleScroll);
+ window.removeEventListener("resize", updateVisibleRange);
+ };
+ }
+ }, [updateVisibleRange, timelineRef]);
+
+ const scrollToSegment = useCallback(
+ (
+ segmentTime: number,
+ ifNeeded: boolean = true,
+ behavior: ScrollBehavior = "smooth",
+ ) => {
+ const segmentIndex = segments.findIndex((time) => time === segmentTime);
+ if (
+ segmentIndex !== -1 &&
+ containerRef.current &&
+ timelineRef.current
+ ) {
+ const timelineHeight = timelineRef.current.clientHeight;
+ const targetScrollTop = segmentIndex * SEGMENT_HEIGHT;
+ const centeredScrollTop =
+ targetScrollTop - timelineHeight / 2 + SEGMENT_HEIGHT / 2;
+
+ const isVisible =
+ segmentIndex > visibleRange.start + OVERSCAN_COUNT &&
+ segmentIndex < visibleRange.end - OVERSCAN_COUNT;
+
+ if (!ifNeeded || !isVisible) {
+ timelineRef.current.scrollTo({
+ top: Math.max(0, centeredScrollTop),
+ behavior: behavior,
+ });
+ }
+ updateVisibleRange();
+ }
+ },
+ [segments, timelineRef, visibleRange, updateVisibleRange],
+ );
+
+ useImperativeHandle(ref, () => ({
+ scrollToSegment,
+ }));
+
+ const renderSegment = useCallback(
+ (segmentTime: number, index: number) => {
+ const motionStart = segmentTime;
+ const motionEnd = motionStart + segmentDuration;
+
+ const firstHalfMotionValue = getMotionSegmentValue(motionStart);
+ const secondHalfMotionValue = getMotionSegmentValue(
+ motionStart + segmentDuration / 2,
+ );
+
+ const segmentMotion =
+ firstHalfMotionValue > 0 || secondHalfMotionValue > 0;
+ const overlappingReviewItems = events.some(
+ (item) =>
+ (item.start_time >= motionStart && item.start_time < motionEnd) ||
+ ((item.end_time ?? segmentTime) > motionStart &&
+ (item.end_time ?? segmentTime) <= motionEnd) ||
+ (item.start_time <= motionStart &&
+ (item.end_time ?? segmentTime) >= motionEnd),
+ );
+
+ if ((!segmentMotion || overlappingReviewItems) && motionOnly) {
+ return null; // Skip rendering this segment in motion only mode
+ }
+
+ return (
+
-
-
-
-
-
- {children}
+
+
+ {children}
+
+
diff --git a/web/src/context/streaming-settings-provider.tsx b/web/src/context/streaming-settings-provider.tsx
new file mode 100644
index 000000000..82558722e
--- /dev/null
+++ b/web/src/context/streaming-settings-provider.tsx
@@ -0,0 +1,68 @@
+import {
+ createContext,
+ useState,
+ useEffect,
+ ReactNode,
+ useContext,
+} from "react";
+import { AllGroupsStreamingSettings } from "@/types/frigateConfig";
+import { usePersistence } from "@/hooks/use-persistence";
+
+type StreamingSettingsContextType = {
+ allGroupsStreamingSettings: AllGroupsStreamingSettings;
+ setAllGroupsStreamingSettings: (settings: AllGroupsStreamingSettings) => void;
+ isPersistedStreamingSettingsLoaded: boolean;
+};
+
+const StreamingSettingsContext =
+ createContext(null);
+
+export function StreamingSettingsProvider({
+ children,
+}: {
+ children: ReactNode;
+}) {
+ const [allGroupsStreamingSettings, setAllGroupsStreamingSettings] =
+ useState({});
+
+ const [
+ persistedGroupStreamingSettings,
+ setPersistedGroupStreamingSettings,
+ isPersistedStreamingSettingsLoaded,
+ ] = usePersistence("streaming-settings");
+
+ useEffect(() => {
+ if (isPersistedStreamingSettingsLoaded) {
+ setAllGroupsStreamingSettings(persistedGroupStreamingSettings ?? {});
+ }
+ }, [isPersistedStreamingSettingsLoaded, persistedGroupStreamingSettings]);
+
+ useEffect(() => {
+ if (Object.keys(allGroupsStreamingSettings).length) {
+ setPersistedGroupStreamingSettings(allGroupsStreamingSettings);
+ }
+ }, [allGroupsStreamingSettings, setPersistedGroupStreamingSettings]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useStreamingSettings() {
+ const context = useContext(StreamingSettingsContext);
+ if (!context) {
+ throw new Error(
+ "useStreamingSettings must be used within a StreamingSettingsProvider",
+ );
+ }
+ return context;
+}
diff --git a/web/src/hooks/resize-observer.ts b/web/src/hooks/resize-observer.ts
index 57f55817a..1e174af7e 100644
--- a/web/src/hooks/resize-observer.ts
+++ b/web/src/hooks/resize-observer.ts
@@ -17,7 +17,15 @@ export function useResizeObserver(...refs: RefType[]) {
() =>
new ResizeObserver((entries) => {
window.requestAnimationFrame(() => {
- setDimensions(entries.map((entry) => entry.contentRect));
+ setDimensions((prevDimensions) => {
+ const newDimensions = entries.map((entry) => entry.contentRect);
+ if (
+ JSON.stringify(prevDimensions) !== JSON.stringify(newDimensions)
+ ) {
+ return newDimensions;
+ }
+ return prevDimensions;
+ });
});
}),
[],
diff --git a/web/src/hooks/use-camera-live-mode.ts b/web/src/hooks/use-camera-live-mode.ts
index edf165951..238ac70cc 100644
--- a/web/src/hooks/use-camera-live-mode.ts
+++ b/web/src/hooks/use-camera-live-mode.ts
@@ -1,16 +1,29 @@
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
import { useCallback, useEffect, useState } from "react";
import useSWR from "swr";
-import { LivePlayerMode } from "@/types/live";
+import { LivePlayerMode, LiveStreamMetadata } from "@/types/live";
export default function useCameraLiveMode(
cameras: CameraConfig[],
windowVisible: boolean,
) {
const { data: config } = useSWR("config");
+ const { data: allStreamMetadata } = useSWR<{
+ [key: string]: LiveStreamMetadata;
+ }>(config ? "go2rtc/streams" : null, { revalidateOnFocus: false });
+
const [preferredLiveModes, setPreferredLiveModes] = useState<{
[key: string]: LivePlayerMode;
}>({});
+ const [isRestreamedStates, setIsRestreamedStates] = useState<{
+ [key: string]: boolean;
+ }>({});
+ const [supportsAudioOutputStates, setSupportsAudioOutputStates] = useState<{
+ [key: string]: {
+ supportsAudio: boolean;
+ cameraName: string;
+ };
+ }>({});
useEffect(() => {
if (!cameras) return;
@@ -18,26 +31,56 @@ export default function useCameraLiveMode(
const mseSupported =
"MediaSource" in window || "ManagedMediaSource" in window;
- const newPreferredLiveModes = cameras.reduce(
- (acc, camera) => {
- const isRestreamed =
- config &&
- Object.keys(config.go2rtc.streams || {}).includes(
- camera.live.stream_name,
- );
+ const newPreferredLiveModes: { [key: string]: LivePlayerMode } = {};
+ const newIsRestreamedStates: { [key: string]: boolean } = {};
+ const newSupportsAudioOutputStates: {
+ [key: string]: { supportsAudio: boolean; cameraName: string };
+ } = {};
- if (!mseSupported) {
- acc[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
- } else {
- acc[camera.name] = isRestreamed ? "mse" : "jsmpeg";
- }
- return acc;
- },
- {} as { [key: string]: LivePlayerMode },
- );
+ cameras.forEach((camera) => {
+ const isRestreamed =
+ config &&
+ Object.keys(config.go2rtc.streams || {}).includes(
+ Object.values(camera.live.streams)[0],
+ );
+
+ newIsRestreamedStates[camera.name] = isRestreamed ?? false;
+
+ if (!mseSupported) {
+ newPreferredLiveModes[camera.name] = isRestreamed ? "webrtc" : "jsmpeg";
+ } else {
+ newPreferredLiveModes[camera.name] = isRestreamed ? "mse" : "jsmpeg";
+ }
+
+ // check each stream for audio support
+ if (isRestreamed) {
+ Object.values(camera.live.streams).forEach((streamName) => {
+ const metadata = allStreamMetadata?.[streamName];
+ newSupportsAudioOutputStates[streamName] = {
+ supportsAudio: metadata
+ ? metadata.producers.find(
+ (prod) =>
+ prod.medias &&
+ prod.medias.find((media) =>
+ media.includes("audio, recvonly"),
+ ) !== undefined,
+ ) !== undefined
+ : false,
+ cameraName: camera.name,
+ };
+ });
+ } else {
+ newSupportsAudioOutputStates[camera.name] = {
+ supportsAudio: false,
+ cameraName: camera.name,
+ };
+ }
+ });
setPreferredLiveModes(newPreferredLiveModes);
- }, [cameras, config, windowVisible]);
+ setIsRestreamedStates(newIsRestreamedStates);
+ setSupportsAudioOutputStates(newSupportsAudioOutputStates);
+ }, [cameras, config, windowVisible, allStreamMetadata]);
const resetPreferredLiveMode = useCallback(
(cameraName: string) => {
@@ -61,5 +104,11 @@ export default function useCameraLiveMode(
[config],
);
- return { preferredLiveModes, setPreferredLiveModes, resetPreferredLiveMode };
+ return {
+ preferredLiveModes,
+ setPreferredLiveModes,
+ resetPreferredLiveMode,
+ isRestreamedStates,
+ supportsAudioOutputStates,
+ };
}
diff --git a/web/src/hooks/use-draggable-element.ts b/web/src/hooks/use-draggable-element.ts
index 73013de58..ddc8851b6 100644
--- a/web/src/hooks/use-draggable-element.ts
+++ b/web/src/hooks/use-draggable-element.ts
@@ -1,12 +1,4 @@
-import {
- ReactNode,
- useCallback,
- useEffect,
- useMemo,
- useRef,
- useState,
-} from "react";
-import scrollIntoView from "scroll-into-view-if-needed";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useTimelineUtils } from "./use-timeline-utils";
import { FrigateConfig } from "@/types/frigateConfig";
import useSWR from "swr";
@@ -33,7 +25,8 @@ type DraggableElementProps = {
setIsDragging: React.Dispatch>;
setDraggableElementPosition?: React.Dispatch>;
dense: boolean;
- timelineSegments: ReactNode[];
+ segments: number[];
+ scrollToSegment: (segmentTime: number, ifNeeded?: boolean) => void;
};
function useDraggableElement({
@@ -57,7 +50,8 @@ function useDraggableElement({
setIsDragging,
setDraggableElementPosition,
dense,
- timelineSegments,
+ segments,
+ scrollToSegment,
}: DraggableElementProps) {
const { data: config } = useSWR("config");
@@ -66,7 +60,6 @@ function useDraggableElement({
const [elementScrollIntoView, setElementScrollIntoView] = useState(true);
const [scrollEdgeSize, setScrollEdgeSize] = useState();
const [fullTimelineHeight, setFullTimelineHeight] = useState();
- const [segments, setSegments] = useState([]);
const { alignStartDateToTimeline, getCumulativeScrollTop, segmentHeight } =
useTimelineUtils({
segmentDuration: segmentDuration,
@@ -201,11 +194,7 @@ function useDraggableElement({
draggableElementTimeRef.current.textContent =
getFormattedTimestamp(segmentStartTime);
if (scrollTimeline && !userInteracting) {
- scrollIntoView(thumb, {
- block: "center",
- behavior: "smooth",
- scrollMode: "if-needed",
- });
+ scrollToSegment(segmentStartTime);
}
}
});
@@ -222,6 +211,7 @@ function useDraggableElement({
setDraggableElementPosition,
getFormattedTimestamp,
userInteracting,
+ scrollToSegment,
],
);
@@ -241,12 +231,6 @@ function useDraggableElement({
[contentRef, draggableElementRef, timelineRef, getClientYPosition],
);
- useEffect(() => {
- if (timelineRef.current && timelineSegments.length) {
- setSegments(Array.from(timelineRef.current.querySelectorAll(".segment")));
- }
- }, [timelineRef, timelineCollapsed, timelineSegments]);
-
useEffect(() => {
let animationFrameId: number | null = null;
@@ -256,7 +240,7 @@ function useDraggableElement({
showDraggableElement &&
isDragging &&
clientYPosition &&
- segments &&
+ segments.length > 0 &&
fullTimelineHeight
) {
const { scrollTop: scrolled } = timelineRef.current;
@@ -295,31 +279,18 @@ function useDraggableElement({
return;
}
- let targetSegmentId = 0;
- let offset = 0;
+ const start = Math.max(0, Math.floor(scrolled / segmentHeight));
- segments.forEach((segmentElement: HTMLDivElement) => {
- const rect = segmentElement.getBoundingClientRect();
- const segmentTop =
- rect.top + scrolled - timelineTopAbsolute - segmentHeight;
- const segmentBottom =
- rect.bottom + scrolled - timelineTopAbsolute - segmentHeight;
+ const relativePosition = newElementPosition - scrolled;
+ const segmentIndex =
+ Math.floor(relativePosition / segmentHeight) + start + 1;
- // Check if handlebar position falls within the segment bounds
- if (
- newElementPosition >= segmentTop &&
- newElementPosition <= segmentBottom
- ) {
- targetSegmentId = parseFloat(
- segmentElement.getAttribute("data-segment-id") || "0",
- );
- offset = Math.min(
- segmentBottom - newElementPosition,
- segmentHeight,
- );
- return;
- }
- });
+ const targetSegmentTime = segments[segmentIndex];
+ if (targetSegmentTime === undefined) return;
+
+ const segmentStart = segmentIndex * segmentHeight - scrolled;
+
+ const offset = Math.min(segmentStart - relativePosition, segmentHeight);
if ((draggingAtTopEdge || draggingAtBottomEdge) && scrollEdgeSize) {
if (draggingAtTopEdge) {
@@ -349,8 +320,8 @@ function useDraggableElement({
}
const setTime = alignSetTimeToSegment
- ? targetSegmentId
- : targetSegmentId + segmentDuration * (offset / segmentHeight);
+ ? targetSegmentTime
+ : targetSegmentTime + segmentDuration * (offset / segmentHeight);
updateDraggableElementPosition(
newElementPosition,
@@ -361,7 +332,7 @@ function useDraggableElement({
if (setDraggableElementTime) {
setDraggableElementTime(
- targetSegmentId + segmentDuration * (offset / segmentHeight),
+ targetSegmentTime + segmentDuration * (offset / segmentHeight),
);
}
@@ -397,6 +368,7 @@ function useDraggableElement({
draggingAtTopEdge,
draggingAtBottomEdge,
showDraggableElement,
+ segments,
]);
useEffect(() => {
@@ -408,24 +380,23 @@ function useDraggableElement({
!isDragging &&
segments.length > 0
) {
- const { scrollTop: scrolled } = timelineRef.current;
-
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
+ if (!userInteracting) {
+ scrollToSegment(alignedSegmentTime);
+ }
- const segmentElement = timelineRef.current.querySelector(
- `[data-segment-id="${alignedSegmentTime}"]`,
+ const segmentIndex = segments.findIndex(
+ (time) => time === alignedSegmentTime,
);
- if (segmentElement) {
- const timelineRect = timelineRef.current.getBoundingClientRect();
- const timelineTopAbsolute = timelineRect.top;
- const rect = segmentElement.getBoundingClientRect();
- const segmentTop = rect.top + scrolled - timelineTopAbsolute;
+ if (segmentIndex >= 0) {
+ const segmentStart = segmentIndex * segmentHeight;
+
const offset =
((draggableElementTime - alignedSegmentTime) / segmentDuration) *
segmentHeight;
// subtract half the height of the handlebar cross bar (4px) for pixel perfection
- const newElementPosition = segmentTop - offset - 2;
+ const newElementPosition = segmentStart - offset - 2;
updateDraggableElementPosition(
newElementPosition,
@@ -454,14 +425,27 @@ function useDraggableElement({
segments,
]);
+ const findNextAvailableSegment = useCallback(
+ (startTime: number) => {
+ let searchTime = startTime;
+ while (searchTime < timelineStartAligned + timelineDuration) {
+ if (segments.includes(searchTime)) {
+ return searchTime;
+ }
+ searchTime += segmentDuration;
+ }
+ return null;
+ },
+ [segments, timelineStartAligned, timelineDuration, segmentDuration],
+ );
+
useEffect(() => {
if (
timelineRef.current &&
segmentsRef.current &&
draggableElementTime &&
timelineCollapsed &&
- timelineSegments &&
- segments
+ segments.length > 0
) {
setFullTimelineHeight(
Math.min(
@@ -469,47 +453,27 @@ function useDraggableElement({
segmentsRef.current.scrollHeight,
),
);
+
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
- let segmentElement = timelineRef.current.querySelector(
- `[data-segment-id="${alignedSegmentTime}"]`,
- );
-
- if (!segmentElement) {
+ if (segments.includes(alignedSegmentTime)) {
+ scrollToSegment(alignedSegmentTime);
+ } else {
// segment not found, maybe we collapsed over a collapsible segment
- let searchTime = alignedSegmentTime;
+ const nextAvailableSegment =
+ findNextAvailableSegment(alignedSegmentTime);
- while (
- searchTime < timelineStartAligned &&
- searchTime < timelineStartAligned + timelineDuration
- ) {
- searchTime += segmentDuration;
- segmentElement = timelineRef.current.querySelector(
- `[data-segment-id="${searchTime}"]`,
- );
-
- if (segmentElement) {
- // found, set time
- if (setDraggableElementTime) {
- setDraggableElementTime(searchTime);
- }
- return;
- }
- }
- }
- if (!segmentElement) {
- // segment still not found, just start at the beginning of the timeline or at now()
- if (segments?.length) {
- const searchTime = parseInt(
- segments[0].getAttribute("data-segment-id") || "0",
- 10,
- );
+ if (nextAvailableSegment !== null) {
+ scrollToSegment(nextAvailableSegment);
if (setDraggableElementTime) {
- setDraggableElementTime(searchTime);
+ setDraggableElementTime(nextAvailableSegment);
}
} else {
+ // segment still not found, just start at the beginning of the timeline or at now()
+ const firstAvailableSegment = segments[0] || timelineStartAligned;
+ scrollToSegment(firstAvailableSegment);
if (setDraggableElementTime) {
- setDraggableElementTime(timelineStartAligned);
+ setDraggableElementTime(firstAvailableSegment);
}
}
}
diff --git a/web/src/hooks/use-navigation.ts b/web/src/hooks/use-navigation.ts
index 06ebd6c1d..daed383d3 100644
--- a/web/src/hooks/use-navigation.ts
+++ b/web/src/hooks/use-navigation.ts
@@ -1,20 +1,29 @@
import { ENV } from "@/env";
+import { FrigateConfig } from "@/types/frigateConfig";
import { NavData } from "@/types/navigation";
import { useMemo } from "react";
+import { isDesktop } from "react-device-detect";
import { FaCompactDisc, FaVideo } from "react-icons/fa";
import { IoSearch } from "react-icons/io5";
import { LuConstruction } from "react-icons/lu";
import { MdVideoLibrary } from "react-icons/md";
+import { TbFaceId } from "react-icons/tb";
+import useSWR from "swr";
export const ID_LIVE = 1;
export const ID_REVIEW = 2;
export const ID_EXPLORE = 3;
export const ID_EXPORT = 4;
export const ID_PLAYGROUND = 5;
+export const ID_FACE_LIBRARY = 6;
export default function useNavigation(
variant: "primary" | "secondary" = "primary",
) {
+ const { data: config } = useSWR("config", {
+ revalidateOnFocus: false,
+ });
+
return useMemo(
() =>
[
@@ -54,7 +63,15 @@ export default function useNavigation(
url: "/playground",
enabled: ENV !== "production",
},
+ {
+ id: ID_FACE_LIBRARY,
+ variant,
+ icon: TbFaceId,
+ title: "Face Library",
+ url: "/faces",
+ enabled: isDesktop && config?.face_recognition.enabled,
+ },
] as NavData[],
- [variant],
+ [config?.face_recognition.enabled, variant],
);
}
diff --git a/web/src/hooks/use-timeline-zoom.ts b/web/src/hooks/use-timeline-zoom.ts
new file mode 100644
index 000000000..bcd996f77
--- /dev/null
+++ b/web/src/hooks/use-timeline-zoom.ts
@@ -0,0 +1,174 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { TimelineZoomDirection } from "@/types/review";
+
+type ZoomSettings = {
+ segmentDuration: number;
+ timestampSpread: number;
+};
+
+type UseTimelineZoomProps = {
+ zoomSettings: ZoomSettings;
+ zoomLevels: ZoomSettings[];
+ onZoomChange: (newZoomLevel: number) => void;
+ pinchThresholdPercent?: number;
+ timelineRef: React.RefObject;
+ timelineDuration: number;
+};
+
+export function useTimelineZoom({
+ zoomSettings,
+ zoomLevels,
+ onZoomChange,
+ pinchThresholdPercent = 20,
+ timelineRef,
+ timelineDuration,
+}: UseTimelineZoomProps) {
+ const [zoomLevel, setZoomLevel] = useState(
+ zoomLevels.findIndex(
+ (level) =>
+ level.segmentDuration === zoomSettings.segmentDuration &&
+ level.timestampSpread === zoomSettings.timestampSpread,
+ ),
+ );
+ const [isZooming, setIsZooming] = useState(false);
+ const [zoomDirection, setZoomDirection] =
+ useState(null);
+ const touchStartDistanceRef = useRef(0);
+
+ const getPinchThreshold = useCallback(() => {
+ return (window.innerHeight * pinchThresholdPercent) / 100;
+ }, [pinchThresholdPercent]);
+
+ const wheelDeltaRef = useRef(0);
+ const isZoomingRef = useRef(false);
+ const debounceTimeoutRef = useRef(null);
+
+ const handleZoom = useCallback(
+ (delta: number) => {
+ setIsZooming(true);
+ setZoomDirection(delta > 0 ? "out" : "in");
+ setZoomLevel((prevLevel) => {
+ const newLevel = Math.max(
+ 0,
+ Math.min(zoomLevels.length - 1, prevLevel - delta),
+ );
+ if (newLevel !== prevLevel && timelineRef.current) {
+ const { scrollTop, clientHeight, scrollHeight } = timelineRef.current;
+
+ // get time at the center of the viewable timeline
+ const centerRatio = (scrollTop + clientHeight / 2) / scrollHeight;
+ const centerTime = centerRatio * timelineDuration;
+
+ // calc the new total height based on the new zoom level
+ const newTotalHeight =
+ (timelineDuration / zoomLevels[newLevel].segmentDuration) * 8;
+
+ // calc the new scroll position to keep the center time in view
+ const newScrollTop =
+ (centerTime / timelineDuration) * newTotalHeight - clientHeight / 2;
+
+ onZoomChange(newLevel);
+
+ // Apply new scroll position after a short delay to allow for DOM update
+ setTimeout(() => {
+ if (timelineRef.current) {
+ timelineRef.current.scrollTop = newScrollTop;
+ }
+ }, 0);
+ }
+ return newLevel;
+ });
+
+ setTimeout(() => {
+ setIsZooming(false);
+ setZoomDirection(null);
+ }, 500);
+ },
+ [zoomLevels, onZoomChange, timelineRef, timelineDuration],
+ );
+
+ const debouncedZoom = useCallback(() => {
+ if (Math.abs(wheelDeltaRef.current) >= 200) {
+ handleZoom(wheelDeltaRef.current > 0 ? 1 : -1);
+ wheelDeltaRef.current = 0;
+ isZoomingRef.current = false;
+ } else {
+ isZoomingRef.current = false;
+ }
+ }, [handleZoom]);
+
+ const handleWheel = useCallback(
+ (event: WheelEvent) => {
+ if (event.ctrlKey) {
+ event.preventDefault();
+
+ if (!isZoomingRef.current) {
+ wheelDeltaRef.current += event.deltaY;
+
+ if (Math.abs(wheelDeltaRef.current) >= 200) {
+ isZoomingRef.current = true;
+
+ if (debounceTimeoutRef.current) {
+ clearTimeout(debounceTimeoutRef.current);
+ }
+
+ debounceTimeoutRef.current = setTimeout(() => {
+ debouncedZoom();
+ }, 200);
+ }
+ }
+ }
+ },
+ [debouncedZoom],
+ );
+
+ const handleTouchStart = useCallback((event: TouchEvent) => {
+ if (event.touches.length === 2) {
+ event.preventDefault();
+ const touch1 = event.touches[0];
+ const touch2 = event.touches[1];
+ const distance = Math.hypot(
+ touch1.clientX - touch2.clientX,
+ touch1.clientY - touch2.clientY,
+ );
+ touchStartDistanceRef.current = distance;
+ }
+ }, []);
+
+ const handleTouchMove = useCallback(
+ (event: TouchEvent) => {
+ if (event.touches.length === 2) {
+ event.preventDefault();
+ const touch1 = event.touches[0];
+ const touch2 = event.touches[1];
+ const currentDistance = Math.hypot(
+ touch1.clientX - touch2.clientX,
+ touch1.clientY - touch2.clientY,
+ );
+
+ const distanceDelta = currentDistance - touchStartDistanceRef.current;
+ const pinchThreshold = getPinchThreshold();
+
+ if (Math.abs(distanceDelta) > pinchThreshold) {
+ handleZoom(distanceDelta > 0 ? -1 : 1);
+ touchStartDistanceRef.current = currentDistance;
+ }
+ }
+ },
+ [handleZoom, getPinchThreshold],
+ );
+
+ useEffect(() => {
+ window.addEventListener("wheel", handleWheel, { passive: false });
+ window.addEventListener("touchstart", handleTouchStart, { passive: false });
+ window.addEventListener("touchmove", handleTouchMove, { passive: false });
+
+ return () => {
+ window.removeEventListener("wheel", handleWheel);
+ window.removeEventListener("touchstart", handleTouchStart);
+ window.removeEventListener("touchmove", handleTouchMove);
+ };
+ }, [handleWheel, handleTouchStart, handleTouchMove]);
+
+ return { zoomLevel, handleZoom, isZooming, zoomDirection };
+}
diff --git a/web/src/index.css b/web/src/index.css
index 5c78fe925..9a294ff7c 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -179,3 +179,13 @@ html {
border: 3px solid #a00000 !important;
opacity: 0.5 !important;
}
+
+.react-grid-layout,
+.react-grid-layout .react-grid-item {
+ transition: none !important;
+}
+
+.react-lazylog,
+.react-lazylog-searchbar {
+ background-color: transparent !important;
+}
diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index 28625bbd8..50db5211e 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -7,6 +7,7 @@ import { usePersistence } from "@/hooks/use-persistence";
import { FrigateConfig } from "@/types/frigateConfig";
import { RecordingStartingPoint } from "@/types/record";
import {
+ RecordingsSummary,
REVIEW_PADDING,
ReviewFilter,
ReviewSegment,
@@ -286,6 +287,16 @@ export default function Events() {
updateSummary();
}, [updateSummary]);
+ // recordings summary
+
+ const { data: recordingsSummary } = useSWR([
+ "recordings/summary",
+ {
+ timezone: timezone,
+ cameras: reviewSearchParams["cameras"] ?? null,
+ },
+ ]);
+
// preview videos
const previewTimes = useMemo(() => {
const startDate = new Date(selectedTimeRange.after * 1000);
@@ -475,6 +486,7 @@ export default function Events() {
reviewItems={reviewItems}
currentReviewItems={currentItems}
reviewSummary={reviewSummary}
+ recordingsSummary={recordingsSummary}
relevantPreviews={allPreviews}
timeRange={selectedTimeRange}
filter={reviewFilter}
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 90bea004a..c005c43c2 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -112,6 +112,8 @@ export default function Explore() {
search_type: searchSearchParams["search_type"],
min_score: searchSearchParams["min_score"],
max_score: searchSearchParams["max_score"],
+ min_speed: searchSearchParams["min_speed"],
+ max_speed: searchSearchParams["max_speed"],
has_snapshot: searchSearchParams["has_snapshot"],
is_submitted: searchSearchParams["is_submitted"],
has_clip: searchSearchParams["has_clip"],
@@ -145,6 +147,8 @@ export default function Explore() {
search_type: searchSearchParams["search_type"],
min_score: searchSearchParams["min_score"],
max_score: searchSearchParams["max_score"],
+ min_speed: searchSearchParams["min_speed"],
+ max_speed: searchSearchParams["max_speed"],
has_snapshot: searchSearchParams["has_snapshot"],
is_submitted: searchSearchParams["is_submitted"],
has_clip: searchSearchParams["has_clip"],
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 212b001f0..529bb2e26 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -83,9 +83,11 @@ function Exports() {
const onHandleRename = useCallback(
(id: string, update: string) => {
axios
- .patch(`export/${id}/${encodeURIComponent(update)}`)
+ .patch(`export/${id}/rename`, {
+ name: update,
+ })
.then((response) => {
- if (response.status == 200) {
+ if (response.status === 200) {
setDeleteClip(undefined);
mutate();
}
diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
new file mode 100644
index 000000000..4bb6b39ff
--- /dev/null
+++ b/web/src/pages/FaceLibrary.tsx
@@ -0,0 +1,515 @@
+import { baseUrl } from "@/api/baseUrl";
+import AddFaceIcon from "@/components/icons/AddFaceIcon";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
+import TextEntryDialog from "@/components/overlay/dialog/TextEntryDialog";
+import UploadImageDialog from "@/components/overlay/dialog/UploadImageDialog";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Toaster } from "@/components/ui/sonner";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import useOptimisticState from "@/hooks/use-optimistic-state";
+import { cn } from "@/lib/utils";
+import { FrigateConfig } from "@/types/frigateConfig";
+import axios from "axios";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { LuImagePlus, LuRefreshCw, LuScanFace, LuTrash2 } from "react-icons/lu";
+import { toast } from "sonner";
+import useSWR from "swr";
+
+export default function FaceLibrary() {
+ const { data: config } = useSWR("config");
+
+ // title
+
+ useEffect(() => {
+ document.title = "Face Library - Frigate";
+ }, []);
+
+ const [page, setPage] = useState();
+ const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
+ const tabsRef = useRef(null);
+
+ // face data
+
+ const { data: faceData, mutate: refreshFaces } = useSWR("faces");
+
+ const faces = useMemo(
+ () =>
+ faceData ? Object.keys(faceData).filter((face) => face != "train") : [],
+ [faceData],
+ );
+ const faceImages = useMemo(
+ () => (pageToggle && faceData ? faceData[pageToggle] : []),
+ [pageToggle, faceData],
+ );
+
+ const trainImages = useMemo(
+ () => faceData?.["train"] || [],
+ [faceData],
+ );
+
+ useEffect(() => {
+ if (!pageToggle) {
+ if (trainImages.length > 0) {
+ setPageToggle("train");
+ } else if (faces) {
+ setPageToggle(faces[0]);
+ }
+ } else if (pageToggle == "train" && trainImages.length == 0) {
+ setPageToggle(faces[0]);
+ }
+ // we need to listen on the value of the faces list
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [trainImages, faces]);
+
+ // upload
+
+ const [upload, setUpload] = useState(false);
+ const [addFace, setAddFace] = useState(false);
+
+ const onUploadImage = useCallback(
+ (file: File) => {
+ const formData = new FormData();
+ formData.append("file", file);
+ axios
+ .post(`faces/${pageToggle}/register`, formData, {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ })
+ .then((resp) => {
+ if (resp.status == 200) {
+ setUpload(false);
+ refreshFaces();
+ toast.success("Successfully uploaded image.", {
+ position: "top-center",
+ });
+ }
+ })
+ .catch((error) => {
+ if (error.response?.data?.message) {
+ toast.error(
+ `Failed to upload image: ${error.response.data.message}`,
+ { position: "top-center" },
+ );
+ } else {
+ toast.error(`Failed to upload image: ${error.message}`, {
+ position: "top-center",
+ });
+ }
+ });
+ },
+ [pageToggle, refreshFaces],
+ );
+
+ const onAddName = useCallback(
+ (name: string) => {
+ axios
+ .post(`faces/${name}/create`, {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ })
+ .then((resp) => {
+ if (resp.status == 200) {
+ setAddFace(false);
+ refreshFaces();
+ toast.success("Successfully add face library.", {
+ position: "top-center",
+ });
+ }
+ })
+ .catch((error) => {
+ if (error.response?.data?.message) {
+ toast.error(
+ `Failed to set face name: ${error.response.data.message}`,
+ { position: "top-center" },
+ );
+ } else {
+ toast.error(`Failed to set face name: ${error.message}`, {
+ position: "top-center",
+ });
+ }
+ });
+ },
+ [refreshFaces],
+ );
+
+ if (!config) {
+ return ("frigate");
const tabsRef = useRef(null);
+ const lazyLogWrapperRef = useRef(null);
+ const [logs, setLogs] = useState([]);
+ const [filterSeverity, setFilterSeverity] = useState();
+ const [selectedLog, setSelectedLog] = useState();
+ const lazyLogRef = useRef(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const lastFetchedIndexRef = useRef(-1);
useEffect(() => {
document.title = `${logService[0].toUpperCase()}${logService.substring(1)} Logs - Frigate`;
@@ -49,92 +61,233 @@ function Logs() {
}
}, [tabsRef, logService]);
- // log data handling
+ // log settings
- const logPageSize = useMemo(() => {
- if (isMobileOnly) {
- return 15;
- }
+ const [logSettings, setLogSettings] = useState({
+ disableStreaming: false,
+ });
- if (isTablet) {
- return 25;
- }
+ // filter
- return 40;
- }, []);
+ const filterLines = useCallback(
+ (lines: string[]) => {
+ if (!filterSeverity?.length) return lines;
- const [logRange, setLogRange] = useState({ start: 0, end: 0 });
- const [logs, setLogs] = useState([]);
- const [logLines, setLogLines] = useState([]);
+ return lines.filter((line) => {
+ const parsedLine = parseLogLines(logService, [line])[0];
+ return filterSeverity.includes(parsedLine.severity);
+ });
+ },
+ [filterSeverity, logService],
+ );
- useEffect(() => {
- axios
- .get(`logs/${logService}?start=-${logPageSize}`)
- .then((resp) => {
- if (resp.status == 200) {
- const data = resp.data as LogData;
- setLogRange({
- start: Math.max(0, data.totalLines - logPageSize),
- end: data.totalLines,
- });
- setLogs(data.lines);
- setLogLines(parseLogLines(logService, data.lines));
+ // fetchers
+
+ const fetchLogRange = useCallback(
+ async (start: number, end: number) => {
+ try {
+ const response = await axios.get(`logs/${logService}`, {
+ params: { start, end },
+ });
+ if (
+ response.status === 200 &&
+ response.data &&
+ Array.isArray(response.data.lines)
+ ) {
+ const filteredLines = filterLines(response.data.lines);
+ return filteredLines;
}
+ } catch (error) {
+ const errorMessage =
+ error instanceof Error ? error.message : "An unknown error occurred";
+ toast.error(`Error fetching logs: ${errorMessage}`, {
+ position: "top-center",
+ });
+ }
+ return [];
+ },
+ [logService, filterLines],
+ );
+
+ const fetchInitialLogs = useCallback(async () => {
+ setIsLoading(true);
+ try {
+ const response = await axios.get(`logs/${logService}`, {
+ params: { start: filterSeverity ? 0 : -100 },
+ });
+ if (
+ response.status === 200 &&
+ response.data &&
+ Array.isArray(response.data.lines)
+ ) {
+ const filteredLines = filterLines(response.data.lines);
+ setLogs(filteredLines);
+ lastFetchedIndexRef.current =
+ response.data.totalLines - filteredLines.length;
+ }
+ } catch (error) {
+ const errorMessage =
+ error instanceof Error ? error.message : "An unknown error occurred";
+ toast.error(`Error fetching logs: ${errorMessage}`, {
+ position: "top-center",
+ });
+ } finally {
+ setIsLoading(false);
+ }
+ }, [logService, filterLines, filterSeverity]);
+
+ const abortControllerRef = useRef(null);
+
+ const fetchLogsStream = useCallback(() => {
+ // Cancel any existing stream
+ abortControllerRef.current?.abort();
+ const abortController = new AbortController();
+ abortControllerRef.current = abortController;
+ let buffer = "";
+ const decoder = new TextDecoder();
+
+ const processStreamChunk = (
+ reader: ReadableStreamDefaultReader,
+ ): Promise => {
+ return reader.read().then(({ done, value }) => {
+ if (done) return;
+
+ // Decode the chunk and add it to our buffer
+ buffer += decoder.decode(value, { stream: true });
+
+ // Split on newlines, keeping any partial line in the buffer
+ const lines = buffer.split("\n");
+
+ // Keep the last partial line
+ buffer = lines.pop() || "";
+
+ // Filter and append complete lines
+ if (lines.length > 0) {
+ const filteredLines = filterSeverity?.length
+ ? lines.filter((line) => {
+ const parsedLine = parseLogLines(logService, [line])[0];
+ return filterSeverity.includes(parsedLine.severity);
+ })
+ : lines;
+ if (filteredLines.length > 0) {
+ lazyLogRef.current?.appendLines(filteredLines);
+ }
+ }
+ // Process next chunk
+ return processStreamChunk(reader);
+ });
+ };
+
+ fetch(`api/logs/${logService}?stream=true`, {
+ signal: abortController.signal,
+ })
+ .then((response): Promise => {
+ if (!response.ok) {
+ throw new Error(
+ `Error while fetching log stream, status: ${response.status}`,
+ );
+ }
+ const reader = response.body?.getReader();
+ if (!reader) {
+ throw new Error("No reader available");
+ }
+ return processStreamChunk(reader);
})
- .catch(() => {});
- }, [logPageSize, logService]);
+ .catch((error) => {
+ if (error.name !== "AbortError") {
+ const errorMessage =
+ error instanceof Error
+ ? error.message
+ : "An unknown error occurred";
+ toast.error(`Error while streaming logs: ${errorMessage}`);
+ }
+ });
+ }, [logService, filterSeverity]);
useEffect(() => {
- if (!logs || logs.length == 0) {
- return;
- }
-
- const id = setTimeout(() => {
- axios
- .get(`logs/${logService}?start=${logRange.end}`)
- .then((resp) => {
- if (resp.status == 200) {
- const data = resp.data as LogData;
-
- if (data.lines.length > 0) {
- setLogRange({
- start: logRange.start,
- end: data.totalLines,
- });
- setLogs([...logs, ...data.lines]);
- setLogLines([
- ...logLines,
- ...parseLogLines(logService, data.lines),
- ]);
- }
- }
- })
- .catch(() => {});
- }, 5000);
+ setIsLoading(true);
+ setLogs([]);
+ lastFetchedIndexRef.current = -1;
+ fetchInitialLogs().then(() => {
+ // Start streaming after initial load
+ if (!logSettings.disableStreaming) {
+ fetchLogsStream();
+ }
+ });
return () => {
- if (id) {
- clearTimeout(id);
- }
+ abortControllerRef.current?.abort();
};
- // we need to listen on the current range of visible items
+ // we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [logLines, logService, logRange]);
+ }, [logService, filterSeverity]);
- // convert to log data
+ // handlers
+
+ const prependLines = useCallback((newLines: string[]) => {
+ if (!lazyLogRef.current) return;
+
+ const newLinesArray = newLines.map(
+ (line) => new Uint8Array(new TextEncoder().encode(line + "\n")),
+ );
+
+ lazyLogRef.current.setState((prevState) => ({
+ ...prevState,
+ lines: prevState.lines.unshift(...newLinesArray),
+ count: prevState.count + newLines.length,
+ }));
+ }, []);
+
+ // debounced
+ const handleScroll = useMemo(
+ () =>
+ debounce(() => {
+ const scrollThreshold =
+ lazyLogRef.current?.listRef.current?.findEndIndex() ?? 10;
+ const startIndex =
+ lazyLogRef.current?.listRef.current?.findStartIndex() ?? 0;
+ const endIndex =
+ lazyLogRef.current?.listRef.current?.findEndIndex() ?? 0;
+ const pageSize = endIndex - startIndex;
+ if (
+ scrollThreshold < pageSize + pageSize / 2 &&
+ lastFetchedIndexRef.current > 0 &&
+ !isLoading
+ ) {
+ const nextEnd = lastFetchedIndexRef.current;
+ const nextStart = Math.max(0, nextEnd - (pageSize || 100));
+ setIsLoading(true);
+
+ fetchLogRange(nextStart, nextEnd).then((newLines) => {
+ if (newLines.length > 0) {
+ prependLines(newLines);
+ lastFetchedIndexRef.current = nextStart;
+
+ lazyLogRef.current?.listRef.current?.scrollTo(
+ newLines.length *
+ lazyLogRef.current?.listRef.current?.getItemSize(1),
+ );
+ }
+ });
+
+ setIsLoading(false);
+ }
+ }, 50),
+ [fetchLogRange, isLoading, prependLines],
+ );
const handleCopyLogs = useCallback(() => {
- if (logs) {
- copy(logs.join("\n"));
- toast.success(
- logRange.start == 0
- ? "Copied logs to clipboard"
- : "Copied visible logs to clipboard",
- );
- } else {
- toast.error("Could not copy logs to clipboard");
+ if (logs.length) {
+ fetchInitialLogs()
+ .then(() => {
+ copy(logs.join("\n"));
+ toast.success("Copied logs to clipboard");
+ })
+ .catch(() => {
+ toast.error("Could not copy logs to clipboard");
+ });
}
- }, [logs, logRange]);
+ }, [logs, fetchInitialLogs]);
const handleDownloadLogs = useCallback(() => {
axios
@@ -157,153 +310,76 @@ function Logs() {
.catch(() => {});
}, [logService]);
- // scroll to bottom
-
- const [initialScroll, setInitialScroll] = useState(false);
-
- const contentRef = useRef(null);
- const [endVisible, setEndVisible] = useState(true);
- const endObserver = useRef(null);
- const endLogRef = useCallback(
- (node: HTMLElement | null) => {
- if (endObserver.current) endObserver.current.disconnect();
- try {
- endObserver.current = new IntersectionObserver((entries) => {
- setEndVisible(entries[0].isIntersecting);
- });
- if (node) endObserver.current.observe(node);
- } catch (e) {
- // no op
- }
+ const handleRowClick = useCallback(
+ (rowInfo: { lineNumber: number; rowIndex: number }) => {
+ const clickedLine = parseLogLines(logService, [
+ logs[rowInfo.rowIndex],
+ ])[0];
+ setSelectedLog(clickedLine);
},
- [setEndVisible],
- );
- const startObserver = useRef(null);
- const startLogRef = useCallback(
- (node: HTMLElement | null) => {
- if (startObserver.current) startObserver.current.disconnect();
-
- if (logs.length == 0 || !initialScroll) {
- return;
- }
-
- try {
- startObserver.current = new IntersectionObserver(
- (entries) => {
- if (entries[0].isIntersecting && logRange.start > 0) {
- const start = Math.max(0, logRange.start - logPageSize);
-
- axios
- .get(`logs/${logService}?start=${start}&end=${logRange.start}`)
- .then((resp) => {
- if (resp.status == 200) {
- const data = resp.data as LogData;
-
- if (data.lines.length > 0) {
- setLogRange({
- start: start,
- end: logRange.end,
- });
- setLogs([...data.lines, ...logs]);
- setLogLines([
- ...parseLogLines(logService, data.lines),
- ...logLines,
- ]);
- }
- }
- })
- .catch(() => {});
- contentRef.current?.scrollBy({
- top: 10,
- });
- }
- },
- { rootMargin: `${10 * (isMobile ? 64 : 48)}px 0px 0px 0px` },
- );
- if (node) startObserver.current.observe(node);
- } catch (e) {
- // no op
- }
- },
- // we need to listen on the current range of visible items
- // eslint-disable-next-line react-hooks/exhaustive-deps
- [logRange, initialScroll],
+ [logs, logService],
);
- useEffect(() => {
- if (logLines.length == 0) {
- setInitialScroll(false);
- return;
- }
-
- if (initialScroll) {
- return;
- }
-
- if (!contentRef.current) {
- return;
- }
-
- if (contentRef.current.scrollHeight <= contentRef.current.clientHeight) {
- setInitialScroll(true);
- return;
- }
-
- contentRef.current?.scrollTo({
- top: contentRef.current?.scrollHeight,
- behavior: "instant",
- });
- setTimeout(() => setInitialScroll(true), 300);
- // we need to listen on the current range of visible items
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [logLines, logService]);
-
- // log filtering
-
- const [filterSeverity, setFilterSeverity] = useState();
-
- // log selection
-
- const [selectedLog, setSelectedLog] = useState();
-
- // interaction
+ // keyboard listener
useKeyboardListener(
["PageDown", "PageUp", "ArrowDown", "ArrowUp"],
(key, modifiers) => {
- if (!modifiers.down) {
+ if (!key || !modifiers.down || !lazyLogWrapperRef.current) {
return;
}
- switch (key) {
- case "PageDown":
- contentRef.current?.scrollBy({
- top: 480,
- });
- break;
- case "PageUp":
- contentRef.current?.scrollBy({
- top: -480,
- });
- break;
- case "ArrowDown":
- contentRef.current?.scrollBy({
- top: 48,
- });
- break;
- case "ArrowUp":
- contentRef.current?.scrollBy({
- top: -48,
- });
- break;
+ const container =
+ lazyLogWrapperRef.current.querySelector(".react-lazylog");
+
+ const logLineHeight = container?.querySelector(".log-line")?.clientHeight;
+
+ if (!logLineHeight) {
+ return;
}
+
+ const scrollAmount = key.includes("Page")
+ ? logLineHeight * 10
+ : logLineHeight;
+ const direction = key.includes("Down") ? 1 : -1;
+ container?.scrollBy({ top: scrollAmount * direction });
},
);
+ // format lines
+
+ const lineBufferRef = useRef("");
+
+ const formatPart = useCallback(
+ (text: string) => {
+ lineBufferRef.current += text;
+
+ if (text.endsWith("\n")) {
+ const completeLine = lineBufferRef.current.trim();
+ lineBufferRef.current = "";
+
+ if (completeLine) {
+ const parsedLine = parseLogLines(logService, [completeLine])[0];
+ return (
+ setFilterSeverity([parsedLine.severity])}
+ onSelect={() => setSelectedLog(parsedLine)}
+ />
+ );
+ }
+ }
+
+ return null;
+ },
+ [logService, setFilterSeverity, setSelectedLog],
+ );
+
useEffect(() => {
const handleCopy = (e: ClipboardEvent) => {
e.preventDefault();
- if (!contentRef.current) return;
+ if (!lazyLogWrapperRef.current) return;
const selection = window.getSelection();
if (!selection) return;
@@ -371,7 +447,7 @@ function Logs() {
e.clipboardData?.setData("text/plain", copyText);
};
- const content = contentRef.current;
+ const content = lazyLogWrapperRef.current;
content?.addEventListener("copy", handleCopy);
return () => {
content?.removeEventListener("copy", handleCopy);
@@ -393,11 +469,10 @@ function Logs() {
onValueChange={(value: LogType) => {
if (value) {
setLogs([]);
- setLogLines([]);
setFilterSeverity(undefined);
setLogService(value);
}
- }} // don't allow the severity to be unselected
+ }}
>
{Object.values(logTypes).map((item) => (
+
+ );
+ },
+);
diff --git a/web/src/components/timeline/VirtualizedMotionSegments.tsx b/web/src/components/timeline/VirtualizedMotionSegments.tsx
new file mode 100644
index 000000000..3aed75266
--- /dev/null
+++ b/web/src/components/timeline/VirtualizedMotionSegments.tsx
@@ -0,0 +1,251 @@
+import React, {
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+ forwardRef,
+ useImperativeHandle,
+} from "react";
+import MotionSegment from "./MotionSegment";
+import { ReviewSegment, MotionData } from "@/types/review";
+
+type VirtualizedMotionSegmentsProps = {
+ timelineRef: React.RefObject
+ {visibleRange.start > 0 && (
+
+ )}
+ {visibleSegments.map((segmentTime, index) => {
+ const segmentId = `${segmentTime}_${segmentDuration}`;
+ return (
+
+
+
+ );
+ })}
+ {visibleRange.end < segments.length && (
+
+ )}
+
+
+ );
+ },
+ [
+ events,
+ getMotionSegmentValue,
+ motionOnly,
+ segmentDuration,
+ showMinimap,
+ minimapStartTime,
+ minimapEndTime,
+ setHandlebarTime,
+ scrollToSegment,
+ dense,
+ timestampSpread,
+ visibleRange.start,
+ ],
+ );
+
+ const totalHeight = segments.length * SEGMENT_HEIGHT;
+ const visibleSegments = segments.slice(
+ visibleRange.start,
+ visibleRange.end,
+ );
+
+ return (
+
+
+ );
+ },
+);
+
+export default VirtualizedMotionSegments;
diff --git a/web/src/components/timeline/segment-metadata.tsx b/web/src/components/timeline/segment-metadata.tsx
index 3e3c99393..9d29c73ad 100644
--- a/web/src/components/timeline/segment-metadata.tsx
+++ b/web/src/components/timeline/segment-metadata.tsx
@@ -22,7 +22,7 @@ type TimestampSegmentProps = {
isLastSegmentInMinimap: boolean;
timestamp: Date;
timestampSpread: number;
- segmentKey: number;
+ segmentKey: string;
};
export function MinimapBounds({
diff --git a/web/src/components/ui/slider.tsx b/web/src/components/ui/slider.tsx
index 1dde1df67..3cb4165e9 100644
--- a/web/src/components/ui/slider.tsx
+++ b/web/src/components/ui/slider.tsx
@@ -18,7 +18,7 @@ const Slider = React.forwardRef<
+ {visibleRange.start > 0 && (
+
+ )}
+ {visibleSegments.map((segmentTime, index) =>
+ renderSegment(segmentTime, index),
+ )}
+ {visibleRange.end < segments.length && (
+
+ )}
+
+
+
+ );
+}
+
+type TrainingGridProps = {
+ config: FrigateConfig;
+ attemptImages: string[];
+ faceNames: string[];
+ onRefresh: () => void;
+};
+function TrainingGrid({
+ config,
+ attemptImages,
+ faceNames,
+ onRefresh,
+}: TrainingGridProps) {
+ return (
+
+
+
+
+ {pageToggle &&
+ (pageToggle == "train" ? (
+
+ {
+ if (value) {
+ setPageToggle(value);
+ }
+ }}
+ >
+ {trainImages.length > 0 && (
+ <>
+
+
+
+
+ ))}
+
+
+ Train
+ |
+
+ )}
+
+ {Object.values(faces).map((item) => (
+
+ {item} ({faceData[item].length})
+
+
+
+
+
+
+ {attemptImages.map((image: string) => (
+
+ );
+}
+
+type FaceAttemptProps = {
+ image: string;
+ faceNames: string[];
+ threshold: number;
+ onRefresh: () => void;
+};
+function FaceAttempt({
+ image,
+ faceNames,
+ threshold,
+ onRefresh,
+}: FaceAttemptProps) {
+ const data = useMemo(() => {
+ const parts = image.split("-");
+
+ return {
+ eventId: `${parts[0]}-${parts[1]}`,
+ name: parts[2],
+ score: parts[3],
+ };
+ }, [image]);
+
+ const onTrainAttempt = useCallback(
+ (trainName: string) => {
+ axios
+ .post(`/faces/train/${trainName}/classify`, { training_file: image })
+ .then((resp) => {
+ if (resp.status == 200) {
+ toast.success(`Successfully trained face.`, {
+ position: "top-center",
+ });
+ onRefresh();
+ }
+ })
+ .catch((error) => {
+ if (error.response?.data?.message) {
+ toast.error(`Failed to train: ${error.response.data.message}`, {
+ position: "top-center",
+ });
+ } else {
+ toast.error(`Failed to train: ${error.message}`, {
+ position: "top-center",
+ });
+ }
+ });
+ },
+ [image, onRefresh],
+ );
+
+ const onReprocess = useCallback(() => {
+ axios
+ .post(`/faces/reprocess`, { training_file: image })
+ .then((resp) => {
+ if (resp.status == 200) {
+ toast.success(`Successfully trained face.`, {
+ position: "top-center",
+ });
+ onRefresh();
+ }
+ })
+ .catch((error) => {
+ if (error.response?.data?.message) {
+ toast.error(`Failed to train: ${error.response.data.message}`, {
+ position: "top-center",
+ });
+ } else {
+ toast.error(`Failed to train: ${error.message}`, {
+ position: "top-center",
+ });
+ }
+ });
+ }, [image, onRefresh]);
+
+ const onDelete = useCallback(() => {
+ axios
+ .post(`/faces/train/delete`, { ids: [image] })
+ .then((resp) => {
+ if (resp.status == 200) {
+ toast.success(`Successfully deleted face.`, {
+ position: "top-center",
+ });
+ onRefresh();
+ }
+ })
+ .catch((error) => {
+ if (error.response?.data?.message) {
+ toast.error(`Failed to delete: ${error.response.data.message}`, {
+ position: "top-center",
+ });
+ } else {
+ toast.error(`Failed to delete: ${error.message}`, {
+ position: "top-center",
+ });
+ }
+ });
+ }, [image, onRefresh]);
+
+ return (
+
+
+ );
+}
+
+type FaceGridProps = {
+ faceImages: string[];
+ pageToggle: string;
+ onRefresh: () => void;
+};
+function FaceGrid({ faceImages, pageToggle, onRefresh }: FaceGridProps) {
+ return (
+
+ 
+
+
+
+
+
+
+
+ {data.name}
+ = threshold
+ ? "text-success"
+ : "text-danger",
+ )}
+ >
+ {Number.parseFloat(data.score) * 100}%
+
+
+
+
+
+
+
+
+
+ Train Face as:
+ {faceNames.map((faceName) => (
+ onTrainAttempt(faceName)}
+ >
+ {faceName}
+
+ ))}
+
+
+ Train Face as Person
+
+
+
+ onReprocess()}
+ />
+
+ Delete Face Attempt
+
+
+
+
+ Delete Face Attempt
+
+
+
+ {faceImages.map((image: string) => (
+
+ );
+}
+
+type FaceImageProps = {
+ name: string;
+ image: string;
+ onRefresh: () => void;
+};
+function FaceImage({ name, image, onRefresh }: FaceImageProps) {
+ const onDelete = useCallback(() => {
+ axios
+ .post(`/faces/${name}/delete`, { ids: [image] })
+ .then((resp) => {
+ if (resp.status == 200) {
+ toast.success(`Successfully deleted face.`, {
+ position: "top-center",
+ });
+ onRefresh();
+ }
+ })
+ .catch((error) => {
+ if (error.response?.data?.message) {
+ toast.error(`Failed to delete: ${error.response.data.message}`, {
+ position: "top-center",
+ });
+ } else {
+ toast.error(`Failed to delete: ${error.message}`, {
+ position: "top-center",
+ });
+ }
+ });
+ }, [name, image, onRefresh]);
+
+ return (
+
+
+ );
+}
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index 949fffb8a..a4b67f441 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -1,35 +1,47 @@
import { Button } from "@/components/ui/button";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { LogData, LogLine, LogSeverity, LogType, logTypes } from "@/types/log";
+import {
+ LogLine,
+ LogSettingsType,
+ LogSeverity,
+ LogType,
+ logTypes,
+} from "@/types/log";
import copy from "copy-to-clipboard";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import axios from "axios";
import LogInfoDialog from "@/components/overlay/LogInfoDialog";
import { LogChip } from "@/components/indicators/Chip";
-import { LogLevelFilterButton } from "@/components/filter/LogLevelFilter";
-import { FaCopy } from "react-icons/fa6";
+import { LogSettingsButton } from "@/components/filter/LogSettingsButton";
+import { FaCopy, FaDownload } from "react-icons/fa";
import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner";
-import {
- isDesktop,
- isMobile,
- isMobileOnly,
- isTablet,
-} from "react-device-detect";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import { cn } from "@/lib/utils";
-import { MdVerticalAlignBottom } from "react-icons/md";
import { parseLogLines } from "@/utils/logUtil";
-import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import scrollIntoView from "scroll-into-view-if-needed";
-import { FaDownload } from "react-icons/fa";
-
-type LogRange = { start: number; end: number };
+import { LazyLog } from "@melloware/react-logviewer";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
+import EnhancedScrollFollow from "@/components/dynamic/EnhancedScrollFollow";
+import { MdCircle } from "react-icons/md";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { debounce } from "lodash";
function Logs() {
const [logService, setLogService] = useState
+ 
+
+
+
+
+
+
+
+ {name}
+
+
+
+
+ Delete Face Attempt
+
+
+ Download
-
-
-
Type
-
- Timestamp
+
+
);
}
type LogLineDataProps = {
- startRef?: (node: HTMLDivElement | null) => void;
- className: string;
+ className?: string;
line: LogLine;
+ logService: string;
onClickSeverity: () => void;
onSelect: () => void;
};
+
function LogLineData({
- startRef,
className,
line,
+ logService,
onClickSeverity,
onSelect,
}: LogLineDataProps) {
return (
+
+
-
+
Type
+ Timestamp
+ Tag
-
- Message
+
-
+ Tag
+
+
+
Message
- {logLines.length > 0 &&
- [...Array(logRange.end).keys()].map((idx) => {
- const logLine =
- idx >= logRange.start
- ? logLines[idx - logRange.start]
- : undefined;
- if (logLine) {
- const line = logLines[idx - logRange.start];
- if (filterSeverity && !filterSeverity.includes(line.severity)) {
- return (
-
- );
- }
-
- return (
-
+ {isLoading ? (
+ (
+ <>
+ {follow && !logSettings.disableStreaming && (
+
- {logLines.length == 0 && (
-
+
+
+
+
+ Logs are streaming from the server
+
+
+
+ )}
+
-
-
-
-
+
-
+
+
+
+ {line.dateStamp}
+
+
- {line.dateStamp}
-
-
+
+
- >;
+ supportsAudioOutput: boolean;
+ supports2WayTalk: boolean;
};
function FrigateCameraFeatures({
camera,
@@ -829,14 +920,124 @@ function FrigateCameraFeatures({
audioDetectEnabled,
autotrackingEnabled,
fullscreen,
+ streamName,
+ setStreamName,
+ preferredLiveMode,
+ playInBackground,
+ setPlayInBackground,
+ showStats,
+ setShowStats,
+ isRestreamed,
+ setLowBandwidth,
+ supportsAudioOutput,
+ supports2WayTalk,
}: FrigateCameraFeaturesProps) {
- const { payload: detectState, send: sendDetect } = useDetectState(camera);
- const { payload: recordState, send: sendRecord } = useRecordingsState(camera);
- const { payload: snapshotState, send: sendSnapshot } =
- useSnapshotsState(camera);
- const { payload: audioState, send: sendAudio } = useAudioState(camera);
+ const { payload: detectState, send: sendDetect } = useDetectState(
+ camera.name,
+ );
+ const { payload: recordState, send: sendRecord } = useRecordingsState(
+ camera.name,
+ );
+ const { payload: snapshotState, send: sendSnapshot } = useSnapshotsState(
+ camera.name,
+ );
+ const { payload: audioState, send: sendAudio } = useAudioState(camera.name);
const { payload: autotrackingState, send: sendAutotracking } =
- useAutotrackingState(camera);
+ useAutotrackingState(camera.name);
+
+ // manual event
+
+ const recordingEventIdRef = useRef(null);
+ const [isRecording, setIsRecording] = useState(false);
+ const [activeToastId, setActiveToastId] = useState(
+ null,
+ );
+
+ const createEvent = useCallback(async () => {
+ try {
+ const response = await axios.post(
+ `events/${camera.name}/on_demand/create`,
+ {
+ include_recording: true,
+ duration: null,
+ },
+ );
+
+ if (response.data.success) {
+ recordingEventIdRef.current = response.data.event_id;
+ setIsRecording(true);
+ const toastId = toast.success(
+
+
+
+
+
+
);
}
@@ -908,44 +1367,276 @@ function FrigateCameraFeatures({
title={`${camera} Settings`}
/>
-
- sendDetect(detectState == "ON" ? "OFF" : "ON")}
- />
- {recordingEnabled && (
+
+
- sendRecord(recordState == "ON" ? "OFF" : "ON")
+ sendDetect(detectState == "ON" ? "OFF" : "ON")
}
/>
- )}
-
- sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")
- }
- />
- {audioDetectEnabled && (
+ {recordingEnabled && (
+
+ sendRecord(recordState == "ON" ? "OFF" : "ON")
+ }
+ />
+ )}
sendAudio(audioState == "ON" ? "OFF" : "ON")}
- />
- )}
- {autotrackingEnabled && (
-
- sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON")
+ sendSnapshot(snapshotState == "ON" ? "OFF" : "ON")
}
/>
- )}
+ {audioDetectEnabled && (
+
+ sendAudio(audioState == "ON" ? "OFF" : "ON")
+ }
+ />
+ )}
+ {autotrackingEnabled && (
+
+ sendAutotracking(autotrackingState == "ON" ? "OFF" : "ON")
+ }
+ />
+ )}
+
+
);
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index 7642d5a0d..89a2aeef2 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -14,7 +14,11 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import { usePersistence } from "@/hooks/use-persistence";
-import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
+import {
+ AllGroupsStreamingSettings,
+ CameraConfig,
+ FrigateConfig,
+} from "@/types/frigateConfig";
import { ReviewSegment } from "@/types/review";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
@@ -28,10 +32,17 @@ import DraggableGridLayout from "./DraggableGridLayout";
import { IoClose } from "react-icons/io5";
import { LuLayoutDashboard } from "react-icons/lu";
import { cn } from "@/lib/utils";
-import { LivePlayerError } from "@/types/live";
+import {
+ AudioState,
+ LivePlayerError,
+ StatsState,
+ VolumeState,
+} from "@/types/live";
import { FaCompress, FaExpand } from "react-icons/fa";
import useCameraLiveMode from "@/hooks/use-camera-live-mode";
import { useResizeObserver } from "@/hooks/resize-observer";
+import LiveContextMenu from "@/components/menu/LiveContextMenu";
+import { useStreamingSettings } from "@/context/streaming-settings-provider";
type LiveDashboardViewProps = {
cameras: CameraConfig[];
@@ -129,8 +140,6 @@ export default function LiveDashboardView({
// camera live views
- const [autoLiveView] = usePersistence("autoLiveView", true);
-
const [{ height: containerHeight }] = useResizeObserver(containerRef);
const hasScrollbar = useMemo(() => {
@@ -184,8 +193,24 @@ export default function LiveDashboardView({
};
}, []);
- const { preferredLiveModes, setPreferredLiveModes, resetPreferredLiveMode } =
- useCameraLiveMode(cameras, windowVisible);
+ const {
+ preferredLiveModes,
+ setPreferredLiveModes,
+ resetPreferredLiveMode,
+ isRestreamedStates,
+ supportsAudioOutputStates,
+ } = useCameraLiveMode(cameras, windowVisible);
+
+ const [globalAutoLive] = usePersistence("autoLiveView", true);
+
+ const { allGroupsStreamingSettings, setAllGroupsStreamingSettings } =
+ useStreamingSettings();
+
+ const currentGroupStreamingSettings = useMemo(() => {
+ if (cameraGroup && cameraGroup != "default" && allGroupsStreamingSettings) {
+ return allGroupsStreamingSettings[cameraGroup];
+ }
+ }, [allGroupsStreamingSettings, cameraGroup]);
const cameraRef = useCallback(
(node: HTMLElement | null) => {
@@ -221,9 +246,106 @@ export default function LiveDashboardView({
[setPreferredLiveModes],
);
+ // audio states
+
+ const [audioStates, setAudioStates] = useState({});
+ const [volumeStates, setVolumeStates] = useState({});
+ const [statsStates, setStatsStates] = useState({});
+
+ const toggleStats = (cameraName: string): void => {
+ setStatsStates((prev) => ({
+ ...prev,
+ [cameraName]: !prev[cameraName],
+ }));
+ };
+
+ useEffect(() => {
+ if (!allGroupsStreamingSettings) {
+ return;
+ }
+
+ const initialAudioStates: AudioState = {};
+ const initialVolumeStates: VolumeState = {};
+
+ Object.entries(allGroupsStreamingSettings).forEach(([_, groupSettings]) => {
+ Object.entries(groupSettings).forEach(([camera, cameraSettings]) => {
+ initialAudioStates[camera] = cameraSettings.playAudio ?? false;
+ initialVolumeStates[camera] = cameraSettings.volume ?? 1;
+ });
+ });
+
+ setAudioStates(initialAudioStates);
+ setVolumeStates(initialVolumeStates);
+ }, [allGroupsStreamingSettings]);
+
+ const toggleAudio = (cameraName: string): void => {
+ setAudioStates((prev) => ({
+ ...prev,
+ [cameraName]: !prev[cameraName],
+ }));
+ };
+
+ const onSaveMuting = useCallback(
+ (playAudio: boolean) => {
+ if (
+ !cameraGroup ||
+ !allGroupsStreamingSettings ||
+ cameraGroup == "default"
+ ) {
+ return;
+ }
+
+ const existingGroupSettings =
+ allGroupsStreamingSettings[cameraGroup] || {};
+
+ const updatedSettings: AllGroupsStreamingSettings = {
+ ...Object.fromEntries(
+ Object.entries(allGroupsStreamingSettings || {}).filter(
+ ([key]) => key !== cameraGroup,
+ ),
+ ),
+ [cameraGroup]: {
+ ...existingGroupSettings,
+ ...Object.fromEntries(
+ Object.entries(existingGroupSettings).map(
+ ([cameraName, settings]) => [
+ cameraName,
+ {
+ ...settings,
+ playAudio: playAudio,
+ },
+ ],
+ ),
+ ),
+ },
+ };
+
+ setAllGroupsStreamingSettings?.(updatedSettings);
+ },
+ [cameraGroup, allGroupsStreamingSettings, setAllGroupsStreamingSettings],
+ );
+
+ const muteAll = (): void => {
+ const updatedStates: Record = {};
+ visibleCameras.forEach((cameraName) => {
+ updatedStates[cameraName] = false;
+ });
+ setAudioStates(updatedStates);
+ onSaveMuting(false);
+ };
+
+ const unmuteAll = (): void => {
+ const updatedStates: Record = {};
+ visibleCameras.forEach((cameraName) => {
+ updatedStates[cameraName] = true;
+ });
+ setAudioStates(updatedStates);
+ onSaveMuting(true);
+ };
+
return (
(null);
+ // recordings summary
+
+ const timezone = useTimezone(config);
+
+ const { data: recordingsSummary } = useSWR([
+ "recordings/summary",
+ {
+ timezone: timezone,
+ cameras: allCameras ?? null,
+ },
+ ]);
+
// controller state
const [mainCamera, setMainCamera] = useState(startCamera);
@@ -431,6 +444,7 @@ export function RecordingView({
;
+ timelineRef?: MutableRefObject;
mainCamera: string;
timelineType: TimelineType;
timeRange: TimeRange;
@@ -646,6 +662,7 @@ type TimelineProps = {
};
function Timeline({
contentRef,
+ timelineRef,
mainCamera,
timelineType,
timeRange,
@@ -657,12 +674,48 @@ function Timeline({
setScrubbing,
setExportRange,
}: TimelineProps) {
- const { data: motionData } = useSWR([
+ const internalTimelineRef = useRef(null);
+ const selectedTimelineRef = timelineRef || internalTimelineRef;
+
+ // timeline interaction
+
+ const [zoomSettings, setZoomSettings] = useState({
+ segmentDuration: 30,
+ timestampSpread: 15,
+ });
+
+ const possibleZoomLevels = useMemo(
+ () => [
+ { segmentDuration: 30, timestampSpread: 15 },
+ { segmentDuration: 15, timestampSpread: 5 },
+ { segmentDuration: 5, timestampSpread: 1 },
+ ],
+ [],
+ );
+
+ const handleZoomChange = useCallback(
+ (newZoomLevel: number) => {
+ setZoomSettings(possibleZoomLevels[newZoomLevel]);
+ },
+ [possibleZoomLevels],
+ );
+
+ const { isZooming, zoomDirection } = useTimelineZoom({
+ zoomSettings,
+ zoomLevels: possibleZoomLevels,
+ onZoomChange: handleZoomChange,
+ timelineRef: selectedTimelineRef,
+ timelineDuration: timeRange.after - timeRange.before,
+ });
+
+ // motion data
+
+ const { data: motionData, isLoading } = useSWR([
"review/activity/motion",
{
before: timeRange.before,
after: timeRange.after,
- scale: SEGMENT_DURATION / 2,
+ scale: Math.round(zoomSettings.segmentDuration / 2),
cameras: mainCamera,
},
]);
@@ -695,10 +748,11 @@ function Timeline({
{timelineType == "timeline" ? (
- motionData ? (
+ !isLoading ? (
setScrubbing(scrubbing)}
+ isZooming={isZooming}
+ zoomDirection={zoomDirection}
/>
) : (
+ Review
+
+
+
Review Classification
diff --git a/web/src/views/settings/MasksAndZonesView.tsx b/web/src/views/settings/MasksAndZonesView.tsx
index ab2646b5f..27e495766 100644
--- a/web/src/views/settings/MasksAndZonesView.tsx
+++ b/web/src/views/settings/MasksAndZonesView.tsx
@@ -37,6 +37,7 @@ import PolygonItem from "@/components/settings/PolygonItem";
import { Link } from "react-router-dom";
import { isDesktop } from "react-device-detect";
import { StatusBarMessagesContext } from "@/context/statusbar-provider";
+import { useSearchEffect } from "@/hooks/use-overlay-state";
type MasksAndZoneViewProps = {
selectedCamera: string;
@@ -61,6 +62,8 @@ export default function MasksAndZonesView({
);
const containerRef = useRef(null);
const [editPane, setEditPane] = useState(undefined);
+ const [activeLine, setActiveLine] = useState();
+ const [snapPoints, setSnapPoints] = useState(false);
const { addMessage } = useContext(StatusBarMessagesContext)!;
@@ -141,7 +144,7 @@ export default function MasksAndZonesView({
}
}, [scaledHeight, aspectRatio]);
- const handleNewPolygon = (type: PolygonType) => {
+ const handleNewPolygon = (type: PolygonType, coordinates?: number[][]) => {
if (!cameraConfig) {
return;
}
@@ -160,8 +163,9 @@ export default function MasksAndZonesView({
setEditingPolygons([
...(allPolygons || []),
{
- points: [],
- isFinished: false,
+ points: coordinates ?? [],
+ distances: [],
+ isFinished: coordinates ? true : false,
type,
typeIndex: 9999,
name: "",
@@ -238,6 +242,8 @@ export default function MasksAndZonesView({
scaledWidth,
scaledHeight,
),
+ distances:
+ zoneData.distances?.map((distance) => parseFloat(distance)) ?? [],
isFinished: true,
color: zoneData.color,
}),
@@ -267,6 +273,7 @@ export default function MasksAndZonesView({
scaledWidth,
scaledHeight,
),
+ distances: [],
isFinished: true,
color: [0, 0, 255],
}));
@@ -290,6 +297,7 @@ export default function MasksAndZonesView({
scaledWidth,
scaledHeight,
),
+ distances: [],
isFinished: true,
color: [128, 128, 128],
}));
@@ -316,6 +324,7 @@ export default function MasksAndZonesView({
scaledWidth,
scaledHeight,
),
+ distances: [],
isFinished: true,
color: [128, 128, 128],
};
@@ -366,6 +375,48 @@ export default function MasksAndZonesView({
}
}, [selectedCamera]);
+ useSearchEffect("object_mask", (coordinates: string) => {
+ if (!scaledWidth || !scaledHeight || isLoading) {
+ return false;
+ }
+ // convert box points string to points array
+ const points = coordinates.split(",").map((p) => parseFloat(p));
+
+ const [x1, y1, w, h] = points;
+
+ // bottom center
+ const centerX = x1 + w / 2;
+ const bottomY = y1 + h;
+
+ const centerXAbs = centerX * scaledWidth;
+ const bottomYAbs = bottomY * scaledHeight;
+
+ // padding and clamp
+ const minPadding = 0.1 * w * scaledWidth;
+ const maxPadding = 0.3 * w * scaledWidth;
+ const padding = Math.min(
+ Math.max(minPadding, 0.15 * w * scaledWidth),
+ maxPadding,
+ );
+
+ const top = Math.max(0, bottomYAbs - padding);
+ const bottom = Math.min(scaledHeight, bottomYAbs + padding);
+ const left = Math.max(0, centerXAbs - padding);
+ const right = Math.min(scaledWidth, centerXAbs + padding);
+
+ const paddedBox = [
+ [left, top],
+ [right, top],
+ [right, bottom],
+ [left, bottom],
+ ];
+
+ setEditPane("object_mask");
+ setActivePolygonIndex(undefined);
+ handleNewPolygon("object_mask", paddedBox);
+ return true;
+ });
+
useEffect(() => {
document.title = "Mask and Zone Editor - Frigate";
}, []);
@@ -391,6 +442,9 @@ export default function MasksAndZonesView({
setIsLoading={setIsLoading}
onCancel={handleCancel}
onSave={handleSave}
+ setActiveLine={setActiveLine}
+ snapPoints={snapPoints}
+ setSnapPoints={setSnapPoints}
/>
)}
{editPane == "motion_mask" && (
@@ -404,6 +458,8 @@ export default function MasksAndZonesView({
setIsLoading={setIsLoading}
onCancel={handleCancel}
onSave={handleSave}
+ snapPoints={snapPoints}
+ setSnapPoints={setSnapPoints}
/>
)}
{editPane == "object_mask" && (
@@ -417,6 +473,8 @@ export default function MasksAndZonesView({
setIsLoading={setIsLoading}
onCancel={handleCancel}
onSave={handleSave}
+ snapPoints={snapPoints}
+ setSnapPoints={setSnapPoints}
/>
)}
{editPane === undefined && (
@@ -653,6 +711,8 @@ export default function MasksAndZonesView({
activePolygonIndex={activePolygonIndex}
hoveredPolygonIndex={hoveredPolygonIndex}
selectedZoneMask={selectedZoneMask}
+ activeLine={activeLine}
+ snapPoints={true}
/>
) : (
>({
resolver: zodResolver(formSchema),
mode: "onChange",
defaultValues: {
- enabled: config?.notifications.enabled,
+ allEnabled: config?.notifications.enabled,
email: config?.notifications.email,
+ cameras: config?.notifications.enabled
+ ? []
+ : notificationCameras.map((c) => c.name),
},
});
+ const watchCameras = form.watch("cameras");
+
+ useEffect(() => {
+ if (watchCameras.length > 0) {
+ form.setValue("allEnabled", false);
+ }
+ }, [watchCameras, allCameras, form]);
+
const onCancel = useCallback(() => {
if (!config) {
return;
}
setUnsavedChanges(false);
+ setChangedValue(false);
form.reset({
- enabled: config.notifications.enabled,
+ allEnabled: config.notifications.enabled,
email: config.notifications.email || "",
+ cameras: config?.notifications.enabled
+ ? []
+ : notificationCameras.map((c) => c.name),
});
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -151,11 +224,27 @@ export default function NotificationView({
const saveToConfig = useCallback(
async (
- { enabled, email }: NotificationSettingsValueType, // values submitted via the form
+ { allEnabled, email, cameras }: NotificationSettingsValueType, // values submitted via the form
) => {
+ const allCameraNames = allCameras.map((cam) => cam.name);
+
+ const enabledCameraQueries = cameras
+ .map((cam) => `&cameras.${cam}.notifications.enabled=True`)
+ .join("");
+
+ const disabledCameraQueries = allCameraNames
+ .filter((cam) => !cameras.includes(cam))
+ .map(
+ (cam) =>
+ `&cameras.${cam}.notifications.enabled=${allEnabled ? "True" : "False"}`,
+ )
+ .join("");
+
+ const allCameraQueries = enabledCameraQueries + disabledCameraQueries;
+
axios
.put(
- `config/set?notifications.enabled=${enabled}¬ifications.email=${email}`,
+ `config/set?notifications.enabled=${allEnabled ? "True" : "False"}¬ifications.email=${email}${allCameraQueries}`,
{
requires_restart: 0,
},
@@ -182,7 +271,7 @@ export default function NotificationView({
setIsLoading(false);
});
},
- [updateConfig, setIsLoading],
+ [updateConfig, setIsLoading, allCameras],
);
function onSubmit(values: z.infer) {
@@ -195,149 +284,249 @@ export default function NotificationView({
- {ObjectList(memoizedObjects)}
+
{cameraConfig ? (
{line.section}
+
("config");
+ const [searchParams] = useSearchParams();
+
// available settings views
const settingsViews = useMemo(() => {
@@ -119,6 +123,23 @@ export default function Settings() {
}
}, [tabsRef, pageToggle]);
+ useSearchEffect("page", (page: string) => {
+ if (allSettingsViews.includes(page as SettingsType)) {
+ setPage(page as SettingsType);
+ }
+ // don't clear url params if we're creating a new object mask
+ return !searchParams.has("object_mask");
+ });
+
+ useSearchEffect("camera", (camera: string) => {
+ const cameraNames = cameras.map((c) => c.name);
+ if (cameraNames.includes(camera)) {
+ setSelectedCamera(camera);
+ }
+ // don't clear url params if we're creating a new object mask
+ return !searchParams.has("object_mask");
+ });
+
useEffect(() => {
document.title = "Settings - Frigate";
}, []);
diff --git a/web/src/pages/System.tsx b/web/src/pages/System.tsx
index 23d1b7e6a..491149be2 100644
--- a/web/src/pages/System.tsx
+++ b/web/src/pages/System.tsx
@@ -1,12 +1,12 @@
import useSWR from "swr";
import { FrigateStats } from "@/types/stats";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import TimeAgo from "@/components/dynamic/TimeAgo";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { isDesktop, isMobile } from "react-device-detect";
import GeneralMetrics from "@/views/system/GeneralMetrics";
import StorageMetrics from "@/views/system/StorageMetrics";
-import { LuActivity, LuHardDrive } from "react-icons/lu";
+import { LuActivity, LuHardDrive, LuSearchCode } from "react-icons/lu";
import { FaVideo } from "react-icons/fa";
import Logo from "@/components/Logo";
import useOptimisticState from "@/hooks/use-optimistic-state";
@@ -14,11 +14,28 @@ import CameraMetrics from "@/views/system/CameraMetrics";
import { useHashState } from "@/hooks/use-overlay-state";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { Toaster } from "@/components/ui/sonner";
+import { FrigateConfig } from "@/types/frigateConfig";
+import FeatureMetrics from "@/views/system/FeatureMetrics";
-const metrics = ["general", "storage", "cameras"] as const;
-type SystemMetric = (typeof metrics)[number];
+const allMetrics = ["general", "features", "storage", "cameras"] as const;
+type SystemMetric = (typeof allMetrics)[number];
function System() {
+ const { data: config } = useSWR("config", {
+ revalidateOnFocus: false,
+ });
+
+ const metrics = useMemo(() => {
+ const metrics = [...allMetrics];
+
+ if (!config?.semantic_search.enabled) {
+ const index = metrics.indexOf("features");
+ metrics.splice(index, 1);
+ }
+
+ return metrics;
+ }, [config]);
+
// stats page
const [page, setPage] = useHashState();
@@ -67,6 +84,7 @@ function System() {
aria-label={`Select ${item}`}
>
{item == "general" && [
+ { segmentDuration: 60, timestampSpread: 15 },
+ { segmentDuration: 30, timestampSpread: 5 },
+ { segmentDuration: 10, timestampSpread: 1 },
+ ],
+ [],
+ );
- function handleZoomIn() {
- const nextZoomLevel = Math.min(
- possibleZoomLevels.length - 1,
- zoomLevel + 1,
- );
- setZoomLevel(nextZoomLevel);
- setZoomSettings(possibleZoomLevels[nextZoomLevel]);
- }
+ const handleZoomChange = useCallback(
+ (newZoomLevel: number) => {
+ setZoomSettings(possibleZoomLevels[newZoomLevel]);
+ },
+ [possibleZoomLevels],
+ );
- function handleZoomOut() {
- const nextZoomLevel = Math.max(0, zoomLevel - 1);
- setZoomLevel(nextZoomLevel);
- setZoomSettings(possibleZoomLevels[nextZoomLevel]);
- }
+ const { zoomLevel, handleZoom, isZooming, zoomDirection } = useTimelineZoom({
+ zoomSettings,
+ zoomLevels: possibleZoomLevels,
+ onZoomChange: handleZoomChange,
+ timelineRef: reviewTimelineRef,
+ timelineDuration: 4 * 60 * 60,
+ });
+
+ const handleZoomIn = () => handleZoom(-1);
+ const handleZoomOut = () => handleZoom(1);
const [isDragging, setIsDragging] = useState(false);
@@ -330,6 +336,7 @@ function UIPlayground() {
;
inertia: number;
loitering_time: number;
+ speed_threshold: number;
objects: string[];
color: number[];
};
@@ -230,6 +248,24 @@ export type CameraGroupConfig = {
order: number;
};
+export type StreamType = "no-streaming" | "smart" | "continuous";
+
+export type CameraStreamingSettings = {
+ streamName: string;
+ streamType: StreamType;
+ compatibilityMode: boolean;
+ playAudio: boolean;
+ volume: number;
+};
+
+export type GroupStreamingSettings = {
+ [cameraName: string]: CameraStreamingSettings;
+};
+
+export type AllGroupsStreamingSettings = {
+ [groupName: string]: GroupStreamingSettings;
+};
+
export interface FrigateConfig {
audio: {
enabled: boolean;
@@ -288,6 +324,11 @@ export interface FrigateConfig {
environment_vars: Record;
+ face_recognition: {
+ enabled: boolean;
+ threshold: number;
+ };
+
ffmpeg: {
global_args: string[];
hwaccel_args: string;
@@ -321,12 +362,6 @@ export interface FrigateConfig {
camera_groups: { [groupName: string]: CameraGroupConfig };
- live: {
- height: number;
- quality: number;
- stream_name: string;
- };
-
logger: {
default: string;
logs: Record;
@@ -365,6 +400,7 @@ export interface FrigateConfig {
notifications: {
enabled: boolean;
email?: string;
+ enabled_in_config: boolean;
};
objects: {
diff --git a/web/src/types/graph.ts b/web/src/types/graph.ts
index 6a3eb7663..bfa9dd331 100644
--- a/web/src/types/graph.ts
+++ b/web/src/types/graph.ts
@@ -18,6 +18,11 @@ export const InferenceThreshold = {
error: 100,
} as Threshold;
+export const EmbeddingThreshold = {
+ warning: 500,
+ error: 1000,
+} as Threshold;
+
export const DetectorTempThreshold = {
warning: 72,
error: 80,
diff --git a/web/src/types/live.ts b/web/src/types/live.ts
index f6c8e463a..ccc6b5e74 100644
--- a/web/src/types/live.ts
+++ b/web/src/types/live.ts
@@ -32,3 +32,17 @@ export type LiveStreamMetadata = {
};
export type LivePlayerError = "stalled" | "startup" | "mse-decode";
+
+export type AudioState = Record;
+export type StatsState = Record;
+export type VolumeState = Record;
+
+export type PlayerStatsType = {
+ streamType: string;
+ bandwidth: number;
+ latency: number | undefined;
+ totalFrames: number;
+ droppedFrames: number | undefined;
+ decodedFrames: number | undefined;
+ droppedFrameRate: number | undefined;
+};
diff --git a/web/src/types/log.ts b/web/src/types/log.ts
index 407f67e6d..2e856f574 100644
--- a/web/src/types/log.ts
+++ b/web/src/types/log.ts
@@ -14,3 +14,7 @@ export type LogLine = {
export const logTypes = ["frigate", "go2rtc", "nginx"] as const;
export type LogType = (typeof logTypes)[number];
+
+export type LogSettingsType = {
+ disableStreaming: boolean;
+};
diff --git a/web/src/types/review.ts b/web/src/types/review.ts
index 73b8fed14..8d567bffc 100644
--- a/web/src/types/review.ts
+++ b/web/src/types/review.ts
@@ -50,6 +50,10 @@ export type ReviewSummary = {
[day: string]: ReviewSummaryDay;
};
+export type RecordingsSummary = {
+ [day: string]: boolean;
+};
+
export type MotionData = {
start_time: number;
motion?: number;
@@ -60,3 +64,12 @@ export type MotionData = {
export const REVIEW_PADDING = 4;
export type ReviewDetailPaneType = "overview" | "details";
+
+export type ConsolidatedSegmentData = {
+ startTime: number;
+ endTime: number;
+ severity: ReviewSeverity | "empty";
+ reviewed: boolean;
+};
+
+export type TimelineZoomDirection = "in" | "out" | null;
diff --git a/web/src/types/search.ts b/web/src/types/search.ts
index 1d8de1611..ca3c66be7 100644
--- a/web/src/types/search.ts
+++ b/web/src/types/search.ts
@@ -55,6 +55,8 @@ export type SearchResult = {
ratio: number;
type: "object" | "audio" | "manual";
description?: string;
+ average_estimated_speed: number;
+ velocity_angle: number;
};
};
@@ -68,6 +70,8 @@ export type SearchFilter = {
after?: number;
min_score?: number;
max_score?: number;
+ min_speed?: number;
+ max_speed?: number;
has_snapshot?: number;
has_clip?: number;
is_submitted?: number;
@@ -89,6 +93,8 @@ export type SearchQueryParams = {
after?: string;
min_score?: number;
max_score?: number;
+ min_speed?: number;
+ max_speed?: number;
search_type?: string;
limit?: number;
in_progress?: number;
diff --git a/web/src/types/stats.ts b/web/src/types/stats.ts
index 026cf0536..8e41f2e38 100644
--- a/web/src/types/stats.ts
+++ b/web/src/types/stats.ts
@@ -2,6 +2,7 @@ export interface FrigateStats {
cameras: { [camera_name: string]: CameraStats };
cpu_usages: { [pid: string]: CpuStats };
detectors: { [detectorKey: string]: DetectorStats };
+ embeddings?: EmbeddingsStats;
gpu_usages?: { [gpuKey: string]: GpuStats };
processes: { [processKey: string]: ExtraProcessStats };
service: ServiceStats;
@@ -34,6 +35,13 @@ export type DetectorStats = {
pid: number;
};
+export type EmbeddingsStats = {
+ image_embedding_speed: number;
+ face_embedding_speed: number;
+ plate_recognition_speed: number;
+ text_embedding_speed: number;
+};
+
export type ExtraProcessStats = {
pid: number;
};
diff --git a/web/src/utils/canvasUtil.ts b/web/src/utils/canvasUtil.ts
index 12bd6b167..a9d3d8b3b 100644
--- a/web/src/utils/canvasUtil.ts
+++ b/web/src/utils/canvasUtil.ts
@@ -1,4 +1,5 @@
import { Vector2d } from "konva/lib/types";
+import { Polygon } from "@/types/canvas";
export const getAveragePoint = (points: number[]): Vector2d => {
let totalX = 0;
@@ -100,3 +101,72 @@ export const masksAreIdentical = (arr1: string[], arr2: string[]): boolean => {
}
return true;
};
+
+export function snapPointToLines(
+ point: number[],
+ polygons: Polygon[],
+ threshold: number,
+): number[] | null {
+ for (const polygon of polygons) {
+ if (!polygon.isFinished) continue;
+
+ for (let i = 0; i < polygon.points.length; i++) {
+ const start = polygon.points[i];
+ const end = polygon.points[(i + 1) % polygon.points.length];
+
+ const snappedPoint = snapPointToLine(point, start, end, threshold);
+ if (snappedPoint) {
+ return snappedPoint;
+ }
+ }
+ }
+
+ return null;
+}
+
+function snapPointToLine(
+ point: number[],
+ lineStart: number[],
+ lineEnd: number[],
+ threshold: number,
+): number[] | null {
+ const [x, y] = point;
+ const [x1, y1] = lineStart;
+ const [x2, y2] = lineEnd;
+
+ const A = x - x1;
+ const B = y - y1;
+ const C = x2 - x1;
+ const D = y2 - y1;
+
+ const dot = A * C + B * D;
+ const lenSq = C * C + D * D;
+ let param = -1;
+
+ if (lenSq !== 0) {
+ param = dot / lenSq;
+ }
+
+ let xx, yy;
+
+ if (param < 0) {
+ xx = x1;
+ yy = y1;
+ } else if (param > 1) {
+ xx = x2;
+ yy = y2;
+ } else {
+ xx = x1 + param * C;
+ yy = y1 + param * D;
+ }
+
+ const dx = x - xx;
+ const dy = y - yy;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance <= threshold) {
+ return [xx, yy];
+ }
+
+ return null;
+}
diff --git a/web/src/utils/logUtil.ts b/web/src/utils/logUtil.ts
index 569d417be..ac6eaaec2 100644
--- a/web/src/utils/logUtil.ts
+++ b/web/src/utils/logUtil.ts
@@ -18,13 +18,29 @@ export function parseLogLines(logService: LogType, logs: string[]) {
if (!match) {
const infoIndex = line.indexOf("[INFO]");
+ const loggingIndex = line.indexOf("[LOGGING]");
+
+ if (loggingIndex != -1) {
+ return {
+ dateStamp: line.substring(0, 19),
+ severity: "info",
+ section: "logging",
+ content: line
+ .substring(loggingIndex + 9)
+ .trim()
+ .replace(/\u200b/g, "\n"),
+ };
+ }
if (infoIndex != -1) {
return {
dateStamp: line.substring(0, 19),
severity: "info",
section: "startup",
- content: line.substring(infoIndex + 6).trim(),
+ content: line
+ .substring(infoIndex + 6)
+ .trim()
+ .replace(/\u200b/g, "\n"),
};
}
@@ -32,7 +48,10 @@ export function parseLogLines(logService: LogType, logs: string[]) {
dateStamp: line.substring(0, 19),
severity: "unknown",
section: "unknown",
- content: line.substring(30).trim(),
+ content: line
+ .substring(30)
+ .trim()
+ .replace(/\u200b/g, "\n"),
};
}
@@ -54,7 +73,8 @@ export function parseLogLines(logService: LogType, logs: string[]) {
section: sectionMatch.toString(),
content: line
.substring(line.indexOf(":", match.index + match[0].length) + 2)
- .trim(),
+ .trim()
+ .replace(/\u200b/g, "\n"),
};
})
.filter((value) => value != null) as LogLine[];
@@ -86,6 +106,15 @@ export function parseLogLines(logService: LogType, logs: string[]) {
contentStart = line.indexOf(section) + section.length + 2;
}
+ if (line.includes("[LOGGING]")) {
+ return {
+ dateStamp: line.substring(0, 19),
+ severity: "info",
+ section: "logging",
+ content: line.substring(line.indexOf("[LOGGING]") + 9).trim(),
+ };
+ }
+
let severityCat: LogSeverity;
switch (severity?.at(0)?.toString().trim()) {
case "INF":
@@ -116,18 +145,68 @@ export function parseLogLines(logService: LogType, logs: string[]) {
} else if (logService == "nginx") {
return logs
.map((line) => {
- if (line.length == 0) {
- return null;
- }
+ if (line.trim().length === 0) return null;
- return {
- dateStamp: line.substring(0, 19),
- severity: "info",
- section: httpMethods.exec(line)?.at(0)?.toString() ?? "META",
- content: line.substring(line.indexOf(" ", 20)).trim(),
- };
+ // Match full timestamp including nanoseconds
+ const timestampRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d+/;
+ const timestampMatch = timestampRegex.exec(line);
+ const fullTimestamp = timestampMatch ? timestampMatch[0] : "";
+ // Remove nanoseconds from the final output
+ const dateStamp = fullTimestamp.split(".")[0];
+
+ if (line.includes("[LOGGING]")) {
+ return {
+ dateStamp,
+ severity: "info",
+ section: "logging",
+ content: line.slice(line.indexOf("[LOGGING]") + 9).trim(),
+ };
+ } else if (line.includes("[INFO]")) {
+ return {
+ dateStamp,
+ severity: "info",
+ section: "startup",
+ content: line.slice(fullTimestamp.length).trim(),
+ };
+ } else if (line.includes("[error]")) {
+ // Error log
+ const errorMatch = line.match(/(\[error\].*?,.*request: "[^"]*")/);
+ const content = errorMatch ? errorMatch[1] : line;
+ return {
+ dateStamp,
+ severity: "error",
+ section: "error",
+ content,
+ };
+ } else if (
+ line.includes("GET") ||
+ line.includes("POST") ||
+ line.includes("HTTP")
+ ) {
+ // HTTP request log
+ const httpMethodMatch = httpMethods.exec(line);
+ const section = httpMethodMatch ? httpMethodMatch[0] : "META";
+ const contentStart = line.indexOf('"', fullTimestamp.length);
+ const content =
+ contentStart !== -1 ? line.slice(contentStart).trim() : line;
+
+ return {
+ dateStamp,
+ severity: "info",
+ section,
+ content,
+ };
+ } else {
+ // Fallback: unknown format
+ return {
+ dateStamp,
+ severity: "unknown",
+ section: "unknown",
+ content: line.slice(fullTimestamp.length).trim(),
+ };
+ }
})
- .filter((value) => value != null) as LogLine[];
+ .filter((value) => value !== null) as LogLine[];
}
return [];
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index d7997bf62..e8e864e32 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -12,6 +12,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
import { Preview } from "@/types/preview";
import {
MotionData,
+ RecordingsSummary,
REVIEW_PADDING,
ReviewFilter,
ReviewSegment,
@@ -53,11 +54,13 @@ import { FilterList, LAST_24_HOURS_KEY } from "@/types/filter";
import { GiSoundWaves } from "react-icons/gi";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import ReviewDetailDialog from "@/components/overlay/detail/ReviewDetailDialog";
+import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
type EventViewProps = {
reviewItems?: SegmentedReviewData;
currentReviewItems: ReviewSegment[] | null;
reviewSummary?: ReviewSummary;
+ recordingsSummary?: RecordingsSummary;
relevantPreviews?: Preview[];
timeRange: TimeRange;
filter?: ReviewFilter;
@@ -76,6 +79,7 @@ export default function EventView({
reviewItems,
currentReviewItems,
reviewSummary,
+ recordingsSummary,
relevantPreviews,
timeRange,
filter,
@@ -358,6 +362,7 @@ export default function EventView({
}
currentSeverity={severityToggle}
reviewSummary={reviewSummary}
+ recordingsSummary={recordingsSummary}
filter={filter}
motionOnly={motionOnly}
filterList={reviewFilterList}
@@ -461,8 +466,6 @@ function DetectionReview({
}: DetectionReviewProps) {
const reviewTimelineRef = useRef(null);
- const segmentDuration = 60;
-
// detail
const [reviewDetail, setReviewDetail] = useState();
@@ -492,9 +495,38 @@ function DetectionReview({
[timeRange],
);
+ const [zoomSettings, setZoomSettings] = useState({
+ segmentDuration: 60,
+ timestampSpread: 15,
+ });
+
+ const possibleZoomLevels = useMemo(
+ () => [
+ { segmentDuration: 60, timestampSpread: 15 },
+ { segmentDuration: 30, timestampSpread: 5 },
+ { segmentDuration: 10, timestampSpread: 1 },
+ ],
+ [],
+ );
+
+ const handleZoomChange = useCallback(
+ (newZoomLevel: number) => {
+ setZoomSettings(possibleZoomLevels[newZoomLevel]);
+ },
+ [possibleZoomLevels],
+ );
+
+ const { isZooming, zoomDirection } = useTimelineZoom({
+ zoomSettings,
+ zoomLevels: possibleZoomLevels,
+ onZoomChange: handleZoomChange,
+ timelineRef: reviewTimelineRef,
+ timelineDuration,
+ });
+
const { alignStartDateToTimeline, getVisibleTimelineDuration } =
useTimelineUtils({
- segmentDuration,
+ segmentDuration: zoomSettings.segmentDuration,
timelineDuration,
timelineRef: reviewTimelineRef,
});
@@ -692,7 +724,7 @@ function DetectionReview({
data-start={value.start_time}
data-segment-start={
alignStartDateToTimeline(value.start_time) -
- segmentDuration
+ zoomSettings.segmentDuration
}
className="review-item relative rounded-lg"
>
@@ -749,13 +781,13 @@ function DetectionReview({
{line.content}
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 92d992f8a..fbf31a00a 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -37,6 +37,8 @@ import AuthenticationView from "@/views/settings/AuthenticationView";
import NotificationView from "@/views/settings/NotificationsSettingsView";
import SearchSettingsView from "@/views/settings/SearchSettingsView";
import UiSettingsView from "@/views/settings/UiSettingsView";
+import { useSearchEffect } from "@/hooks/use-overlay-state";
+import { useSearchParams } from "react-router-dom";
const allSettingsViews = [
"UI settings",
@@ -57,6 +59,8 @@ export default function Settings() {
const { data: config } = useSWR{item}
}
@@ -96,6 +114,12 @@ function System() {
setLastUpdated={setLastUpdated}
/>
)}
+ {page == "features" && (
+ -
{colors.map((color, index) => (
diff --git a/web/src/types/canvas.ts b/web/src/types/canvas.ts
index f623e8b48..9c1748ce0 100644
--- a/web/src/types/canvas.ts
+++ b/web/src/types/canvas.ts
@@ -8,6 +8,7 @@ export type Polygon = {
objects: string[];
points: number[][];
pointsOrder?: number[];
+ distances: number[];
isFinished: boolean;
color: number[];
};
@@ -18,6 +19,12 @@ export type ZoneFormValuesType = {
loitering_time: number;
isFinished: boolean;
objects: string[];
+ speedEstimation: boolean;
+ lineA: number;
+ lineB: number;
+ lineC: number;
+ lineD: number;
+ speed_threshold: number;
};
export type ObjectMaskFormValuesType = {
diff --git a/web/src/types/frigateConfig.ts b/web/src/types/frigateConfig.ts
index 9f5b93717..263883976 100644
--- a/web/src/types/frigateConfig.ts
+++ b/web/src/types/frigateConfig.ts
@@ -8,6 +8,7 @@ export interface UiConfig {
strftime_fmt?: string;
dashboard: boolean;
order: number;
+ unit_system?: "metric" | "imperial";
}
export interface BirdseyeConfig {
@@ -87,7 +88,7 @@ export interface CameraConfig {
live: {
height: number;
quality: number;
- stream_name: string;
+ streams: { [key: string]: string };
};
motion: {
contour_area: number;
@@ -110,6 +111,11 @@ export interface CameraConfig {
timestamp: boolean;
};
name: string;
+ notifications: {
+ enabled: boolean;
+ email?: string;
+ enabled_in_config: boolean;
+ };
objects: {
filters: {
[objectName: string]: {
@@ -173,12 +179,22 @@ export interface CameraConfig {
};
review: {
alerts: {
+ enabled: boolean;
required_zones: string[];
labels: string[];
+ retain: {
+ days: number;
+ mode: string;
+ };
};
detections: {
+ enabled: boolean;
required_zones: string[];
labels: string[];
+ retain: {
+ days: number;
+ mode: string;
+ };
};
};
rtmp: {
@@ -215,9 +231,11 @@ export interface CameraConfig {
zones: {
[zoneName: string]: {
coordinates: string;
+ distances: string[];
filters: Record
-
{
- !isEditMode && onSelectCamera(camera.name);
- }}
- onError={(e) => {
- setPreferredLiveModes((prevModes) => {
- const newModes = { ...prevModes };
- if (e === "mse-decode") {
- newModes[camera.name] = "webrtc";
- } else {
- newModes[camera.name] = "jsmpeg";
- }
- return newModes;
- });
- }}
- onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
+ isRestreamed={isRestreamedStates[camera.name]}
+ supportsAudio={
+ supportsAudioOutputStates[streamName].supportsAudio
+ }
+ audioState={audioStates[camera.name]}
+ toggleAudio={() => toggleAudio(camera.name)}
+ statsState={statsStates[camera.name]}
+ toggleStats={() => toggleStats(camera.name)}
+ volumeState={volumeStates[camera.name]}
+ setVolumeState={(value) =>
+ setVolumeStates({
+ [camera.name]: value,
+ })
+ }
+ muteAll={muteAll}
+ unmuteAll={unmuteAll}
+ resetPreferredLiveMode={() =>
+ resetPreferredLiveMode(camera.name)
+ }
>
+ {
+ !isEditMode && onSelectCamera(camera.name);
+ }}
+ onError={(e) => {
+ setPreferredLiveModes((prevModes) => {
+ const newModes = { ...prevModes };
+ if (e === "mse-decode") {
+ newModes[camera.name] = "webrtc";
+ } else {
+ newModes[camera.name] = "jsmpeg";
+ }
+ return newModes;
+ });
+ }}
+ onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
+ playAudio={audioStates[camera.name]}
+ volume={volumeStates[camera.name]}
+ />
{isEditMode && showCircles && ;
onMouseUp?: React.MouseEventHandler;
onTouchEnd?: React.TouchEventHandler;
children?: React.ReactNode;
- cameraRef: (node: HTMLElement | null) => void;
- windowVisible: boolean;
- cameraConfig: CameraConfig;
- preferredLiveMode: LivePlayerMode;
- onClick: () => void;
- onError: (e: LivePlayerError) => void;
- onResetLiveMode: () => void;
+ camera: string;
+ streamName: string;
+ cameraGroup: string;
+ preferredLiveMode: string;
+ isRestreamed: boolean;
+ supportsAudio: boolean;
+ audioState: boolean;
+ toggleAudio: () => void;
+ statsState: boolean;
+ toggleStats: () => void;
+ volumeState?: number;
+ setVolumeState: (volumeState: number) => void;
+ muteAll: () => void;
+ unmuteAll: () => void;
+ resetPreferredLiveMode: () => void;
};
-const LivePlayerGridItem = React.forwardRef<
+const GridLiveContextMenu = React.forwardRef<
HTMLDivElement,
- LivePlayerGridItemProps
+ GridLiveContextMenuProps
>(
(
{
- style,
className,
+ style,
onMouseDown,
onMouseUp,
onTouchEnd,
children,
- cameraRef,
- windowVisible,
- cameraConfig,
+ camera,
+ streamName,
+ cameraGroup,
preferredLiveMode,
- onClick,
- onError,
- onResetLiveMode,
+ isRestreamed,
+ supportsAudio,
+ audioState,
+ toggleAudio,
+ statsState,
+ toggleStats,
+ volumeState,
+ setVolumeState,
+ muteAll,
+ unmuteAll,
+ resetPreferredLiveMode,
...props
},
ref,
@@ -644,18 +832,26 @@ const LivePlayerGridItem = React.forwardRef<
onTouchEnd={onTouchEnd}
{...props}
>
- }
- />
- {children}
+ isRestreamed={isRestreamed}
+ supportsAudio={supportsAudio}
+ audioState={audioState}
+ toggleAudio={toggleAudio}
+ statsState={statsState}
+ toggleStats={toggleStats}
+ volumeState={volumeState}
+ setVolumeState={setVolumeState}
+ muteAll={muteAll}
+ unmuteAll={unmuteAll}
+ resetPreferredLiveMode={resetPreferredLiveMode}
+ >
+ {children}
+
);
},
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index af3ed0cee..ccf06de7b 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -17,6 +17,11 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
import {
Tooltip,
TooltipContent,
@@ -62,29 +67,52 @@ import {
FaMicrophoneSlash,
} from "react-icons/fa";
import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
-import { TbViewfinder, TbViewfinderOff } from "react-icons/tb";
-import { IoMdArrowRoundBack } from "react-icons/io";
import {
+ TbRecordMail,
+ TbRecordMailOff,
+ TbViewfinder,
+ TbViewfinderOff,
+} from "react-icons/tb";
+import { IoIosWarning, IoMdArrowRoundBack } from "react-icons/io";
+import {
+ LuCheck,
LuEar,
LuEarOff,
+ LuExternalLink,
LuHistory,
+ LuInfo,
LuPictureInPicture,
LuVideo,
LuVideoOff,
+ LuX,
} from "react-icons/lu";
import {
MdNoPhotography,
+ MdOutlineRestartAlt,
MdPersonOff,
MdPersonSearch,
MdPhotoCamera,
MdZoomIn,
MdZoomOut,
} from "react-icons/md";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import useSWR from "swr";
import { cn } from "@/lib/utils";
import { useSessionPersistence } from "@/hooks/use-session-persistence";
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectTrigger,
+} from "@/components/ui/select";
+import { usePersistence } from "@/hooks/use-persistence";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import axios from "axios";
+import { toast } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
type LiveCameraViewProps = {
config?: FrigateConfig;
@@ -109,17 +137,20 @@ export default function LiveCameraView({
// supported features
+ const [streamName, setStreamName] = usePersistence(
+ `${camera.name}-stream`,
+ Object.values(camera.live.streams)[0],
+ );
+
const isRestreamed = useMemo(
() =>
config &&
- Object.keys(config.go2rtc.streams || {}).includes(
- camera.live.stream_name,
- ),
- [camera, config],
+ Object.keys(config.go2rtc.streams || {}).includes(streamName ?? ""),
+ [config, streamName],
);
const { data: cameraMetadata } = useSWR(
- isRestreamed ? `go2rtc/streams/${camera.live.stream_name}` : null,
+ isRestreamed ? `go2rtc/streams/${streamName}` : null,
{
revalidateOnFocus: false,
},
@@ -209,6 +240,13 @@ export default function LiveCameraView({
const [pip, setPip] = useState(false);
const [lowBandwidth, setLowBandwidth] = useState(false);
+ const [playInBackground, setPlayInBackground] = usePersistence(
+ `${camera.name}-background-play`,
+ false,
+ );
+
+ const [showStats, setShowStats] = useState(false);
+
const [fullResolution, setFullResolution] = useState({
width: 0,
height: 0,
@@ -337,6 +375,7 @@ export default function LiveCameraView({
return (
+
@@ -499,9 +549,13 @@ export default function LiveCameraView({
showStillWithoutActivity={false}
cameraConfig={camera}
playAudio={audio}
+ playInBackground={playInBackground ?? false}
+ showStats={showStats}
micEnabled={mic}
iOSCompatFullScreen={isIOS}
preferredLiveMode={preferredLiveMode}
+ useWebGL={true}
+ streamName={streamName ?? ""}
pip={pip}
containerRef={containerRef}
setFullResolution={setFullResolution}
@@ -816,12 +870,49 @@ function PtzControlPanel({
);
}
+function OnDemandRetentionMessage({ camera }: { camera: CameraConfig }) {
+ const rankMap = { all: 0, motion: 1, active_objects: 2 };
+ const getValidMode = (retain?: { mode?: string }): keyof typeof rankMap => {
+ const mode = retain?.mode;
+ return mode && mode in rankMap ? (mode as keyof typeof rankMap) : "all";
+ };
+
+ const recordRetainMode = getValidMode(camera.record.retain);
+ const alertsRetainMode = getValidMode(camera.review.alerts.retain);
+
+ const effectiveRetainMode =
+ rankMap[alertsRetainMode] < rankMap[recordRetainMode]
+ ? recordRetainMode
+ : alertsRetainMode;
+
+ const source = effectiveRetainMode === recordRetainMode ? "camera" : "alerts";
+
+ return effectiveRetainMode !== "all" ? (
+
+ ({});
+ const [volumeStates, setVolumeStates] = useState({});
+ const [statsStates, setStatsStates] = useState(() => {
+ const initialStates: StatsState = {};
+ cameras.forEach((camera) => {
+ initialStates[camera.name] = false;
+ });
+ return initialStates;
+ });
+
+ const toggleStats = (cameraName: string): void => {
+ setStatsStates((prev) => ({
+ ...prev,
+ [cameraName]: !prev[cameraName],
+ }));
+ };
+
+ useEffect(() => {
+ if (!allGroupsStreamingSettings) {
+ return;
+ }
+
+ const initialAudioStates: AudioState = {};
+ const initialVolumeStates: VolumeState = {};
+
+ Object.entries(allGroupsStreamingSettings).forEach(([_, groupSettings]) => {
+ Object.entries(groupSettings).forEach(([camera, cameraSettings]) => {
+ initialAudioStates[camera] = cameraSettings.playAudio ?? false;
+ initialVolumeStates[camera] = cameraSettings.volume ?? 1;
+ });
+ });
+
+ setAudioStates(initialAudioStates);
+ setVolumeStates(initialVolumeStates);
+ }, [allGroupsStreamingSettings]);
+
+ const toggleAudio = (cameraName: string) => {
+ setAudioStates((prev) => ({
+ ...prev,
+ [cameraName]: !prev[cameraName],
+ }));
+ };
+
+ const onSaveMuting = useCallback(
+ (playAudio: boolean) => {
+ if (!cameraGroup || !allGroupsStreamingSettings) {
+ return;
+ }
+
+ const existingGroupSettings =
+ allGroupsStreamingSettings[cameraGroup] || {};
+
+ const updatedSettings: AllGroupsStreamingSettings = {
+ ...Object.fromEntries(
+ Object.entries(allGroupsStreamingSettings || {}).filter(
+ ([key]) => key !== cameraGroup,
+ ),
+ ),
+ [cameraGroup]: {
+ ...existingGroupSettings,
+ ...Object.fromEntries(
+ Object.entries(existingGroupSettings).map(
+ ([cameraName, settings]) => [
+ cameraName,
+ {
+ ...settings,
+ playAudio: playAudio,
+ },
+ ],
+ ),
+ ),
+ },
+ };
+
+ setAllGroupsStreamingSettings?.(updatedSettings);
+ },
+ [cameraGroup, allGroupsStreamingSettings, setAllGroupsStreamingSettings],
+ );
+
+ const muteAll = () => {
+ const updatedStates: AudioState = {};
+ cameras.forEach((camera) => {
+ updatedStates[camera.name] = false;
+ });
+ setAudioStates(updatedStates);
+ onSaveMuting(false);
+ };
+
+ const unmuteAll = () => {
+ const updatedStates: AudioState = {};
+ cameras.forEach((camera) => {
+ updatedStates[camera.name] = true;
+ });
+ setAudioStates(updatedStates);
+ onSaveMuting(true);
+ };
+
return (
<>
) : (
{loading ? (
@@ -780,7 +814,7 @@ function DetectionReview({
reviewTimelineRef={reviewTimelineRef}
timelineStart={timeRange.before}
timelineEnd={timeRange.after}
- segmentDuration={segmentDuration}
+ segmentDuration={zoomSettings.segmentDuration}
events={reviewItems?.all ?? []}
severityType={severity}
/>
@@ -1095,7 +1129,6 @@ function MotionReview({
setHandlebarTime={setCurrentTime}
events={reviewItems?.all ?? []}
motion_events={motionData ?? []}
- severityType="significant_motion"
contentRef={contentRef}
onHandlebarDraggingChange={(scrubbing) => {
if (playing && scrubbing) {
@@ -1105,6 +1138,8 @@ function MotionReview({
setScrubbing(scrubbing);
}}
dense={isMobileOnly}
+ isZooming={false}
+ zoomDirection={null}
/>
) : (
+ Your {source} recording retention configuration is set to{" "}
+
+ ) : null;
+}
+
type FrigateCameraFeaturesProps = {
- camera: string;
+ camera: CameraConfig;
recordingEnabled: boolean;
audioDetectEnabled: boolean;
autotrackingEnabled: boolean;
fullscreen: boolean;
+ streamName: string;
+ setStreamName?: (value: string | undefined) => void;
+ preferredLiveMode: string;
+ playInBackground: boolean;
+ setPlayInBackground: (value: boolean | undefined) => void;
+ showStats: boolean;
+ setShowStats: (value: boolean) => void;
+ isRestreamed: boolean;
+ setLowBandwidth: React.Dispatchmode: {effectiveRetainMode}, so this on-demand recording will
+ only keep segments with {effectiveRetainMode.replaceAll("_", " ")}.
+
+
,
+ {
+ position: "top-center",
+ duration: 10000,
+ },
+ );
+ setActiveToastId(toastId);
+ }
+ } catch (error) {
+ toast.error("Failed to start manual on-demand recording.", {
+ position: "top-center",
+ });
+ }
+ }, [camera]);
+
+ const endEvent = useCallback(() => {
+ if (activeToastId) {
+ toast.dismiss(activeToastId);
+ }
+ try {
+ if (recordingEventIdRef.current) {
+ axios.put(`events/${recordingEventIdRef.current}/end`, {
+ end_time: Math.ceil(Date.now() / 1000),
+ });
+ recordingEventIdRef.current = null;
+ setIsRecording(false);
+ toast.success("Ended manual on-demand recording.", {
+ position: "top-center",
+ });
+ }
+ } catch (error) {
+ toast.error("Failed to end manual on-demand recording.", {
+ position: "top-center",
+ });
+ }
+ }, [activeToastId]);
+
+ const handleEventButtonClick = useCallback(() => {
+ if (isRecording) {
+ endEvent();
+ } else {
+ createEvent();
+ }
+ }, [createEvent, endEvent, isRecording]);
+
+ useEffect(() => {
+ // ensure manual event is stopped when component unmounts
+ return () => {
+ if (recordingEventIdRef.current) {
+ endEvent();
+ }
+ };
+ // mount/unmount only
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ // navigate for debug view
+
+ const navigate = useNavigate();
// desktop shows icons part of row
if (isDesktop || isTablet) {
@@ -888,6 +1089,264 @@ function FrigateCameraFeatures({
}
/>
)}
+
+ Started manual on-demand recording.
+
+ {!camera.record.enabled || camera.record.retain.days == 0 ? (
+
+ Since recording is disabled or restricted in the config for this
+ camera, only a snapshot will be saved.
+
+ ) : (
+
+
+
+ {!isRestreamed && (
+
+
+
+
+ )}
+ {isRestreamed &&
+ Object.values(camera.live.streams).length > 0 && (
+
+
+
+
+
+ Set up go2rtc for additional live view options and audio
+ for this camera.
+
+
+
+ Restreaming is not enabled for this camera.
+
+
+
+
+ Read the documentation{" "}
+
+
+
+
+
+ {preferredLiveMode != "jsmpeg" && isRestreamed && (
+
+ )}
+ {isRestreamed && (
+
+ {supportsAudioOutput ? (
+ <>
+
+
+
+
+ Audio must be output from your camera and
+ configured in go2rtc for this stream.
+
+
+
+ )}
+
+ )}
+ {preferredLiveMode != "jsmpeg" &&
+ isRestreamed &&
+ supportsAudioOutput && (
+ Audio is available for this stream
+
+ ) : (
+ <>
+ Audio is unavailable for this stream
+
+
+
+
+ Read the documentation{" "}
+
+
+ {supports2WayTalk ? (
+ <>
+
+
+
+
+ Your device must suppport the feature and
+ WebRTC must be configured for two-way talk.
+
+
+
+ )}
+
+ )}
+
+ {preferredLiveMode == "jsmpeg" && isRestreamed && (
+
+ Two-way talk is available for this stream
+
+
+ ) : (
+ <>
+
+ Two-way talk is unavailable for this stream
+
+
+
+
+
+ Read the documentation{" "}
+
+
+
+ )}
+
+
+
+ + Live view is in low-bandwidth mode due to buffering + or stream errors. +
+
+
+ )}
+
+
+
+ setPlayInBackground(checked)
+ }
+ />
+
+ + Enable this option to continue streaming when the player is + hidden. +
+
+
+
+
+ setShowStats(checked)}
+ />
+
+ + Enable this option to show stream statistics as an overlay on + the camera feed. +
+
+
+
+ Debug View
+
+ navigate(`/settings?page=debug&camera=${camera.name}`)
+ }
+ className="ml-2 inline-flex size-5 cursor-pointer"
+ />
+
+
+ {!isRestreamed && (
+
+
+
+ )}
+ {isRestreamed && Object.values(camera.live.streams).length > 0 && (
+
+
+
+
+
+ Set up go2rtc for additional live view options and audio for
+ this camera.
+
+
+
+ Restreaming is not enabled for this camera.
+
+
+
+
+ Read the documentation{" "}
+
+
+
+ )}
+ Stream
+
+ {preferredLiveMode != "jsmpeg" && isRestreamed && (
+
+ {supportsAudioOutput ? (
+ <>
+
+
+
+
+ Audio must be output from your camera and configured
+ in go2rtc for this stream.
+
+
+
+ )}
+
+ )}
+ {preferredLiveMode != "jsmpeg" &&
+ isRestreamed &&
+ supportsAudioOutput && (
+ Audio is available for this stream
+
+ ) : (
+ <>
+ Audio is unavailable for this stream
+
+
+
+
+ Read the documentation{" "}
+
+
+ {supports2WayTalk ? (
+ <>
+
+
+
+
+ Your device must suppport the feature and WebRTC
+ must be configured for two-way talk.
+
+
+
+ )}
+
+ )}
+ {preferredLiveMode == "jsmpeg" && isRestreamed && (
+ Two-way talk is available for this stream
+
+ ) : (
+ <>
+ Two-way talk is unavailable for this stream
+
+
+
+
+ Read the documentation{" "}
+
+
+
+ )}
+
+
+
+ + Live view is in low-bandwidth mode due to buffering or + stream errors. +
+
+
+ {isRestreamed && (
+ <>
+
+ On-Demand Recording
+
+
+ + Start a manual event based on this camera's recording retention + settings. +
+
+ {
+ setPlayInBackground(checked);
+ }}
+ />
+
+ + Enable this option to continue streaming when the player is + hidden. +
+
+ {
+ setShowStats(checked);
+ }}
+ />
+
+
+ )}
+ + Enable this option to show stream statistics as an overlay on + the camera feed. +
+
+
+
+ Debug View
+
+ navigate(`/settings?page=debug&camera=${camera.name}`)
+ }
+ className="ml-2 inline-flex size-5 cursor-pointer"
+ />
+
+
{isMobile && (
@@ -345,21 +467,69 @@ export default function LiveDashboardView({
} else {
grow = "aspect-video";
}
+ const streamName =
+ currentGroupStreamingSettings?.[camera.name]?.streamName ||
+ Object.values(camera.live.streams)?.[0];
+ const autoLive =
+ currentGroupStreamingSettings?.[camera.name]?.streamType !==
+ "no-streaming";
+ const showStillWithoutActivity =
+ currentGroupStreamingSettings?.[camera.name]?.streamType !==
+ "continuous";
+ const useWebGL =
+ currentGroupStreamingSettings?.[camera.name]
+ ?.compatibilityMode || false;
return (
- onSelectCamera(camera.name)}
- onError={(e) => handleError(camera.name, e)}
- onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
- />
+ isRestreamed={isRestreamedStates[camera.name]}
+ supportsAudio={
+ supportsAudioOutputStates[streamName]?.supportsAudio ??
+ false
+ }
+ audioState={audioStates[camera.name]}
+ toggleAudio={() => toggleAudio(camera.name)}
+ statsState={statsStates[camera.name]}
+ toggleStats={() => toggleStats(camera.name)}
+ volumeState={volumeStates[camera.name] ?? 1}
+ setVolumeState={(value) =>
+ setVolumeStates({
+ [camera.name]: value,
+ })
+ }
+ muteAll={muteAll}
+ unmuteAll={unmuteAll}
+ resetPreferredLiveMode={() =>
+ resetPreferredLiveMode(camera.name)
+ }
+ >
+ onSelectCamera(camera.name)}
+ onError={(e) => handleError(camera.name, e)}
+ onResetLiveMode={() => resetPreferredLiveMode(camera.name)}
+ playAudio={audioStates[camera.name] ?? false}
+ volume={volumeStates[camera.name]}
+ />
+
);
})}
diff --git a/web/src/views/recording/RecordingView.tsx b/web/src/views/recording/RecordingView.tsx
index 374201f7c..c5e528736 100644
--- a/web/src/views/recording/RecordingView.tsx
+++ b/web/src/views/recording/RecordingView.tsx
@@ -15,6 +15,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
import { Preview } from "@/types/preview";
import {
MotionData,
+ RecordingsSummary,
REVIEW_PADDING,
ReviewFilter,
ReviewSegment,
@@ -46,8 +47,8 @@ import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
import { useResizeObserver } from "@/hooks/resize-observer";
import { cn } from "@/lib/utils";
import { useFullscreen } from "@/hooks/use-fullscreen";
-
-const SEGMENT_DURATION = 30;
+import { useTimezone } from "@/hooks/use-date-utils";
+import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
type RecordingViewProps = {
startCamera: string;
@@ -75,6 +76,18 @@ export function RecordingView({
const navigate = useNavigate();
const contentRef = useRef
+
+
+
+ {
+ sendAlerts(isChecked ? "ON" : "OFF");
+ }}
+ />
+
+
+
+
+
+
+
+ {
+ sendDetections(isChecked ? "ON" : "OFF");
+ }}
+ />
+
+
+
+
+
+ Enable/disable alerts and detections for this camera. When
+ disabled, no new review items will be generated.
+
+
-
- Notification Settings
-
+
+
+ {isDesktop && (
+ <>
+
+
+ Notification Settings
+
-
+
{info}
@@ -256,18 +267,74 @@ export default function ObjectSettingsView({
))}
- (false);
+
+ useEffect(() => {
+ if (notificationSuspendUntil) {
+ setIsSuspended(
+ notificationSuspendUntil !== "0" || notificationState === "OFF",
+ );
+ }
+ }, [notificationSuspendUntil, notificationState]);
+
+ const handleSuspend = (duration: string) => {
+ setIsSuspended(true);
+ if (duration == "off") {
+ sendNotification("OFF");
+ } else {
+ sendNotificationSuspend(parseInt(duration));
+ }
+ };
+
+ const handleCancelSuspension = () => {
+ sendNotification("ON");
+ sendNotificationSuspend(0);
+ };
+
+ const formatSuspendedUntil = (timestamp: string) => {
+ if (timestamp === "0") return "Frigate restarts.";
+
+ return formatUnixTimestampToDateTime(parseInt(timestamp), {
+ time_style: "medium",
+ date_style: "medium",
+ timezone: config?.ui.timezone,
+ strftime_fmt: `%b %d, ${config?.ui.time_format == "24hour" ? "%H:%M" : "%I:%M %p"}`,
+ });
+ };
+
+ return (
+ ("config");
+ const containerRef = useRef(null);
+
const DEBUG_OPTIONS = [
{
param: "bbox",
@@ -130,6 +135,12 @@ export default function ObjectSettingsView({
[options, setOptions],
);
+ const [debugDraw, setDebugDraw] = useState(false);
+
+ useEffect(() => {
+ setDebugDraw(false);
+ }, [selectedCamera]);
+
const cameraConfig = useMemo(() => {
if (config && selectedCamera) {
return config.cameras[selectedCamera];
@@ -234,7 +245,7 @@ export default function ObjectSettingsView({
Info
-
-
-
-
+ - Frigate can natively send push notifications to your device when - it is running in the browser or installed as a PWA. -
-
-
- Read the Documentation{" "}
-
-
+
+
+
+
+
+ Frigate can natively send push notifications to your device + when it is running in the browser or installed as a PWA. +
+
+
+ Read the Documentation{" "}
+
+
+
@@ -345,3 +534,110 @@ export default function NotificationView({
);
}
+
+type CameraNotificationSwitchProps = {
+ config?: FrigateConfig;
+ camera: string;
+};
+
+export function CameraNotificationSwitch({
+ config,
+ camera,
+}: CameraNotificationSwitchProps) {
+ const { payload: notificationState, send: sendNotification } =
+ useNotifications(camera);
+ const { payload: notificationSuspendUntil, send: sendNotificationSuspend } =
+ useNotificationSuspend(camera);
+ const [isSuspended, setIsSuspended] = useState
+
+
+ Device-Specific Settings
+
+
+
+ );
+}
diff --git a/web/src/views/settings/ObjectSettingsView.tsx b/web/src/views/settings/ObjectSettingsView.tsx
index 7b8a08d2e..ea1083ec1 100644
--- a/web/src/views/settings/ObjectSettingsView.tsx
+++ b/web/src/views/settings/ObjectSettingsView.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import ActivityIndicator from "@/components/indicators/activity-indicator";
import AutoUpdatingCameraImage from "@/components/camera/AutoUpdatingCameraImage";
import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
@@ -23,6 +23,9 @@ import { getIconForLabel } from "@/utils/iconUtil";
import { capitalizeFirstLetter } from "@/utils/stringUtil";
import { LuExternalLink, LuInfo } from "react-icons/lu";
import { Link } from "react-router-dom";
+import DebugDrawingLayer from "@/components/overlay/DebugDrawingLayer";
+import { Separator } from "@/components/ui/separator";
+import { isDesktop } from "react-device-detect";
type ObjectSettingsViewProps = {
selectedCamera?: string;
@@ -37,6 +40,8 @@ export default function ObjectSettingsView({
}: ObjectSettingsViewProps) {
const { data: config } = useSWR
+
+
+ {!isSuspended ? (
+
+ ) : (
+
+ )}
+
+ {!isSuspended ? (
+
+
+
+
+ {!isSuspended ? (
+
+
+ Notifications Active
+
+ ) : (
+
+ Notifications suspended until{" "}
+ {formatSuspendedUntil(notificationSuspendUntil)}
+
+ )}
+
+ {
+ setDebugDraw(isChecked);
+ }}
+ />
+
+
+ )}
+
+
+
+
+
+
+
+
+ Enable this option to draw a rectangle on the
+ camera image to show its area and ratio. These
+ values can then be used to set object shape filter
+ parameters in your config.
+
+
+
+
+
+
+
+ Read the documentation{" "}
+
+
+ Draw a rectangle on the image to view area and ratio
+ details
+
+
- ("config");
const colormap = useMemo(() => {
@@ -326,7 +405,7 @@ function ObjectList(objects?: ObjectType[]) {
{capitalizeFirstLetter(obj.label.replaceAll("_", " "))}
+
) : (
@@ -284,7 +358,12 @@ export default function ObjectSettingsView({
);
}
-function ObjectList(objects?: ObjectType[]) {
+type ObjectListProps = {
+ cameraConfig: CameraConfig;
+ objects?: ObjectType[];
+};
+
+function ObjectList({ cameraConfig, objects }: ObjectListProps) {
const { data: config } = useSWR
+
diff --git a/web/src/views/settings/UiSettingsView.tsx b/web/src/views/settings/UiSettingsView.tsx
index 6386a3cad..e3b5c8c7a 100644
--- a/web/src/views/settings/UiSettingsView.tsx
+++ b/web/src/views/settings/UiSettingsView.tsx
@@ -46,6 +46,25 @@ export default function UiSettingsView() {
});
}, [config]);
+ const clearStreamingSettings = useCallback(async () => {
+ if (!config) {
+ return [];
+ }
+
+ await delData(`streaming-settings`)
+ .then(() => {
+ toast.success(`Cleared streaming settings for all camera groups.`, {
+ position: "top-center",
+ });
+ })
+ .catch((error) => {
+ toast.error(
+ `Failed to clear camera groups streaming settings: ${error.response.data.message}`,
+ { position: "top-center" },
+ );
+ });
+ }, [config]);
+
useEffect(() => {
document.title = "General Settings - Frigate";
}, []);
@@ -84,11 +103,15 @@ export default function UiSettingsView() {
Automatic Live View
- @@ -351,7 +430,25 @@ function ObjectList(objects?: ObjectType[]) {
Area
- {obj.area ? obj.area.toString() : "-"} + {obj.area ? ( + <> +
+ px: {obj.area.toString()}
+
+
+ %:{" "}
+ {(
+ obj.area /
+ (cameraConfig.detect.width *
+ cameraConfig.detect.height)
+ )
+ .toFixed(4)
+ .toString()}
+
+
+ ) : (
+ "-"
+ )}
+
@@ -103,7 +126,7 @@ export default function UiSettingsView() {
Play Alert Videos
Automatically switch to a camera's live view when activity is detected. Disabling this option causes static camera images on - the Live dashboard to only update once per minute. + the your dashboards to only update once per minute.{" "} + + This is a global setting but can be overridden on each + camera in camera groups only. +
+
By default, recent alerts on the Live dashboard play as small looping videos. Disable this option to only show a static @@ -114,10 +137,10 @@ export default function UiSettingsView() {
-
+
Stored Layouts
-
+
+
diff --git a/web/src/views/system/FeatureMetrics.tsx b/web/src/views/system/FeatureMetrics.tsx
new file mode 100644
index 000000000..787d2367b
--- /dev/null
+++ b/web/src/views/system/FeatureMetrics.tsx
@@ -0,0 +1,122 @@
+import useSWR from "swr";
+import { FrigateStats } from "@/types/stats";
+import { useEffect, useMemo, useState } from "react";
+import { useFrigateStats } from "@/api/ws";
+import { EmbeddingThreshold } from "@/types/graph";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ThresholdBarGraph } from "@/components/graph/SystemGraph";
+import { cn } from "@/lib/utils";
+
+type FeatureMetricsProps = {
+ lastUpdated: number;
+ setLastUpdated: (last: number) => void;
+};
+export default function FeatureMetrics({
+ lastUpdated,
+ setLastUpdated,
+}: FeatureMetricsProps) {
+ // stats
+
+ const { data: initialStats } = useSWR(
+ ["stats/history", { keys: "embeddings,service" }],
+ {
+ revalidateOnFocus: false,
+ },
+ );
+
+ const [statsHistory, setStatsHistory] = useState([]);
+ const updatedStats = useFrigateStats();
+
+ useEffect(() => {
+ if (initialStats == undefined || initialStats.length == 0) {
+ return;
+ }
+
+ if (statsHistory.length == 0) {
+ setStatsHistory(initialStats);
+ return;
+ }
+
+ if (!updatedStats) {
+ return;
+ }
+
+ if (updatedStats.service.last_updated > lastUpdated) {
+ setStatsHistory([...statsHistory.slice(1), updatedStats]);
+ setLastUpdated(Date.now() / 1000);
+ }
+ }, [initialStats, updatedStats, statsHistory, lastUpdated, setLastUpdated]);
+
+ // timestamps
+
+ const updateTimes = useMemo(
+ () => statsHistory.map((stats) => stats.service.last_updated),
+ [statsHistory],
+ );
+
+ // features stats
+
+ const embeddingInferenceTimeSeries = useMemo(() => {
+ if (!statsHistory) {
+ return [];
+ }
+
+ const series: {
+ [key: string]: { name: string; data: { x: number; y: number }[] };
+ } = {};
+
+ statsHistory.forEach((stats, statsIdx) => {
+ if (!stats?.embeddings) {
+ return;
+ }
+
+ Object.entries(stats.embeddings).forEach(([rawKey, stat]) => {
+ const key = rawKey.replaceAll("_", " ");
+
+ if (!(key in series)) {
+ series[key] = { name: key, data: [] };
+ }
+
+ series[key].data.push({ x: statsIdx + 1, y: stat });
+ });
+ });
+ return Object.values(series);
+ }, [statsHistory]);
+
+ return (
+ <>
+ ("recordings/storage");
const { data: stats } = useSWR("stats");
+ const { data: config } = useSWR("config", {
+ revalidateOnFocus: false,
+ });
+
+ const timezone = useTimezone(config);
const totalStorage = useMemo(() => {
if (!cameraStorage || !stats) {
@@ -44,7 +53,23 @@ export default function StorageMetrics({
return totalStorage;
}, [cameraStorage, stats, setLastUpdated]);
- if (!cameraStorage || !stats || !totalStorage) {
+ // recordings summary
+
+ const { data: recordingsSummary } = useSWR([
+ "recordings/summary",
+ {
+ timezone: timezone,
+ },
+ ]);
+
+ const earliestDate = useMemo(() => {
+ const keys = Object.keys(recordingsSummary || {});
+ return keys.length
+ ? new Date(keys[keys.length - 1]).getTime() / 1000
+ : null;
+ }, [recordingsSummary]);
+
+ if (!cameraStorage || !stats || !totalStorage || !config) {
return;
}
@@ -81,6 +106,16 @@ export default function StorageMetrics({
used={totalStorage.used}
total={totalStorage.total}
/>
+ {earliestDate && (
+
The layout of cameras in a camera group can be dragged/resized. The positions are stored in your browser's @@ -133,6 +156,24 @@ export default function UiSettingsView() {
+
+
+
+
+ Camera Group Streaming Settings
+
+
+ + Streaming settings for each camera group are stored in your + browser's local storage. +
+
+
+
+ );
+}
diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx
index 746adf45a..ea2f1b7b2 100644
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/web/src/views/system/StorageMetrics.tsx
@@ -9,6 +9,10 @@ import {
} from "@/components/ui/popover";
import useSWR from "swr";
import { LuAlertCircle } from "react-icons/lu";
+import { FrigateConfig } from "@/types/frigateConfig";
+import { useTimezone } from "@/hooks/use-date-utils";
+import { RecordingsSummary } from "@/types/review";
+import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
type CameraStorage = {
[key: string]: {
@@ -26,6 +30,11 @@ export default function StorageMetrics({
}: StorageMetricsProps) {
const { data: cameraStorage } = useSWR
+ Features
+
+
+ {statsHistory.length != 0 ? (
+ <>
+ {embeddingInferenceTimeSeries.map((series) => (
+
+
+
+ ))}
+
+ ) : (
+ {series.name}
+
+ Earliest recording available:{" "}
+ {formatUnixTimestampToDateTime(earliestDate, {
+ timezone: timezone,
+ strftime_fmt:
+ config.ui.time_format == "24hour" ? "%d %b %Y" : "%B %d, %Y",
+ })}
+
+ )}
/tmp/cache
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index b7371a193..4a341a3df 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -32,6 +32,8 @@ module.exports = {
scale2: "scale2 3s ease-in-out infinite",
scale3: "scale3 3s ease-in-out infinite",
scale4: "scale4 3s ease-in-out infinite",
+ "timeline-zoom-in": "timeline-zoom-in 0.3s ease-out",
+ "timeline-zoom-out": "timeline-zoom-out 0.3s ease-out",
},
aspectRatio: {
wide: "32 / 9",
@@ -140,6 +142,16 @@ module.exports = {
"40%, 60%": { transform: "scale(1.4)" },
"30%, 70%": { transform: "scale(1)" },
},
+ "timeline-zoom-in": {
+ "0%": { transform: "translateY(0)", opacity: "1" },
+ "50%": { transform: "translateY(0%)", opacity: "0.5" },
+ "100%": { transform: "translateY(0)", opacity: "1" },
+ },
+ "timeline-zoom-out": {
+ "0%": { transform: "translateY(0)", opacity: "1" },
+ "50%": { transform: "translateY(0%)", opacity: "0.5" },
+ "100%": { transform: "translateY(0)", opacity: "1" },
+ },
},
screens: {
xs: "480px",