mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-10 21:25:24 +03:00
Cleanup live activity indicators for cameras
This commit is contained in:
parent
503dfba719
commit
27edd7df6e
@ -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>
|
||||||
|
|||||||
@ -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,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user