fix: webkit fullscreen

dao-xyz · Feb 6, 2024 · 39dd272 · 39dd272
1 parent 91d018c
commit 39dd272
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 31 deletions.
diff --git a/packages/live-streaming/frontend/src/media/streamer/controller/Control.tsx b/packages/live-streaming/frontend/src/media/streamer/controller/Control.tsx
@@ -511,22 +511,29 @@ export const Controls = (props: {
                         <FitScreen />
                     </IconButton>
                 </Grid> */}
-                <Grid item justifyContent="center">
-                    <IconButton
-                        onClick={() => {
-                            if (props.viewRef) {
-                                if (props.viewRef.requestFullscreen)
-                                    props.viewRef.requestFullscreen();
-                                if (props.viewRef["webkitRequestFullscreen"]) {
-                                    props.viewRef["webkitRequestFullscreen"]();
+                {(props.videoRef?.requestFullscreen ||
+                    props.videoRef?.["webkitExitFullscreen"]) && (
+                    <Grid item justifyContent="center">
+                        <IconButton
+                            onClick={() => {
+                                if (props.videoRef) {
+                                    if (props.videoRef.requestFullscreen) {
+                                        props.videoRef.requestFullscreen();
+                                    } else if (
+                                        props.videoRef["webkitExitFullscreen"]
+                                    ) {
+                                        props.videoRef[
+                                            "webkitExitFullscreen"
+                                        ]();
+                                    }
                                 }
-                            }
-                        }}
-                        sx={{ borderRadius: 0 }}
-                    >
-                        <Fullscreen />
-                    </IconButton>
-                </Grid>
+                            }}
+                            sx={{ borderRadius: 0 }}
+                        >
+                            <Fullscreen />
+                        </IconButton>
+                    </Grid>
+                )}
             </Grid>
         </Grid>
     );

diff --git a/packages/live-streaming/frontend/src/media/viewer/controller/Control.tsx b/packages/live-streaming/frontend/src/media/viewer/controller/Control.tsx
@@ -54,7 +54,7 @@ export const Controls = (
         selectedResolution?: Resolution[];
         onStreamTypeChange?: (settings: StreamType) => void;
         onQualityChange: (settings: SourceSetting[]) => void;
-        viewRef: HTMLElement;
+        viewRef: HTMLCanvasElement;
     } & ControlInterface
 ) => {
     const [showControls, setShowControls] = useState(false);
@@ -616,22 +616,27 @@ export const Controls = (
                         <FitScreen />
                     </IconButton>
                 </Grid> */}
-                <Grid item justifyContent="center">
-                    <IconButton
-                        onClick={() => {
-                            if (props.viewRef) {
-                                if (props.viewRef.requestFullscreen)
-                                    props.viewRef.requestFullscreen();
-                                if (props.viewRef["webkitRequestFullscreen"]) {
-                                    props.viewRef["webkitRequestFullscreen"]();
+                {(props.viewRef?.requestFullscreen ||
+                    props.viewRef?.["webkitExitFullscreen"]) && (
+                    <Grid item justifyContent="center">
+                        <IconButton
+                            onClick={() => {
+                                if (props.viewRef) {
+                                    if (props.viewRef.requestFullscreen) {
+                                        props.viewRef.requestFullscreen();
+                                    } else if (
+                                        props.viewRef["webkitExitFullscreen"]
+                                    ) {
+                                        props.viewRef["webkitExitFullscreen"]();
+                                    }
                                 }
-                            }
-                        }}
-                        sx={{ borderRadius: 0 }}
-                    >
-                        <Fullscreen />
-                    </IconButton>
-                </Grid>
+                            }}
+                            sx={{ borderRadius: 0 }}
+                        >
+                            <Fullscreen />
+                        </IconButton>
+                    </Grid>
+                )}
             </Grid>
         </Grid>
     );