Add button to link to recordings from camera live view

web/src/pages/Events.tsx

@@ -329,6 +329,7 @@ export default function Events() {
     return <ActivityIndicator />;
   }
 
+  if (recording) {
     if (selectedReviewData) {
       return (
         <RecordingView
@@ -343,6 +344,7 @@ export default function Events() {
           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>
   );