MOBILE-4796 screen: Watch full screen to hide statusbars

Author: crazyserver

package-lock.json

@@ -83,7 +83,7 @@
         "@moodlehq/cordova-plugin-ionic-webview": "5.0.0-moodle.5",
         "@moodlehq/cordova-plugin-media-capture": "5.0.0-moodle.1",
         "@moodlehq/cordova-plugin-qrscanner": "3.0.1-moodle.5",
-        "@moodlehq/cordova-plugin-statusbar": "4.0.0-moodle.4",
+        "@moodlehq/cordova-plugin-statusbar": "4.0.0-moodle.5",
         "@moodlehq/cordova-plugin-zip": "3.1.0-moodle.1",
         "@moodlehq/phonegap-plugin-push": "4.0.0-moodle.12",
         "@ngx-translate/core": "^16.0.4",

package.json

@@ -22,4 +22,6 @@ export default function(): void {
     CoreScreen.watchViewport();
 
     CoreScreen.watchOrientation();
+
+    CoreScreen.watchFullscreen();
 }

src/core/initializers/watch-screen-status.ts

@@ -16,7 +16,7 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 
-import { makeSingleton } from '@singletons';
+import { makeSingleton, StatusBar } from '@singletons';
 import { CoreEvents } from '@singletons/events';
 import { CorePlatform } from '@services/platform';
 
@@ -128,6 +128,27 @@ export class CoreScreenService {
         });
     }
 
+    /**
+     * Watch fullscreen changes.
+     */
+    async watchFullscreen(): Promise<void> {
+        await CorePlatform.ready();
+
+        // During video playback, Android 11 and previous versions show the status bar on the first click.
+        // We're not hiding the status bar in this case to avoid this issue.
+        if (CorePlatform.isAndroid() && CorePlatform.getPlatformMajorVersion() < 12) {
+            return;
+        }
+
+        document.addEventListener('fullscreenchange', () => {
+            if (document.fullscreenElement) {
+                StatusBar.hide();
+            } else {
+                StatusBar.show();
+            }
+        });
+    }
+
     /**
      * Watch viewport changes.
      */

src/core/services/screen.ts

@@ -515,6 +515,13 @@ video::-webkit-media-text-track-display {
     white-space: normal !important;
 }
 
+*:fullscreen {
+    padding-top: var(--root-safe-area-top);
+    padding-left: var(--root-safe-area-left);
+    padding-bottom: var(--root-safe-area-bottom);
+    padding-right: var(--root-safe-area-right);
+}
+
 /**
  * https://github.com/ionic-team/ionic-framework/blob/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8/BREAKING.md#css-utilities
  */