MOBILE-3289 h5p: Fix fullscreen for H5P in the app

config.xml

@@ -47,6 +47,7 @@
     <preference name="iosPersistentFileLocation" value="Compatibility" />
     <preference name="iosScheme" value="moodleappfs" />
     <preference name="WKWebViewOnly" value="true" />
+    <preference name="WKFullScreenEnabled" value="true" />
     <feature name="StatusBar">
         <param name="ios-package" onload="true" value="CDVStatusBar" />
     </feature>

package-lock.json

@@ -45,6 +45,7 @@
         "@ionic/angular": "^5.6.6",
         "@moodlehq/cordova-plugin-file-transfer": "1.7.1-moodle.2",
         "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.2",
+        "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.1",
         "@moodlehq/cordova-plugin-local-notification": "0.9.0-moodle.2",
         "@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.2",
         "@moodlehq/phonegap-plugin-push": "2.2.3-moodle.1",
@@ -72,7 +73,6 @@
         "cordova-plugin-geolocation": "^4.1.0",
         "cordova-plugin-globalization": "^1.11.0",
         "cordova-plugin-ionic-keyboard": "^2.2.0",
-        "cordova-plugin-ionic-webview": "^5.0.0",
         "cordova-plugin-media": "^5.0.3",
         "cordova-plugin-media-capture": "^3.0.3",
         "cordova-plugin-network-information": "^2.0.2",
@@ -145,7 +145,7 @@
         "typescript": "^3.9.9"
       },
       "engines": {
-        "node": ">=12.x"
+        "node": ">=14.15.0 <15"
       },
       "optionalDependencies": {
         "keytar": "^7.2.0"
@@ -4970,6 +4970,24 @@
         }
       }
     },
+    "node_modules/@moodlehq/cordova-plugin-ionic-webview": {
+      "version": "5.0.0-moodle.1",
+      "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-ionic-webview/-/cordova-plugin-ionic-webview-5.0.0-moodle.1.tgz",
+      "integrity": "sha512-+6UrPKsEgXl3pcuTyI1hZIUw9y22Li/nvn7nxiphgZdldlhBvkMK/7nn4IAaXYlnrmIOpCkIrU4BbrAjSJGWSQ==",
+      "engines": {
+        "cordovaDependencies": {
+          "2.0.0": {
+            "cordova-android": ">=6.4.0",
+            "cordova-ios": ">=4.0.0-dev"
+          },
+          "3.1.0": {
+            "cordova": ">=7.1.0",
+            "cordova-android": ">=6.4.0",
+            "cordova-ios": ">=4.0.0-dev"
+          }
+        }
+      }
+    },
     "node_modules/@moodlehq/cordova-plugin-local-notification": {
       "version": "0.9.0-moodle.2",
       "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-local-notification/-/cordova-plugin-local-notification-0.9.0-moodle.2.tgz",
@@ -10899,24 +10917,6 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-ionic-keyboard/-/cordova-plugin-ionic-keyboard-2.2.0.tgz",
       "integrity": "sha512-yDUG+9ieKVRitq5mGlNxjaZh/MgEhFFIgTIPhqSbUaQ8UuZbawy5mhJAVClqY97q8/rcQtL6dCDa7x2sEtCLcA=="
     },
-    "node_modules/cordova-plugin-ionic-webview": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cordova-plugin-ionic-webview/-/cordova-plugin-ionic-webview-5.0.0.tgz",
-      "integrity": "sha512-Wq0kCanxubK/JroTW4Mp5soayScnRyiY1eCkbwiz1Dyt1xHOiOW/v+1miqtBHtnZhcXw25TulCKAVJzkNBdmyg==",
-      "engines": {
-        "cordovaDependencies": {
-          "2.0.0": {
-            "cordova-android": ">=6.4.0",
-            "cordova-ios": ">=4.0.0-dev"
-          },
-          "3.1.0": {
-            "cordova": ">=7.1.0",
-            "cordova-android": ">=6.4.0",
-            "cordova-ios": ">=4.0.0-dev"
-          }
-        }
-      }
-    },
     "node_modules/cordova-plugin-media": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/cordova-plugin-media/-/cordova-plugin-media-5.0.3.tgz",
@@ -34720,6 +34720,11 @@
       "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-5.0.0-moodle.2.tgz",
       "integrity": "sha512-0JOLHUFEJC3fv4OQuyr2kwNyrb7oeyjmfFLQ+LcKO41e6UOnNy/du0hU7Yz9Rh8B2zGcebvSwMrN+cRSCqlipQ=="
     },
