New 0.2.0 code base

Adds support for multiple players on same view
ampervue · Nov 28, 2015 · 260c2a8 · 260c2a8
1 parent 81fa86a
commit 260c2a8
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 63 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ bower_components/
 .sass-cache/
 .idea/
 .tmp/
+index-test.html
diff --git a/README.md b/README.md
@@ -53,12 +53,12 @@ myApp.controller('mainController', ['$scope', '$log', '$sce', function($scope, $
    $scope.file = $sce.trustAsResourceUrl('http://example.com/myVideo.mp4');
 
    // Optional: Catch ng-jwplayer event for when JWPlayer is ready
-   $scope.$on('ng-jwplayer-ready', function(event) {
+   $scope.$on('ng-jwplayer-ready', function(event, args) {
 
-        $log.info('Player Ready.');
+        $log.info('Player' + args.playerId + 'Ready.');
+        // Get player from service
+        var player = jwplayerService.myPlayer[args.playerId];
    });
-
-
 ]);
 
 ~~~~
@@ -72,6 +72,28 @@ myApp.controller('mainController', ['$scope', '$log', '$sce', function($scope, $
 </jwplayer>
 ~~~~
 
+* You can instanciate multiple players
+
+~~~~
+<jwplayer ng-src="{{ file1 }}"
+          player-options="options1"
+          player-id="myPlayer1">
+</jwplayer>
+<jwplayer ng-src="{{ file2 }}"
+          player-options="options2"
+          player-id="myPlayer2">
+</jwplayer>
+~~~~
+
+### Samples
+
+* index.html shows the most basic example for a single player
+* index2.html shows how to instanciate two players on the same view
+
+### Version Changes
+
+* 0.2.0 adds support for multiple players on same view. jwplayerService.myPlayer is now an object and requires the playerID as key
+
 ### Contribute
 
 To build, use

diff --git a/index.html b/index.html
@@ -7,12 +7,12 @@
         <div ng-view>
             <div class="container">
                 <div ng-controller="mainController">
-                    <h1>{{ name }}</h1>
+                    <h1>{{ name1 }}</h1>
 
-                    <jwplayer ng-src="{{ file }}"
-                              player-options="options"
-                              player-id="myPlayer1">
+                    <jwplayer ng-src="{{ file1 }}"
+                              player-options="options1">
                     </jwplayer>
+
                 </div>
             </div>
         </div>
@@ -30,18 +30,19 @@ <h1>{{ name }}</h1>
             myApp.controller('mainController', ['$scope', '$log', '$sce', 'jwplayerService',
                 function ($scope, $log, $sce, jwplayerService) {
 
-                $scope.name = 'JWPlayer Example';
+                $scope.name1 = 'JWPlayer Player 1';
 
-                $scope.options = {
+                $scope.options1 = {
                     type: 'mp4'
                 };
 
-                $scope.file = $sce.trustAsResourceUrl('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4');
+                $scope.file1 = $sce.trustAsResourceUrl('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4');               
 
-                $scope.$on('ng-jwplayer-ready', function(event) {
+                $scope.$on('ng-jwplayer-ready', function(event, args) {
 
-                    $log.info('Player Ready. Get player using jwplayerService');
-                    jwplayerService.myPlayer.play(true);
+                    $log.info('Player ' + args.playerId + ' ready. Playing video');
+                    var player = jwplayerService.myPlayer[args.playerId];
+                    player.play(true);
                 });
 
             }]);

diff --git a/index2.html b/index2.html
@@ -0,0 +1,66 @@
+<html lang="en" ng-app="myApp">
+    <head>
+        <meta charset="utf-8">
+        <title>angular-jwplayer</title>
+    </head>
+    <body>
+        <div ng-view>
+            <div class="container">
+                <div ng-controller="mainController">
+                    <h1>{{ name1 }}</h1>
+
+                    <jwplayer ng-src="{{ file1 }}"
+                              player-options="options1"
+                              player-id="myPlayer1">
+                    </jwplayer>
+
+                    <h1>{{ name2 }}</h1>
+
+                    <jwplayer ng-src="{{ file2 }}"
+                              player-options="options2"
+                              player-id="myPlayer2">
+                    </jwplayer>
+                </div>
+            </div>
+        </div>
+
+        <script type="text/javascript" src="bower_components/angular/angular.js"></script>
+
+        <!-- Remplace xxxxxxxxx with your license code given by JWPLayer -->
+        <script src="https://content.jwplatform.com/libraries/xxxxxxxxxxxx.js"></script>
+
+        <script type="text/javascript" src="jwplayer.min.js"></script>
+
+        <script>
+
+            var myApp = angular.module('myApp', ['ng-jwplayer']);
+            myApp.controller('mainController', ['$scope', '$log', '$sce', 'jwplayerService',
+                function ($scope, $log, $sce, jwplayerService) {
+
+                $scope.name1 = 'JWPlayer Player 1';
+
+                $scope.options1 = {
+                    type: 'mp4'
+                };
+
+                $scope.file1 = $sce.trustAsResourceUrl('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4');
+
+                $scope.name2 = 'JWPlayer Player 2';
+
+                $scope.options2 = {
+                    type: 'mp4'
+                };
+
+                $scope.file2 = $sce.trustAsResourceUrl('http://techslides.com/demos/sample-videos/small.mp4');                
+
+                $scope.$on('ng-jwplayer-ready', function(event, args) {
+
+                    $log.info('Player ' + args.playerId + ' ready. Playing video');
+                    var player = jwplayerService.myPlayer[args.playerId];
+                    player.play(true);
+                });
+
+            }]);
+        </script>
+    </body>
+</html>
diff --git a/jwplayer.js b/jwplayer.js
@@ -21,30 +21,29 @@
 
     /* @ngInject */
     function JWPlayerService(jwplayer) {
+
+        this.myPlayer = {};
 
-        this.existJWPlayer = function() {
-            return (angular.isDefined(this.myPlayer) && this.myPlayer !== null);
+        this.existJWPlayer = function(id) {
+            return (angular.isDefined(this.myPlayer) && 
+                    angular.isDefined(this.myPlayer[id]) && 
+                    this.myPlayer[id] !== null);
         };
 
         this.initJWPlayer = function(id) {
 
-            id = id || 'myPlayer1';
-            if (this.existJWPlayer()) {
+            // Always delete the player, if it exists
+            this.cleanUp(id);
 
-                this.myPlayer.remove();
-                this.myPlayer = null;
-            }
-
-            this.myPlayer = jwplayer(id);
+            this.myPlayer[id] = jwplayer(id);
 
-            return this.myPlayer;
+            return this.myPlayer[id];
         };
 
-        this.cleanUp = function() {
-            if (this.existJWPlayer()) {
-
-                this.myPlayer.remove();
-                this.myPlayer = null;
+        this.cleanUp = function(id) {
+            if (this.existJWPlayer(id)) {
+                this.myPlayer[id].remove();
+                this.myPlayer[id] = null;
             }
         };
     }
@@ -65,21 +64,22 @@
         var player;
 
         var _renderJWPlayerElement = function(scope, element) {
-            var id = scope.playerId,
-                getTemplate = function (playerId) {
+            var playerId = scope.playerId || 'myPlayer1';
+            var getTemplate = function (playerId) {
                     return '<div id="' + playerId + '"></div>';
                 };
 
-            element.html(getTemplate(id));
+            element.html(getTemplate(playerId));
             $compile(element.contents())(scope);
-            player = jwplayerService.initJWPlayer(id);
+            player = jwplayerService.initJWPlayer(playerId);
             player.setup(scope.playerOptions);
 
             player.on('ready', function() {
-                $rootScope.$broadcast('ng-jwplayer-ready');
+                $rootScope.$broadcast('ng-jwplayer-ready', { 
+                    playerId: playerId 
+                 });
             });
 
-
         };
 
         return {
@@ -89,16 +89,18 @@
                 playerOptions: '='
             },
             link: function (scope, element, attrs) {
+
+                var playerId = scope.playerId || 'myPlayer1';
 
                 scope.$on('$destroy', function () {
-                    $log.debug('jwplayer onDestroy');
-                    jwplayerService.cleanUp();
+                    $log.debug('jwplayer onDestroy: ' + playerId);
+                    jwplayerService.cleanUp(playerId);
                 });
 
                 scope.$watch(function () {
                     return attrs.ngSrc;
                 }, function (value) {
-                    $log.debug('ng-src has changed: ' + value);
+                    $log.debug('ng-src(' + playerId + ') has changed: ' + value);
                     if (angular.isDefined(scope.playerOptions)) {
                         scope.playerOptions.file = value;
                         _renderJWPlayerElement(scope, element);

diff --git a/jwplayer.min.js b/jwplayer.min.js
diff --git a/src/jwplayer.directive.js b/src/jwplayer.directive.js
@@ -12,21 +12,22 @@
         var player;
 
         var _renderJWPlayerElement = function(scope, element) {
-            var id = scope.playerId,
-                getTemplate = function (playerId) {
+            var playerId = scope.playerId || 'myPlayer1';
+            var getTemplate = function (playerId) {
                     return '<div id="' + playerId + '"></div>';
                 };
 
-            element.html(getTemplate(id));
+            element.html(getTemplate(playerId));
             $compile(element.contents())(scope);
-            player = jwplayerService.initJWPlayer(id);
+            player = jwplayerService.initJWPlayer(playerId);
             player.setup(scope.playerOptions);
 
             player.on('ready', function() {
-                $rootScope.$broadcast('ng-jwplayer-ready');
+                $rootScope.$broadcast('ng-jwplayer-ready', { 
+                    playerId: playerId 
+                 });
             });
 
-
         };
 
         return {
@@ -36,16 +37,18 @@
                 playerOptions: '='
             },
             link: function (scope, element, attrs) {
+
+                var playerId = scope.playerId || 'myPlayer1';
 
                 scope.$on('$destroy', function () {
-                    $log.debug('jwplayer onDestroy');
-                    jwplayerService.cleanUp();
+                    $log.debug('jwplayer onDestroy: ' + playerId);
+                    jwplayerService.cleanUp(playerId);
                 });
 
                 scope.$watch(function () {
                     return attrs.ngSrc;
                 }, function (value) {
-                    $log.debug('ng-src has changed: ' + value);
+                    $log.debug('ng-src(' + playerId + ') has changed: ' + value);
                     if (angular.isDefined(scope.playerOptions)) {
                         scope.playerOptions.file = value;
                         _renderJWPlayerElement(scope, element);

diff --git a/src/jwplayer.service.js b/src/jwplayer.service.js
@@ -9,30 +9,29 @@
 
     /* @ngInject */
     function JWPlayerService(jwplayer) {
+
+        this.myPlayer = {};
 
-        this.existJWPlayer = function() {
-            return (angular.isDefined(this.myPlayer) && this.myPlayer !== null);
+        this.existJWPlayer = function(id) {
+            return (angular.isDefined(this.myPlayer) && 
+                    angular.isDefined(this.myPlayer[id]) && 
+                    this.myPlayer[id] !== null);
         };
 
         this.initJWPlayer = function(id) {
 
-            id = id || 'myPlayer1';
-            if (this.existJWPlayer()) {
+            // Always delete the player, if it exists
+            this.cleanUp(id);
 
-                this.myPlayer.remove();
-                this.myPlayer = null;
-            }
-
-            this.myPlayer = jwplayer(id);
+            this.myPlayer[id] = jwplayer(id);
 
-            return this.myPlayer;
+            return this.myPlayer[id];
         };
 
-        this.cleanUp = function() {
-            if (this.existJWPlayer()) {
-
-                this.myPlayer.remove();
-                this.myPlayer = null;
+        this.cleanUp = function(id) {
+            if (this.existJWPlayer(id)) {
+                this.myPlayer[id].remove();
+                this.myPlayer[id] = null;
             }
         };
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,4 @@ bower_components/ @@
     .sass-cache/
     .idea/
     .tmp/
+    index-test.html