Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

opentok-angular

Package Overview
Dependencies
Maintainers
2
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

opentok-angular - npm Package Compare versions

Comparing version 0.4.2 to 1.1.0

browserifyDemo.html

4

bower.json
{
"name": "opentok-angular",
"main": "opentok-angular.js",
"version": "0.4.2",
"version": "1.1.0",
"homepage": "https://github.com/aullman/OpenTok-Angular",

@@ -25,3 +25,3 @@ "authors": [

"dependencies": {
"opentok-layout-js": "~0.1.0",
"opentok-layout-js": "^0.3.0",
"angular": "~1.3.10",

@@ -28,0 +28,0 @@ "jquery": "~2.1.0"

var gulp = require('gulp'),
jshint = require('gulp-jshint'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify'),
bower = require('gulp-bower');
uglify = require('gulp-uglify');
gulp.task('bower', function() {
return bower();
});
gulp.task('default', ['bower'], function() {
gulp.task('default', function() {
gulp.src('opentok-angular.js')

@@ -13,0 +8,0 @@ .pipe(jshint())

@@ -19,6 +19,6 @@ // Karma configuration

'https://static.opentok.com/webrtc/v2.2/js/opentok.js',
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/opentok-layout-js/opentok-layout.js',
'node_modules/jquery/dist/jquery.js',
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/opentok-layout-js/opentok-layout.js',
'opentok-angular.js',

@@ -25,0 +25,0 @@ 'tests/**/*spec.js'

@@ -11,10 +11,23 @@ /*!

if (!window.TB) throw new Error('You must include the TB library before the TB_Angular library');
if (!window.OT) throw new Error('You must include the OT library before the OT_Angular library');
angular.module('opentok', [])
.factory('TB', function() {
return TB;
var ng;
if (typeof angular === 'undefined' && typeof require !== 'undefined') {
ng = require('angular');
} else {
ng = angular;
}
var initLayoutContainer;
if (!window.hasOwnProperty('initLayoutContainer') && typeof require !== 'undefined') {
initLayoutContainer = require('opentok-layout-js').initLayoutContainer;
} else {
initLayoutContainer = window.initLayoutContainer;
}
ng.module('opentok', [])
.factory('OT', function() {
return OT;
})
.factory('OTSession', ['TB', '$rootScope',
function(TB, $rootScope) {
.factory('OTSession', ['OT', '$rootScope',
function(OT, $rootScope) {
var OTSession = {

@@ -25,3 +38,3 @@ streams: [],

init: function(apiKey, sessionId, token, cb) {
this.session = TB.initSession(apiKey, sessionId);
this.session = OT.initSession(apiKey, sessionId);

@@ -68,8 +81,8 @@ OTSession.session.on({

};
TB.$.eventing(OTSession);
OT.$.eventing(OTSession);
return OTSession;
}
])
.directive('otLayout', ['$window', '$parse', 'TB', 'OTSession',
function($window, $parse, TB, OTSession) {
.directive('otLayout', ['$window', '$parse', 'OT', 'OTSession',
function($window, $parse, OT, OTSession) {
return {

@@ -79,3 +92,3 @@ restrict: 'E',

var props = $parse(attrs.props)();
var container = TB.initLayoutContainer(element[0], props);
var container = initLayoutContainer(element[0], props);
var layout = function() {

@@ -112,6 +125,6 @@ container.layout();

var props = scope.props() || {};
props.width = props.width ? props.width : angular.element(element).width();
props.height = props.height ? props.height : angular.element(element).height();
var oldChildren = angular.element(element).children();
scope.publisher = TB.initPublisher(attrs.apikey || OTSession.session.apiKey,
props.width = props.width ? props.width : ng.element(element).width();
props.height = props.height ? props.height : ng.element(element).height();
var oldChildren = ng.element(element).children();
scope.publisher = OT.initPublisher(attrs.apikey || OTSession.session.apiKey,
element[0], props, function(err) {

@@ -121,5 +134,5 @@ if (err) {

}
// Make transcluding work manually by putting the children back in there
angular.element(element).append(oldChildren);
});
// Make transcluding work manually by putting the children back in there
ng.element(element).append(oldChildren);
scope.publisher.on({

@@ -136,3 +149,3 @@ accessDenied: function() {

accessAllowed: function() {
angular.element(element).addClass('allowed');
ng.element(element).addClass('allowed');
scope.$emit('otAccessAllowed');

@@ -182,5 +195,5 @@ },

props = scope.props() || {};
props.width = props.width ? props.width : angular.element(element).width();
props.height = props.height ? props.height : angular.element(element).height();
var oldChildren = angular.element(element).children();
props.width = props.width ? props.width : ng.element(element).width();
props.height = props.height ? props.height : ng.element(element).height();
var oldChildren = ng.element(element).children();
var subscriber = OTSession.session.subscribe(stream, element[0], props, function(err) {

@@ -195,3 +208,3 @@ if (err) {

// Make transcluding work manually by putting the children back in there
angular.element(element).append(oldChildren);
ng.element(element).append(oldChildren);
scope.$on('$destroy', function() {

@@ -198,0 +211,0 @@ OTSession.session.unsubscribe(subscriber);

@@ -10,2 +10,2 @@ /*!

**/
if(!window.TB)throw new Error("You must include the TB library before the TB_Angular library");angular.module("opentok",[]).factory("TB",function(){return TB}).factory("OTSession",["TB","$rootScope",function(e,n){var i={streams:[],connections:[],publishers:[],init:function(t,s,o,r){this.session=e.initSession(t,s),i.session.on({sessionConnected:function(){i.publishers.forEach(function(e){i.session.publish(e)})},streamCreated:function(e){n.$apply(function(){i.streams.push(e.stream)})},streamDestroyed:function(e){n.$apply(function(){i.streams.splice(i.streams.indexOf(e.stream),1)})},sessionDisconnected:function(){n.$apply(function(){i.streams.splice(0,i.streams.length),i.connections.splice(0,i.connections.length)})},connectionCreated:function(e){n.$apply(function(){i.connections.push(e.connection)})},connectionDestroyed:function(e){n.$apply(function(){i.connections.splice(i.connections.indexOf(e.connection),1)})}}),this.session.connect(o,function(e){r&&r(e,i.session)}),this.trigger("init")}};return e.$.eventing(i),i}]).directive("otLayout",["$window","$parse","TB","OTSession",function(e,n,i,t){return{restrict:"E",link:function(s,o,r){var c=n(r.props)(),u=i.initLayoutContainer(o[0],c),a=function(){u.layout(),s.$emit("otLayoutComplete")};s.$watch(function(){return o.children().length},a),e.addEventListener("resize",a),s.$on("otLayout",a);var l=function(){t.session.on("streamPropertyChanged",function(e){"videoDimensions"===e.changedProperty&&a()})};t.session?l():t.on("init",l)}}}]).directive("otPublisher",["OTSession",function(e){return{restrict:"E",scope:{props:"&"},link:function(n,i,t){var s=n.props()||{};s.width=s.width?s.width:angular.element(i).width(),s.height=s.height?s.height:angular.element(i).height();var o=angular.element(i).children();n.publisher=TB.initPublisher(t.apikey||e.session.apiKey,i[0],s,function(e){e&&n.$emit("otPublisherError",e,n.publisher),angular.element(i).append(o)}),n.publisher.on({accessDenied:function(){n.$emit("otAccessDenied")},accessDialogOpened:function(){n.$emit("otAccessDialogOpened")},accessDialogClosed:function(){n.$emit("otAccessDialogClosed")},accessAllowed:function(){angular.element(i).addClass("allowed"),n.$emit("otAccessAllowed")},loaded:function(){n.$emit("otLayout")},streamCreated:function(){n.$emit("otStreamCreated")},streamDestroyed:function(){n.$emit("otStreamDestroyed")}}),n.$on("$destroy",function(){e.session?e.session.unpublish(n.publisher):n.publisher.destroy(),e.publishers=e.publishers.filter(function(e){return e!==n.publisher}),n.publisher=null}),e.session&&(e.session.connected||e.session.isConnected&&e.session.isConnected())&&e.session.publish(n.publisher,function(e){e&&n.$emit("otPublisherError",e,n.publisher)}),e.publishers.push(n.publisher)}}}]).directive("otSubscriber",["OTSession",function(e){return{restrict:"E",scope:{stream:"=",props:"&"},link:function(n,i){var t=n.stream,s=n.props()||{};s.width=s.width?s.width:angular.element(i).width(),s.height=s.height?s.height:angular.element(i).height();var o=angular.element(i).children(),r=e.session.subscribe(t,i[0],s,function(e){e&&n.$emit("otSubscriberError",e,r)});r.on("loaded",function(){n.$emit("otLayout")}),angular.element(i).append(o),n.$on("$destroy",function(){e.session.unsubscribe(r)})}}}]);
if(!window.OT)throw new Error("You must include the OT library before the OT_Angular library");var ng;ng="undefined"==typeof angular&&"undefined"!=typeof require?require("angular"):angular;var initLayoutContainer;initLayoutContainer=window.hasOwnProperty("initLayoutContainer")||"undefined"==typeof require?window.initLayoutContainer:require("opentok-layout-js").initLayoutContainer,ng.module("opentok",[]).factory("OT",function(){return OT}).factory("OTSession",["OT","$rootScope",function(e,n){var i={streams:[],connections:[],publishers:[],init:function(t,o,s,r){this.session=e.initSession(t,o),i.session.on({sessionConnected:function(){i.publishers.forEach(function(e){i.session.publish(e)})},streamCreated:function(e){n.$apply(function(){i.streams.push(e.stream)})},streamDestroyed:function(e){n.$apply(function(){i.streams.splice(i.streams.indexOf(e.stream),1)})},sessionDisconnected:function(){n.$apply(function(){i.streams.splice(0,i.streams.length),i.connections.splice(0,i.connections.length)})},connectionCreated:function(e){n.$apply(function(){i.connections.push(e.connection)})},connectionDestroyed:function(e){n.$apply(function(){i.connections.splice(i.connections.indexOf(e.connection),1)})}}),this.session.connect(s,function(e){r&&r(e,i.session)}),this.trigger("init")}};return e.$.eventing(i),i}]).directive("otLayout",["$window","$parse","OT","OTSession",function(e,n,i,t){return{restrict:"E",link:function(i,o,s){var r=n(s.props)(),c=initLayoutContainer(o[0],r),u=function(){c.layout(),i.$emit("otLayoutComplete")};i.$watch(function(){return o.children().length},u),e.addEventListener("resize",u),i.$on("otLayout",u);var a=function(){t.session.on("streamPropertyChanged",function(e){"videoDimensions"===e.changedProperty&&u()})};t.session?a():t.on("init",a)}}}]).directive("otPublisher",["OTSession",function(e){return{restrict:"E",scope:{props:"&"},link:function(n,i,t){var o=n.props()||{};o.width=o.width?o.width:ng.element(i).width(),o.height=o.height?o.height:ng.element(i).height();var s=ng.element(i).children();n.publisher=OT.initPublisher(t.apikey||e.session.apiKey,i[0],o,function(e){e&&n.$emit("otPublisherError",e,n.publisher)}),ng.element(i).append(s),n.publisher.on({accessDenied:function(){n.$emit("otAccessDenied")},accessDialogOpened:function(){n.$emit("otAccessDialogOpened")},accessDialogClosed:function(){n.$emit("otAccessDialogClosed")},accessAllowed:function(){ng.element(i).addClass("allowed"),n.$emit("otAccessAllowed")},loaded:function(){n.$emit("otLayout")},streamCreated:function(){n.$emit("otStreamCreated")},streamDestroyed:function(){n.$emit("otStreamDestroyed")}}),n.$on("$destroy",function(){e.session?e.session.unpublish(n.publisher):n.publisher.destroy(),e.publishers=e.publishers.filter(function(e){return e!==n.publisher}),n.publisher=null}),e.session&&(e.session.connected||e.session.isConnected&&e.session.isConnected())&&e.session.publish(n.publisher,function(e){e&&n.$emit("otPublisherError",e,n.publisher)}),e.publishers.push(n.publisher)}}}]).directive("otSubscriber",["OTSession",function(e){return{restrict:"E",scope:{stream:"=",props:"&"},link:function(n,i){var t=n.stream,o=n.props()||{};o.width=o.width?o.width:ng.element(i).width(),o.height=o.height?o.height:ng.element(i).height();var s=ng.element(i).children(),r=e.session.subscribe(t,i[0],o,function(e){e&&n.$emit("otSubscriberError",e,r)});r.on("loaded",function(){n.$emit("otLayout")}),ng.element(i).append(s),n.$on("$destroy",function(){e.session.unsubscribe(r)})}}}]);
{
"name": "opentok-angular",
"version": "0.4.2",
"version": "1.1.0",
"description": "Angular module for OpenTok",
"main": "opentok-angular.js",
"dependencies": {
"gulp": "~3.5.5"
"angular": "^1.4.8",
"opentok-layout-js": "^0.4.1"
},
"devDependencies": {
"codeclimate-test-reporter": "0.0.4",
"gulp": "~3.5.5",
"gulp-bower": "0.0.6",
"gulp-jshint": "~1.5.0",
"gulp-rename": "~1.1.0",
"gulp-uglify": "~0.2.1",
"karma": "^0.12.22",
"codeclimate-test-reporter": "0.0.4",
"karma-chrome-launcher": "^0.1.4",
"karma-coverage": "^0.2.7",
"karma-firefox-launcher": "^0.1.3",
"karma-jasmine": "~0.2.0"
"karma-jasmine": "~0.2.0",
"angular-mocks": "~1.4.8",
"jquery": "~2.2.0",
"karma": "^0.12.22"
},
"scripts": {
"test": "node node_modules/karma/bin/karma start karma.conf.js --single-run --browsers Firefox",
"postinstall": "./node_modules/gulp/bin/gulp.js"
"test": "karma start karma.conf.js --single-run --browsers Chrome"
},

@@ -26,0 +27,0 @@ "repository": {

@@ -16,6 +16,16 @@ [![Build Status](https://travis-ci.org/aullman/OpenTok-Angular.svg?branch=master)](https://travis-ci.org/aullman/OpenTok-Angular)

## Usage
## Installing
This component can be installed using [bower](http://bower.io/). Simply run `bower install opentok-angular`. Or you can clone this repo and include the `opentok-angular.min.js` file in your page.
### npm
`npm install opentok-angular`
### Bower
This component can be installed using [bower](http://bower.io/). Simply run `bower install opentok-angular`.
### manually
clone this repo and include the `opentok-angular.min.js` file in your page.
## Running the demo

@@ -80,3 +90,3 @@

The publisher directive uses the power of Angular directives to allow you to define an OpenTok publisher directly in your DOM. This publisher creates a standalone publisher using TB.initPublisher and if you pass a reference to a session then session.publish will be called
when the publisher is ready. Alternatively you can pass a reference to this publisher to the
when the publisher is ready. Alternatively you can pass a reference to this publisher to the
ot-session directive and session.publish(publisher) will be called when the session connects.

@@ -133,4 +143,4 @@

```html
<ot-subscriber ng-repeat="stream in streams"
stream="stream"
<ot-subscriber ng-repeat="stream in streams"
stream="stream"
props="{style: {nameDisplayMode: 'off'}}">

@@ -167,5 +177,5 @@ </ot-subscriber>

<ot-layout props="{animate:true}">
<ot-subscriber ng-repeat="stream in streams"
stream="stream"
session="session"
<ot-subscriber ng-repeat="stream in streams"
stream="stream"
session="session"
props="{style: {nameDisplayMode: 'off'}}">

@@ -172,0 +182,0 @@ </ot-subscriber>

@@ -151,4 +151,4 @@ describe('opentok-angular', function () {

$window = _$window_;
var oldInitLayoutContainer = OT.initLayoutContainer;
OT.initLayoutContainer = function () {
var oldInitLayoutContainer = initLayoutContainer;
initLayoutContainer = function () {
var container = oldInitLayoutContainer.apply(this, arguments);

@@ -158,3 +158,3 @@ layout = container.layout = jasmine.createSpy('layout').and.callFake(container.layout);

};
spyOn(OT, 'initLayoutContainer').and.callThrough();
spyOn(window, 'initLayoutContainer').and.callThrough();
scope = $rootScope.$new();

@@ -170,4 +170,4 @@ element = '<ot-layout props="{animate:true}"></ot-layout>';

it('calls OT.initLayoutContainer with the right props', function () {
expect(OT.initLayoutContainer).toHaveBeenCalledWith(element[0], jasmine.objectContaining({
it('calls initLayoutContainer with the right props', function () {
expect(initLayoutContainer).toHaveBeenCalledWith(element[0], jasmine.objectContaining({
animate: true

@@ -174,0 +174,0 @@ }));

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc