MOBILE-4475 ios: Enable native full screen in iOS 17+

Author: dpalou

config.xml

@@ -46,7 +46,7 @@
     <preference name="iosPersistentFileLocation" value="Compatibility" />
     <preference name="iosScheme" value="moodleappfs" />
     <preference name="WKWebViewOnly" value="true" />
-    <preference name="WKFullScreenEnabled" value="false" />
+    <preference name="WKFullScreenEnabled" value="true" />
     <preference name="AndroidXEnabled" value="true" />
     <preference name="GradlePluginGoogleServicesEnabled" value="true" />
     <preference name="GradlePluginGoogleServicesVersion" value="4.3.15" />

package-lock.json

@@ -80,7 +80,7 @@
         "@moodlehq/cordova-plugin-file-transfer": "2.0.0-moodle.2",
         "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.3",
         "@moodlehq/cordova-plugin-intent": "2.2.0-moodle.3",
-        "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.3",
+        "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.4",
         "@moodlehq/cordova-plugin-local-notification": "0.9.0-moodle.12",
         "@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.5",
         "@moodlehq/cordova-plugin-statusbar": "4.0.0-moodle.3",

package.json

@@ -27,6 +27,8 @@ function isIOS() {
     || (navigator.userAgent.includes("Mac") && "ontouchend" in document);
 }
 
+let useFakeFullScreen = false;
+
 // Detect if we support fullscreen, and what prefix to use.
 if (document.documentElement.requestFullscreen) {
   /**
@@ -57,6 +59,7 @@ else if (document.documentElement.msRequestFullscreen) {
   // This code has been added to allow a "fake" full screen in Moodle app.
   H5P.fullScreenBrowserPrefix = 'webkit';
   H5P.safariBrowser = 0;
+  useFakeFullScreen = true;
 }
 
 /**
@@ -174,7 +177,7 @@ H5P.init = function (target) {
         })
       ;
 
-      if (isIOS()) {
+      if (useFakeFullScreen) {
         // Register message listener to enter fullscreen.
         window.addEventListener('message', function receiveMessage(event) {
           if (event.data == 'enterFullScreen') {
@@ -699,7 +702,7 @@ H5P.fullScreen = function ($element, instance, exitCallback, body, forceSemiFull
       var method = (H5P.fullScreenBrowserPrefix === 'ms' ? 'msRequestFullscreen' : H5P.fullScreenBrowserPrefix + 'RequestFullScreen');
       var params = (H5P.fullScreenBrowserPrefix === 'webkit' && H5P.safariBrowser === 0 ? Element.ALLOW_KEYBOARD_INPUT : undefined);
 
-      if (isIOS()) {
+      if (useFakeFullScreen) {
         before('h5p-fullscreen-ios');
         window.parent.postMessage('enterFullScreen', '*');
       } else {
@@ -718,7 +721,7 @@ H5P.fullScreen = function ($element, instance, exitCallback, body, forceSemiFull
       else {
         done('h5p-fullscreen');
         document[H5P.fullScreenBrowserPrefix + 'ExitFullscreen'] && document[H5P.fullScreenBrowserPrefix + 'ExitFullscreen']();
-        if (isIOS()) {
+        if (useFakeFullScreen) {
           done('h5p-fullscreen-ios');
           window.parent.postMessage('exitFullScreen', '*');
         }
@@ -727,7 +730,7 @@ H5P.fullScreen = function ($element, instance, exitCallback, body, forceSemiFull
   }
 };
 
-if (isIOS()) {
+if (useFakeFullScreen) {
   // Pass fullscreen messages to child iframes.
   window.addEventListener('message', function receiveMessage(event) {
     if (event.data === 'enterFullScreen' || event.data === 'exitFullScreen') {

src/core/features/h5p/assets/js/h5p.js

@@ -7,3 +7,4 @@ Changes:
 2. The h5p.js file has been modified to simulate a fake full screen in iOS. The H5P file now sends post messages to the app, and also listens to messages sent by the app to enter/exit full screen.
 3. The embed.js file has been modified to remove optional chaining because it isn't supported in some old devices.
 4. The h5p.js has been modified to include a call to contentUserDataAjax (this change was done in LMS too).
+5. The h5p.js has been modified so the fake sull screen (point 2) is only used if native full screen is not available (iOS 16 or older).