#10 fix

plugin.xml

@@ -9,13 +9,15 @@
     <license>Apache 2.0</license>
     <keywords>opentok,tokbox</keywords>
 
+    <dependency id="cordova-plugin-wkwebview-engine" version="1.1.4"/>
+
     <platform name="android">
       <framework src="build-extras.gradle" custom="true" type="gradleReference" />
       <framework src="com.android.support:appcompat-v7:23.1.0" />
       <framework src="com.android.support:design:23.0.0" />
       <framework src="com.android.volley:volley:1.1.0" />
       <asset src="www/opentok.js" target="opentok.js" />
-  	  <source-file src="src/android/OpenTokAndroidPlugin.java" target-dir="src/com/tokbox/cordova/" />
+      <source-file src="src/android/OpenTokAndroidPlugin.java" target-dir="src/com/tokbox/cordova/" />
 
       <config-file target="AndroidManifest.xml" parent="/manifest">
         <uses-permission android:name="android.permission.CAMERA" />
@@ -92,5 +94,5 @@
     <platform name="browser">
       <hook type="before_plugin_install" src="scripts/downloadJSSDK.js" />
       <asset src="node_modules/@opentok/client/dist/js/opentok.min.js" target="opentok.js"/>
-  </platform>
+    </platform>
 </plugin>

src/android/OpenTokAndroidPlugin.java

@@ -78,12 +78,15 @@ public class OpenTokAndroidPlugin extends CordovaPlugin
     public static final String[] perms = {Manifest.permission.INTERNET, Manifest.permission.CAMERA, Manifest.permission.RECORD_AUDIO};
     public CallbackContext permissionsCallback;
 
