openvidu-ionic: full iOS support (behaviour refined)

openvidu-ionic/build.json

@@ -1,5 +1,11 @@
 {
     "ios": {
+      "build": {
+        "buildFlag": ["-UseModernBuildSystem=0"]
+      },
+      "run": {
+        "buildFlag": ["-UseModernBuildSystem=0"]
+      },
       "debug": {
         "buildFlag": ["-UseModernBuildSystem=0"]
       },

openvidu-ionic/config.xml

@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='utf-8'?>
 <widget id="io.openvidu.sampleios" version="2.6.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>OpenVidu Sample</name>
-    <description>OpenVidu sample app</description>
+    <name>OpenVidu Ionic</name>
+    <description>OpenVidu Ionic app compatible with Android and iOS</description>
     <author email="openvidu@gmail.com" href="https://openvidu.io/">OpenVidu</author>
     <content src="index.html" />
     <access origin="*" />
@@ -19,7 +19,7 @@
     <preference name="SplashShowOnlyFirstTime" value="false" />
     <preference name="SplashScreen" value="screen" />
     <preference name="SplashScreenDelay" value="3000" />
-    <preference name="Orientation" value="portrait" />
+    <preference name="Orientation" value="all" />
     <platform name="android">
         <allow-intent href="market:*" />
         <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
@@ -53,6 +53,9 @@
         <config-file parent="NSCameraUsageDescription" target="*-Info.plist">
             <string>OpenVidu needs access to your camera</string>
         </config-file>
+        <config-file parent="NSContactsUsageDescription" target="*-Info.plist">
+            <string>OpenVidu needs access to contacts</string>
+        </config-file>
         <config-file parent="NSMicrophoneUsageDescription" target="*-Info.plist">
             <string>OpenVidu needs access to your microphone</string>
         </config-file>

openvidu-ionic/src/app/app.component.html

@@ -11,7 +11,7 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content [forceOverscroll]="false" padding *ngIf="!session">
+  <ion-content padding *ngIf="!session">
     
     <div id="img-div"><img src="assets/images/openvidu_grey_bg_transp_cropped.png" /></div>
     <h1 align="center" id="title">Join a video session</h1>
@@ -32,7 +32,7 @@
 
   </ion-content>
 
-  <ion-content [forceOverscroll]="false" *ngIf="session">
+  <ion-content [scrollEvents]="true" (ionScroll)="refreshVideos()" *ngIf="session">
     <div id="session-header">
       <h1 id="session-title">{{mySessionId}}</h1>
     </div>

openvidu-ionic/src/app/app.component.ts

@@ -135,24 +135,6 @@ export class AppComponent implements OnDestroy {
         });
     }
 
-
-    /*buildPVideo() {
-        this.pVideo = document.createElement('video');
-        this.pVideo.style.width = '400px';
-        this.pVideo.style.height = 400 - 56 + 'px';
-        this.pVideo.style.position = 'absolute';
-        this.pVideo.style.top = '0';
-        this.pVideo.srcObject = null;
-        this.pVideo.style.zIndex = '997';
-        this.pVideo.setAttribute('autoplay', '');
-        this.pVideo.setAttribute('playsinline', '');
-        this.platform.ready().then(() => {
-            if (this.platform.is('ios')) {
-                cordova.plugins.iosrtc.observeVideo(this.pVideo);
-            }
-        });
-    }*/
-
     initPublisher() {
         // Init a publisher passing undefined as targetElement (we don't want OpenVidu to insert a video
         // element: we will manage it on our own) and with the desired properties
@@ -190,6 +172,12 @@ export class AppComponent implements OnDestroy {
         this.generateParticipantInfo();
     }
 
+    refreshVideos() {
+        if (this.platform.is('ios') && this.platform.is('cordova')) {
+            cordova.plugins.iosrtc.refreshVideos();
+        }
+    }
+
     private checkAndroidPermissions(): Promise<any> {
         return new Promise((resolve, reject) => {
             this.platform.ready().then(() => {

openvidu-ionic/src/app/ov-video.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild, OnDestroy } from '@angular/core';
 import { StreamManager, StreamPropertyChangedEvent } from 'openvidu-browser';
 import { Platform } from '@ionic/angular';
 declare var cordova;
@@ -9,22 +9,40 @@ declare var cordova;
     styles: [
         `
             video {
-                z-index: -1;
+                width: inherit;
             }
         `
     ]
 })
-export class OpenViduVideoComponent implements AfterViewInit {
+export class OpenViduVideoComponent implements AfterViewInit, OnDestroy {
 
     @ViewChild('videoElement') elementRef: ElementRef;
     _streamManager: StreamManager;
 
+    rotationFunction;
+
     constructor(private platform: Platform) {}
 
-    ngAfterViewInit() {
+    ngAfterViewInit() {window.addEventListener
+        if (this.isIos() && this._streamManager.remote) {
+            this.rotationFunction = () => {
+                // Give the remote video some time to update its dimensions when rotating the device
+                setTimeout(() => {
+                    this.applyIosIonicVideoAttributes();
+                    cordova.plugins.iosrtc.refreshVideos();
+                }, 250);
+            };
+            (<any>window).addEventListener('orientationchange', this.rotationFunction);
+        }
         this.updateVideoView();
     }
 
+    ngOnDestroy() {
+        if (!!this.rotationFunction) {
+            (<any>window).removeEventListener('orientationchange', this.rotationFunction);
+        }
+    }
+
     @Input()
     set streamManager(streamManager: StreamManager) {
         this._streamManager = streamManager;
@@ -33,6 +51,7 @@ export class OpenViduVideoComponent implements AfterViewInit {
                 let e: StreamPropertyChangedEvent = <StreamPropertyChangedEvent>event;
                 if (e.changedProperty === 'videoDimensions') {
                     this.applyIosIonicVideoAttributes();
+                    cordova.plugins.iosrtc.refreshVideos();
                 }
             });
         }
@@ -52,9 +71,10 @@ export class OpenViduVideoComponent implements AfterViewInit {
 
     private applyIosIonicVideoAttributes() {
         let ratio = this._streamManager.stream.videoDimensions.height / this._streamManager.stream.videoDimensions.width;
-        this.elementRef.nativeElement.style.width = '100%';
+        this.elementRef.nativeElement.style.width = '100% !important';
+        this.elementRef.nativeElement.style.objectFit = 'fill';
+        this.elementRef.nativeElement.style.zIndex = '-1';
         const computedWidth = this.elementRef.nativeElement.offsetWidth;
-        console.warn(this._streamManager.stream.connection.data + ' - ' + computedWidth);
         this.elementRef.nativeElement.style.height = computedWidth * ratio + 'px';
         if (!this._streamManager.remote) {
             // It is a Publisher video. Custom iosrtc plugin mirror video

openvidu-ionic/src/global.scss

@@ -10,3 +10,6 @@
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
 
+:root {
+    --ion-background-color: transparent;
+}