angular-video-background - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/angular-video-background.js

 /**
-* Package: angular-video-background - v1.0.1 
+* Package: angular-video-background - v1.0.3 
 * Description: use any video as background for your html pages with many options 
-* Last build: 2017-04-06 
+* Last build: 2017-11-29 
 * @author codekraft-studio 
@@ -24,3 +24,3 @@ * @license ISC
 
-.directive('videoBackground', ['$log', '$timeout', '$document', function($log,$timeout,$document) {
+.directive('videoBackground', ['$log', '$timeout', '$document', function($log, $timeout, $document) {
 
@@ -69,5 +69,6 @@ function _link(scope, elem, attrs) {
     for( var key in scope.source ) {
-      // if property name is allowed
-      // create source element
+
+      // if property name is allowed create source element
       if( scope.source.hasOwnProperty(key) && sourceTypes.indexOf(key) > -1 ) {
+
         // create element
@@ -106,2 +107,12 @@ var tmp = document.createElement('source');
 
+      // if key up increase volume
+      if( e.which === 38 ) {
+        $video.volume = (($video.volume + 0.1) < 1) ? ($video.volume + 0.1) : 1;
+      }
+
+      // if key down decrease volume
+      if( e.which === 40 ) {
+        $video.volume = (($video.volume - 0.1) > 0) ? ($video.volume - 0.1) : 0;
+      }
+
     }
@@ -240,7 +251,11 @@
 
-        // show controls box
-        scope.$apply(function() {
-          return controlBox.removeClass('ng-hide');
-        });
+        if( attrs.showTime !== 'false' ) {
 
+          // show controls box
+          scope.$apply(function() {
+            return controlBox.removeClass('ng-hide');
+          });
+
+        }
+
       };
@@ -274,14 +289,23 @@
         $timeout.cancel(controlBoxTimeout);
-        // show element for a while
-        controlBox.removeClass('ng-hide');
 
-        controlBoxTimeout = $timeout(function() {
+        if( attrs.showTime !== 'false' ) {
 
-          // hide the control box
-          scope.$apply(function() {
-            controlBox.addClass('ng-hide');
-          });
+          // show element for a while
+          controlBox.removeClass('ng-hide');
 
-        }, 2000);
+          // TODO: Introduce the mode 'auto' and 'true' show-time true will always show time
+          // while auto will set the timeout like now
+          //
+          // Set the timeout to hide the control box
+          controlBoxTimeout = $timeout(function() {
 
+            // hide the control box
+            scope.$apply(function() {
+              controlBox.addClass('ng-hide');
+            });
+
+          }, 2000);
+
+        }
+
       };
@@ -288,0 +312,0 @@

dist/angular-video-background.min.js

 /**
-* Package: angular-video-background - v1.0.1 
+* Package: angular-video-background - v1.0.3 
 * Description: use any video as background for your html pages with many options 
-* Last build: 2017-04-06 
+* Last build: 2017-11-29 
 * @author codekraft-studio 
@@ -9,2 +9,2 @@ * @license ISC
 
-angular.module("video-background",[]).run(["$templateCache",function(a){a.put("angular-video-background/main.html",'<video></video><div class="video-controls"><span ng-bind="currentTime | number: 2"></span></div></div>')}]),angular.module("video-background").directive("videoBackground",["$log","$timeout","$document",function(a,b,c){function d(d,e,f){function g(a){27===a.which&&(m.pause(),m.currentTime=0),32!==a.which||m.endend||(m.paused?m.play():m.pause())}function h(a){37===a.which&&(a.preventDefault(),!m.paused&&m.autopause&&m.pause(),m.currentTime>0&&m.currentTime>=2?m.currentTime-=2:m.currentTime=0),39===a.which&&(a.preventDefault(),!m.paused&&m.autopause&&m.pause(),m.currentTime<m.duration?m.currentTime+=2:m.currentTime=m.duration)}if(!d.source||!angular.isObject(d.source)||!Object.keys(d.source).length)return void a.warn("VideoBg: Expected a valid object, received:",d.source);var i,j=["mp4","webm","ogg"],k=e.children().eq(0),l=e.children().eq(1),m=k[0];m.firstPlay=!0,m.firstEnd=!0,m.autopause=void 0!==f.autopause&&"false"!==f.autopause,m.loop=void 0!==f.loop&&"false"!==f.loop,m.volume=f.volume&&0<=f.volume&&f.volume<=1?f.volume:1,m.defaultPlaybackRate=f.playbackRate?f.playbackRate:1,k.addClass("ng-hide"),l.addClass("ng-hide"),k.addClass("video-background");for(var n in d.source)if(d.source.hasOwnProperty(n)&&j.indexOf(n)>-1){var o=document.createElement("source");o.src=d.source[n],o.type="video/"+n,m.appendChild(o)}else a.warn("videoBg: You passed a type",n,"that is not valid, must be one of theese: [mp4,webm,ogg]");m.onended=function(){if(m.firstEnd)return m.firstEnd=!1,!angular.isFunction(d.onFirstend)||d.$apply(d.onFirstend())},m.onloadeddata=function(){if(m.currentTime=f.startTime?f.startTime:0,d.currentTime=m.currentTime,void 0!==f.keyControls&&"false"!==f.keyControls&&(c.on("keydown",h),c.on("keyup",g),d.$on("$destroy",function(){c.off("keydown",h),c.off("keyup",g)})),k.removeClass("ng-hide"),void 0!==f.autoplay&&"false"!==f.autoplay)return m.play()},m.ontimeupdate=function(){if(f.endTime&&f.endTime<=m.currentTime)return d.currentTime=f.endTime,m.currentTime=m.duration;d.$apply(function(){return d.currentTime=m.currentTime})},m.onplay=function(){if(m.firstPlay)return m.firstPlay=!1,!angular.isFunction(d.onFirstplay)||d.$apply(d.onFirstplay())},"false"!==f.controlBox&&(m.onseeking=function(){d.$apply(function(){return l.removeClass("ng-hide")})},m.onseeked=function(){b.cancel(i),i=b(function(){d.$apply(function(){l.addClass("ng-hide")})},2e3)},m.onpause=function(){b.cancel(i),l.removeClass("ng-hide"),i=b(function(){d.$apply(function(){l.addClass("ng-hide")})},2e3)})}return{restrict:"E",scope:{source:"=",onFirstplay:"&",onFirstend:"&"},templateUrl:"angular-video-background/main.html",link:d}}]);
+angular.module("video-background",[]).run(["$templateCache",function(a){a.put("angular-video-background/main.html",'<video></video><div class="video-controls"><span ng-bind="currentTime | number: 2"></span></div></div>')}]),angular.module("video-background").directive("videoBackground",["$log","$timeout","$document",function(a,b,c){function d(d,e,f){function g(a){27===a.which&&(m.pause(),m.currentTime=0),32!==a.which||m.endend||(m.paused?m.play():m.pause()),38===a.which&&(m.volume=m.volume+.1<1?m.volume+.1:1),40===a.which&&(m.volume=m.volume-.1>0?m.volume-.1:0)}function h(a){37===a.which&&(a.preventDefault(),!m.paused&&m.autopause&&m.pause(),m.currentTime>0&&m.currentTime>=2?m.currentTime-=2:m.currentTime=0),39===a.which&&(a.preventDefault(),!m.paused&&m.autopause&&m.pause(),m.currentTime<m.duration?m.currentTime+=2:m.currentTime=m.duration)}if(!d.source||!angular.isObject(d.source)||!Object.keys(d.source).length)return void a.warn("VideoBg: Expected a valid object, received:",d.source);var i,j=["mp4","webm","ogg"],k=e.children().eq(0),l=e.children().eq(1),m=k[0];m.firstPlay=!0,m.firstEnd=!0,m.autopause=void 0!==f.autopause&&"false"!==f.autopause,m.loop=void 0!==f.loop&&"false"!==f.loop,m.volume=f.volume&&0<=f.volume&&f.volume<=1?f.volume:1,m.defaultPlaybackRate=f.playbackRate?f.playbackRate:1,k.addClass("ng-hide"),l.addClass("ng-hide"),k.addClass("video-background");for(var n in d.source)if(d.source.hasOwnProperty(n)&&j.indexOf(n)>-1){var o=document.createElement("source");o.src=d.source[n],o.type="video/"+n,m.appendChild(o)}else a.warn("videoBg: You passed a type",n,"that is not valid, must be one of theese: [mp4,webm,ogg]");m.onended=function(){if(m.firstEnd)return m.firstEnd=!1,!angular.isFunction(d.onFirstend)||d.$apply(d.onFirstend())},m.onloadeddata=function(){if(m.currentTime=f.startTime?f.startTime:0,d.currentTime=m.currentTime,void 0!==f.keyControls&&"false"!==f.keyControls&&(c.on("keydown",h),c.on("keyup",g),d.$on("$destroy",function(){c.off("keydown",h),c.off("keyup",g)})),k.removeClass("ng-hide"),void 0!==f.autoplay&&"false"!==f.autoplay)return m.play()},m.ontimeupdate=function(){if(f.endTime&&f.endTime<=m.currentTime)return d.currentTime=f.endTime,m.currentTime=m.duration;d.$apply(function(){return d.currentTime=m.currentTime})},m.onplay=function(){if(m.firstPlay)return m.firstPlay=!1,!angular.isFunction(d.onFirstplay)||d.$apply(d.onFirstplay())},"false"!==f.controlBox&&(m.onseeking=function(){"false"!==f.showTime&&d.$apply(function(){return l.removeClass("ng-hide")})},m.onseeked=function(){b.cancel(i),i=b(function(){d.$apply(function(){l.addClass("ng-hide")})},2e3)},m.onpause=function(){b.cancel(i),"false"!==f.showTime&&(l.removeClass("ng-hide"),i=b(function(){d.$apply(function(){l.addClass("ng-hide")})},2e3))})}return{restrict:"E",scope:{source:"=",onFirstplay:"&",onFirstend:"&"},templateUrl:"angular-video-background/main.html",link:d}}]);

Gruntfile.js

@@ -104,10 +104,23 @@ /*global module:false*/
         files: 'src/**/*.js',
