From a5599667769ffbb49c1a2c25d777dd41d0f01f61 Mon Sep 17 00:00:00 2001 From: Ruhley Date: Wed, 18 Feb 2015 12:08:54 +1000 Subject: [PATCH 1/6] Update videojs.playlist.js Fitting in with [Yeoman video.js plugin generator](https://github.com/dmlap/generator-videojs-plugin) --- javascripts/videojs.playlist.js | 264 +++++++++++++++----------------- 1 file changed, 121 insertions(+), 143 deletions(-) diff --git a/javascripts/videojs.playlist.js b/javascripts/videojs.playlist.js index e605f81..645f62a 100644 --- a/javascripts/videojs.playlist.js +++ b/javascripts/videojs.playlist.js @@ -1,148 +1,126 @@ -(function() { - - videojs.plugin('playlist', function(options) { - //this.L="vjs_common_one"; - - - console.log(this); - var id=this.el().id; - - //console.log('begin playlist plugin with video id:'+id); - - //console.log(this); - //var id=this.tag.id; - //assign variables - var tracks=document.querySelectorAll("#"+id+"-vjs-playlist .vjs-track"), - trackCount=tracks.length, - player=this, - currentTrack=tracks[0], - index=0, - play=true, - onTrackSelected=options.onTrackSelected; - - //manually selecting track - for(var i=0; i=trackCount){ - //console.log('go to beginning'); - index=0; - } - else;// console.log('trigger click next track'); - tracks[index].click(); - - });// on ended - } - else;// console.log('dont play next!'); - - //track select function for onended and manual selecting tracks - var trackSelect=function(track){ - - //get new src - var src=track.getAttribute('data-src'); - index=parseInt(track.getAttribute('data-index')) || index; - //console.log('track select click src:'+src); - - if(player.techName=='youtube'){ - player.src([ - { type: type="video/youtube", src: src} - ]); +(function(videojs) { + 'use strict'; + + var defaults = { + continuous: true, + debug: false, + setTrack: 0 + }, + playlist; + + /** + * Initialize the plugin. + * @param options (optional) {object} configuration for the plugin + */ + playlist = function (options) { + var settings = videojs.util.mergeOptions(defaults, options), + player = this, + player_id = player.el().id, + tracks = document.querySelectorAll('#' + player_id + '-vjs-playlist .vjs-track'), + trackCount = tracks.length, + index = settings.setTrack, + play = true, + //track select function for onended and manual selecting tracks + trackSelect = function(track) { + // if from a click + if (track instanceof MouseEvent) { + track = this; + } + + //get new src + var src = track.getAttribute('data-src'), + type = track.getAttribute('data-type'), + index = parseInt(track.getAttribute('data-index')) || index; + + log('track select click src - ' + src); + + player.src([ + {type: type, src: src} + ]); + + if (play) { + player.play(); + } + + //remove 'currentTrack' CSS class + for(var i = 0; i < trackCount; i++){ + if (tracks[i].classList.contains('currentTrack')) { + tracks[i].className = tracks[i].className.replace(/\bcurrentTrack\b/, 'nonPlayingTrack'); + } + } + //add 'currentTrack' CSS class + track.className = track.className + ' currentTrack'; + if(typeof settings.onTrackSelected === 'function') { + settings.onTrackSelected.apply(track); + } + + }, + log = function(message) { + if (settings.debugging) { + console.log('Video.js Playlist Plugin: ', message); + } + }; + + log('begin with video id - ' + player_id); + + // manually selecting track + for (var i = 0; i < trackCount; i++){ + tracks[i].onclick = trackSelect; } - else{ - - if(player.el().firstChild.tagName=="AUDIO" || (typeof options.mediaType!='undefined' && options.mediaType=="audio") ){ - - player.src([ - { type: "audio/mp4", src: src+".m4a" }, - { type: "audio/webm", src: src+".webm" }, - { type: type="video/youtube", src: src}, - { type: "audio/ogg", src: src+".ogg" } - /*{ type: "audio/mpeg", src: src+".mp3" }, - { type: "audio/ogg", src: src+".oga" }*/ - ]); - } - else{ - //console.log("video"); - player.src([ - { type: "video/mp4", src: src+".mp4" }, - { type: type="video/youtube", src: src}, - { type: "video/webm", src: src+".webm" } - //{ type: "video/ogv", src: src+".ogv" } - ]); - } - } - - - if(play) player.play(); + // for continuous play + if(settings.continuous === true) { + log('continuous'); + + player.on('ended', function() { + log('on ended'); + + index++; + if(index >= trackCount) { + log('go to beginning'); + index = 0; + } else { + log('trigger click next track'); + tracks[index].click(); + } + }); + } else { + log('dont play next!'); + } - //remove 'currentTrack' CSS class - for(var i=0; i trackCount) { + j = 0; + } + trackSelect(tracks[j]); } - } - //add 'currentTrack' CSS class - track.className = track.className + " currentTrack"; - if(typeof onTrackSelected === 'function') onTrackSelected.apply(track); - - } - - //if want to start at track other than 1st track - if(typeof options.setTrack!='undefined' ){ - options.setTrack=parseInt(options.setTrack); - currentTrack=tracks[options.setTrack]; - index=options.setTrack; - play=false; - //console.log('options.setTrack index'+index); - trackSelect(tracks[index]); - play=true; - } - if (window.location.hash) { - var hash = window.location.hash.substring(9); - play = false; - trackSelect(tracks[hash]); - } - - var data={ - tracks: tracks, - trackCount: trackCount, - play:function(){ - return play; - }, - index:function(){ - return index; - }, - prev:function(){ - var j=index-1; - //console.log('j'+j); - if(j<0 || j>trackCount) j=0; - trackSelect(tracks[j]); - }, - next:function(){ - var j=index+1; - //console.log('j'+j); - if(j<0 || j>trackCount) j=0; - trackSelect(tracks[j]); - } + }; }; - return data; -}); -//return videojsplugin; -})(); + + // register the plugin + videojs.plugin('playlist', playlist); +})(window.videojs); From f0a4653144d60f385255a022167c21e6a70af3fb Mon Sep 17 00:00:00 2001 From: Ruhley Date: Wed, 18 Feb 2015 12:09:21 +1000 Subject: [PATCH 2/6] Update videojs.playlist.css --- stylesheets/videojs.playlist.css | 109 ++++++++++--------------------- 1 file changed, 36 insertions(+), 73 deletions(-) diff --git a/stylesheets/videojs.playlist.css b/stylesheets/videojs.playlist.css index 6ef479b..d5c7388 100755 --- a/stylesheets/videojs.playlist.css +++ b/stylesheets/videojs.playlist.css @@ -1,89 +1,52 @@ -.video-js, .vjs-control-bar{ --moz-border-top-left-radius: 5px; -border-top-left-radius: 5px; --moz-border-top-right-radius: 5px; -border-top-right-radius: 5px; --moz-border-bottom-left-radius: 0px; -border-bottom-left-radius: 0px; --moz-border-bottom-right-radius: 0px; -border-bottom-right-radius: 0px; - -} - - -/* end video.css********************************************************/ +/* wrapper */ .vjs-playlist { -width: 100%; - -background-color: -#2D2D2D; -font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; -border-bottom-left-radius:5px; -border-bottom-right-radius:5px; --webkit-border-bottom-left-radius:5px; --webkit-border-bottom-right-radius:5px; --moz-border-bottom-left-radius:5px; --moz-border-bottom-right-radius:5px; -width:25%; + width: 100%; + background-color: #2D2D2D; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } - -.vjs-track { -color:#F7F9FC; - -} -.vjs-track:hover { - color: #315B7E; +.vjs-playlist.vjs-playlist-bottom { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } - -.vjs-playlist ul{ - padding: 0; -list-style: none; +.vjs-playlist.vjs-playlist-right { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; } -.vjs-playlist ul li { - - - background-color: - #2D2D2D; - -moz-transition-property: background-color; - -webkit-transition-property: background-color; - -o-transition-property: background-color; - transition-property: background-color; - -moz-transition-duration: .4s; - -webkit-transition-duration: .4s; - -o-transition-duration: .4s; - transition-duration: .4s; - font-size:16px; - /*margin:10px;*/ +/* list */ +.vjs-playlist ul { + padding: 0; } -.vjs-playlist ul li a{ - padding:15px; - display:block; - width:100%; +/* track */ +.vjs-track { + color: #F7F9FC; + padding: 1em; + cursor: pointer; + background-color: #2D2D2D; + font-size: 16px; + transition-property: background-color; + transition-duration: .4s; + list-style: none; + display: block; + width: 100%; } -.currentTrack{ -color: gray; -} - -.currentTrack{ - background-color:#373737; +.vjs-track:hover { + color: #315B7E; + background-color: #373737; + transition-duration: .1s; + transition-property: background-color; } -.vjs-playlist ul li:hover { -background-color: -#373737; --moz-transition-property: background-color; --webkit-transition-property: background-color; --o-transition-property: background-color; -transition-property: background-color; --moz-transition-duration: .1s; --webkit-transition-duration: .1s; --o-transition-duration: .1s; -transition-duration: .1s; +/* current track */ +.currentTrack { + color: #F7F9FC; } +.currentTrack { + background-color: #474747; +} From 38426fae798aa20b4022cb1fe76efe74feec0ee5 Mon Sep 17 00:00:00 2001 From: Ruhley Date: Wed, 18 Feb 2015 12:37:42 +1000 Subject: [PATCH 3/6] Update videojs.playlist.js --- javascripts/videojs.playlist.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/javascripts/videojs.playlist.js b/javascripts/videojs.playlist.js index 645f62a..12a74c1 100644 --- a/javascripts/videojs.playlist.js +++ b/javascripts/videojs.playlist.js @@ -4,7 +4,8 @@ var defaults = { continuous: true, debug: false, - setTrack: 0 + setTrack: 0, + hash: true, }, playlist; @@ -50,13 +51,18 @@ } //add 'currentTrack' CSS class track.className = track.className + ' currentTrack'; + if(typeof settings.onTrackSelected === 'function') { settings.onTrackSelected.apply(track); } + if (!settings.hash) { + return false; + } + }, log = function(message) { - if (settings.debugging) { + if (settings.debug) { console.log('Video.js Playlist Plugin: ', message); } }; @@ -64,7 +70,7 @@ log('begin with video id - ' + player_id); // manually selecting track - for (var i = 0; i < trackCount; i++){ + for (var i = 0; i < trackCount; i++) { tracks[i].onclick = trackSelect; } @@ -88,6 +94,15 @@ log('dont play next!'); } + if (window.location.hash) { + for (var i = 0; i < trackCount; i++) { + if (tracks[i].getAttribute('href') === window.location.hash) { + index = i; + break; + } + } + } + play = false; log('setTrack - ' + index); trackSelect(tracks[index]); @@ -116,6 +131,7 @@ if(j < 0 || j > trackCount) { j = 0; } + trackSelect(tracks[j]); } }; From 7060bf13951c066eac3487d8927d484d7a0f81fe Mon Sep 17 00:00:00 2001 From: Ruhley Date: Wed, 18 Feb 2015 12:37:59 +1000 Subject: [PATCH 4/6] Update videojs.playlist.css --- stylesheets/videojs.playlist.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/stylesheets/videojs.playlist.css b/stylesheets/videojs.playlist.css index d5c7388..dc68d43 100755 --- a/stylesheets/videojs.playlist.css +++ b/stylesheets/videojs.playlist.css @@ -18,6 +18,7 @@ /* list */ .vjs-playlist ul { padding: 0; + list-style: none; } @@ -30,7 +31,6 @@ font-size: 16px; transition-property: background-color; transition-duration: .4s; - list-style: none; display: block; width: 100%; } @@ -40,6 +40,8 @@ background-color: #373737; transition-duration: .1s; transition-property: background-color; + text-decoration: none; + text-shadow: none; } /* current track */ From 42e1858766f54b0f76b6ad61dd7d201cca620749 Mon Sep 17 00:00:00 2001 From: Ruhley Date: Wed, 18 Feb 2015 12:41:03 +1000 Subject: [PATCH 5/6] Chang currentTrack class to current-track --- javascripts/videojs.playlist.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/javascripts/videojs.playlist.js b/javascripts/videojs.playlist.js index 12a74c1..a68a903 100644 --- a/javascripts/videojs.playlist.js +++ b/javascripts/videojs.playlist.js @@ -45,12 +45,12 @@ //remove 'currentTrack' CSS class for(var i = 0; i < trackCount; i++){ - if (tracks[i].classList.contains('currentTrack')) { - tracks[i].className = tracks[i].className.replace(/\bcurrentTrack\b/, 'nonPlayingTrack'); + if (tracks[i].classList.contains('current-track')) { + tracks[i].className = tracks[i].className.replace(/\bcurrent-track\b/, 'nonPlayingTrack'); } } - //add 'currentTrack' CSS class - track.className = track.className + ' currentTrack'; + //add 'current-track' CSS class + track.className = track.className + ' current-track'; if(typeof settings.onTrackSelected === 'function') { settings.onTrackSelected.apply(track); From c48aa3e2054a0fcf387f307cdb7bc3f55c773ec3 Mon Sep 17 00:00:00 2001 From: Ruhley Date: Wed, 18 Feb 2015 12:41:20 +1000 Subject: [PATCH 6/6] Chang currentTrack class to current-track --- stylesheets/videojs.playlist.css | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/stylesheets/videojs.playlist.css b/stylesheets/videojs.playlist.css index dc68d43..2c897eb 100755 --- a/stylesheets/videojs.playlist.css +++ b/stylesheets/videojs.playlist.css @@ -23,7 +23,7 @@ /* track */ -.vjs-track { +.vjs-playlist .vjs-track { color: #F7F9FC; padding: 1em; cursor: pointer; @@ -35,7 +35,7 @@ width: 100%; } -.vjs-track:hover { +.vjs-playlist .vjs-track:hover { color: #315B7E; background-color: #373737; transition-duration: .1s; @@ -45,10 +45,7 @@ } /* current track */ -.currentTrack { +.vjs-playlist .vjs-track.current-track { color: #F7F9FC; -} - -.currentTrack { background-color: #474747; }