From acb148547a3145834930ee6204a8b2aee032716c Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 6 Feb 2024 14:30:41 -0700
Subject: [PATCH] Break out live page

---
 web/src/components/player/LivePlayer.tsx   |  48 ++++-
 web/src/components/player/WebRTCPlayer.tsx |   3 +
 web/src/pages/Live.tsx                     | 193 ++++++---------------
 web/vite.config.ts                         |  12 +-
 4 files changed, 108 insertions(+), 148 deletions(-)

diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index d8835f47b..44f3cf975 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -1,5 +1,5 @@
 import WebRtcPlayer from "./WebRTCPlayer";
-import { CameraConfig } from "@/types/frigateConfig";
+import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import AutoUpdatingCameraImage from "../camera/AutoUpdatingCameraImage";
 import ActivityIndicator from "../ui/activity-indicator";
 import { Button } from "../ui/button";
@@ -11,27 +11,58 @@ import { Label } from "../ui/label";
 import { usePersistence } from "@/hooks/use-persistence";
 import MSEPlayer from "./MsePlayer";
 import JSMpegPlayer from "./JSMpegPlayer";
+import useSWR from "swr";
 
 const emptyObject = Object.freeze({});
 
 type LivePlayerProps = {
+  className?: string;
   cameraConfig: CameraConfig;
-  liveMode: string;
 };
 
 type Options = { [key: string]: boolean };
 
 export default function LivePlayer({
+  className,
   cameraConfig,
-  liveMode,
 }: LivePlayerProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
   const [showSettings, setShowSettings] = useState(false);
 
   const [options, setOptions] = usePersistence(
-    `${cameraConfig.name}-feed`,
+    `${cameraConfig?.name}-feed`,
     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 };
@@ -56,10 +87,17 @@ export default function LivePlayer({
     setShowSettings(!showSettings);
   }, [showSettings, setShowSettings]);
 
+  if (!cameraConfig) {
+    return <ActivityIndicator />;
+  }
+
   if (liveMode == "webrtc") {
     return (
       <div className="max-w-5xl">
-        <WebRtcPlayer camera={cameraConfig.live.stream_name} />
+        <WebRtcPlayer
+          className={className}
+          camera={cameraConfig.live.stream_name}
+        />
       </div>
     );
   } else if (liveMode == "mse") {
diff --git a/web/src/components/player/WebRTCPlayer.tsx b/web/src/components/player/WebRTCPlayer.tsx
index f679b73a1..daf7aa75e 100644
--- a/web/src/components/player/WebRTCPlayer.tsx
+++ b/web/src/components/player/WebRTCPlayer.tsx
@@ -2,12 +2,14 @@ import { baseUrl } from "@/api/baseUrl";
 import { useCallback, useEffect, useRef } from "react";
 
 type WebRtcPlayerProps = {
+  className?: string;
   camera: string;
   width?: number;
   height?: number;
 };
 
 export default function WebRtcPlayer({
+  className,
   camera,
   width,
   height,
@@ -149,6 +151,7 @@ export default function WebRtcPlayer({
     <div>
       <video
         ref={videoRef}
+        className={className}
         autoPlay
         playsInline
         controls
diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index 90343dd44..a6bc37722 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -1,161 +1,80 @@
-import BirdseyeLivePlayer from "@/components/player/BirdseyeLivePlayer";
+import { baseUrl } from "@/api/baseUrl";
 import LivePlayer from "@/components/player/LivePlayer";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import Heading from "@/components/ui/heading";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { usePersistence } from "@/hooks/use-persistence";
-import { FrigateConfig } from "@/types/frigateConfig";
+import { Event as FrigateEvent } from "@/types/event";
+import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { useMemo, useState } from "react";
+import { LuStar } from "react-icons/lu";
 import { useParams } from "react-router-dom";
 import useSWR from "swr";
 
 function Live() {
   const { data: config } = useSWR<FrigateConfig>("config");
-  const { camera: openedCamera } = useParams();
 
-  const [camera, setCamera] = useState<string>(
-    openedCamera ?? (config?.birdseye.enabled ? "birdseye" : "Select A Camera")
-  );
-  const cameraConfig = useMemo(() => {
-    return camera == "birdseye" ? undefined : config?.cameras[camera];
-  }, [camera, config]);
-  const sortedCameras = useMemo(() => {
+  // recent events
+
+  const now = new Date();
+  now.setHours(now.getHours() - 4, 0, 0, 0);
+  const recentTimestamp = now.getTime() / 1000;
+  const { data: events, mutate: updateEvents } = useSWR<FrigateEvent[]>([
+    "events",
+    { limit: 10, after: recentTimestamp },
+  ]);
+
+  // camera live views
+
+  const enabledCameras = useMemo<CameraConfig[]>(() => {
     if (!config) {
       return [];
     }
 
-    return Object.values(config.cameras).sort(
-      (aConf, bConf) => aConf.ui.order - bConf.ui.order
-    );
+    return Object.values(config.cameras);
   }, [config]);
-  const restreamEnabled = useMemo(() => {
-    if (!config) {
-      return false;
-    }
-
-    if (camera == "birdseye") {
-      return config.birdseye.restream;
-    }
-
-    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 [viewSource, setViewSource, sourceIsLoaded] = usePersistence(
-    `${camera}-source`,
-    camera == "birdseye" ? "jsmpeg" : defaultLiveMode
-  );
 
   return (
-    <div className=" w-full">
-      <div className="flex justify-between">
-        <Heading as="h2">Live</Heading>
-        <div className="flex">
-          <div className="mx-1">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button className="capitalize" variant="outline">
-                  {camera?.replaceAll("_", " ") || "Select A Camera"}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuLabel>Select A Camera</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuRadioGroup
-                  value={camera}
-                  onValueChange={setCamera}
+    <>
+      {events && events.length > 0 && (
+        <ScrollArea>
+          <div className="flex">
+            {events.map((event) => {
+              return (
+                <div
+                  className="relative rounded min-w-[125px] h-[125px] bg-contain bg-no-repeat bg-center mr-4"
+                  style={{
+                    backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
+                  }}
                 >
-                  {config?.birdseye.enabled && (
-                    <DropdownMenuRadioItem value="birdseye">
-                      Birdseye
-                    </DropdownMenuRadioItem>
+                  <LuStar
+                    className="h-6 w-6 text-yellow-300 absolute top-1 right-1 cursor-pointer"
+                    //onClick={(e: Event) => onSave(e)}
+                    fill={event.retain_indefinitely ? "currentColor" : "none"}
+                  />
+                  {event.end_time ? null : (
+                    <div className="bg-slate-300 dark:bg-slate-700 absolute bottom-0 text-center w-full uppercase text-sm rounded-bl">
+                      In progress
+                    </div>
                   )}
-                  {sortedCameras.map((item) => (
-                    <DropdownMenuRadioItem
-                      className="capitalize"
-                      key={item.name}
-                      value={item.name}
-                    >
-                      {item.name.replaceAll("_", " ")}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
+                </div>
+              );
+            })}
           </div>
-          <div className="mx-1">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button className="capitalize" variant="outline">
-                  {viewSource || defaultLiveMode || "Select A Live Mode"}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuLabel>Select A Live Mode</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuRadioGroup
-                  value={`${viewSource}`}
-                  onValueChange={setViewSource}
-                >
-                  {restreamEnabled && (
-                    <DropdownMenuRadioItem value="webrtc">
-                      Webrtc
-                    </DropdownMenuRadioItem>
-                  )}
-                  {restreamEnabled && (
-                    <DropdownMenuRadioItem value="mse">
-                      MSE
-                    </DropdownMenuRadioItem>
-                  )}
-                  <DropdownMenuRadioItem value="jsmpeg">
-                    Jsmpeg
-                  </DropdownMenuRadioItem>
-                  {camera != "birdseye" && (
-                    <DropdownMenuRadioItem value="debug">
-                      Debug
-                    </DropdownMenuRadioItem>
-                  )}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      )}
+
+      <div className="mt-4 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-4">
+        {enabledCameras.map((camera) => {
+          return (
+            <LivePlayer
+              className=" rounded-2xl overflow-hidden"
+              cameraConfig={camera}
+            />
+          );
+        })}
       </div>
-      {config && camera == "birdseye" && sourceIsLoaded && (
-        <BirdseyeLivePlayer
-          birdseyeConfig={config?.birdseye}
-          liveMode={`${viewSource ?? defaultLiveMode}`}
-        />
-      )}
-      {cameraConfig && sourceIsLoaded && (
-        <LivePlayer
-          liveMode={`${viewSource ?? defaultLiveMode}`}
-          cameraConfig={cameraConfig}
-        />
-      )}
-    </div>
+    </>
   );
 }
 
diff --git a/web/vite.config.ts b/web/vite.config.ts
index a97dbd014..5d5bf8207 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://localhost:5000',
+        target: 'http://192.168.50.106:5000',
         ws: true,
       },
       '/vod': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/clips': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/exports': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/ws': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
         ws: true,
       },
       '/live': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
         changeOrigin: true,
         ws: true,
       },