chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Update camera activity indicator (#10208)

Browse Source 
* new indicator

* create indicators directory and update imports

* create indicators directory and update imports

* remove vite
This commit is contained in:
Josh Hawkins
2024-03-03 10:32:47 -06:00
committed by GitHub
parent 312dc95156
commit c74eb75554
17 changed files with 85 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/player/BirdseyeLivePlayer.tsx
View File

@@ -1,6 +1,6 @@
import WebRtcPlayer from "./WebRTCPlayer";
import { BirdseyeConfig } from "@/types/frigateConfig";
import ActivityIndicator from "../ui/activity-indicator";
import ActivityIndicator from "../indicators/activity-indicator";
import JSMpegPlayer from "./JSMpegPlayer";
import MSEPlayer from "./MsePlayer";

2
web/src/components/player/DynamicVideoPlayer.tsx
View File

@@ -12,7 +12,7 @@ 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 ActivityIndicator from "../indicators/activity-indicator";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { Recording } from "@/types/record";
import { Preview } from "@/types/preview";

37
web/src/components/player/LivePlayer.tsx
View File

@@ -1,18 +1,17 @@
import WebRtcPlayer from "./WebRTCPlayer";
import { CameraConfig } from "@/types/frigateConfig";
import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
import ActivityIndicator from "../ui/activity-indicator";
import ActivityIndicator from "../indicators/activity-indicator";
import { useEffect, useMemo, useState } from "react";
import MSEPlayer from "./MsePlayer";
import JSMpegPlayer from "./JSMpegPlayer";
import { MdCircle, MdLeakAdd } from "react-icons/md";
import { BsSoundwave } from "react-icons/bs";
import Chip from "../Chip";
import { MdCircle } from "react-icons/md";
import useCameraActivity from "@/hooks/use-camera-activity";
import { useRecordingsState } from "@/api/ws";
import { LivePlayerMode } from "@/types/live";
import useCameraLiveMode from "@/hooks/use-camera-live-mode";
import { isDesktop } from "react-device-detect";
import CameraActivityIndicator from "../indicators/CameraActivityIndicator";
type LivePlayerProps = {
className?: string;
@@ -159,35 +158,19 @@ export default function LivePlayer({
/>
</div>
<div className="absolute flex left-2 top-2 gap-2">
<Chip
in={activeMotion}
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
>
<MdLeakAdd className="size-4 text-motion" />
<div className="hidden md:block ml-1 text-white text-xs">Motion</div>
</Chip>
{cameraConfig.audio.enabled_in_config && (
<Chip
in={activeAudio}
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
>
<BsSoundwave className="size-4 text-audio" />
<div className="hidden md:block ml-1 text-white text-xs">Sound</div>
</Chip>
<div className="absolute right-2 bottom-2 w-[40px]">
{(activeMotion ||
(cameraConfig.audio.enabled_in_config && activeAudio)) && (
<CameraActivityIndicator />
)}
</div>
{isDesktop && (
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
<div className="absolute right-2 top-2 size-4">
{recording == "ON" && (
<MdCircle className="size-2 drop-shadow-md shadow-danger text-danger" />
<MdCircle className="size-2 drop-shadow-md shadow-danger text-danger animate-pulse" />
)}
<div className="ml-1 capitalize text-white text-xs">
{cameraConfig.name.replaceAll("_", " ")}
</div>
</Chip>
</div>
)}
</div>
);

2
web/src/components/player/PreviewThumbnailPlayer.tsx
View File

@@ -14,7 +14,7 @@ import TimeAgo from "../dynamic/TimeAgo";
import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig";
import { isFirefox, isMobile, isSafari } from "react-device-detect";
import Chip from "../Chip";
import Chip from "@/components/indicators/Chip";
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
import useImageLoaded from "@/hooks/use-image-loaded";
import { Skeleton } from "../ui/skeleton";