From 07b851cfda64406bcb717fcef1eac15bffaf2beb Mon Sep 17 00:00:00 2001
From: pabloFuente <pablofuenteperez@gmail.com>
Date: Thu, 29 Nov 2018 17:30:08 +0100
Subject: [PATCH] opnvidu-browser: allow iOS ionic to send
 streamPropertyChanged (videoDimensions) event

---
 openvidu-browser/src/OpenVidu/OpenVidu.ts | 43 +++++++++++++++--------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/openvidu-browser/src/OpenVidu/OpenVidu.ts b/openvidu-browser/src/OpenVidu/OpenVidu.ts
index 1b4df37c..a5dfb357 100644
--- a/openvidu-browser/src/OpenVidu/OpenVidu.ts
+++ b/openvidu-browser/src/OpenVidu/OpenVidu.ts
@@ -80,7 +80,7 @@ export class OpenVidu {
 
     if (platform.os!!.family === 'iOS' || platform.os!!.family === 'Android') {
       // Listen to orientationchange only on mobile devices
-      (<any>window).onorientationchange = () => {
+      (<any>window).addEventListener('orientationchange', () => {
         this.publishers.forEach(publisher => {
           if (!!publisher.stream && !!publisher.stream.hasVideo && !!publisher.stream.streamManager.videos[0]) {
 
@@ -88,22 +88,37 @@ export class OpenVidu {
 
             const oldWidth = publisher.stream.videoDimensions.width;
             const oldHeight = publisher.stream.videoDimensions.height;
-            // New resolution got from different places for Chrome and Firefox. Chrome needs a videoWidth and videoHeight of a videoElement.
-            // Firefox needs getSettings from the videoTrack
-            let firefoxSettings = publisher.stream.getMediaStream().getVideoTracks()[0].getSettings();
-            let newWidth = (platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.width : publisher.videoReference.videoWidth;
-            let newHeight = (platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.height : publisher.videoReference.videoHeight;
+
+            const getNewVideoDimensions = (): Promise<{newWidth: number, newHeight: number}> => {
+              return new Promise((resolve, reject) => {
+                let newVideoDimensions: { newWidth: number, newHeight: number };
+                if (platform['isIonicIos']) {
+                  // iOS Ionic. Limitation: must get new dimensions from an existing video element already inserted into DOM 
+                  resolve({
+                    newWidth: publisher.stream.streamManager.videos[0].video.videoWidth,
+                    newHeight: publisher.stream.streamManager.videos[0].video.videoHeight
+                  });
+                } else {
+                  // Rest of platforms
+                  // New resolution got from different places for Chrome and Firefox. Chrome needs a videoWidth and videoHeight of a videoElement.
+                  // Firefox needs getSettings from the videoTrack
+                  let firefoxSettings = publisher.stream.getMediaStream().getVideoTracks()[0].getSettings();
+                  const newWidth = <number>((platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.width : publisher.videoReference.videoWidth);
+                  const newHeight = <number>((platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.height : publisher.videoReference.videoHeight);
+                  resolve({newWidth, newHeight});
+                }
+              });
+            };
 
             const repeatUntilChange = setInterval(() => {
-              firefoxSettings = publisher.stream.getMediaStream().getVideoTracks()[0].getSettings();
-              newWidth = (platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.width : publisher.videoReference.videoWidth;
-              newHeight = (platform.name!!.toLowerCase().indexOf('firefox') !== -1) ? firefoxSettings.height : publisher.videoReference.videoHeight;
-              sendStreamPropertyChangedEvent(oldWidth, oldHeight, newWidth, newHeight);
-            }, 100);
+              getNewVideoDimensions().then(newDimensions => {
+                sendStreamPropertyChangedEvent(oldWidth, oldHeight, newDimensions.newWidth, newDimensions.newHeight);
+              });
+            }, 75);
 
             const sendStreamPropertyChangedEvent = (oldWidth, oldHeight, newWidth, newHeight) => {
               attempts++;
-              if (attempts > 4) {
+              if (attempts > 10) {
                 clearTimeout(repeatUntilChange);
               }
               if (newWidth !== oldWidth || newHeight !== oldHeight) {
@@ -132,7 +147,7 @@ export class OpenVidu {
             };
           }
         });
-      };
+      });
     }
   }
 
@@ -310,7 +325,7 @@ export class OpenVidu {
     const family = platform.os!!.family;
 
     // Reject mobile devices
-    if (family === 'iOS' || family === 'Android' || family === 'Windows Phone') {
+    if (family === 'iOS' || family === 'Android') {
       return 0;
     }