From 47491fd1cf01168b3d0f888eae56eef8b287b2d5 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 19 May 2024 05:28:42 -0600
Subject: [PATCH 1/4] Respect classname when no preview is found

---
 web/src/components/player/PreviewPlayer.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index 01d21342cb..b036bd357f 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -82,7 +82,12 @@ export default function PreviewPlayer({
   }
 
   return (
-    <div className="flex size-full items-center justify-center rounded-lg text-white md:rounded-2xl">
+    <div
+      className={cn(
+        "flex size-full items-center justify-center rounded-lg text-white md:rounded-2xl",
+        className,
+      )}
+    >
       No Preview Found
     </div>
   );

From 66a903bf9d64172c067f48570b410b5975780167 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 19 May 2024 05:54:40 -0600
Subject: [PATCH 2/4] Don't check for go2rtc info if camera is not restramed

---
 web/src/pages/Live.tsx                |  2 +-
 web/src/views/live/LiveCameraView.tsx | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/Live.tsx b/web/src/pages/Live.tsx
index bae56b6bb3..5449fef9b2 100644
--- a/web/src/pages/Live.tsx
+++ b/web/src/pages/Live.tsx
@@ -83,7 +83,7 @@ function Live() {
   }
 
   if (selectedCamera) {
-    return <LiveCameraView camera={selectedCamera} />;
+    return <LiveCameraView config={config} camera={selectedCamera} />;
   }
 
   return (
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index cc27b72bff..3d3ea23c7e 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -20,7 +20,7 @@ import {
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
-import { CameraConfig } from "@/types/frigateConfig";
+import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { LiveStreamMetadata, VideoResolutionType } from "@/types/live";
 import { CameraPtzInfo } from "@/types/ptz";
 import { RecordingStartingPoint } from "@/types/record";
@@ -75,9 +75,13 @@ import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
 
 type LiveCameraViewProps = {
+  config?: FrigateConfig;
   camera: CameraConfig;
 };
-export default function LiveCameraView({ camera }: LiveCameraViewProps) {
+export default function LiveCameraView({
+  config,
+  camera,
+}: LiveCameraViewProps) {
   const navigate = useNavigate();
   const { isPortrait } = useMobileOrientation();
   const mainRef = useRef<HTMLDivElement | null>(null);
@@ -86,8 +90,17 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
 
   // supported features
 
+  const isRestreamed = useMemo(
+    () =>
+      config &&
+      Object.keys(config.go2rtc.streams || {}).includes(
+        camera.live.stream_name,
+      ),
+    [camera, config],
+  );
+
   const { data: cameraMetadata } = useSWR<LiveStreamMetadata>(
-    `go2rtc/streams/${camera.live.stream_name}`,
+    isRestreamed ? `go2rtc/streams/${camera.live.stream_name}` : null,
     {
       revalidateOnFocus: false,
     },

From 2b4c6f0e1945cc00f7c389a03041ed9ea800cf81 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 19 May 2024 06:02:18 -0600
Subject: [PATCH 3/4] Show error banner when playback fails

---
 web/src/components/player/HlsVideoPlayer.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 28925de37a..6124891375 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -285,6 +285,14 @@ export default function HlsVideoPlayer({
             ) {
               setLoadedMetadata(false);
               setUseHlsCompat(true);
+            } else {
+              toast.error(
+                // @ts-expect-error code does exist
+                `Failed to play recordings (error ${e.target.error.code}): ${e.target.error.message}`,
+                {
+                  position: "top-center",
+                },
+              );
             }
           }}
         />

From eaedfe60701bfb12369d97c9752ea439ee9e03d5 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 19 May 2024 06:16:55 -0600
Subject: [PATCH 4/4] Add keyboard shortcut for fullscreen

---
 web/src/components/player/VideoControls.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index 2aeafd1035..f700747e5b 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -143,6 +143,11 @@ export default function VideoControls({
             onSeek(10);
           }
           break;
+        case "f":
+          if (setFullscreen && down && !repeat) {
+            setFullscreen(!fullscreen);
+          }
+          break;
         case "m":
           if (setMuted && down && !repeat && video) {
             setMuted(!muted);
@@ -157,10 +162,10 @@ export default function VideoControls({
     },
     // only update when preview only changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [video, isPlaying, onSeek],
+    [video, isPlaying, fullscreen, setFullscreen, onSeek],
   );
   useKeyboardListener(
-    hotKeys ? ["ArrowLeft", "ArrowRight", "m", " "] : [],
+    hotKeys ? ["ArrowLeft", "ArrowRight", "f", "m", " "] : [],
     onKeyboardShortcut,
   );