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/components/dynamic/CameraFeatureToggle.tsx

@@ -42,7 +42,9 @@ export default function CameraFeatureToggle({
         variants[variant][isActive ? "active" : "inactive"]
       }`}
     >
-      <Icon className="size-5 md:m-[6px]" />
+      <Icon
+        className={`size-5 md:m-[6px] ${isActive ? "text-white" : "text-secondary-foreground"}`}
+      />
     </div>
   );
 

web/src/pages/Events.tsx

@@ -329,20 +329,22 @@ export default function Events() {
     return <ActivityIndicator />;
   }
 
-  if (selectedReviewData) {
+  if (recording) {
-    return (
+    if (selectedReviewData) {
-      <RecordingView
+      return (
-        startCamera={selectedReviewData.camera}
+        <RecordingView
-        startTime={selectedReviewData.start_time}
+          startCamera={selectedReviewData.camera}
-        allCameras={selectedReviewData.allCameras}
+          startTime={selectedReviewData.start_time}
-        reviewItems={reviews}
+          allCameras={selectedReviewData.allCameras}
-        reviewSummary={reviewSummary}
+          reviewItems={reviews}
-        allPreviews={allPreviews}
+          reviewSummary={reviewSummary}
-        timeRange={selectedTimeRange}
+          allPreviews={allPreviews}
-        filter={reviewFilter}
+          timeRange={selectedTimeRange}
-        updateFilter={onUpdateFilter}
+          filter={reviewFilter}
-      />
+          updateFilter={onUpdateFilter}
-    );
+        />
+      );
+    }
   } else {
     return (
       <EventView

web/src/views/events/RecordingView.tsx

@@ -251,6 +251,7 @@ export function RecordingView({
         <Button
           className="flex items-center gap-2 rounded-lg"
           size="sm"
+          variant="secondary"
           onClick={() => navigate(-1)}
         >
           <IoMdArrowRoundBack className="size-5" size="small" />

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
+            <div className="flex items-center gap-2">
-              className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
+              <Button
-              size={isMobile ? "icon" : "sm"}
+                className={`flex items-center gap-2.5 rounded-lg`}
-              onClick={() => navigate(-1)}
+                size="sm"
-            >
+                variant="secondary"
-              <IoMdArrowBack className="size-5 lg:mr-[10px]" />
+                onClick={() => navigate(-1)}
-              {isDesktop && "Back"}
+              >
-            </Button>
+                <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 />
           )}

web/themes/theme-default.css

@@ -27,8 +27,8 @@
     --secondary: hsl(0, 0%, 96%);
     --secondary: 0 0% 96%;
 
-    --secondary-foreground: hsl(0, 0%, 45%);
+    --secondary-foreground: hsl(0, 0%, 32%);
-    --secondary-foreground: 0 0% 45%;
+    --secondary-foreground: 0 0% 32%;
 
     --secondary-highlight: hsl(0, 0%, 94%);
     --secondary-highlight: 0 0% 94%;