From bb9f8b1ed12a991dce74caceda82bbd07b1875f9 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 11 Apr 2024 12:20:51 -0600
Subject: [PATCH] Add link from reecordings to live as well

---
 web/src/views/events/RecordingView.tsx | 29 +++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index f351ca745..c4ac49f62 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -39,6 +39,7 @@ import MobileTimelineDrawer from "@/components/overlay/MobileTimelineDrawer";
 import MobileReviewSettingsDrawer from "@/components/overlay/MobileReviewSettingsDrawer";
 import Logo from "@/components/Logo";
 import { Skeleton } from "@/components/ui/skeleton";
+import { FaVideo } from "react-icons/fa";
 
 const SEGMENT_DURATION = 30;
 
@@ -251,14 +252,28 @@ export function RecordingView({
         {isMobile && (
           <Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
         )}
-        <Button
-          className="flex items-center gap-2 rounded-lg"
-          size="sm"
-          onClick={() => navigate(-1)}
+        <div
+          className={`flex items-center gap-2 ${isMobile ? "landscape:flex-col" : ""}`}
         >
-          <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
-          {isDesktop && <div className="text-primary">Back</div>}
-        </Button>
+          <Button
+            className={`flex items-center gap-2.5 rounded-lg`}
+            size="sm"
+            onClick={() => navigate(-1)}
+          >
+            <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
+            {isDesktop && <div className="text-primary">Back</div>}
+          </Button>
+          <Button
+            className="flex items-center gap-2.5 rounded-lg"
+            size="sm"
+            onClick={() => {
+              navigate(`/#${mainCamera}`);
+            }}
+          >
+            <FaVideo className="size-5 text-secondary-foreground" />
+            {isDesktop && <div className="text-primary">Live</div>}
+          </Button>
+        </div>
         <div className="flex items-center justify-end gap-2">
           <MobileCameraDrawer
             allCameras={allCameras}