From c74eb755541726acb7d5eb1717de4eae66372e9a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 3 Mar 2024 10:32:47 -0600
Subject: [PATCH] Update camera activity indicator (#10208)

* new indicator

* create indicators directory and update imports

* create indicators directory and update imports

* remove vite
---
 web/src/components/bar/TimelineBar.tsx        |  2 +-
 web/src/components/camera/CameraImage.tsx     |  2 +-
 .../components/camera/ResizingCameraImage.tsx |  2 +-
 web/src/components/card/ExportCard.tsx        |  2 +-
 .../indicators/CameraActivityIndicator.tsx    | 33 +++++++++++++++++
 web/src/components/{ => indicators}/Chip.tsx  |  0
 .../{ui => indicators}/activity-indicator.tsx |  0
 .../components/player/BirdseyeLivePlayer.tsx  |  2 +-
 .../components/player/DynamicVideoPlayer.tsx  |  2 +-
 web/src/components/player/LivePlayer.tsx      | 37 +++++--------------
 .../player/PreviewThumbnailPlayer.tsx         |  2 +-
 .../components/settings/SettingsNavItems.tsx  |  2 +-
 web/src/pages/ConfigEditor.tsx                |  2 +-
 web/src/pages/Storage.tsx                     |  2 +-
 web/src/pages/UIPlayground.tsx                |  6 ++-
 web/src/views/events/EventView.tsx            |  2 +-
 web/tailwind.config.js                        | 26 +++++++++++++
 17 files changed, 85 insertions(+), 39 deletions(-)
 create mode 100644 web/src/components/indicators/CameraActivityIndicator.tsx
 rename web/src/components/{ => indicators}/Chip.tsx (100%)
 rename web/src/components/{ui => indicators}/activity-indicator.tsx (100%)

diff --git a/web/src/components/bar/TimelineBar.tsx b/web/src/components/bar/TimelineBar.tsx
index 6b1b87ce3..cd168f3cd 100644
--- a/web/src/components/bar/TimelineBar.tsx
+++ b/web/src/components/bar/TimelineBar.tsx
@@ -2,7 +2,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { GraphDataPoint } from "@/types/graph";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import useSWR from "swr";
-import ActivityIndicator from "../ui/activity-indicator";
+import ActivityIndicator from "../indicators/activity-indicator";
 
 type TimelineBarProps = {
   startTime: number;
diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index b4c32e014..be978f7a5 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -1,7 +1,7 @@
 import { useApiHost } from "@/api";
 import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
-import ActivityIndicator from "../ui/activity-indicator";
+import ActivityIndicator from "../indicators/activity-indicator";
 
 type CameraImageProps = {
   className?: string;
diff --git a/web/src/components/camera/ResizingCameraImage.tsx b/web/src/components/camera/ResizingCameraImage.tsx
index d098b46d5..b7a9b8369 100644
--- a/web/src/components/camera/ResizingCameraImage.tsx
+++ b/web/src/components/camera/ResizingCameraImage.tsx
@@ -1,7 +1,7 @@
 import { useApiHost } from "@/api";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
-import ActivityIndicator from "../ui/activity-indicator";
+import ActivityIndicator from "../indicators/activity-indicator";
 import { useResizeObserver } from "@/hooks/resize-observer";
 
 type CameraImageProps = {
diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index 9596f729c..3d374b859 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -1,5 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
-import ActivityIndicator from "../ui/activity-indicator";
+import ActivityIndicator from "../indicators/activity-indicator";
 import { Card } from "../ui/card";
 import { LuPlay, LuTrash } from "react-icons/lu";
 import { Button } from "../ui/button";
diff --git a/web/src/components/indicators/CameraActivityIndicator.tsx b/web/src/components/indicators/CameraActivityIndicator.tsx
new file mode 100644
index 000000000..77a87477d
--- /dev/null
+++ b/web/src/components/indicators/CameraActivityIndicator.tsx
@@ -0,0 +1,33 @@
+function CameraActivityIndicator() {
+  return (
+    <div className="flex items-center justify-center relative z-20">
+      <div className="flex">
+        <div className="absolute size-[5px] inset-0 bg-severity_alert-dimmed rounded-full shadow-[0px_0px_10px_0px_#00000024,0px_0px_15px_0px_#00000024] z-20 animate-move"></div>
+        <div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale1"></div>
+        <div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale2"></div>
+        <div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale3"></div>
+        <div className="flex-1 size-[5px] mr-[2px] bg-severity_alert rounded-full animate-scale4"></div>
+      </div>
+      <svg className="hidden" xmlns="http://www.w3.org/2000/svg" version="1.1">
+        <defs>
+          <filter id="goo">
+            <feGaussianBlur
+              in="SourceGraphic"
+              stdDeviation="10"
+              result="blur"
+            />
+            <feColorMatrix
+              in="blur"
+              type="matrix"
+              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
+              result="goo"
+            />
+            <feBlend in="SourceGraphic" in2="goo" />
+          </filter>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+export default CameraActivityIndicator;
diff --git a/web/src/components/Chip.tsx b/web/src/components/indicators/Chip.tsx
similarity index 100%
rename from web/src/components/Chip.tsx
rename to web/src/components/indicators/Chip.tsx
diff --git a/web/src/components/ui/activity-indicator.tsx b/web/src/components/indicators/activity-indicator.tsx
similarity index 100%
rename from web/src/components/ui/activity-indicator.tsx
rename to web/src/components/indicators/activity-indicator.tsx
diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx
index 2c742ee1c..7ab4c92d7 100644
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -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";
 
diff --git a/web/src/components/player/DynamicVideoPlayer.tsx b/web/src/components/player/DynamicVideoPlayer.tsx
index 05ac7c0ed..3ce3ba032 100644
--- a/web/src/components/player/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/DynamicVideoPlayer.tsx
@@ -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";
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 663e60808..2de13e802 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -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>
   );
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 2e3a9cd96..6908aec81 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -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";
diff --git a/web/src/components/settings/SettingsNavItems.tsx b/web/src/components/settings/SettingsNavItems.tsx
index db42775d3..a43c7bb91 100644
--- a/web/src/components/settings/SettingsNavItems.tsx
+++ b/web/src/components/settings/SettingsNavItems.tsx
@@ -57,7 +57,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import ActivityIndicator from "../ui/activity-indicator";
+import ActivityIndicator from "../indicators/activity-indicator";
 
 type SettingsNavItemsProps = {
   className?: string;
diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx
index 0319e81c4..8537c6aff 100644
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@@ -4,7 +4,7 @@ import { configureMonacoYaml } from "monaco-yaml";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useApiHost } from "@/api";
 import Heading from "@/components/ui/heading";
-import ActivityIndicator from "@/components/ui/activity-indicator";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import axios from "axios";
 import copy from "copy-to-clipboard";
diff --git a/web/src/pages/Storage.tsx b/web/src/pages/Storage.tsx
index 4f4c62b4e..ad0d7774d 100644
--- a/web/src/pages/Storage.tsx
+++ b/web/src/pages/Storage.tsx
@@ -1,5 +1,5 @@
 import { useWs } from "@/api/ws";
-import ActivityIndicator from "@/components/ui/activity-indicator";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import Heading from "@/components/ui/heading";
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index 003787b9c..d91c3d137 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -2,10 +2,11 @@ import { useMemo, useRef, useState } from "react";
 import Heading from "@/components/ui/heading";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import ActivityIndicator from "@/components/ui/activity-indicator";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import { ReviewData, ReviewSegment, ReviewSeverity } from "@/types/review";
 import { Button } from "@/components/ui/button";
+import CameraActivityIndicator from "@/components/indicators/CameraActivityIndicator";
 
 // Color data
 const colors = [
@@ -174,6 +175,9 @@ function UIPlayground() {
               <p className="text-small">
                 Handlebar is dragging: {isDragging ? "yes" : "no"}
               </p>
+              <div className="w-[40px] my-4">
+                <CameraActivityIndicator />
+              </div>
               <p>
                 <Button onClick={handleZoomOut} disabled={zoomLevel === 0}>
                   Zoom Out
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index f35608c7d..911e200b9 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -4,7 +4,7 @@ import ReviewActionGroup from "@/components/filter/ReviewActionGroup";
 import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
 import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
-import ActivityIndicator from "@/components/ui/activity-indicator";
+import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { useScrollLockout } from "@/hooks/use-mouse-listener";
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 11ca4127c..f87d4538f 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -27,6 +27,11 @@ module.exports = {
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        move: "move 3s ease-in-out infinite",
+        scale1: "scale1 3s ease-in-out infinite",
+        scale2: "scale2 3s ease-in-out infinite",
+        scale3: "scale3 3s ease-in-out infinite",
+        scale4: "scale4 3s ease-in-out infinite",
       },
       aspectRatio: {
         wide: "32 / 9",
@@ -96,6 +101,27 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
+        move: {
+          "50%": { left: "calc(100% - 7px)" },
+        },
+        scale1: {
+          "0%, 100%": { transform: "scale(1.3)" },
+          "10%, 90%": { transform: "scale(1.4)" },
+          "20%, 80%": { transform: "scale(1)" },
+        },
+        scale2: {
+          "20%, 80%": { transform: "scale(1.4)" },
+          "10%, 30%, 70%, 90%": { transform: "scale(1)" },
+        },
+        scale3: {
+          "30%, 70%": { transform: "scale(1.4)" },
+          "20%, 40%, 60%, 80%": { transform: "scale(1)" },
+        },
+        scale4: {
+          "50%": { transform: "scale(1.3)" },
+          "40%, 60%": { transform: "scale(1.4)" },
+          "30%, 70%": { transform: "scale(1)" },
+        },
       },
       screens: {
         xs: "480px",