ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Loop variable naming

Browse Source
This commit is contained in:
Sam Potts
2017-03-25 10:08:39 +11:00
parent 9c599884a8
commit 13973125fb
5 changed files with 81 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.js vendored
View File

@ -1 +1 @@
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;i<s;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!==r)&&(r.length||t!==n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0},controls:["play-large","play","speed-up","progress","current-time","mute","volume","captions","settings","fullscreen"]});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;i<s;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!==r)&&(r.length||t!==n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen"]});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

2
demo/src/js/main.js
View File

@ -21,7 +21,7 @@
captions: {
defaultActive: true
},
controls: ['play-large', 'play', 'speed-up', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen']
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen']
});
plyr.loadSprite('dist/demo.svg');

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

6
notes.md
View File

@ -1,14 +1,16 @@
### Todo
#### Features
- Get list of subtitles/captions available (HTML5)
- Add preferred quality option
- Update quality options on YouTube play
- Update speed options on YouTube load
- No Vimeo quality support
- No Vimeo or YouTube caption support
- Get quality options for HTML5 somehow (multi source?)
- Get list of subtitles/captions available (HTML5)
- Build templating for controls somehow
- Finish PiP
- Finish AirPlay
#### Bugs
- Fix audio setup bug
- Fix audio setup bug when calling .setup() again

127
src/js/plyr.js
View File

