Cleanup live activity indicators for cameras

This commit is contained in:
Nicolas Mowen 2024-04-10 06:36:46 -06:00
parent 503dfba719
commit 27edd7df6e
2 changed files with 3 additions and 24 deletions

View File

@ -7,10 +7,8 @@ import MSEPlayer from "./MsePlayer";
import JSMpegPlayer from "./JSMpegPlayer"; import JSMpegPlayer from "./JSMpegPlayer";
import { MdCircle } from "react-icons/md"; import { MdCircle } from "react-icons/md";
import { useCameraActivity } from "@/hooks/use-camera-activity"; import { useCameraActivity } from "@/hooks/use-camera-activity";
import { useRecordingsState } from "@/api/ws";
import { LivePlayerMode } from "@/types/live"; import { LivePlayerMode } from "@/types/live";
import useCameraLiveMode from "@/hooks/use-camera-live-mode"; import useCameraLiveMode from "@/hooks/use-camera-live-mode";
import CameraActivityIndicator from "../indicators/CameraActivityIndicator";
type LivePlayerProps = { type LivePlayerProps = {
cameraRef?: (ref: HTMLDivElement | null) => void; cameraRef?: (ref: HTMLDivElement | null) => void;
@ -41,8 +39,7 @@ export default function LivePlayer({
}: LivePlayerProps) { }: LivePlayerProps) {
// camera activity // camera activity
const { activeMotion, activeAudio, activeTracking } = const { activeMotion, activeTracking } = useCameraActivity(cameraConfig);
useCameraActivity(cameraConfig);
const cameraActive = useMemo( const cameraActive = useMemo(
() => () =>
@ -72,8 +69,6 @@ export default function LivePlayer({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [cameraActive, liveReady]); }, [cameraActive, liveReady]);
const { payload: recording } = useRecordingsState(cameraConfig.name);
// camera still state // camera still state
const stillReloadInterval = useMemo(() => { const stillReloadInterval = useMemo(() => {
@ -171,15 +166,8 @@ export default function LivePlayer({
/> />
</div> </div>
<div className="absolute right-2 bottom-2 w-[40px]">
{(activeMotion ||
(cameraConfig.audio.enabled_in_config && activeAudio)) && (
<CameraActivityIndicator />
)}
</div>
<div className="absolute right-2 top-2 size-4"> <div className="absolute right-2 top-2 size-4">
{recording == "ON" && ( {activeMotion && (
<MdCircle className="size-2 drop-shadow-md shadow-danger text-danger animate-pulse" /> <MdCircle className="size-2 drop-shadow-md shadow-danger text-danger animate-pulse" />
)} )}
</div> </div>

View File

@ -1,8 +1,4 @@
import { import { useFrigateEvents, useMotionActivity } from "@/api/ws";
useAudioActivity,
useFrigateEvents,
useMotionActivity,
} from "@/api/ws";
import { CameraConfig } from "@/types/frigateConfig"; import { CameraConfig } from "@/types/frigateConfig";
import { MotionData, ReviewSegment } from "@/types/review"; import { MotionData, ReviewSegment } from "@/types/review";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
@ -11,7 +7,6 @@ import { useTimelineUtils } from "./use-timeline-utils";
type useCameraActivityReturn = { type useCameraActivityReturn = {
activeTracking: boolean; activeTracking: boolean;
activeMotion: boolean; activeMotion: boolean;
activeAudio: boolean;
}; };
export function useCameraActivity( export function useCameraActivity(
@ -25,7 +20,6 @@ export function useCameraActivity(
const { payload: detectingMotion } = useMotionActivity(camera.name); const { payload: detectingMotion } = useMotionActivity(camera.name);
const { payload: event } = useFrigateEvents(); const { payload: event } = useFrigateEvents();
const { payload: audioRms } = useAudioActivity(camera.name);
useEffect(() => { useEffect(() => {
if (!event) { if (!event) {
@ -63,9 +57,6 @@ export function useCameraActivity(
return { return {
activeTracking: hasActiveObjects, activeTracking: hasActiveObjects,
activeMotion: detectingMotion == "ON", activeMotion: detectingMotion == "ON",
activeAudio: camera.audio.enabled_in_config
? audioRms >= camera.audio.min_volume
: false,
}; };
} }