From 16ddd376e3d8721b0b27b35ebb30aecf007e728f Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 2 Apr 2024 11:50:57 -0600
Subject: [PATCH] Add button to link to recordings from camera live view

---
 web/src/pages/Events.tsx              | 30 ++++++++++++++-------------
 web/src/views/live/LiveCameraView.tsx | 28 ++++++++++++++++++++++---
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index bbd59e49b..91b8f1839 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -329,20 +329,22 @@ export default function Events() {
     return <ActivityIndicator />;
   }
 
-  if (selectedReviewData) {
-    return (
-      <RecordingView
-        startCamera={selectedReviewData.camera}
-        startTime={selectedReviewData.start_time}
-        allCameras={selectedReviewData.allCameras}
-        reviewItems={reviews}
-        reviewSummary={reviewSummary}
-        allPreviews={allPreviews}
-        timeRange={selectedTimeRange}
-        filter={reviewFilter}
-        updateFilter={onUpdateFilter}
-      />
-    );
+  if (recording) {
+    if (selectedReviewData) {
+      return (
+        <RecordingView
+          startCamera={selectedReviewData.camera}
+          startTime={selectedReviewData.start_time}
+          allCameras={selectedReviewData.allCameras}
+          reviewItems={reviews}
+          reviewSummary={reviewSummary}
+          allPreviews={allPreviews}
+          timeRange={selectedTimeRange}
+          filter={reviewFilter}
+          updateFilter={onUpdateFilter}
+        />
+      );
+    }
   } else {
     return (
       <EventView
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 42a30f55f..d0366df99 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -22,6 +22,7 @@ import { useResizeObserver } from "@/hooks/resize-observer";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { CameraConfig } from "@/types/frigateConfig";
 import { CameraPtzInfo } from "@/types/ptz";
+import { RecordingStartingPoint } from "@/types/record";
 import React, {
   useCallback,
   useEffect,
@@ -50,7 +51,7 @@ import {
 } from "react-icons/fa";
 import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
 import { HiViewfinderCircle } from "react-icons/hi2";
-import { IoMdArrowBack } from "react-icons/io";
+import { IoMdArrowBack, IoMdArrowDown } from "react-icons/io";
 import {
   LuEar,
   LuEarOff,
@@ -219,11 +220,11 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         >
           {!fullscreen ? (
             <Button
-              className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
+              className={`flex items-center gap-2.5 rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
               size={isMobile ? "icon" : "sm"}
               onClick={() => navigate(-1)}
             >
-              <IoMdArrowBack className="size-5 lg:mr-[10px]" />
+              <IoMdArrowBack className="size-5" />
               {isDesktop && "Back"}
             </Button>
           ) : (
@@ -333,6 +334,27 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             />
           )}
         </TransformComponent>
+        <div className="flex justify-center items-center">
+          <Button
+            className="flex items-center gap-2.5 rounded-lg"
+            size="sm"
+            onClick={() => {
+              navigate("events", {
+                state: {
+                  severity: "alert",
+                  recording: {
+                    camera: camera.name,
+                    startTime: Date.now() / 1000 - 30,
+                    severity: "alert",
+                  } as RecordingStartingPoint,
+                },
+              });
+            }}
+          >
+            <IoMdArrowDown />
+            {isDesktop && "Recordings"}
+          </Button>
+        </div>
       </div>
     </TransformWrapper>
   );