Link live recordings (#10799)

* Add button to link to recordings from camera live view

* Change name and show text on both

* Use history button next to back button

* Match designs better

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,10 +51,11 @@ 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 { IoMdArrowRoundBack } from "react-icons/io";
 import {
   LuEar,
   LuEarOff,
+  LuHistory,
   LuPictureInPicture,
   LuVideo,
   LuVideoOff,
@@ -218,14 +220,37 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
           }
         >
           {!fullscreen ? (
-            <Button
-              className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
-              size={isMobile ? "icon" : "sm"}
-              onClick={() => navigate(-1)}
-            >
-              <IoMdArrowBack className="size-5 lg:mr-[10px]" />
-              {isDesktop && "Back"}
-            </Button>
+            <div className="flex items-center gap-2">
+              <Button
+                className={`flex items-center gap-2.5 rounded-lg`}
+                size="sm"
+                variant="secondary"
+                onClick={() => navigate(-1)}
+              >
+                <IoMdArrowRoundBack className="size-5" />
+                {isDesktop && "Back"}
+              </Button>
+              <Button
+                className="flex items-center gap-2.5 rounded-lg"
+                size="sm"
+                variant="secondary"
+                onClick={() => {
+                  navigate("events", {
+                    state: {
+                      severity: "alert",
+                      recording: {
+                        camera: camera.name,
+                        startTime: Date.now() / 1000 - 30,
+                        severity: "alert",
+                      } as RecordingStartingPoint,
+                    },
+                  });
+                }}
+              >
+                <LuHistory className="size-5" />
+                {isDesktop && "History"}
+              </Button>
+            </div>
           ) : (
             <div />
           )}