MOBILE-2676 ios: Force iOS to calculate safe areas on rotate

config.xml

@@ -133,6 +133,7 @@
     <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity[@android:name='MainActivity']">
         <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|screenLayout|smallestScreenSize" android:debuggable="true" />
     </edit-config>
+    <plugin name="cordova-plugin-screen-orientation" spec="^3.0.1" />
     <engine name="android" spec="7.0.0" />
     <engine name="ios" spec="4.5.4" />
 </widget>

package-lock.json

@@ -192,6 +192,11 @@
       "resolved": "https://registry.npmjs.org/@ionic-native/push/-/push-4.17.0.tgz",
       "integrity": "sha512-hOM7CwBbZXHq31DNrTqEVcaS/W9uZcgm/gv9iu2hMtYlVwaM3ppvCC/SQuOOaS1elyfMhM5rzXP6n3csifcjDA=="
     },
+    "@ionic-native/screen-orientation": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/screen-orientation/-/screen-orientation-4.17.0.tgz",
+      "integrity": "sha512-NSN5I6y8Wq3xQV/fnsZdhb7iXnIyJ6SZmCw6aVJEX3rZUy48lwr/KlC4uR3S6NStBXnuWuZjFy7PITQl93UbGQ=="
+    },
     "@ionic-native/splash-screen": {
       "version": "4.17.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-4.17.0.tgz",
@@ -2330,6 +2335,11 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-file/-/cordova-plugin-file-6.0.1.tgz",
       "integrity": "sha1-SWBrjBWlaI1HKPkuSnMloGHeB/U="
     },
+    "cordova-plugin-screen-orientation": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-screen-orientation/-/cordova-plugin-screen-orientation-3.0.1.tgz",
+      "integrity": "sha1-daNXzik4CB6PYdRgU5S213Rjwfg="
+    },
     "core-js": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.3.0.tgz",
@@ -2694,7 +2704,7 @@
         },
         "readable-stream": {
           "version": "1.1.14",
-          "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
           "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
           "dev": true,
           "requires": {
@@ -3019,6 +3029,11 @@
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz",
       "integrity": "sha1-AQ1YWEI6XxGJeWZfRkhqlcbuK7Y="
     },
+    "es6-promise-plugin": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/es6-promise-plugin/-/es6-promise-plugin-4.2.2.tgz",
+      "integrity": "sha512-uoA4aVplXI9oqUYJFBAVRwAqIN9/n9JgrTAUGX3qPbnSZVE5yY1+6/MsoN5f4xsaPO62WjPHOdtts6okMN6tNA=="
+    },
     "es6-set": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
@@ -4990,7 +5005,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "dev": true,
           "requires": {

package.json

@@ -63,6 +63,7 @@
     "@ionic-native/media-capture": "4.17.0",
     "@ionic-native/network": "4.17.0",
     "@ionic-native/push": "4.17.0",
+    "@ionic-native/screen-orientation": "^4.17.0",
     "@ionic-native/splash-screen": "^4.17.0",
     "@ionic-native/sqlite": "4.17.0",
     "@ionic-native/status-bar": "^4.17.0",
@@ -79,6 +80,8 @@
     "chart.js": "^2.7.2",
     "cordova-android": "7.0.0",
     "cordova-ios": "4.5.4",
+    "cordova-plugin-screen-orientation": "^3.0.1",
+    "es6-promise-plugin": "^4.2.2",
     "font-awesome": "4.7.0",
     "ionic-angular": "^3.9.2",
     "ionicons": "3.0.0",
@@ -116,7 +119,10 @@
     "platforms": [
       "android",
       "ios"
-    ]
+    ],
+    "plugins": {
+      "cordova-plugin-screen-orientation": {}
+    }
   },
   "main": "desktop/electron.js",
   "build": {

src/app/app.component.ts

@@ -22,6 +22,7 @@ import { CoreLoggerProvider } from '@providers/logger';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreLoginHelperProvider } from '@core/login/providers/helper';
 import { Keyboard } from '@ionic-native/keyboard';
+import { ScreenOrientation } from '@ionic-native/screen-orientation';
 
 @Component({
     templateUrl: 'app.html'
@@ -35,7 +36,8 @@ export class MoodleMobileApp implements OnInit {
 
     constructor(private platform: Platform, statusBar: StatusBar, logger: CoreLoggerProvider, keyboard: Keyboard,
         private eventsProvider: CoreEventsProvider, private loginHelper: CoreLoginHelperProvider, private zone: NgZone,
-        private appProvider: CoreAppProvider, private langProvider: CoreLangProvider, private sitesProvider: CoreSitesProvider) {
+        private appProvider: CoreAppProvider, private langProvider: CoreLangProvider, private sitesProvider: CoreSitesProvider,
+        private screenOrientation: ScreenOrientation) {
         this.logger = logger.getInstance('AppComponent');
 
         platform.ready().then(() => {
@@ -168,5 +170,23 @@ export class MoodleMobileApp implements OnInit {
 
             pauseVideos(window);
         });
+
+        // Detect orientation changes.
+        this.screenOrientation.onChange().subscribe(
+            () => {
+                if (this.platform.is('ios')) {
+                    // Force ios to recalculate safe areas when rotating.
+                    // This can be erased when https://issues.apache.org/jira/browse/CB-13448 issue is solved or
+                    // After switching to WkWebview.
+                    const viewport = document.querySelector('meta[name=viewport]');
+                    viewport.setAttribute('content', viewport.getAttribute('content').replace('viewport-fit=cover,', ''));
+
+                    setTimeout(() => {
+                        viewport.setAttribute('content', 'viewport-fit=cover,' + viewport.getAttribute('content'));
+                    });
+                }
+            }
+        );
+
     }
 }

src/app/app.module.ts

@@ -26,6 +26,8 @@ import { MockLocationStrategy } from '@angular/common/testing';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
+import { ScreenOrientation } from '@ionic-native/screen-orientation';
+
 import { MoodleMobileApp } from './app.component';
 import { CoreInterceptor } from '@classes/interceptor';
 import { CorePageTransition } from '@classes/page-transition';
@@ -276,6 +278,7 @@ export const CORE_PROVIDERS: any[] = [
             useClass: CoreInterceptor,
             multi: true,
         },
+        ScreenOrientation,
         {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
         {provide: JitCompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
         {provide: LocationStrategy, useClass: MockLocationStrategy},