Improving layouts and add chip component

web/src/App.tsx

@@ -36,7 +36,7 @@ function App() {
             >
               <Routes>
                 <Route path="/" element={<Dashboard />} />
-                <Route path="/live/:camera?" element={<Live />} />
+                <Route path="/live" element={<Live />} />
                 <Route path="/history" element={<History />} />
                 <Route path="/export" element={<Export />} />
                 <Route path="/storage" element={<Storage />} />

web/src/components/Chip.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+type ChipProps = {
+  className?: string;
+  children?: ReactNode[];
+};
+export default function Chip({ className, children }: ChipProps) {
+  return (
+    <div className={`flex p-1 rounded-lg items-center ${className}`}>
+      {children}
+    </div>
+  );
+}

web/src/components/player/LivePlayer.tsx

@@ -12,12 +12,15 @@ import { usePersistence } from "@/hooks/use-persistence";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
 import useSWR from "swr";
+import { MdCircle } from "react-icons/md";
+import Chip from "../Chip";
 
 const emptyObject = Object.freeze({});
 
 type LivePlayerProps = {
   className?: string;
   cameraConfig: CameraConfig;
+  liveMode?: "webrtc" | "mse" | "jsmpeg" | "debug";
 };
 
 type Options = { [key: string]: boolean };
@@ -25,6 +28,7 @@ type Options = { [key: string]: boolean };
 export default function LivePlayer({
   className,
   cameraConfig,
+  liveMode = "mse",
 }: LivePlayerProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const [showSettings, setShowSettings] = useState(false);
@@ -34,35 +38,6 @@ export default function LivePlayer({
     emptyObject
   );
 
-  const restreamEnabled = useMemo(() => {
-    if (!config) {
-      return false;
-    }
-
-    return (
-      cameraConfig &&
-      Object.keys(config.go2rtc.streams || {}).includes(
-        cameraConfig.live.stream_name
-      )
-    );
-  }, [config, cameraConfig]);
-
-  const defaultLiveMode = useMemo(() => {
-    if (cameraConfig) {
-      if (restreamEnabled) {
-        return cameraConfig.ui.live_mode || config?.ui.live_mode;
-      }
-
-      return "jsmpeg";
-    }
-
-    return undefined;
-  }, [cameraConfig, restreamEnabled]);
-  const [liveMode, setLiveMode, sourceIsLoaded] = usePersistence(
-    `${cameraConfig.name}-source`,
-    defaultLiveMode
-  );
-
   const handleSetOption = useCallback(
     (id: string, value: boolean) => {
       const newOptions = { ...options, [id]: value };
@@ -91,24 +66,24 @@ export default function LivePlayer({
     return <ActivityIndicator />;
   }
 
+  let player;
   if (liveMode == "webrtc") {
-    return (
+    player = (
-      <div className="max-w-5xl">
       <WebRtcPlayer
-          className={className}
+        className="rounded-2xl"
         camera={cameraConfig.live.stream_name}
       />
-      </div>
     );
   } else if (liveMode == "mse") {
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
-      return (
+      player = (
-        <div className="max-w-5xl">
+        <MSEPlayer
-          <MSEPlayer camera={cameraConfig.live.stream_name} />
+          className="rounded-2xl"
-        </div>
+          camera={cameraConfig.live.stream_name}
+        />
       );
     } else {
-      return (
+      player = (
         <div className="w-5xl text-center text-sm">
           MSE is only supported on iOS 17.1+. You'll need to update if available
           or use jsmpeg / webRTC streams. See the docs for more info.
@@ -116,17 +91,15 @@ export default function LivePlayer({
       );
     }
   } else if (liveMode == "jsmpeg") {
-    return (
+    player = (
-      <div className={`max-w-[${cameraConfig.detect.width}px]`}>
       <JSMpegPlayer
         camera={cameraConfig.name}
         width={cameraConfig.detect.width}
         height={cameraConfig.detect.height}
       />
-      </div>
     );
   } else if (liveMode == "debug") {
-    return (
+    player = (
       <>
         <AutoUpdatingCameraImage
           camera={cameraConfig.name}
@@ -154,8 +127,20 @@ export default function LivePlayer({
       </>
     );
   } else {
-    <ActivityIndicator />;
+    player = <ActivityIndicator />;
   }
+
+  return (
+    <div className={`relative ${className}`}>
+      {player}
+      <Chip className="absolute right-2 top-2 bg-gray-500 bg-gradient-to-br">
+        <MdCircle className="w-2 h-2 text-danger" />
+        <div className="ml-1 capitalize text-white text-xs">
+          {cameraConfig.name.replaceAll("_", " ")}
+        </div>
+      </Chip>
+    </div>
+  );
 }
 
 type DebugSettingsProps = {

web/src/components/player/MsePlayer.tsx

@@ -3,9 +3,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 type MSEPlayerProps = {
   camera: string;
+  className?: string;
 };
 
-function MSEPlayer({ camera }: MSEPlayerProps) {
+function MSEPlayer({ camera, className }: MSEPlayerProps) {
   let connectTS: number = 0;
 
   const RECONNECT_TIMEOUT: number = 30000;
@@ -246,6 +247,7 @@ function MSEPlayer({ camera }: MSEPlayerProps) {
   return (
     <video
       ref={videoRef}
+      className={className}
       controls
       playsInline
       preload="auto"

web/src/pages/Live.tsx

@@ -1,13 +1,11 @@
 import { baseUrl } from "@/api/baseUrl";
 import LivePlayer from "@/components/player/LivePlayer";
-import Heading from "@/components/ui/heading";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { usePersistence } from "@/hooks/use-persistence";
 import { Event as FrigateEvent } from "@/types/event";
-import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
+import { FrigateConfig } from "@/types/frigateConfig";
-import { useMemo, useState } from "react";
+import axios from "axios";
+import { useCallback, useMemo } from "react";
 import { LuStar } from "react-icons/lu";
-import { useParams } from "react-router-dom";
 import useSWR from "swr";
 
 function Live() {
@@ -23,14 +21,32 @@ function Live() {
     { limit: 10, after: recentTimestamp },
   ]);
 
+  const onFavorite = useCallback(
+    async (e: Event, event: FrigateEvent) => {
+      e.stopPropagation();
+      let response;
+      if (!event.retain_indefinitely) {
+        response = await axios.post(`events/${event.id}/retain`);
+      } else {
+        response = await axios.delete(`events/${event.id}/retain`);
+      }
+      if (response.status === 200) {
+        updateEvents();
+      }
+    },
+    [event]
+  );
+
   // camera live views
 
-  const enabledCameras = useMemo<CameraConfig[]>(() => {
+  const cameras = useMemo(() => {
     if (!config) {
       return [];
     }
 
-    return Object.values(config.cameras);
+    return Object.values(config.cameras)
+      .filter((conf) => conf.ui.dashboard && conf.enabled)
+      .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
   }, [config]);
 
   return (
@@ -48,7 +64,7 @@ function Live() {
                 >
                   <LuStar
                     className="h-6 w-6 text-yellow-300 absolute top-1 right-1 cursor-pointer"
-                    //onClick={(e: Event) => onSave(e)}
+                    onClick={(e: Event) => onFavorite(e, event)}
                     fill={event.retain_indefinitely ? "currentColor" : "none"}
                   />
                   {event.end_time ? null : (
@@ -65,13 +81,8 @@ function Live() {
       )}
 
       <div className="mt-4 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
-        {enabledCameras.map((camera) => {
+        {cameras.map((camera) => {
-          return (
+          return <LivePlayer className=" rounded-2xl" cameraConfig={camera} />;
-            <LivePlayer
-              className=" rounded-2xl overflow-hidden"
-              cameraConfig={camera}
-            />
-          );
         })}
       </div>
     </>