Merge pull request EpicGamesExt#334 from EpicGamesExt/issue219

Remove fullscreen button on iPad if using a non Safari browser (cherry picked from commit 3f10f01) # Conflicts: # Frontend/implementations/EpicGames/src/player.html # Frontend/ui-library/src/Application/Application.ts
mcottontensor · Nov 29, 2024 · 7a7009e · 7a7009e
1 parent 183684d
commit 7a7009e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 28 deletions.
diff --git a/Frontend/implementations/EpicGames/src/player.html b/Frontend/implementations/EpicGames/src/player.html
@@ -1,28 +1,28 @@
-<!-- Copyright Epic Games, Inc. All Rights Reserved. -->
-<!DOCTYPE HTML>
-<html style="width: 100%; height: 100%">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Optional: apply a font -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:wght@600&display=swap" rel="stylesheet">
-
-    <!-- Optional: set some favicons -->
-    <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon">
-	<link rel="icon" type="image/png" sizes="96x96" href="./assets/images/favicon-96x96.png">
-	<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
-	<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon-16x16.png">
-
-    <!-- Optional: set a title for your page -->
-    <title>Pixel Streaming</title>
-</head>
-
-<!-- The Pixel Streaming player fills 100% of its parent element but body has a 0px height unless filled with content. As such, we explicitly force the body to be 100% of the viewport height -->
-<body style="width: 100vw; height: 100vh; min-height: -webkit-fill-available; font-family: 'Montserrat'; margin: 0px">
-
-</body>
-
-</html>
+<!-- Copyright Epic Games, Inc. All Rights Reserved. -->
+<!DOCTYPE HTML>
+<html style="width: 100%; height: 100%">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+
+    <!-- Optional: apply a font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:wght@600&display=swap" rel="stylesheet">
+
+    <!-- Optional: set some favicons -->
+    <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon">
+	<link rel="icon" type="image/png" sizes="96x96" href="./assets/images/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon-16x16.png">
+
+    <!-- Optional: set a title for your page -->
+    <title>Pixel Streaming</title>
+</head>
+
+<!-- The Pixel Streaming player fills 100% of its parent element but body has a 0px height unless filled with content. As such, we explicitly force the body to be 100% of the viewport height -->
+<body style="width: 100vw; height: 100svh; min-height: -webkit-fill-available; overflow: hidden; overscroll-behavior: none; font-family: 'Montserrat'; margin: 0px">
+
+</body>
+
+</html>
diff --git a/Frontend/ui-library/src/Application/Application.ts b/Frontend/ui-library/src/Application/Application.ts
@@ -171,6 +171,32 @@ export class Application {
      * Set up button click functions and button functionality
      */
     public createButtons() {
+        const isIphone = /iPhone/.test(navigator.userAgent);
+        const isIpad =
+            /iPad/.test(navigator.userAgent) ||
+            (/Macintosh/.test(navigator.userAgent) && 'ontouchend' in document);
+        const isSafari =
+            navigator.vendor &&
+            navigator.vendor.indexOf('Apple') > -1 &&
+            navigator.userAgent &&
+            navigator.userAgent.indexOf('CriOS') == -1 &&
+            navigator.userAgent.indexOf('FxiOS') == -1;
+
+        // In some cases we want to disable fullscreen button if it is not explicitly requested:
+
+        // IPhone does not support fullscreen API as at 28th July 2024 (see: https://caniuse.com/fullscreen) so if
+        // we are on IPhone and user has not specified explicitly configured UI config for
+        // fullscreen button then we should disable this button as it doesn't work.
+
+        // Additionally iPad on non-Safari browsers doesn't really allow touch inputs and fullscreen video at the same time.
+        // If you do this the video gets dragged off back to normal non-fullscreen video and then the video is paused.
+        // See: https://github.com/EpicGamesExt/PixelStreamingInfrastructure/issues/219
+        const disableFullscreenButton = isIphone || (!isSafari && isIpad);
+
+        if (this._options.fullScreenControlsConfig === undefined && disableFullscreenButton) {
+            this._options.fullScreenControlsConfig = { creationMode: UIElementCreationMode.Disable };
+        }
+
         const controlsUIConfig: ControlsUIConfiguration = {
             statsButtonType: !!this._options.statsPanelConfig
                 ? this._options.statsPanelConfig.visibilityButtonConfig