From 9be16e96366a724ec86f9d1b101fff4b5bc6b04b Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Thu, 29 Aug 2024 08:25:03 +0200 Subject: [PATCH] MOBILE-4475 ios: Enable native full screen in iOS 17+ --- config.xml | 2 +- package-lock.json | 8 ++++---- package.json | 2 +- src/core/features/h5p/assets/js/h5p.js | 11 +++++++---- src/core/features/h5p/assets/readme_moodle.txt | 1 + 5 files changed, 14 insertions(+), 10 deletions(-) diff --git a/config.xml b/config.xml index 9be898ebb..779cde0c9 100644 --- a/config.xml +++ b/config.xml @@ -46,7 +46,7 @@ - + diff --git a/package-lock.json b/package-lock.json index 2c7bc223c..445fce537 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,7 +46,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", @@ -5391,9 +5391,9 @@ "integrity": "sha512-sr5PPeGADRVM+z9JMGX4D5jhaAl4tD1s6SKrkChnEXxrONq9KZ7qkiZ68BsNsi962+PsRKMxLd0hfb8PZwphUg==" }, "node_modules/@moodlehq/cordova-plugin-ionic-webview": { - "version": "5.0.0-moodle.3", - "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-ionic-webview/-/cordova-plugin-ionic-webview-5.0.0-moodle.3.tgz", - "integrity": "sha512-iimL2zWbc7JqL/IEMh5lqzVlbf3R/bAabDRSQmUC+7rRlLB3479WVcZD8iJHok59GgjoaYpJ3W0lU6ySE+Asew==", + "version": "5.0.0-moodle.4", + "resolved": "https://registry.npmjs.org/@moodlehq/cordova-plugin-ionic-webview/-/cordova-plugin-ionic-webview-5.0.0-moodle.4.tgz", + "integrity": "sha512-/vWlh0Ae5f0FmQifgQZmqrRzsx2yzNnrgoxd+HxxaPdNbuBvJ2yWHb0L+Q+wz9CC9LH59X/qqcfi1rfqYX1jmg==", "engines": { "cordovaDependencies": { "2.0.0": { diff --git a/package.json b/package.json index fbc558458..2a9e1212e 100644 --- a/package.json +++ b/package.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", diff --git a/src/core/features/h5p/assets/js/h5p.js b/src/core/features/h5p/assets/js/h5p.js index 72c0b810f..a2007ff3d 100644 --- a/src/core/features/h5p/assets/js/h5p.js +++ b/src/core/features/h5p/assets/js/h5p.js @@ -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') { diff --git a/src/core/features/h5p/assets/readme_moodle.txt b/src/core/features/h5p/assets/readme_moodle.txt index 1592c628c..befc30d2b 100644 --- a/src/core/features/h5p/assets/readme_moodle.txt +++ b/src/core/features/h5p/assets/readme_moodle.txt @@ -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).