MOBILE-3833 screen: Get orientation from cordova plugin

package-lock.json

@@ -117,6 +117,7 @@
         "@typescript-eslint/parser": "4.22.0",
         "check-es-compat": "1.1.1",
         "cordova-plugin-androidx-adapter": "1.1.3",
+        "cordova-plugin-screen-orientation": "^3.0.2",
         "cross-env": "7.0.3",
         "eslint": "7.25.0",
         "eslint-config-prettier": "8.3.0",
@@ -11141,6 +11142,19 @@
         }
       }
     },
+    "node_modules/cordova-plugin-screen-orientation": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-screen-orientation/-/cordova-plugin-screen-orientation-3.0.2.tgz",
+      "integrity": "sha512-2w6CMC+HGvbhogJetalwGurL2Fx8DQCCPy3wlSZHN1/W7WoQ5n9ujVozcoKrY4VaagK6bxrPFih+ElkO8Uqfzg==",
+      "dev": true,
+      "engines": {
+        "cordovaDependencies": {
+          "4.0.0": {
+            "cordova": ">100"
+          }
+        }
+      }
+    },
     "node_modules/cordova-plugin-splashscreen": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-6.0.0.tgz",
@@ -39599,6 +39613,12 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-prevent-override/-/cordova-plugin-prevent-override-1.0.1.tgz",
       "integrity": "sha512-yy1JZ+lXTR33Ai1yloT6wdXJXe0a3LrfgnKORuPZv/QkbiqfIQKjy0R4zRP8qljaJSelF/xv5CgrVt8iS0SkBg=="
     },
+    "cordova-plugin-screen-orientation": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-screen-orientation/-/cordova-plugin-screen-orientation-3.0.2.tgz",
+      "integrity": "sha512-2w6CMC+HGvbhogJetalwGurL2Fx8DQCCPy3wlSZHN1/W7WoQ5n9ujVozcoKrY4VaagK6bxrPFih+ElkO8Uqfzg==",
+      "dev": true
+    },
     "cordova-plugin-splashscreen": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-6.0.0.tgz",

package.json

@@ -146,6 +146,7 @@
     "@typescript-eslint/parser": "4.22.0",
     "check-es-compat": "1.1.1",
     "cordova-plugin-androidx-adapter": "1.1.3",
+    "cordova-plugin-screen-orientation": "^3.0.2",
     "cross-env": "7.0.3",
     "eslint": "7.25.0",
     "eslint-config-prettier": "8.3.0",
@@ -237,7 +238,8 @@
       },
       "@moodlehq/cordova-plugin-file-transfer": {},
       "cordova-plugin-prevent-override": {},
-      "cordova-plugin-androidx-adapter": {}
+      "cordova-plugin-androidx-adapter": {},
+      "cordova-plugin-screen-orientation": {}
     }
   },
   "optionalDependencies": {

src/core/services/screen.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, Platform } from '@singletons';
 import { CoreEvents } from '@singletons/events';
 
 /**
@@ -103,9 +103,9 @@ export class CoreScreenService {
     }
 
     get orientation(): CoreScreenOrientation {
-        const mql = window.matchMedia('(orientation: portrait)');
-
-        return mql.matches ? CoreScreenOrientation.PORTRAIT : CoreScreenOrientation.LANDSCAPE;
+        return screen.orientation.type.startsWith(CoreScreenOrientation.LANDSCAPE)
+            ? CoreScreenOrientation.LANDSCAPE
+            : CoreScreenOrientation.PORTRAIT;
     }
 
     get isPortrait(): boolean {
@@ -119,18 +119,12 @@ export class CoreScreenService {
     /**
      * Watch orientation changes.
      */
-    watchOrientation(): void {
-        // Listen media orientation CSS queries.
-        const changeListener = (m: MediaQueryListEvent) => {
-            const orientation = m.matches ? CoreScreenOrientation.PORTRAIT : CoreScreenOrientation.LANDSCAPE;
+    async watchOrientation(): Promise<void> {
+        await Platform.ready();
 
-            CoreEvents.trigger(CoreEvents.ORIENTATION_CHANGE, { orientation });
-        };
-
-        const mql = window.matchMedia('(orientation: portrait)');
-        mql.addEventListener ?
-            mql.addEventListener('change', changeListener) :
-            mql.addListener(changeListener);
+        screen.orientation.addEventListener('change', () => {
+            CoreEvents.trigger(CoreEvents.ORIENTATION_CHANGE, { orientation: this.orientation });
+        });
     }
 
     /**

src/core/singletons/index.ts

@@ -120,7 +120,6 @@ export function setCreateSingletonMethodProxy(method: typeof createSingletonMeth
  *
  * @param injectionToken Injection token used to resolve the service. This is usually the service class if the provider was
  * defined using a class or the string used in the `provide` key if it was defined using an object.
- * @param getters Getter names to proxy.
  * @return Singleton proxy.
  */
 export function makeSingleton<Service extends object = object>( // eslint-disable-line @typescript-eslint/ban-types