openvidu-ionic: iOS video management improved

openvidu-ionic/config.xml

@@ -19,6 +19,7 @@
     <preference name="SplashShowOnlyFirstTime" value="false" />
     <preference name="SplashScreen" value="screen" />
     <preference name="SplashScreenDelay" value="3000" />
+    <preference name="Orientation" value="portrait" />
     <platform name="android">
         <allow-intent href="market:*" />
         <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />

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

@@ -23,8 +23,4 @@
 
 ion-col {
     padding: 1px;
-}
-
-.no-scroll .scroll-content{
-    overflow: hidden;
 }

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

@@ -11,8 +11,8 @@
     </ion-toolbar>
   </ion-header>
 
-  <ion-content padding *ngIf="!session" class="no-scroll">
-
+  <ion-content [forceOverscroll]="false" 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>
     <ion-item>
@@ -29,9 +29,10 @@
       <ion-icon slot="start" name="videocam"></ion-icon>
       Join
     </ion-button>
+
   </ion-content>
 
-  <ion-content *ngIf="session">
+  <ion-content [forceOverscroll]="false" *ngIf="session">
     <div id="session-header">
       <h1 id="session-title">{{mySessionId}}</h1>
     </div>

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

@@ -169,10 +169,10 @@ export class AppComponent implements OnDestroy {
 
         // --- 6) Publish your stream ---
 
-        this.session.publish(publisher);
-
-        // Store our Publisher
-        this.publisher = publisher;
+        this.session.publish(publisher).then(() => {
+           // Store our Publisher
+            this.publisher = publisher; 
+        });
     }
 
     leaveSession() {

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

@@ -1,6 +1,7 @@
 import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { StreamManager } from 'openvidu-browser';
-
+import { StreamManager, StreamPropertyChangedEvent } from 'openvidu-browser';
+import { Platform } from '@ionic/angular';
+declare var cordova;
 
 @Component({
     selector: 'ov-video',
@@ -8,25 +9,60 @@ import { StreamManager } from 'openvidu-browser';
     styles: [
         `
             video {
-                width: inherit;
+                z-index: -1;
             }
-        `,
-    ],
+        `
+    ]
 })
 export class OpenViduVideoComponent implements AfterViewInit {
 
     @ViewChild('videoElement') elementRef: ElementRef;
     _streamManager: StreamManager;
 
+    constructor(private platform: Platform) {}
+
     ngAfterViewInit() {
-        this._streamManager.addVideoElement(this.elementRef.nativeElement);
+        this.updateVideoView();
     }
 
     @Input()
     set streamManager(streamManager: StreamManager) {
         this._streamManager = streamManager;
-        if (!!this.elementRef) {
-            this._streamManager.addVideoElement(this.elementRef.nativeElement);
+        if (this.isIos()) {
+            this._streamManager.on('streamPropertyChanged', event => {
+                let e: StreamPropertyChangedEvent = <StreamPropertyChangedEvent>event;
+                if (e.changedProperty === 'videoDimensions') {
+                    this.applyIosIonicVideoAttributes();
+                }
+            });
         }
     }
+
+    private updateVideoView() {
+        if (this.isIos()) {
+            (<HTMLVideoElement>this.elementRef.nativeElement).onloadedmetadata = () => {
+                this.applyIosIonicVideoAttributes();
+            };
+        }
+        this._streamManager.addVideoElement(this.elementRef.nativeElement);
+        if (this.isIos()) {
+            cordova.plugins.iosrtc.refreshVideos();
+        }
+    }
+
+    private applyIosIonicVideoAttributes() {
+        let ratio = this._streamManager.stream.videoDimensions.height / this._streamManager.stream.videoDimensions.width;
+        this.elementRef.nativeElement.style.width = '100%';
+        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
+            this.elementRef.nativeElement.style.transform = 'scaleX(-1)';
+        }
+    }
+
+    private isIos(): boolean {
+        return this.platform.is('ios') && this.platform.is('cordova');
+    }
 }