Merge pull request #337 from mcottontensor/backport/UE5.3/pr-334

[UE5.3] Merge pull request #334 from EpicGamesExt/issue219
EpicGamesExt · Nov 29, 2024 · 5300319 · 5300319
2 parents 7adb8a1 + feeed63
commit 5300319
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/Frontend/implementations/typescript/src/player.html b/Frontend/implementations/typescript/src/player.html
@@ -3,7 +3,7 @@
 <html style="width: 100%; height: 100%">
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <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">
@@ -21,7 +21,7 @@
 </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; font-family: 'Montserrat'; margin: 0px">
+<body style="width: 100vw; height: 100svh; min-height: -webkit-fill-available; overflow: hidden; overscroll-behavior: none; font-family: 'Montserrat'; margin: 0px">
 
 </body>
 

diff --git a/Frontend/ui-library/src/Application/Application.ts b/Frontend/ui-library/src/Application/Application.ts
@@ -174,11 +174,29 @@ 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.
-        if(this._options.fullScreenControlsConfig === undefined && /iPhone/.test(navigator.userAgent)) {
+
+        // 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 };
         }