Merge pull request #10 from moay/v0.2

V0.2

README.md

@@ -1,6 +1,6 @@
 # afterglow
 
-afterglow is a tool to create fully responsive and totally awesome video players from an HTML5 video element with as little effort as possible.
+afterglow is a tool to create fully responsive and totally awesome video players from HTML5 video elements with as little effort as possible.
 
 Learn more about the project on the project website: [http://afterglowplayer.com](http://afterglowplayer.com).
 

gulpfile.js

@@ -59,7 +59,7 @@ gulp.task('build-afterglow', ['compilecomponents'], function(){
 		'./src/videojs/video.min.js',
 		]))
 	.pipe(plugins.addSrc.append([
-		'./dist/tmp/components.js',
+		'./dist/tmp/*.js',
 		'./src/videojs/plugins/videojs.hotkeys.js',
 		'./src/videojs/plugins/Youtube.js',
 		]))
@@ -81,17 +81,8 @@ gulp.task('build-afterglow', ['compilecomponents'], function(){
 
 // Task to compile ES6 components
 gulp.task('compilecomponents', function(){
-	return gulp.src([
-		'./src/videojs/components/TopControlBar.js',
-		'./src/videojs/components/LightboxCloseButton.js'
-		])
-	.pipe(plugins.browserify2({
-		fileName: 'components.js',
-		transform: require('6to5ify'),
-		options: {
-			debug: false
-		}
-	}))
+	return gulp.src('./src/videojs/components/*.js')
+	.pipe(plugins.babel())
 	.pipe(gulp.dest('dist/tmp/'));
 });
 

package.json

@@ -1,19 +1,18 @@
 {
   "name": "afterglow",
   "description": "An easy to integrate HTML5 video player with lightbox support.",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/moay/afterglow.git"
   },
   "homepage": "http://afterglowplayer.com",
   "devDependencies": {
-    "6to5ify": "^4.1.1",
     "del": "^1.2.1",
     "gulp": "^3.9.0",
     "gulp-add-src": "~0.2.0",
-    "gulp-browserify2": "0.0.2",
+    "gulp-babel": "^5.2.1",
     "gulp-bump": "^0.3.1",
     "gulp-concat": "*",
     "gulp-css2js": "*",

sandbox/index.html

@@ -18,6 +18,7 @@
 	<!-- <script type="text/javascript" src="../src/videojs/plugins/vjs.vimeo.js"></script> -->
 	<script type="text/javascript" src="../src/videojs/components/TopControlBar.js"></script>
 	<script type="text/javascript" src="../src/videojs/components/LightboxCloseButton.js"></script>
+	<script type="text/javascript" src="../src/videojs/components/ResolutionSwitchingButton.js"></script>
 	<script type="text/javascript" src="../src/videojs/plugins/Youtube.js"></script>
 	<script type="text/javascript" src="../src/videojs/plugins/videojs.hotkeys.js"></script>
 	<script type="text/javascript" src="../src/afterglow.js"></script>
@@ -42,11 +43,12 @@ <h2>Local video, single source, with poster</h2>
 	<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none" src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4"></video>
 
 	<!-- LOCAL TEST -->
-	<h2>Local video with poster, captions and subtitles</h2>
-	<video id="video-subtitles" class="afterglow" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
-		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
+	<h2>Local video with poster and resolution test</h2>
+	<video id="video-subtitles" class="afterglow" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-volume="0.7" data-autoresize="fit" preload="none">
+		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4"/>
+		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local_hd.mp4" type="video/mp4" data-quality="hd" />
 		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
-		<track kind="subtitle" src="/sandbox/text/subtitles-demo.vtt" srclang="en" label="English"></track>
+		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local_hd.webm" type="video/webm" data-quality="hd" />
 	</video>
 
 	<!-- LIGHTBOX TEST -->
@@ -55,6 +57,7 @@ <h2>Local video with poster opened in lightbox</h2>
 	<a href="#video3" class="afterglow">Open the lightbox</a>
 	<video id="video3" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
 		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
+		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local_hd.mp4" type="video/mp4" data-quality="hd" />
 		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
 	</video>
 	<!-- LOCAL TEST -->

sandbox/releasetest.html

@@ -26,6 +26,7 @@ <h2>Youtube video</h2>
 	<h2>Local video with poster</h2>
 	<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
 		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
+		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local_hd.mp4" type="video/mp4" data-quality="hd" />
 		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
 	</video>
 

src/afterglow.js

@@ -57,12 +57,21 @@ afterglow = {
 				enableNumbers: false
 			});
 
+			// Set initial volume if needed
+			if(videoel.getAttribute('data-volume') !== null){
+				var volume = parseFloat(videoel.getAttribute('data-volume'));
+				this.volume(volume);
+			}
+
 			// Fix youtube poster
-			if(afterglow.isYoutubePlayer(videoel) && !options.poster && this.tech.poster != ""){
+			if(afterglow.isYoutubePlayer(videoel) && !options.poster && this.tech_.poster != ""){
 				this.addClass('vjs-youtube-ready');
-				this.poster(this.tech.poster);
+				this.poster(this.tech_.poster);
 			}
 
+			// Add resolution switching
+			// this.controlBar.addChild("ResolutionSwitchingButton");
+
 			// Launch the callback if there is one
 			if(typeof _callback == "function"){
 				_callback(this);
@@ -273,6 +282,9 @@ afterglow = {
 					{
 						name: "progressControl"
 					},
+					{
+						name: "ResolutionSwitchingButton"
+					},
 					{
 						name: "volumeMenuButton",
 						inline:true
@@ -405,7 +417,7 @@ afterglow = {
 			}
 
 			// Adding autoclose functionality
-			if(lb_videoel.getAttribute("data-autoclose") == "true"){
+			if(videoel.getAttribute("data-autoclose") == "true"){
 				player.on('ended', function(){
 					afterglow.closeLightbox();
 				});
@@ -419,9 +431,6 @@ afterglow = {
 
 			// Add the closing button
 			var lightboxCloseButton = afterglow.getPlayer(playerid).TopControlBar.addChild("LightboxCloseButton");
-			addEventHandler(lightboxCloseButton.el_,'click tap',function(){
-				afterglow.closeLightbox();
-			});
 		});
 
 		// resize the lightbox and make it autoresize

src/lib/afterglow-lib.js

@@ -95,7 +95,6 @@ var ie = (function () {
             };
         }
     }
-
     return ret;
 }()).actualVersion;
 
@@ -110,4 +109,49 @@ var mobileDetect = {
     Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, 
     any: function() { return (mobileDetect.Android() || mobileDetect.BlackBerry() || mobileDetect.iOS() || mobileDetect.Opera() || mobileDetect.Windows()); } 
 };
-var isMobile = mobileDetect.any();
+var isMobile = mobileDetect.any();
+
+/**
+ * This extends the basic functionality of every Node. Will check if a Node has a className
+ * @param  {string}  className  The class to check for
+ * @return {Boolean}
+ */
+Node.prototype.hasClass = function (className) {
+    if (this.classList) {
+        return this.classList.contains(className);
+    } else {
+        return (-1 < this.className.indexOf(className));
+    }
+};
+
+/**
+ * This extends the basic functionality of every Node. Will add the className if not yet added.
+ * @param  {string}  className  The class to add
+ * @return {Boolean}           
+ */
+Node.prototype.addClass = function (className) {
+    if (this.classList) {
+        this.classList.add(className);
+    } else if (!this.hasClass(className)) {
+        var classes = this.className.split(" ");
+        classes.push(className);
+        this.className = classes.join(" ");
+    }
+    return this;
+};
+
+/**
+ * This extends the basic functionality of every Node. Will remove the className if not yet removed.
+ * @param  {string}  className  The class to remove
+ * @return {Boolean}           
+ */
+Node.prototype.removeClass = function (className) {
+    if (this.classList) {
+        this.classList.remove(className);
+    } else {
+        var classes = this.className.split(" ");
+        classes.splice(classes.indexOf(className), 1);
+        this.className = classes.join(" ");
+    }
+    return this;
+};

src/videojs/components/LightboxCloseButton.js

@@ -1,27 +1,37 @@
 'use strict';
 
-const VjsButton = videojs.getComponent('Button');
+const VjsLBButtonClose = videojs.getComponent('Button');
 
 /**
  * Button to close the lightbox
  *
  * @extends Button
  * @class LightboxCloseButton
- */
-class LightboxCloseButton extends VjsButton {
-
-  constructor(player, options) {
-    super(player, options);
-  }
-
-  buildCSSClass(){
-  	return 'vjs-lightbox-close-button vjs-button vjs-control';
-  }
+*/
+class LightboxCloseButton extends VjsLBButtonClose {
+
+ 	constructor(player, options) {
+ 		super(player, options);
+ 		this.on('click', this.closeClick);
+ 		this.on('tap', this.closeClick);
+ 	}
+
+ 	buildCSSClass(){
+ 		return 'vjs-lightbox-close-button vjs-button vjs-control';
+ 	}
+
+ 	/**
+ 	 * This will close afterglow's lightbox and remove the player from the DOM
+ 	 * @return {void}
+ 	 */
+ 	closeClick(){
+ 		afterglow.closeLightbox();
+ 	}
 }
 
 
 (function(){
 
-	videojs.registerComponent('LightboxCloseButton', LightboxCloseButton);
+ 	videojs.registerComponent('LightboxCloseButton', LightboxCloseButton);
 
 })();

src/videojs/components/ResolutionSwitchingButton.js

@@ -16,7 +16,7 @@ const VjsButtonResBBase = videojs.getComponent('Button');
  	}
 
  	buildCSSClass(){
- 		return 'vjs-ag-res-button vjs-control vjs-button';
+ 		return `vjs-ag-res-button ${super.buildCSSClass()}`;
  	}
 
  	/**
@@ -25,13 +25,18 @@ const VjsButtonResBBase = videojs.getComponent('Button');
  	 */
  	init(){
  		this.prepareSources();
-
- 		this.setCurrentResFromPlayer();
  		this.setResolutionsNeededFromPlayer();
+ 		if(this.resolutionsNeeded){
+	 		this.setCurrentResFromPlayer();
 
- 		this.updateButton();
- 		this.on('click',this.switchResolution);
- 		this.on('tap',this.switchResolution);
+	 		// Empty sources for not having double playing native players
+	 		this.removeSources();
+
+	 		// Bind events
+	 		this.on('click',this.switchResolution);
+	 		this.on('tap',this.switchResolution);
+	 	}
+	 	this.updateButton();
  	}
 
  	/**
@@ -71,7 +76,6 @@ const VjsButtonResBBase = videojs.getComponent('Button');
 	setResolutionsNeededFromPlayer(){
 		// Fallback
 		this.resolutionsNeeded = false;
-
 		// Real determination
 		if(typeof this.typeAndTech == 'object'){
 			var type = this.typeAndTech.type;
@@ -93,14 +97,16 @@ const VjsButtonResBBase = videojs.getComponent('Button');
 	 * @return {void}
 	 */
     removeSources(){
+    	console.log('removed sources.');
     	var videoEl = this.player_.el_.getElementsByTagName("video")[0];
 
-    	if (this.player_.techName !== "Html5" || !videoEl) return;
+    	if (this.player_.techName_ !== "Html5" || !videoEl) return;
 
     	var srcs = videoEl.getElementsByTagName("source");
     	for(var i=0;i<srcs.length;i++){
     		videoEl.removeChild(srcs[i]);
     	}
+
     }
 
     /**
@@ -139,9 +145,9 @@ const VjsButtonResBBase = videojs.getComponent('Button');
  	 * @return {[type]} [description]
  	 */
  	stopStream(){
-		switch(this.player_.techName){
+		switch(this.player_.techName_){
 			case "Flash":
-			    this.player_.tech.el_.vjs_stop();
+			    this.player_.tech_.el_.vjs_stop();
 			    break;
 		}
     }
@@ -174,13 +180,14 @@ const VjsButtonResBBase = videojs.getComponent('Button');
     	var tech;
 
     	for (var i=0,j=this.player_.options_['techOrder'];i<j.length;i++) {
-    		techName = this.player_.techName;
+    		techName = this.player_.techName_;
     		tech     = window['videojs'].getComponent(techName);
 
 	        // Check if the browser supports this technology
 	        if (tech.isSupported()) {
 				// Loop through each source object
 				for (var a=0,b=sources;a<b.length;a++) {
+
 		          	var source = b[a];
 		            // Check if source can be played with this technology
 		            if (tech['canPlaySource'](source)) {
@@ -246,10 +253,10 @@ const VjsButtonResBBase = videojs.getComponent('Button');
 	    // HTML5 tends to not recover from reloading the tech but it can
 	    // generally handle changing src. Flash generally cannot handle
 	    // changing src but can reload its tech.
-	    if (this.player_.techName === "Html5"){
+	    if (this.player_.techName_ === "Html5"){
 	        this.player_.src(new_source.src);
 	    } else {
-	        this.player_.loadTech(this.player_.techName, {src: new_source.src});
+	        this.player_.loadTech(this.player_.techName_, {src: new_source.src});
 	    }
 
 	    var _this = this;