Added support for circular video shapes (border-radius) on iOS

src/ios/OpenTokPlugin.m

@@ -72,6 +72,7 @@ - (void)initPublisher:(CDVInvokedUrlCommand *)command{
     int width = [[command.arguments objectAtIndex:3] intValue];
     int height = [[command.arguments objectAtIndex:4] intValue];
     int zIndex = [[command.arguments objectAtIndex:5] intValue];
+    int borderRadius = [[command.arguments objectAtIndex:8] intValue];
 
     NSString* publishAudio = [command.arguments objectAtIndex:6];
     if ([publishAudio isEqualToString:@"false"]) {
@@ -95,6 +96,8 @@ - (void)initPublisher:(CDVInvokedUrlCommand *)command{
     if ([cameraPosition isEqualToString:@"back"]) {
         _publisher.cameraPosition = AVCaptureDevicePositionBack;
     }
+    _publisher.view.layer.cornerRadius = borderRadius;
+    _publisher.view.clipsToBounds = borderRadius ? YES : NO;
 
     // Return to Javascript
     CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
@@ -109,21 +112,26 @@ - (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];
+    int borderRadius = [[command.arguments objectAtIndex:8] intValue];
     if ([sid isEqualToString:@"TBPublisher"]) {
         NSLog(@"The Width is: %d", width);
         _publisher.view.frame = CGRectMake(left, top, width, height);
         _publisher.view.layer.zPosition = zIndex;
+        _publisher.view.layer.cornerRadius = borderRadius;
+        _publisher.view.clipsToBounds = borderRadius ? YES : NO;
     }
-    
+
     // Pulls the subscriber object from dictionary to prepare it for update
     OTSubscriber* streamInfo = [subscriberDictionary objectForKey:sid];
-    
+
     if (streamInfo) {
         // Reposition the video feeds!
         streamInfo.view.frame = CGRectMake(left, top, width, height);
         streamInfo.view.layer.zPosition = zIndex;
+        streamInfo.view.layer.cornerRadius = borderRadius;
+        streamInfo.view.clipsToBounds = borderRadius ? YES : NO;
     }
-    
+
     CDVPluginResult* callbackResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK];
     [callbackResult setKeepCallbackAsBool:YES];
     //[self.commandDelegate sendPluginResult:callbackResult toSuccessCallbackString:command.callbackId];
@@ -218,6 +226,7 @@ - (void)subscribe:(CDVInvokedUrlCommand*)command{
     int width = [[command.arguments objectAtIndex:3] intValue];
     int height = [[command.arguments objectAtIndex:4] intValue];
     int zIndex = [[command.arguments objectAtIndex:5] intValue];
+    int borderRadius = [[command.arguments objectAtIndex:8] intValue];
 
     // Acquire Stream, then create a subscriber object and put it into dictionary
     OTStream* myStream = [streamDictionary objectForKey:sid];
@@ -236,6 +245,8 @@ - (void)subscribe:(CDVInvokedUrlCommand*)command{
     if (zIndex>0) {
         sub.view.layer.zPosition = zIndex;
     }
+    sub.view.layer.cornerRadius = borderRadius;
+    sub.view.clipsToBounds = borderRadius ? YES : NO;
     [self.webView.superview addSubview:sub.view];
 
     // Return to JS event handler

src/js/OTHelpers.coffee

@@ -75,7 +75,7 @@ TBUpdateObjects = ()->
     console.log("JS sessionId: " + streamId )
     id = e.id
     position = getPosition(id)
-    Cordova.exec(TBSuccess, TBError, OTPlugin, "updateView", [streamId, position.top, position.left, position.width, position.height, TBGetZIndex(e), ratios.widthRatio, ratios.heightRatio] )
+    Cordova.exec(TBSuccess, TBError, OTPlugin, "updateView", [streamId, position.top, position.left, position.width, position.height, TBGetZIndex(e), ratios.widthRatio, ratios.heightRatio, TBGetBorderRadius(e)] )
   return
 TBGenerateDomHelper = ->
   domId = "PubSub" + Date.now()
@@ -100,5 +100,16 @@ TBGetScreenRatios = ()->
         heightRatio: window.outerHeight / window.innerHeight
     }
 
+TBGetBorderRadius = (ele) ->
+  while( ele? )
+    val = document.defaultView.getComputedStyle(ele,null).getPropertyValue('border-radius')
+    if (val && (val.length > 1) && (val != '0px'))
+      if (val.indexOf('%') == (val.length - 1))
+        return Math.round(ele.offsetWidth * (parseFloat(val.substring(0, val.length - 1)) / 100))
+      else if (val.indexOf('px') == (val.length - 2))
+        return parseInt(val.substring(0, val.length - 2))
+    ele = ele.offsetParent
+  return 0
+
 pdebug = (msg, data) ->
   console.log "JS Lib: #{msg} - ", data

src/js/OTPublisher.coffee

@@ -25,7 +25,7 @@ class TBPublisher
     cameraName = "front"
     zIndex = TBGetZIndex(document.getElementById(@domId))
     ratios = TBGetScreenRatios()
-
+    borderRadius = TBGetBorderRadius(document.getElementById(@domId));
     if @properties?
       width = @properties.width ? position.width
       height = @properties.height ? position.height
@@ -43,7 +43,7 @@ class TBPublisher
     position = getPosition(@domId)
     TBUpdateObjects()
     OT.getHelper().eventing(@)
-    Cordova.exec(TBSuccess, TBError, OTPlugin, "initPublisher", [name, position.top, position.left, width, height, zIndex, publishAudio, publishVideo, cameraName, ratios.widthRatio, ratios.heightRatio] )
+    Cordova.exec(TBSuccess, TBError, OTPlugin, "initPublisher", [name, position.top, position.left, width, height, zIndex, publishAudio, publishVideo, cameraName, ratios.widthRatio, ratios.heightRatio, borderRadius] )
     Cordova.exec(@eventReceived, TBSuccess, OTPlugin, "addEvent", ["publisherEvents"] )
   setSession: (session) =>
     @session = session

src/js/OTSubscriber.coffee

@@ -61,8 +61,9 @@ class TBSubscriber
     obj = replaceWithVideoStream(divName, stream.streamId, {width:width, height:height})
     position = getPosition(obj.id)
     ratios = TBGetScreenRatios()
+    borderRadius = TBGetBorderRadius(element);
     pdebug "final subscriber position", position
-    Cordova.exec(TBSuccess, TBError, OTPlugin, "subscribe", [stream.streamId, position.top, position.left, width, height, zIndex, subscribeToAudio, subscribeToVideo, ratios.widthRatio, ratios.heightRatio] )
+    Cordova.exec(TBSuccess, TBError, OTPlugin, "subscribe", [stream.streamId, position.top, position.left, width, height, zIndex, subscribeToAudio, subscribeToVideo, ratios.widthRatio, ratios.heightRatio, borderRadius] )
 
   # deprecating
   removeEventListener: (event, listener) ->