+    "@moodlehq/cordova-plugin-ionic-webview": {
+      "version": "5.0.0-moodle.1",
+      "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-ionic-webview/-/cordova-plugin-ionic-webview-5.0.0-moodle.1.tgz",
+      "integrity": "sha512-+6UrPKsEgXl3pcuTyI1hZIUw9y22Li/nvn7nxiphgZdldlhBvkMK/7nn4IAaXYlnrmIOpCkIrU4BbrAjSJGWSQ=="
+    },
     "@moodlehq/cordova-plugin-local-notification": {
       "version": "0.9.0-moodle.2",
       "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-local-notification/-/cordova-plugin-local-notification-0.9.0-moodle.2.tgz",
@@ -39330,11 +39335,6 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-ionic-keyboard/-/cordova-plugin-ionic-keyboard-2.2.0.tgz",
       "integrity": "sha512-yDUG+9ieKVRitq5mGlNxjaZh/MgEhFFIgTIPhqSbUaQ8UuZbawy5mhJAVClqY97q8/rcQtL6dCDa7x2sEtCLcA=="
     },
-    "cordova-plugin-ionic-webview": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cordova-plugin-ionic-webview/-/cordova-plugin-ionic-webview-5.0.0.tgz",
-      "integrity": "sha512-Wq0kCanxubK/JroTW4Mp5soayScnRyiY1eCkbwiz1Dyt1xHOiOW/v+1miqtBHtnZhcXw25TulCKAVJzkNBdmyg=="
-    },
     "cordova-plugin-media": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/cordova-plugin-media/-/cordova-plugin-media-5.0.3.tgz",

package.json

@@ -73,6 +73,7 @@
     "@ionic/angular": "^5.6.6",
     "@moodlehq/cordova-plugin-file-transfer": "1.7.1-moodle.2",
     "@moodlehq/cordova-plugin-inappbrowser": "5.0.0-moodle.2",
+    "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.1",
     "@moodlehq/cordova-plugin-local-notification": "0.9.0-moodle.2",
     "@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.2",
     "@moodlehq/phonegap-plugin-push": "2.2.3-moodle.1",
@@ -100,7 +101,6 @@
     "cordova-plugin-geolocation": "^4.1.0",
     "cordova-plugin-globalization": "^1.11.0",
     "cordova-plugin-ionic-keyboard": "^2.2.0",
-    "cordova-plugin-ionic-webview": "^5.0.0",
     "cordova-plugin-media": "^5.0.3",
     "cordova-plugin-media-capture": "^3.0.3",
     "cordova-plugin-network-information": "^2.0.2",
@@ -203,7 +203,7 @@
       },
       "@moodlehq/cordova-plugin-inappbrowser": {},
       "cordova-plugin-ionic-keyboard": {},
-      "cordova-plugin-ionic-webview": {},
+      "@moodlehq/cordova-plugin-ionic-webview": {},
       "@moodlehq/cordova-plugin-local-notification": {
         "ANDROID_SUPPORT_V4_VERSION": "26.+"
       },

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

@@ -32,13 +32,17 @@ if (document.documentElement.requestFullScreen) {
   H5P.fullScreenBrowserPrefix = '';
 }
 else if (document.documentElement.webkitRequestFullScreen) {
-  H5P.safariBrowser = navigator.userAgent.match(/version\/([.\d]+)/i);
+  // This code has been changed to allow full screen in Moodle app.
-  H5P.safariBrowser = (H5P.safariBrowser === null ? 0 : parseInt(H5P.safariBrowser[1]));
-
-  // Do not allow fullscreen for safari < 7.
-  if (H5P.safariBrowser === 0 || H5P.safariBrowser > 6) {
   H5P.fullScreenBrowserPrefix = 'webkit';
-  }
+  H5P.safariBrowser = 0;
+
+  // H5P.safariBrowser = navigator.userAgent.match(/version\/([.\d]+)/i);
+  // H5P.safariBrowser = (H5P.safariBrowser === null ? 0 : parseInt(H5P.safariBrowser[1]));
+
+  // // Do not allow fullscreen for safari < 7.
+  // if (H5P.safariBrowser === 0 || H5P.safariBrowser > 6) {
+  //   H5P.fullScreenBrowserPrefix = 'webkit';
+  // }
 }
 else if (document.documentElement.mozRequestFullScreen) {
   H5P.fullScreenBrowserPrefix = 'moz';

src/core/features/h5p/assets/readme_moodle.txt

@@ -0,0 +1,6 @@
+H5P library
+---------------
+
+Changes:
+
+1. The h5p.js file has been modified to make fullscreen work in the Moodle app. In line 34, the code inside the condition document.documentElement.webkitRequestFullScreen has changed, the original code has been commented.