Dynamically detect if full screen is supported (#13197)

web/src/components/player/HlsVideoPlayer.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from "react";
 import Hls from "hls.js";
-import { isAndroid, isDesktop, isIOS, isMobile } from "react-device-detect";
+import { isAndroid, isDesktop, isMobile } from "react-device-detect";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import VideoControls from "./VideoControls";
 import { VideoResolutionType } from "@/types/live";
@@ -33,6 +33,7 @@ type HlsVideoPlayerProps = {
   visible: boolean;
   currentSource: string;
   hotKeys: boolean;
+  supportsFullscreen: boolean;
   fullscreen: boolean;
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
@@ -49,6 +50,7 @@ export default function HlsVideoPlayer({
   visible,
   currentSource,
   hotKeys,
+  supportsFullscreen,
   fullscreen,
   onClipEnded,
   onPlayerLoaded,
@@ -180,7 +182,7 @@ export default function HlsVideoPlayer({
           seek: true,
           playbackRate: true,
           plusUpload: config?.plus?.enabled == true,
-          fullscreen: !isIOS,
+          fullscreen: supportsFullscreen,
         }}
         setControlsOpen={setControlsOpen}
         setMuted={(muted) => setMuted(muted, true)}

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -24,6 +24,7 @@ type DynamicVideoPlayerProps = {
   startTimestamp?: number;
   isScrubbing: boolean;
   hotKeys: boolean;
+  supportsFullscreen: boolean;
   fullscreen: boolean;
   onControllerReady: (controller: DynamicVideoController) => void;
   onTimestampUpdate?: (timestamp: number) => void;
@@ -40,6 +41,7 @@ export default function DynamicVideoPlayer({
   startTimestamp,
   isScrubbing,
   hotKeys,
+  supportsFullscreen,
   fullscreen,
   onControllerReady,
   onTimestampUpdate,
@@ -201,6 +203,7 @@ export default function DynamicVideoPlayer({
         visible={!(isScrubbing || isLoading)}
         currentSource={source}
         hotKeys={hotKeys}
+        supportsFullscreen={supportsFullscreen}
         fullscreen={fullscreen}
         onTimeUpdate={onTimeUpdate}
         onPlayerLoaded={onPlayerLoaded}