-
     public class RunnableUpdateViews implements Runnable {
         public JSONArray mProperty;
         public View mView;
         public ArrayList<RunnableUpdateViews> allStreamViews;
 
+        // Used for setting the camera views.
+        public float widthRatio;
+        public float heightRatio;
+
         public class CustomComparator implements Comparator<RunnableUpdateViews> {
             @Override
             public int compare(RunnableUpdateViews object1, RunnableUpdateViews object2) {
@@ -124,15 +127,25 @@ public int getZIndex() {
             }
         }
 
+        public void setPosition() {
+            try {
+                mView.setX(mProperty.getInt(2) * widthRatio);
+                mView.setY(mProperty.getInt(1) * heightRatio);
+
+                ViewGroup.LayoutParams params = mView.getLayoutParams();
+                params.width = (int) (mProperty.getInt(3) * widthRatio);
+                params.height = (int) (mProperty.getInt(4) * heightRatio);
+                mView.setLayoutParams(params);
+            } catch (Exception e) {}
+        }
+
         @SuppressLint("NewApi")
         @Override
         public void run() {
             try {
                 Log.i(TAG, "updating view in ui runnable" + mProperty.toString());
                 Log.i(TAG, "updating view in ui runnable " + mView.toString());
 
-                float widthRatio, heightRatio;
-
                 // Ratios are index 6 & 7 on TB.updateViews, 8 & 9 on subscribe event, and 9 & 10 on TB.initPublisher
                 int ratioIndex;
                 if (mProperty.get(6) instanceof Number) {
@@ -148,12 +161,7 @@ public void run() {
 
                 widthRatio = (float) mProperty.getDouble(ratioIndex) * metrics.density;
                 heightRatio = (float) mProperty.getDouble(ratioIndex + 1) * metrics.density;
-                mView.setY(mProperty.getInt(1) * heightRatio);
-                mView.setX(mProperty.getInt(2) * widthRatio);
-                ViewGroup.LayoutParams params = mView.getLayoutParams();
-                params.height = (int) (mProperty.getInt(4) * heightRatio);
-                params.width = (int) (mProperty.getInt(3) * widthRatio);
-                mView.setLayoutParams(params);
+                setPosition();
                 updateZIndices();
             } catch (Exception e) {
                 Log.i(TAG, "error when trying to retrieve properties while resizing properties");
@@ -655,6 +663,30 @@ public boolean execute(String action, JSONArray args, CallbackContext callbackCo
                     cordova.getActivity().runOnUiThread(runsub);
                 }
             }
+        } else if (action.equals("hasStatusBarPlugin")) {
+            // Currently only needed for iOS, but for the sake of sanity we include it here aswell.
+        } else if (action.equals("updateCamera")) {
+            int top = args.getInt(1);
+            int left = args.getInt(2);
+            int width = args.getInt(3);
+            int height = args.getInt(4);
+
+            if (args.getString(0).equals("TBPublisher") && myPublisher != null && sessionConnected) {
+                myPublisher.mProperty.put(1, top);
+                myPublisher.mProperty.put(2, left);
+                myPublisher.mProperty.put(3, width);
+                myPublisher.mProperty.put(4, height);
+
+                myPublisher.setPosition();
+            } else {
+                RunnableSubscriber runsub = subscriberCollection.get(args.getString(0));
+                runsub.mProperty.put(1, top);
+                runsub.mProperty.put(2, left);
+                runsub.mProperty.put(3, width);
+                runsub.mProperty.put(4, height);
+
+                runsub.setPosition();
+            }
         } else if (action.equals("exceptionHandler")) {
 
         }

src/ios/OpenTokPlugin.m

@@ -17,6 +17,7 @@ @implementation OpenTokPlugin{
     NSMutableDictionary *callbackList;
     NSString *apiKey;
     NSString *sessionId;
+    Boolean statusBarPlugin;
     NSMutableDictionary *observersDictionary;
 }
 
@@ -29,6 +30,7 @@ -(void) pluginInitialize{
     [self.webView setOpaque:false];
     [self.webView setBackgroundColor:UIColor.clearColor];
 
+    statusBarPlugin = true;
     callbackList = [[NSMutableDictionary alloc] init];
 }
 - (void)addEvent:(CDVInvokedUrlCommand*)command{
@@ -166,8 +168,9 @@ - (void)initPublisher:(CDVInvokedUrlCommand *)command{
     [_publisher setPublishAudio:bpubAudio];
     [_publisher setPublishVideo:bpubVideo];
     [_publisher setAudioFallbackEnabled:baudioFallbackEnabled];
-    [self.webView.scrollView addSubview:_publisher.view];
-    [_publisher.view setFrame:CGRectMake(left, top, width, height)];
+    [self.webView.superview addSubview:_publisher.view];
+
+    [self setPosition: @"TBPublisher" top: top left: left width: width height: height];
 
     // Set depth location of camera view based on CSS z-index.
     _publisher.view.layer.zPosition = zIndex;
@@ -189,17 +192,19 @@ - (void)updateView:(CDVInvokedUrlCommand*)command{
     int width = [[command.arguments objectAtIndex:3] intValue];
     int height = [[command.arguments objectAtIndex:4] intValue];
     int zIndex = [[command.arguments objectAtIndex:5] intValue];
+
     if ([sid isEqualToString:@"TBPublisher"]) {
         NSLog(@"The Width is: %d", width);
-        _publisher.view.frame = CGRectMake(left, top, width, height);
+        // Reposition the video feeds!
+        [self setPosition: sid top: top left: left width: width height: height];
 
         // Set depth location of camera view based on CSS z-index.
         _publisher.view.layer.zPosition = zIndex;
 
         // If the zIndex is 0(default) bring the view to the top, last one wins.
         // See: https://github.com/saghul/cordova-plugin-iosrtc/blob/5b6a180b324c8c9bac533fa481a457b74183c740/src/PluginMediaStreamRenderer.swift#L191
         if(zIndex == 0) {
-            [self.webView.scrollView bringSubviewToFront:_publisher.view];
+            [self.webView.superview bringSubviewToFront:_publisher.view];
         }
     }
 
@@ -208,15 +213,15 @@ - (void)updateView:(CDVInvokedUrlCommand*)command{
 
     if (streamInfo) {
         // Reposition the video feeds!
-        streamInfo.view.frame = CGRectMake(left, top, width, height);
+        [self setPosition: sid top: top left: left width: width height: height];
 
         // Set depth location of camera view based on CSS z-index.
         streamInfo.view.layer.zPosition = zIndex;
 
         // If the zIndex is 0(default) bring the view to the top, last one wins.
         // See: https://github.com/saghul/cordova-plugin-iosrtc/blob/5b6a180b324c8c9bac533fa481a457b74183c740/src/PluginMediaStreamRenderer.swift#L191
         if(zIndex == 0) {
-            [self.webView.scrollView bringSubviewToFront:_publisher.view];
+            [self.webView.superview bringSubviewToFront:_publisher.view];
         }
     }
 
@@ -225,6 +230,35 @@ - (void)updateView:(CDVInvokedUrlCommand*)command{
     //[self.commandDelegate sendPluginResult:callbackResult toSuccessCallbackString:command.callbackId];
     [self.commandDelegate sendPluginResult:callbackResult callbackId:command.callbackId];
 }
+- (void)hasStatusBarPlugin:(CDVInvokedUrlCommand*)command{
+    statusBarPlugin = [[command.arguments objectAtIndex:0] boolValue];
+}
+- (void)updateCamera:(CDVInvokedUrlCommand*)command{
+    NSString* sid = [command.arguments objectAtIndex:0];
+    int top = [[command.arguments objectAtIndex:1] intValue];
+    int left = [[command.arguments objectAtIndex:2] intValue];
+    int width = [[command.arguments objectAtIndex:3] intValue];
+    int height = [[command.arguments objectAtIndex:4] intValue];
+
+    [self setPosition: sid top: top left: left width: width height: height];
+}
+- (void)setPosition:(NSString*)sid top:(int)top left:(int)left width:(int)width height:(int)height {
+    int offsetTop = 20;
+    if (statusBarPlugin) {
+        // We set the offsetTop to the top position of the webView because the StatusBarPlugin changes the top position to the proper offset.
+        offsetTop = self.webView.frame.origin.y;
+    } else if ([UIApplication sharedApplication].isStatusBarHidden) {
+        offsetTop = 0;
+    }
+
+    CGRect frame = CGRectMake(left, top + offsetTop, width, height);
+    if ([sid isEqualToString:@"TBPublisher"]) {
+        _publisher.view.frame = frame;
+    } else {
+        OTSubscriber* streamInfo = [subscriberDictionary objectForKey:sid];
+        streamInfo.view.frame = frame;
+    }
+}
 
 #pragma mark Publisher Methods
 - (void)publishAudio:(CDVInvokedUrlCommand*)command{
@@ -366,7 +400,7 @@ - (void)subscribe:(CDVInvokedUrlCommand*)command{
     // Set depth location of camera view based on CSS z-index.
     sub.view.layer.zPosition = zIndex;
 
-    [self.webView.scrollView addSubview:sub.view];
+    [self.webView.superview addSubview:sub.view];
 
     // Return to JS event handler
     CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];

src/js/OT.coffee

@@ -59,3 +59,6 @@ window.addEventListener "orientationchange", (->
   ), 1000
   return
 ), false
+document.addEventListener "deviceready", (->
+  Cordova.exec(TBSuccess, TBError, OTPlugin, "hasStatusBarPlugin", [window.hasOwnProperty("StatusBar")] )
+), false

src/js/OTHelpers.coffee

@@ -10,20 +10,7 @@ streamElements = {} # keep track of DOM elements for each stream
 getPosition = (pubDiv) ->
   # Get the position of element
   if !pubDiv then return {}
-  computedStyle = if window.getComputedStyle then getComputedStyle(pubDiv, null) else {}
-  width = pubDiv.offsetWidth
-  height = pubDiv.offsetHeight
-  curtop = pubDiv.offsetTop
-  curleft = pubDiv.offsetLeft
-  while(pubDiv = pubDiv.offsetParent)
-    curleft += pubDiv.offsetLeft
-    curtop += pubDiv.offsetTop
-  return {
-    top:curtop
-    left:curleft
-    width:width
-    height:height
-  }
+  return pubDiv.getBoundingClientRect()
 
 replaceWithVideoStream = (element, streamId, properties) ->
   typeClass = if streamId == PublisherStreamId then PublisherTypeClass else SubscriberTypeClass
@@ -131,3 +118,11 @@ OTReplacePublisher = ()->
 
 pdebug = (msg, data) ->
   console.log "JS Lib: #{msg} - ", data
+
+OTOnScrollEvent = (e) ->
+  target = e.target;
+  videos = target.querySelectorAll('[data-streamid]')
+  if(videos)
+    for video in videos
+      position = getPosition(video)
+      Cordova.exec(TBSuccess, TBError, OTPlugin, "updateCamera", [video.getAttribute('data-streamid'), position.top, position.left, position.width, position.height] )

src/js/OTSession.coffee

@@ -174,12 +174,16 @@ class TBSession
     delete( @connections[ connection.connectionId] )
     return @
   sessionConnected: (event) =>
+    document.addEventListener('scroll', OTOnScrollEvent, true);
+    pdebug "sessionConnectedHandler", event
     @dispatchEvent(new TBEvent("sessionConnected"))
     @connection = new TBConnection( event.connection )
     @connections[event.connection.connectionId] = @connection
     event = null
     return @
   sessionDisconnected: (event) =>
+    document.removeEventListener('scroll', OTOnScrollEvent);
+    pdebug "sessionDisconnected event", event
     @alreadyPublishing = false
     sessionDisconnectedEvent = new TBEvent("sessionDisconnected")
     sessionDisconnectedEvent.reason = event.reason

www/opentok.js

@@ -58,6 +58,10 @@ window.addEventListener("orientationchange", (function() {
   }), 1000);
 }), false);
 
+document.addEventListener("ondeviceready", (function() {
+  return Cordova.exec(TBSuccess, TBError, OTPlugin, "hasStatusBarPlugin", [window.hasOwnProperty("StatusBar")]);
+}), false);
+
 var TBConnection;
 
 TBConnection = (function() {
@@ -161,30 +165,15 @@ TBEvent = (function() {
 
 })();
 
-var OTPublisherError, OTReplacePublisher, TBError, TBGenerateDomHelper, TBGetScreenRatios, TBGetZIndex, TBSuccess, TBUpdateObjects, getPosition, pdebug, replaceWithVideoStream, streamElements;
+var OTOnScrollEvent, OTPublisherError, OTReplacePublisher, TBError, TBGenerateDomHelper, TBGetScreenRatios, TBGetZIndex, TBSuccess, TBUpdateObjects, getPosition, pdebug, replaceWithVideoStream, streamElements;
 
 streamElements = {};
 
 getPosition = function(pubDiv) {
-  var computedStyle, curleft, curtop, height, width;
   if (!pubDiv) {
     return {};
   }
-  computedStyle = window.getComputedStyle ? getComputedStyle(pubDiv, null) : {};
-  width = pubDiv.offsetWidth;
-  height = pubDiv.offsetHeight;
-  curtop = pubDiv.offsetTop;
-  curleft = pubDiv.offsetLeft;
-  while ((pubDiv = pubDiv.offsetParent)) {
-    curleft += pubDiv.offsetLeft;
-    curtop += pubDiv.offsetTop;
-  }
-  return {
-    top: curtop,
-    left: curleft,
-    width: width,
-    height: height
-  };
+  return pubDiv.getBoundingClientRect();
 };
 
 replaceWithVideoStream = function(element, streamId, properties) {
@@ -317,6 +306,21 @@ pdebug = function(msg, data) {
   return console.log("JS Lib: " + msg + " - ", data);
 };
 
+OTOnScrollEvent = function(e) {
+  var position, target, video, videos, _i, _len, _results;
+  target = e.target;
+  videos = target.querySelectorAll('[data-streamid]');
+  if (videos) {
+    _results = [];
+    for (_i = 0, _len = videos.length; _i < _len; _i++) {
+      video = videos[_i];
+      position = getPosition(video);
+      _results.push(Cordova.exec(TBSuccess, TBError, OTPlugin, "updateCamera", [video.getAttribute('data-streamid'), position.top, position.left, position.width, position.height]));
+    }
+    return _results;
+  }
+};
+
 var TBPublisher,
   __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
@@ -764,6 +768,8 @@ TBSession = (function() {
   };
 
   TBSession.prototype.sessionConnected = function(event) {
+    document.addEventListener('scroll', OTOnScrollEvent, true);
+    pdebug("sessionConnectedHandler", event);
     this.dispatchEvent(new TBEvent("sessionConnected"));
     this.connection = new TBConnection(event.connection);
     this.connections[event.connection.connectionId] = this.connection;
@@ -773,6 +779,8 @@ TBSession = (function() {
 
   TBSession.prototype.sessionDisconnected = function(event) {
     var sessionDisconnectedEvent;
+    document.removeEventListener('scroll', OTOnScrollEvent);
+    pdebug("sessionDisconnected event", event);
     this.alreadyPublishing = false;
     sessionDisconnectedEvent = new TBEvent("sessionDisconnected");
     sessionDisconnectedEvent.reason = event.reason;