Tweaks and fixes (#11541)

* Update config version to be stored inside of the config

* Don't remove items from list when navigating back

* Use video api instead of webps for live current hour filmstrip

* Check that the config file is writable

* Show camera name when camera is offline

* Show camera name when offline

* Cleanup

web/src/components/Statusbar.tsx

@@ -1,33 +1,20 @@
-import { useFrigateStats } from "@/api/ws";
 import {
   StatusBarMessagesContext,
   StatusMessage,
 } from "@/context/statusbar-provider";
-import useStats from "@/hooks/use-stats";
-import { FrigateStats } from "@/types/stats";
+import useStats, { useAutoFrigateStats } from "@/hooks/use-stats";
 import { useContext, useEffect, useMemo } from "react";
 import { FaCheck } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
 import { MdCircle } from "react-icons/md";
 import { Link } from "react-router-dom";
-import useSWR from "swr";
 
 export default function Statusbar() {
-  const { data: initialStats } = useSWR<FrigateStats>("stats", {
-    revalidateOnFocus: false,
-  });
-  const { payload: latestStats } = useFrigateStats();
   const { messages, addMessage, clearMessages } = useContext(
     StatusBarMessagesContext,
   )!;
 
-  const stats = useMemo(() => {
-    if (latestStats) {
-      return latestStats;
-    }
-
-    return initialStats;
-  }, [initialStats, latestStats]);
+  const stats = useAutoFrigateStats();
 
   const cpuPercent = useMemo(() => {
     const systemCpu = stats?.cpu_usages["frigate.full_system"]?.cpu;

web/src/components/card/AnimatedEventCard.tsx

@@ -7,12 +7,10 @@ import { REVIEW_PADDING, ReviewSegment } from "@/types/review";
 import { useNavigate } from "react-router-dom";
 import { RecordingStartingPoint } from "@/types/record";
 import axios from "axios";
-import {
-  InProgressPreview,
-  VideoPreview,
-} from "../player/PreviewThumbnailPlayer";
+import { VideoPreview } from "../player/PreviewThumbnailPlayer";
 import { isCurrentHour } from "@/utils/dateUtil";
 import { useCameraPreviews } from "@/hooks/use-camera-previews";
+import { baseUrl } from "@/api/baseUrl";
 
 type AnimatedEventCardProps = {
   event: ReviewSegment;
@@ -105,18 +103,11 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
                 windowVisible={windowVisible}
               />
             ) : (
-              <InProgressPreview
-                review={event}
-                timeRange={{
-                  after: event.start_time,
-                  before: event.end_time ?? event.start_time + 20,
-                }}
+              <video
+                src={`${baseUrl}api/review/${event.id}/preview?format=ts`}
+                muted
+                autoPlay
                 loop
-                showProgress={false}
-                setReviewed={() => {}}
-                setIgnoreClick={() => {}}
-                isPlayingBack={() => {}}
-                windowVisible={windowVisible}
               />
             )}
           </div>

web/src/components/player/LivePlayer.tsx

@@ -46,7 +46,7 @@ export default function LivePlayer({
 }: LivePlayerProps) {
   // camera activity
 
-  const { activeMotion, activeTracking, objects } =
+  const { activeMotion, activeTracking, objects, offline } =
     useCameraActivity(cameraConfig);
 
   const cameraActive = useMemo(
@@ -224,9 +224,16 @@ export default function LivePlayer({
         />
       </div>
 
-      <div className="absolute right-2 top-2 size-4">
-        {activeMotion && (
-          <MdCircle className="size-2 animate-pulse text-danger shadow-danger drop-shadow-md" />
+      <div className="absolute right-2 top-2">
+        {!offline && activeMotion && (
+          <MdCircle className="mr-2 size-2 animate-pulse text-danger shadow-danger drop-shadow-md" />
+        )}
+        {offline && (
+          <Chip
+            className={`z-0 flex items-start justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs capitalize`}
+          >
+            {cameraConfig.name.replaceAll("_", " ")}
+          </Chip>
         )}
       </div>
     </div>