UI improvements (#11429)

* Respect classname when no preview is found

* Don't check for go2rtc info if camera is not restramed

* Show error banner when playback fails

* Add keyboard shortcut for fullscreen

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",
+                },
+              );
             }
           }}
         />

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>
   );

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,
   );