Prevent scrolling on iOS when fake full screen mode

AirenSoft · Jul 9, 2024 · a705904 · a705904
1 parent 12a2cff
commit a705904
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/dist/ovenplayer.js b/dist/ovenplayer.js
diff --git a/dist/ovenplayer.js.map b/dist/ovenplayer.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ovenplayer",
-  "version": "0.10.37",
+  "version": "0.10.37.1",
   "description": "OvenPlayer is Open-Source HTML5 Player. OvenPlayer supports WebRTC Signaling from OvenMediaEngine for Sub-Second Latency Streaming.",
   "main": "dist/ovenplayer.js",
   "scripts": {

diff --git a/src/js/view/components/controls/fullScreenButton.js b/src/js/view/components/controls/fullScreenButton.js
@@ -59,13 +59,19 @@ const FullScreenButton = function ($container, api) {
     function resetFullscreenButtonState() {
         OvenPlayerConsole.log("FULLSCREEN STATE : ", checkFullScreen());
         if (checkFullScreen()) {
+            if (isForceMode) {
+                document.body.classList.add('op-fullscreen-helper');
+            }
             $root.addClass("op-fullscreen");
             isFullScreen = true;
             $iconExpand.hide();
             $iconCompress.show();
 
         } else {
-            $root.removeClass("op-fullscreen");
+            if (isForceMode) {
+                $root.removeClass("op-fullscreen");
+            }
+            document.body.classList.remove('op-fullscreen-helper');
             isFullScreen = false;
             $iconExpand.show();
             $iconCompress.hide();
@@ -80,12 +86,14 @@ const FullScreenButton = function ($container, api) {
 
     function forcedFakeFullscreenToggle() {
         if (!isFullScreen) {
+            document.body.classList.add('op-fullscreen-helper');
             $root.addClass("op-fullscreen");
             isFullScreen = true;
             $iconExpand.hide();
             $iconCompress.show();
         } else {
             $root.removeClass("op-fullscreen");
+            document.body.classList.remove('op-fullscreen-helper');
             isFullScreen = false;
             $iconExpand.show();
             $iconCompress.hide();

diff --git a/src/stylesheet/ovenplayer.less b/src/stylesheet/ovenplayer.less
@@ -95,6 +95,12 @@
   --op-accent-color: #50e3c2;
 }
 
+.op-fullscreen-helper {
+  overflow: hidden;
+  // for preventing scroll on iOS
+  position: fixed;
+}
+
 .op-wrapper.ovenplayer {
   position: relative;
   max-height: 100%;
@@ -142,8 +148,8 @@
   }
 
   &.op-fullscreen {
-    width: 100% !important;
-    height: 100% !important;
+    width: 100vw !important;
+    height: 100vh !important;
     top: 0;
     right: 0;
     bottom: 0;
@@ -1970,4 +1976,4 @@ i.op-con {
   .op-seek-button {
     display: none !important;
   }
-}
+}