Add button to link to recordings from camera live view

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

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>
   );