Dynamically detect if full screen is supported (#13197)

web/src/views/events/RecordingView.tsx

@@ -257,7 +257,8 @@ export function RecordingView({
 
   // fullscreen
 
-  const { fullscreen, toggleFullscreen } = useFullscreen(mainLayoutRef);
+  const { fullscreen, toggleFullscreen, supportsFullScreen } =
+    useFullscreen(mainLayoutRef);
 
   // layout
 
@@ -549,6 +550,7 @@ export function RecordingView({
                   mainControllerRef.current = controller;
                 }}
                 isScrubbing={scrubbing || exportMode == "timeline"}
+                supportsFullscreen={supportsFullScreen}
                 setFullResolution={setFullResolution}
                 toggleFullscreen={toggleFullscreen}
                 containerRef={mainLayoutRef}

web/src/views/live/LiveBirdseyeView.tsx

@@ -22,11 +22,13 @@ import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
 
 type LiveBirdseyeViewProps = {
+  supportsFullscreen: boolean;
   fullscreen: boolean;
   toggleFullscreen: () => void;
 };
 
 export default function LiveBirdseyeView({
+  supportsFullscreen,
   fullscreen,
   toggleFullscreen,
 }: LiveBirdseyeViewProps) {
@@ -155,14 +157,16 @@ export default function LiveBirdseyeView({
             <div
               className={`mr-1 flex flex-row items-center gap-2 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
             >
-              <CameraFeatureToggle
-                className="p-2 md:p-0"
-                variant={fullscreen ? "overlay" : "primary"}
-                Icon={fullscreen ? FaCompress : FaExpand}
-                isActive={fullscreen}
-                title={fullscreen ? "Close" : "Fullscreen"}
-                onClick={toggleFullscreen}
-              />
+              {supportsFullscreen && (
+                <CameraFeatureToggle
+                  className="p-2 md:p-0"
+                  variant={fullscreen ? "overlay" : "primary"}
+                  Icon={fullscreen ? FaCompress : FaExpand}
+                  isActive={fullscreen}
+                  title={fullscreen ? "Close" : "Fullscreen"}
+                  onClick={toggleFullscreen}
+                />
+              )}
               {!isIOS && !isFirefox && config.birdseye.restream && (
                 <CameraFeatureToggle
                   className="p-2 md:p-0"

web/src/views/live/LiveCameraView.tsx

@@ -83,12 +83,14 @@ import { useSessionPersistence } from "@/hooks/use-session-persistence";
 type LiveCameraViewProps = {
   config?: FrigateConfig;
   camera: CameraConfig;
+  supportsFullscreen: boolean;
   fullscreen: boolean;
   toggleFullscreen: () => void;
 };
 export default function LiveCameraView({
   config,
   camera,
+  supportsFullscreen,
   fullscreen,
   toggleFullscreen,
 }: LiveCameraViewProps) {
@@ -376,7 +378,7 @@ export default function LiveCameraView({
                   )}
                 </Button>
               )}
-              {!isIOS && (
+              {supportsFullscreen && (
                 <CameraFeatureToggle
                   className="p-2 md:p-0"
                   variant={fullscreen ? "overlay" : "primary"}