Working

But not released to bower yet
ampervue · Sep 12, 2015 · b7f167a · b7f167a
commit b7f167a
Show file tree

Hide file tree

Showing 10 changed files with 333 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+bower_components/
+.sass-cache/
+.idea/
+.tmp/
+dist/
diff --git a/LICENCE b/LICENCE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 AmperVue, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,25 @@
+# ng-jwplayer
+
+Angular Directive to instantiate a JWPlayer. Requires a license and JS package from http://www.jwplayer.com/
+
+### Installation
+
+Assumes you have npm and bower installed
+
+~~~~
+bower install ng-jwplayer --save
+~~~~
+
+### Usage
+
+
+### Contribute
+
+To build, use
+
+~~~~
+npm install
+bower install
+gulp
+~~~~
+
diff --git a/bower.json b/bower.json
@@ -0,0 +1,17 @@
+{
+    "name": "ng-jwplayer",
+    "version": "0.0.1",
+    "main": "dist/ngjplayer.js",
+    "ignore": [
+        "src",
+        ".bowerrc",
+        ".gitignore",
+        "bower.json",
+        "gulpfile.js",
+        "package.json",
+        "README.md"
+    ],
+    "dependencies": {
+		"angular": "~1.4.0"
+    }
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,60 @@
+/**
+ *  Build Process
+ */
+
+'use strict';
+
+var gulp = require('gulp');
+var wrench = require('wrench');
+var gutil = require('gulp-util');
+var path = require('path');
+var ngAnnotate = require('gulp-ng-annotate');
+var uglify = require('gulp-uglify');
+var filter = require('gulp-filter');
+var jshint = require('gulp-jshint');
+var concat = require('gulp-concat');
+var rename = require('gulp-rename');
+var uglifySaveLicense = require('uglify-save-license');
+
+/**
+ *  Common implementation for an error handler of a Gulp plugin
+ */
+var errorHandler = function(title) {
+  'use strict';
+
+  return function(err) {
+    gutil.log(gutil.colors.red('[' + title + ']'), err.toString());
+    this.emit('end');
+  };
+};
+
+var paths = {
+  src: ['src/jwplayer.module.js', 'src/jwplayer.service.js', 'src/jwplayer.directive.js'],
+  dist: 'dist',
+  jsFile: 'jwplayer.js',
+  jsMinFile: 'jwplayer.min.js'
+};
+
+var jsFilter = filter('src/**/*.js');
+
+gulp.task('build', function() {
+  return gulp.src(paths.src)
+    .pipe(ngAnnotate())
+    .pipe(concat(paths.jsFile))
+    .pipe(gulp.dest(paths.dist))
+    .pipe(uglify({ preserveComments: uglifySaveLicense })).on('error', errorHandler('Uglify'))
+    .pipe(rename(paths.jsMinFile))
+    .pipe(gulp.dest(paths.dist));
+});
+
+// configure the jshint task
+gulp.task('jshint', function() {
+  return gulp.src(paths.src)
+    .pipe(jshint())
+    .pipe(jshint.reporter('jshint-stylish'));
+});
+
+// default
+gulp.task('default', ['build'], function() {
+
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+
+<!DOCTYPE html>
+<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>{{ name }}</h1>
+
+                <jwplayer ng-src="{{ file }}"
+                      player-options="options"
+                      player-id="myPlayer1">
+                </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="dist/jwplayer.js"></script>
+	<script>
+
+		var myApp = angular.module('myApp', ['ng-jwplayer']);
+        myApp.controller('mainController', ['$scope', '$log', '$sce', function($scope, $log, $sce) {
+
+            $scope.name = 'JWPlayer Example';
+
+            $scope.options = {
+                type: 'mp4'
+            };
+
+            $scope.file = $sce.trustAsResourceUrl('http://vjs.zencdn.net/v/oceans.mp4');
+
+		}]);
+	</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "ng-jwplayer",
+  "version": "0.0.1",
+  "author": "David Karchmer",
+  "license": "MIT",
+  "description": "Angular directive for JWPlayer",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "gulp": "~3.9.0",
+    "gulp-autoprefixer": "~2.3.1",
+    "gulp-angular-templatecache": "~1.6.0",
+    "del": "~1.2.0",
+    "lodash": "~3.9.3",
+    "gulp-csso": "~1.0.0",
+    "gulp-filter": "~2.0.2",
+    "gulp-flatten": "~0.0.4",
+    "gulp-jshint": "~1.11.0",
+    "gulp-load-plugins": "~0.10.0",
+    "gulp-size": "~1.2.1",
+    "gulp-uglify": "~1.2.0",
+    "gulp-useref": "~1.2.0",
+    "gulp-util": "~3.0.5",
+    "gulp-ng-annotate": "~1.0.0",
+    "gulp-replace": "~0.5.3",
+    "gulp-rename": "~1.2.2",
+    "gulp-rev": "~5.0.0",
+    "gulp-rev-replace": "~0.4.2",
+    "gulp-minify-html": "~1.0.3",
+    "gulp-inject": "~1.3.1",
+    "gulp-protractor": "~1.0.0",
+    "gulp-sourcemaps": "~1.5.2",
+    "gulp-sass": "~2.0.1",
+    "gulp-angular-filesort": "~1.1.1",
+    "gulp-concat": "^2.6.0",
+    "main-bower-files": "~2.8.0",
+    "merge-stream": "~0.1.7",
+    "jshint-stylish": "~2.0.0",
+    "wiredep": "~2.2.2",
+    "concat-stream": "~1.5.0",
+    "require-dir": "~0.3.0",
+    "browser-sync": "~2.7.12",
+    "browser-sync-spa": "~1.0.2",
+    "http-proxy-middleware": "~0.0.5",
+    "chalk": "~1.0.0",
+    "uglify-save-license": "~0.4.1",
+    "wrench": "~1.5.8"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  }
+}
diff --git a/src/jwplayer.directive.js b/src/jwplayer.directive.js
@@ -0,0 +1,56 @@
+
+(function() {
+    'use strict';
+
+    angular
+        .module('ng-jwplayer')
+        .directive('jwplayer', JWPlayer);
+
+    /* @ngInject */
+    function JWPlayer($compile, $log, jwplayerService) {
+
+        var player;
+
+        var _renderJWPlayerElement = function(scope, element) {
+            var id = scope.playerId,
+                getTemplate = function (playerId) {
+                    return '<div id="' + playerId + '"></div>';
+                };
+
+            element.html(getTemplate(id));
+            $compile(element.contents())(scope);
+            player = jwplayerService.initJWPlayer(id);
+            player.setup(scope.playerOptions);
+        };
+
+        return {
+            restrict: 'EC',
+            scope: {
+                playerId: '@',
+                playerOptions: '='
+            },
+            link: function (scope, element, attrs) {
+
+                scope.$on('$destroy', function () {
+                    $log.debug('jwplayer onDestroy');
+                    jwplayerService.cleanUp();
+                });
+
+                scope.$watch(function () {
+                    return attrs.ngSrc;
+                }, function (value) {
+                    $log.debug('ng-src has changed: ' + value);
+                    if (angular.isDefined(scope.playerOptions)) {
+                        scope.playerOptions.file = value;
+                        _renderJWPlayerElement(scope, element);
+                    }
+                });
+
+                if (angular.isDefined(attrs.ngSrc) && angular.isDefined(scope.playerOptions)) {
+                    scope.playerOptions.file = attrs.ngSrc;
+                    _renderJWPlayerElement(scope, element);
+                }
+            }
+        };
+    }
+})();
diff --git a/src/jwplayer.module.js b/src/jwplayer.module.js
@@ -0,0 +1,10 @@
+/**
+ * Created by David Karchmer on 9/11/15.
+ */
+(function() {
+    'use strict';
+
+    angular
+        .module('ng-jwplayer', [
+        ]);
+})();
diff --git a/src/jwplayer.service.js b/src/jwplayer.service.js
@@ -0,0 +1,41 @@
+/* global jwplayer */
+
+(function () {
+    'use strict';
+
+    angular
+        .module('ng-jwplayer')
+        .service('jwplayerService', JWPlayerService);
+
+    /* @ngInject */
+    function JWPlayerService($log) {
+
+        this.existJWPlayer = function() {
+            return (angular.isDefined(this.myPlayer) && this.myPlayer !== null);
+        };
+
+        this.initJWPlayer = function(id) {
+
+            if (this.existJWPlayer()) {
+
+                $log.debug('Instance of JWPlayer exists. Removing first');
+                this.myPlayer.remove();
+                this.myPlayer = null;
+            }
+
+            this.myPlayer = jwplayer(id);
+
+            return this.myPlayer;
+        };
+
+        this.cleanUp = function() {
+            if (this.existJWPlayer()) {
+
+                $log.debug('Removing existing JWPlayer');
+                this.myPlayer.remove();
+                this.myPlayer = null;
+            }
+        };
+    }
+
+})();