From bd32f0e9b77ca556649f8e41be9e21ec9f60a39c Mon Sep 17 00:00:00 2001 From: IjzerenHein Date: Fri, 30 Oct 2015 09:08:09 +0100 Subject: [PATCH] Added support for taking the border-radius from the DOM element and applying it to the iOS overlay view (now you can make rounded videos :)) --- src/ios/OpenTokPlugin.m | 17 ++++++++++++++--- src/js/OTHelpers.coffee | 13 ++++++++++++- src/js/OTPublisher.coffee | 4 ++-- src/js/OTSubscriber.coffee | 3 ++- 4 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/ios/OpenTokPlugin.m b/src/ios/OpenTokPlugin.m index 40804288..596228ac 100644 --- a/src/ios/OpenTokPlugin.m +++ b/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 diff --git a/src/js/OTHelpers.coffee b/src/js/OTHelpers.coffee index 1099e664..e32c75e8 100644 --- a/src/js/OTHelpers.coffee +++ b/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 diff --git a/src/js/OTPublisher.coffee b/src/js/OTPublisher.coffee index 2416db7a..20b4e28d 100644 --- a/src/js/OTPublisher.coffee +++ b/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 diff --git a/src/js/OTSubscriber.coffee b/src/js/OTSubscriber.coffee index 64b2497c..f3171e80 100644 --- a/src/js/OTSubscriber.coffee +++ b/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) ->