@ -37,9 +37,11 @@
enabled: true,
debug: false,
autoplay: false,
loop: false,
loopin: 0,
loopout: null,
loop: {
enabled: false,
start: 0,
end: null
},
seekTime: 10,
volume: 10,
volumeMin: 0,
@ -171,10 +173,10 @@
speed: 'Speed',
quality: 'Quality',
loop: 'Loop',
loopin: 'Loop in',
loopout: 'Loop out',
loopall: 'Loop all',
loopclear: 'No Loop',
loopStart: 'Loop start',
loopEnd: 'Loop end',
loopAll: 'Loop all',
loopNone: 'No Loop',
},
types: {
embed: ['youtube', 'vimeo', 'soundcloud'],
@ -1006,13 +1008,13 @@
'<li role="tab">',
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
config.i18n.quality +
'<span class="plyr__menu__value">Auto</span>',
'<span class="plyr__menu__value">{quality}</span>',
'</button>',
'</li>',
'<li role="tab">',
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-loop-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-loop" aria-expanded="false">',
config.i18n.loop +
'<span class="plyr__menu__value" data-menu="loop"></span>',
config.i18n.loop +
'<span class="plyr__menu__value" data-menu="loop">{loop}</span>',
'</button>',
'</li>',
'</ul>',
@ -1130,26 +1132,26 @@
'</button>',
'</li>',
'<li>',
'<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopall">',
config.i18n.loopall,
'<span data-loop__value="loopall"></span>',
'<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="all">',
config.i18n.loopAll,
'<span></span>',
'</button>',
'</li>',
'<li>',
'<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopin">',
config.i18n.loopin + ':&nbsp;',
'<span data-loop__value="loopin"></span>',
'<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="start">',
config.i18n.loopStart,
'<span></span>',
'</button>',
'</li>',
'<li>',
'<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopout">',
config.i18n.loopout + ':&nbsp;',
'<span data-loop__value="loopout"></span>',
'<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="end">',
config.i18n.loopEnd,
'<span></span>',
'</button>',
'</li>',
'<li>',
'<button type="button" class="plyr__control" data-plyr="loop" data-loop__type="loopclear">',
config.i18n.loopclear,
'<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="none">',
config.i18n.loopNone,
'</button>',
'</li>',
'</ul>',
@ -1765,8 +1767,8 @@
fullscreen: getElement(config.selectors.buttons.fullscreen),
settings: getElement(config.selectors.buttons.settings),
pip: getElement(config.selectors.buttons.pip),
speed: document.querySelectorAll(config.selectors.buttons.speed),
loop: document.querySelectorAll(config.selectors.buttons.loop)
speed: getElement(config.selectors.buttons.speed),
loop: getElement(config.selectors.buttons.loop)
};
// Inputs
@ -2265,7 +2267,7 @@
// https://github.com/vimeo/player.js
plyr.embed = new window.Vimeo.Player(container, {
id: parseInt(mediaId),
loop: config.loop,
loop: config.loop.enabled,
autoplay: config.autoplay,
byline: false,
portrait: false,
@ -2462,46 +2464,57 @@
}
// Toggle loop
function toggleLoop(toggle) {
if (['loopin', 'loopout', 'loopall'].indexOf(toggle) === -1) {
toggle = 'loopclear';
function toggleLoop(type) {
if (!inArray(['start', 'end', 'all'], type)) {
type = 'none';
}
var currentTime = Number(plyr.media.currentTime);
switch (toggle) {
case 'loopin':
if (config.loopout && config.loopout <= currentTime) {
config.loopout = null;
switch (type) {
case 'start':
if (config.loop.end && config.loop.end <= currentTime) {
config.loop.end = null;
}
config.loopin = currentTime;
config.loop.start = plyr.media.currentTime;
break;
case 'loopout':
if (config.loopin >= currentTime) {
case 'end':
if (config.loop.start >= currentTime) {
return;
}
config.loopout = currentTime;
config.loop.end = currentTime;
break;
case 'loopall':
config.loopin = 0;
config.loopout = plyr.media.duration - 2;
case 'all':
config.loop.start = 0;
config.loop.end = plyr.media.duration;
break;
default:
config.loopin = 0;
config.loopout = null;
config.loop.start = 0;
config.loop.end = null;
break;
}
//check if can loop
config.loop = is.number(config.loopin) && is.number(config.loopout);
var loopin = updateTimeDisplay(config.loopin, document.querySelector('[data-loop__value="loopin"]'));
var loopout = is.number(config.loopout) ? updateTimeDisplay(config.loopout + 2, document.querySelector('[data-loop__value="loopout"]')) : document.querySelector('[data-loop__value="loopout"]').innerHTML = '';
if (config.loop) {
document.querySelector('[data-menu="loop"]').innerHTML = loopin + ' - ' + loopout;
// Check if can loop
config.loop = is.number(config.loop.start) && is.number(config.loop.end);
var start = updateTimeDisplay(config.loop.start, getElement('[data-plyr-loop="start"]'));
var end = null;
if (is.number(config.loop.end)) {
// Find the <span> inside button
end = updateTimeDisplay(config.loop.end, document.querySelector('[data-loop__value="loopout"]'));
} else {
document.querySelector('[data-menu="loop"]').innerHTML = config.i18n.loopclear;
// Find the <span> inside button
//end = document.querySelector('[data-loop__value="loopout"]').innerHTML = '';
}
if (config.loop) {
//getElement('[data-menu="loop"]').innerHTML = start + ' - ' + end;
} else {
//getElement('[data-menu="loop"]').innerHTML = config.i18n.loopNone;
}
}
// Speed-up
@ -2515,6 +2528,7 @@
warn('Invalid speeds format');
return;
}
if (!is.number(speed)) {
var index = config.speeds.indexOf(config.currentSpeed);
@ -3042,10 +3056,14 @@
plyr.secs = ('0' + plyr.secs).slice(-2);
plyr.mins = ('0' + plyr.mins).slice(-2);
var txt = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
// Generate display
var display = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
// Render
element.innerHTML = txt;
return txt;
element.innerHTML = display;
// Return for looping
return display;
}
// Show the duration on metadataloaded
@ -3676,11 +3694,12 @@
// Fullscreen
proxy(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen);
// Loop
// Looping
proxy(plyr.buttons.loop, 'click', config.listeners.loop, function(event) {
var loopValue = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type');
if (['loopin', 'loopout', 'loopall', 'loopclear'].indexOf(loopValue) > -1) {
toggleLoop(loopValue);
var value = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type');
if (inArray(['start', 'end', 'all', 'none'], value)) {
toggleLoop(value);
}
});