+ {graphData != undefined && (
+
+ );
+}
+
+function getHourBlocks() {
+ const arr = [];
+
+ for (let x = 0; x <= 59; x++) {
+ arr.push(x);
+ }
+
+ return arr;
+}
diff --git a/web/src/components/camera/DynamicCameraImage.tsx b/web/src/components/camera/DynamicCameraImage.tsx
index 091fcda2e..5bc05f83f 100644
--- a/web/src/components/camera/DynamicCameraImage.tsx
+++ b/web/src/components/camera/DynamicCameraImage.tsx
@@ -1,11 +1,15 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
import { AspectRatio } from "../ui/aspect-ratio";
import CameraImage from "./CameraImage";
import { LuEar } from "react-icons/lu";
import { CameraConfig } from "@/types/frigateConfig";
import { TbUserScan } from "react-icons/tb";
import { MdLeakAdd } from "react-icons/md";
-import { useFrigateEvents, useMotionActivity } from "@/api/ws";
+import {
+ useAudioActivity,
+ useFrigateEvents,
+ useMotionActivity,
+} from "@/api/ws";
type DynamicCameraImageProps = {
camera: CameraConfig;
@@ -21,10 +25,14 @@ export default function DynamicCameraImage({
}: DynamicCameraImageProps) {
const [key, setKey] = useState(Date.now());
const [activeObjects, setActiveObjects] = useState
+ {getHourBlocks().map((idx) => {
+ return (
+
+ );
+ })}
+
+ )}
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:00" : "%I:00%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:05" : "%I:05%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:10" : "%I:10%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:15" : "%I:15%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:20" : "%I:20%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:25" : "%I:25%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:30" : "%I:30%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:35" : "%I:35%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:40" : "%I:40%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:45" : "%I:45%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:50" : "%I:50%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config?.ui.time_format == "24hour" ? "%H:55" : "%I:55%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
+ {formatUnixTimestampToDateTime(startTime, {
+ strftime_fmt:
+ config.ui.time_format == "24hour" ? "%m/%d %H:%M" : "%m/%d %I:%M%P",
+ time_style: "medium",
+ date_style: "medium",
+ })}
+
+
- {relevantPreview && (
- {
+
+
);
diff --git a/web/src/components/graph/TimelineGraph.tsx b/web/src/components/graph/TimelineGraph.tsx
index ddffe59ac..73b9b5fb6 100644
--- a/web/src/components/graph/TimelineGraph.tsx
+++ b/web/src/components/graph/TimelineGraph.tsx
@@ -4,17 +4,34 @@ import Chart from "react-apexcharts";
type TimelineGraphProps = {
id: string;
data: GraphData[];
+ start: number;
+ end: number;
+ objects: number[];
};
/**
* A graph meant to be overlaid on top of a timeline
*/
-export default function TimelineGraph({ id, data }: TimelineGraphProps) {
+export default function TimelineGraph({
+ id,
+ data,
+ start,
+ end,
+ objects,
+}: TimelineGraphProps) {
return (
{
+ if (objects.includes(dataPointIndex)) {
+ return "#06b6d4";
+ } else {
+ return "#991b1b";
+ }
+ },
+ ],
chart: {
id: id,
selection: {
@@ -30,11 +47,27 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
dataLabels: { enabled: false },
grid: {
show: false,
+ padding: {
+ bottom: 2,
+ top: -12,
+ left: -20,
+ right: 0,
+ },
},
legend: {
show: false,
position: "top",
},
+ plotOptions: {
+ bar: {
+ columnWidth: "100%",
+ barHeight: "100%",
+ hideZeroBarsWhenGrouped: true,
+ },
+ },
+ stroke: {
+ width: 0,
+ },
tooltip: {
enabled: false,
},
@@ -49,13 +82,16 @@ export default function TimelineGraph({ id, data }: TimelineGraphProps) {
labels: {
show: false,
},
+ min: start,
+ max: end,
},
yaxis: {
+ axisBorder: {
+ show: false,
+ },
labels: {
show: false,
},
- logarithmic: true,
- logBase: 10,
},
}}
series={data}
diff --git a/web/src/components/overlay/TimelineDataOverlay.tsx b/web/src/components/overlay/TimelineDataOverlay.tsx
index 9ab08bc16..a020e6b5d 100644
--- a/web/src/components/overlay/TimelineDataOverlay.tsx
+++ b/web/src/components/overlay/TimelineDataOverlay.tsx
@@ -14,6 +14,10 @@ export default function TimelineEventOverlay({
timeline,
cameraConfig,
}: TimelineEventOverlayProps) {
+ if (!timeline.data.box) {
+ return null;
+ }
+
const boxLeftEdge = Math.round(timeline.data.box[0] * 100);
const boxTopEdge = Math.round(timeline.data.box[1] * 100);
const boxRightEdge = Math.round(
@@ -25,6 +29,10 @@ export default function TimelineEventOverlay({
const [isHovering, setIsHovering] = useState(false);
const getHoverStyle = () => {
+ if (!timeline.data.box) {
+ return {};
+ }
+
if (boxLeftEdge < 15) {
// show object stats on right side
return {
@@ -40,12 +48,20 @@ export default function TimelineEventOverlay({
};
const getObjectArea = () => {
+ if (!timeline.data.box) {
+ return 0;
+ }
+
const width = timeline.data.box[2] * cameraConfig.detect.width;
const height = timeline.data.box[3] * cameraConfig.detect.height;
return Math.round(width * height);
};
const getObjectRatio = () => {
+ if (!timeline.data.box) {
+ return 0.0;
+ }
+
const width = timeline.data.box[2] * cameraConfig.detect.width;
const height = timeline.data.box[3] * cameraConfig.detect.height;
return Math.round(100 * (width / height)) / 100;
diff --git a/web/src/components/player/DynamicVideoPlayer.tsx b/web/src/components/player/DynamicVideoPlayer.tsx
new file mode 100644
index 000000000..9f9c41076
--- /dev/null
+++ b/web/src/components/player/DynamicVideoPlayer.tsx
@@ -0,0 +1,411 @@
+import {
+ MutableRefObject,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+import VideoPlayer from "./VideoPlayer";
+import Player from "video.js/dist/types/player";
+import TimelineEventOverlay from "../overlay/TimelineDataOverlay";
+import { useApiHost } from "@/api";
+import useSWR from "swr";
+import { FrigateConfig } from "@/types/frigateConfig";
+import ActivityIndicator from "../ui/activity-indicator";
+import useKeyboardListener from "@/hooks/use-keyboard-listener";
+
+/**
+ * Dynamically switches between video playback and scrubbing preview player.
+ */
+type DynamicVideoPlayerProps = {
+ className?: string;
+ camera: string;
+ timeRange: { start: number; end: number };
+ cameraPreviews: Preview[];
+ onControllerReady?: (controller: DynamicVideoController) => void;
+};
+export default function DynamicVideoPlayer({
+ className,
+ camera,
+ timeRange,
+ cameraPreviews,
+ onControllerReady,
+}: DynamicVideoPlayerProps) {
+ const apiHost = useApiHost();
+ const { data: config } = useSWR("config");
+ const timezone = useMemo(
+ () =>
+ config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+ [config]
+ );
+
+ // controlling playback
+
+ const playerRef = useRef(undefined);
+ const previewRef = useRef(undefined);
+ const [isScrubbing, setIsScrubbing] = useState(false);
+ const [hasPreview, setHasPreview] = useState(false);
+ const [focusedItem, setFocusedItem] = useState(
+ undefined
+ );
+ const controller = useMemo(() => {
+ if (!config) {
+ return undefined;
+ }
+
+ return new DynamicVideoController(
+ playerRef,
+ previewRef,
+ (config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
+ setIsScrubbing,
+ setFocusedItem
+ );
+ }, [config]);
+
+ // keyboard control
+ const onKeyboardShortcut = useCallback(
+ (key: string, down: boolean, repeat: boolean) => {
+ switch (key) {
+ case "ArrowLeft":
+ if (down) {
+ const currentTime = playerRef.current?.currentTime();
+
+ if (currentTime) {
+ playerRef.current?.currentTime(Math.max(0, currentTime - 5));
+ }
+ }
+ break;
+ case "ArrowRight":
+ if (down) {
+ const currentTime = playerRef.current?.currentTime();
+
+ if (currentTime) {
+ playerRef.current?.currentTime(currentTime + 5);
+ }
+ }
+ break;
+ case "m":
+ if (down && !repeat && playerRef.current) {
+ playerRef.current.muted(!playerRef.current.muted());
+ }
+ break;
+ case " ":
+ if (down && playerRef.current) {
+ if (playerRef.current.paused()) {
+ playerRef.current.play();
+ } else {
+ playerRef.current.pause();
+ }
+ }
+ break;
+ }
+ },
+ [playerRef]
+ );
+ useKeyboardListener(
+ ["ArrowLeft", "ArrowRight", "m", " "],
+ onKeyboardShortcut
+ );
+
+ // initial state
+
+ const initialPlaybackSource = useMemo(() => {
+ const date = new Date(timeRange.start * 1000);
+ return {
+ src: `${apiHost}vod/${date.getFullYear()}-${
+ date.getMonth() + 1
+ }/${date.getDate()}/${date.getHours()}/${camera}/${timezone.replaceAll(
+ "/",
+ ","
+ )}/master.m3u8`,
+ type: "application/vnd.apple.mpegurl",
+ };
+ }, []);
+ const initialPreviewSource = useMemo(() => {
+ const preview = cameraPreviews.find(
+ (preview) =>
+ Math.round(preview.start) >= timeRange.start &&
+ Math.floor(preview.end) <= timeRange.end
+ );
+
+ if (preview) {
+ setHasPreview(true);
+ return {
+ src: preview.src,
+ type: preview.type,
+ };
+ } else {
+ setHasPreview(false);
+ return undefined;
+ }
+ }, []);
+
+ // state of playback player
+
+ const recordingParams = useMemo(() => {
+ return {
+ before: timeRange.end,
+ after: timeRange.start,
+ };
+ }, [timeRange]);
+ const { data: recordings } = useSWR(
+ [`${camera}/recordings`, recordingParams],
+ { revalidateOnFocus: false }
+ );
+
+ useEffect(() => {
+ if (!controller || !recordings || recordings.length == 0) {
+ return;
+ }
+
+ const date = new Date(timeRange.start * 1000);
+ const playbackUri = `${apiHost}vod/${date.getFullYear()}-${
+ date.getMonth() + 1
+ }/${date.getDate()}/${date.getHours()}/${camera}/${timezone.replaceAll(
+ "/",
+ ","
+ )}/master.m3u8`;
+
+ const preview = cameraPreviews.find(
+ (preview) =>
+ Math.round(preview.start) >= timeRange.start &&
+ Math.floor(preview.end) <= timeRange.end
+ );
+ setHasPreview(preview != undefined);
+
+ controller.newPlayback({
+ recordings,
+ playbackUri,
+ preview,
+ });
+ }, [controller, recordings]);
+
+ if (!controller) {
+ return ;
+ private previewRef: MutableRefObject;
+ private setScrubbing: (isScrubbing: boolean) => void;
+ private setFocusedItem: (timeline: Timeline) => void;
+ private playerMode: "playback" | "scrubbing" = "playback";
+
+ // playback
+ private recordings: Recording[] = [];
+ private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
+ private annotationOffset: number;
+ private timeToStart: number | undefined = undefined;
+
+ // preview
+ private preview: Preview | undefined = undefined;
+ private timeToSeek: number | undefined = undefined;
+ private seeking = false;
+
+ constructor(
+ playerRef: MutableRefObject,
+ previewRef: MutableRefObject,
+ annotationOffset: number,
+ setScrubbing: (isScrubbing: boolean) => void,
+ setFocusedItem: (timeline: Timeline) => void
+ ) {
+ this.playerRef = playerRef;
+ this.previewRef = previewRef;
+ this.annotationOffset = annotationOffset;
+ this.setScrubbing = setScrubbing;
+ this.setFocusedItem = setFocusedItem;
+ }
+
+ newPlayback(newPlayback: DynamicPlayback) {
+ this.recordings = newPlayback.recordings;
+
+ this.playerRef.current?.src({
+ src: newPlayback.playbackUri,
+ type: "application/vnd.apple.mpegurl",
+ });
+
+ if (this.timeToStart) {
+ this.seekToTimestamp(this.timeToStart);
+ this.timeToStart = undefined;
+ }
+
+ this.preview = newPlayback.preview;
+ if (this.preview && this.previewRef.current) {
+ this.previewRef.current.src({
+ src: this.preview.src,
+ type: this.preview.type,
+ });
+ }
+ }
+
+ seekToTimestamp(time: number, play: boolean = false) {
+ if (this.playerMode != "playback") {
+ this.playerMode = "playback";
+ this.setScrubbing(false);
+ this.timeToSeek = undefined;
+ this.seeking = false;
+ }
+
+ if (this.recordings.length == 0) {
+ this.timeToStart = time;
+ }
+
+ let seekSeconds = 0;
+ (this.recordings || []).every((segment) => {
+ // if the next segment is past the desired time, stop calculating
+ if (segment.start_time > time) {
+ return false;
+ }
+
+ if (segment.end_time < time) {
+ seekSeconds += segment.end_time - segment.start_time;
+ return true;
+ }
+
+ seekSeconds +=
+ segment.end_time - segment.start_time - (segment.end_time - time);
+ return true;
+ });
+ this.playerRef.current?.currentTime(seekSeconds);
+
+ if (play) {
+ this.playerRef.current?.play();
+ }
+ }
+
+ seekToTimelineItem(timeline: Timeline) {
+ this.playerRef.current?.pause();
+ this.seekToTimestamp(timeline.timestamp + this.annotationOffset);
+ this.setFocusedItem(timeline);
+ }
+
+ updateProgress(playerTime: number) {
+ if (this.onPlaybackTimestamp) {
+ // take a player time in seconds and convert to timestamp in timeline
+ let timestamp = 0;
+ let totalTime = 0;
+ (this.recordings || []).every((segment) => {
+ if (totalTime + segment.duration > playerTime) {
+ // segment is here
+ timestamp = segment.start_time + (playerTime - totalTime);
+ return false;
+ } else {
+ totalTime += segment.duration;
+ return true;
+ }
+ });
+
+ this.onPlaybackTimestamp(timestamp);
+ }
+ }
+
+ onPlayerTimeUpdate(listener: (timestamp: number) => void) {
+ this.onPlaybackTimestamp = listener;
+ }
+
+ scrubToTimestamp(time: number) {
+ if (this.playerMode != "scrubbing") {
+ this.playerMode = "scrubbing";
+ this.playerRef.current?.pause();
+ this.setScrubbing(true);
+ }
+
+ if (this.preview) {
+ if (this.seeking) {
+ this.timeToSeek = time;
+ } else {
+ this.previewRef.current?.currentTime(time - this.preview.start);
+ this.seeking = true;
+ }
+ }
+ }
+
+ finishedSeeking() {
+ if (!this.preview || this.playerMode == "playback") {
+ return;
+ }
+
+ if (
+ this.timeToSeek &&
+ this.timeToSeek != this.previewRef.current?.currentTime()
+ ) {
+ this.previewRef.current?.currentTime(
+ this.timeToSeek - this.preview.start
+ );
+ } else {
+ this.seeking = false;
+ }
+ }
+}
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 1fdcaa8b5..f35ab0dcc 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -1,6 +1,4 @@
-import { FrigateConfig } from "@/types/frigateConfig";
import VideoPlayer from "./VideoPlayer";
-import useSWR from "swr";
import React, {
useCallback,
useEffect,
@@ -12,6 +10,7 @@ import { useApiHost } from "@/api";
import Player from "video.js/dist/types/player";
import { AspectRatio } from "../ui/aspect-ratio";
import { LuPlayCircle } from "react-icons/lu";
+import { isCurrentHour } from "@/utils/dateUtil";
type PreviewPlayerProps = {
camera: string;
@@ -38,7 +37,6 @@ export default function PreviewThumbnailPlayer({
isMobile,
onClick,
}: PreviewPlayerProps) {
- const { data: config } = useSWR("config");
const playerRef = useRef(null);
const isSafari = useMemo(() => {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@@ -54,7 +52,10 @@ export default function PreviewThumbnailPlayer({
}
if (!playerRef.current) {
- setIsInitiallyVisible(true);
+ if (isHovered) {
+ setIsInitiallyVisible(true);
+ }
+
return;
}
@@ -105,6 +106,7 @@ export default function PreviewThumbnailPlayer({
{
threshold: 1.0,
root: document.getElementById("pageRoot"),
+ rootMargin: "-10% 0px -25% 0px",
}
);
if (node) autoPlayObserver.current.observe(node);
@@ -131,7 +133,6 @@ export default function PreviewThumbnailPlayer({
isInitiallyVisible={isInitiallyVisible}
startTs={startTs}
camera={camera}
- config={config}
eventId={eventId}
isMobile={isMobile}
isSafari={isSafari}
@@ -143,7 +144,6 @@ export default function PreviewThumbnailPlayer({
type PreviewContentProps = {
playerRef: React.MutableRefObject;
- config: FrigateConfig;
camera: string;
relevantPreview: Preview | undefined;
eventId: string;
@@ -156,7 +156,6 @@ type PreviewContentProps = {
};
function PreviewContent({
playerRef,
- config,
camera,
relevantPreview,
eventId,
@@ -195,22 +194,13 @@ function PreviewContent({
if (relevantPreview && !isVisible) {
return ;
- } else if (!relevantPreview) {
- if (isCurrentHour(startTs)) {
- return (
- 
- );
- } else {
- return (
- 
- );
- }
+ } else if (!relevantPreview && !isCurrentHour(startTs)) {
+ return (
+
+ );
} else {
return (
<>
@@ -223,17 +213,26 @@ function PreviewContent({
controls: false,
muted: true,
loadingSpinner: false,
- sources: [
- {
- src: `${relevantPreview.src}`,
- type: "video/mp4",
- },
- ],
+ poster: relevantPreview
+ ? ""
+ : `${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`,
+ sources: relevantPreview
+ ? [
+ {
+ src: `${relevantPreview.src}`,
+ type: "video/mp4",
+ },
+ ]
+ : [],
}}
seekOptions={{}}
onReady={(player) => {
playerRef.current = player;
+ if (!relevantPreview) {
+ return;
+ }
+
if (!isInitiallyVisible) {
player.pause(); // autoplay + pause is required for iOS
}
@@ -249,28 +248,10 @@ function PreviewContent({
}}
/>
-
+ {
+ if (relevantPreview) {
player.pause(); // autoplay + pause is required for iOS
player.currentTime(timeline.timestamp - relevantPreview.start);
- }}
- />
- )}
+ }
+ }}
+ />
-
+
-
+ {timeline.source == "tracked_object" && (
+
+
+
+
+
+
+ Submit To Frigate+
+
+ Objects in locations you want to avoid are not false
+ positives. Submitting them as false positives will confuse the
+ model.
+
+
+ 
+
+ Cancel
+ onSubmitToPlus(false)}
+ >
+ This is a {timeline.data.label}
+
+ onSubmitToPlus(true)}
+ >
+ This is not a {timeline.data.label}
+
+
+
+
+ )}
{getTimelineItemDescription(timeline)}
@@ -60,16 +92,52 @@ export default function TimelineItemCard({
date_style: "medium",
})}
+
+
+ );
+}
+
+export class DynamicVideoController {
+ // main state
+ private playerRef: MutableRefObject
+ {
+ playerRef.current = player;
+ player.on("playing", () => setFocusedItem(undefined));
+ player.on("timeupdate", () => {
+ controller.updateProgress(player.currentTime() || 0);
+ });
+
+ if (onControllerReady) {
+ onControllerReady(controller);
+ }
+ }}
+ onDispose={() => {
+ playerRef.current = undefined;
+ }}
+ >
+ {config && focusedItem && (
+
+
+
+ {
+ previewRef.current = player;
+ player.pause();
+ player.on("seeked", () => controller.finishedSeeking());
+ }}
+ onDispose={() => {
+ previewRef.current = undefined;
+ }}
+ />
+
+
- );
- } else {
- return (
-
- );
- }
+ } else if (!relevantPreview && !isCurrentHour(startTs)) {
+ return (
+
+ );
} else {
return (
<>
@@ -223,17 +213,26 @@ function PreviewContent({
controls: false,
muted: true,
loadingSpinner: false,
- sources: [
- {
- src: `${relevantPreview.src}`,
- type: "video/mp4",
- },
- ],
+ poster: relevantPreview
+ ? ""
+ : `${apiHost}api/preview/${camera}/${startTs}/thumbnail.jpg`,
+ sources: relevantPreview
+ ? [
+ {
+ src: `${relevantPreview.src}`,
+ type: "video/mp4",
+ },
+ ]
+ : [],
}}
seekOptions={{}}
onReady={(player) => {
playerRef.current = player;
+ if (!relevantPreview) {
+ return;
+ }
+
if (!isInitiallyVisible) {
player.pause(); // autoplay + pause is required for iOS
}
@@ -249,28 +248,10 @@ function PreviewContent({
}}
/>
+
Config
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index 9091a9584..6eaf1bff7 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -159,7 +159,7 @@ function Camera({ camera }: { camera: CameraConfig }) {
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
- sendAudio(detectValue == "ON" ? "OFF" : "ON");
+ sendAudio(audioValue == "ON" ? "OFF" : "ON");
}}
>