-        tasks: ['newer:jshint', 'concat', 'ngAnnotate', 'uglify']
+        tasks: ['newer:jshint', 'concat', 'ngAnnotate', 'uglify'],
+        options: {
+          livereload: true,
+        }
       }
 
     },
+    
+    connect: {
+      server: {
+        options: {
+          port: 8000,
+          open: true,
+          hostname: 'localhost',
+          livereload: true
+        }
+      }
+    }
 
   });
 
-
   // JS Hint
@@ -124,3 +137,4 @@ grunt.loadNpmTasks('grunt-contrib-jshint');
 
-  // Watch for file changes
+  // Serve & Watch for file changes
+  grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-contrib-watch');
@@ -132,3 +146,3 @@
   // Default task.
-  grunt.registerTask('default', ['watch']);
+  grunt.registerTask('default', ['connect', 'watch']);
 
@@ -135,0 +149,0 @@ // Build task(s)

package.json

 {
   "name": "angular-video-background",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "use any video as background for your html pages with many options",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "grunt",
+    "build": "grunt build"
   },
@@ -32,2 +34,3 @@ "repository": {
     "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-connect": "^1.0.2",
     "grunt-contrib-jshint": "^1.1.0",
@@ -34,0 +37,0 @@ "grunt-contrib-uglify": "^2.3.0",

README.md

 # angular-video-background
-light module for using any video as background with many options
+> light module for using any video as background with many options
 
-The idea came when I needed to use a video as background for one website and looking around on the web I saw: [Vide](https://github.com/VodkaBears/Vide) and it works very good, but uses jQuery and I didn't like the code too much so I decided to write my own.
+### [DEMO](https://codekraft-studio.github.io/angular-video-background/)
 
-## [DEMO](http://www.codekraft.it/demos/angular-video-background/)
-
 ## Getting started:
-Download the package using npm package manager:
+Download the module using npm package manager:
 ```bash
 npm install angular-video-background
 ```
-or clone it from github.
+with bower package manager:
+```bash
+bower install --save angular-videos-background
+```
+or download it directly from GitHub.
 
@@ -42,3 +44,3 @@ Add the style to your header:
 ```
-__Note:__ you must pass a object to the attribute.
+__Note:__ you must pass a object to the __source__ attribute.
 ```html
@@ -49,2 +51,4 @@ <video-background source="myVideo"></video-background>
 
+You can optionally bind keyboard press to video controls by using __key-controls__ attribute.
+
 ---
@@ -55,3 +59,6 @@
 * __autoplay__: set the video auto play attribute (default true)
+* __volume__: an number value from 0 to 1 to set the initial volume
 * __autopause__: autopause the video in case of seeking
+* __key-controls__: if the attribute is specified will bind keyboard controls
+* __show-time__: enable or disable the current time view
 * __on-firstplay__: a callback to run when the video play for the first time
@@ -91,6 +98,18 @@ * __on-firstend__: a callback to run when the video ends for the first time
 
+### initial volume
+Start the video with initial volume of 0
+```html
+<video-background source="myVideo" volume="0"></video-background>
+```
+
 ### autoplay & autopause
 Specify a custom end time for the video, pass a number, can be a float.
 ```html
-<video-background source="myVideo" key-controls="true" autoplay autopause></video-background>
+<video-background source="myVideo" autoplay autopause></video-background>
 ```
+
+### enable keyboard controls
+Specify a custom end time for the video, pass a number, can be a float.
+```html
+<video-background source="myVideo" key-controls="true"></video-background>
+```

src/angular-video-background.directive.js

 angular.module('video-background')
 
-.directive('videoBackground', function($log,$timeout,$document) {
+.directive('videoBackground', function($log, $timeout, $document) {
 
@@ -47,5 +47,6 @@ function _link(scope, elem, attrs) {
     for( var key in scope.source ) {
-      // if property name is allowed
-      // create source element
+
+      // if property name is allowed create source element
       if( scope.source.hasOwnProperty(key) && sourceTypes.indexOf(key) > -1 ) {
+
         // create element
@@ -84,2 +85,12 @@ var tmp = document.createElement('source');
 
+      // if key up increase volume
+      if( e.which === 38 ) {
+        $video.volume = (($video.volume + 0.1) < 1) ? ($video.volume + 0.1) : 1;
+      }
+
+      // if key down decrease volume
+      if( e.which === 40 ) {
+        $video.volume = (($video.volume - 0.1) > 0) ? ($video.volume - 0.1) : 0;
+      }
+
     }
@@ -218,7 +229,11 @@
 
-        // show controls box
-        scope.$apply(function() {
-          return controlBox.removeClass('ng-hide');
-        });
+        if( attrs.showTime !== 'false' ) {
 
+          // show controls box
+          scope.$apply(function() {
+            return controlBox.removeClass('ng-hide');
+          });
+
+        }
+
       };
@@ -252,14 +267,23 @@
         $timeout.cancel(controlBoxTimeout);
-        // show element for a while
-        controlBox.removeClass('ng-hide');
 
-        controlBoxTimeout = $timeout(function() {
+        if( attrs.showTime !== 'false' ) {
 
-          // hide the control box
-          scope.$apply(function() {
-            controlBox.addClass('ng-hide');
-          });
+          // show element for a while
+          controlBox.removeClass('ng-hide');
 
-        }, 2000);
+          // TODO: Introduce the mode 'auto' and 'true' show-time true will always show time
+          // while auto will set the timeout like now
+          //
+          // Set the timeout to hide the control box
+          controlBoxTimeout = $timeout(function() {
 
+            // hide the control box
+            scope.$apply(function() {
+              controlBox.addClass('ng-hide');
+            });
+
+          }, 2000);
+
+        }
+
       };
@@ -266,0 +290,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38219

increased by9.8%

Lines of code

830

increased by10.37%

Number of lines in readme file

112

increased by20.43%

Worsened metrics

Dev dependency count

11

increased by10%

No dependency changes