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

Merge branch 'develop' into feature/loop-events

Browse Source
This commit is contained in:
Sam Potts
2017-03-25 10:35:08 +11:00
committed by GitHub
parent 21d478d396 afa1fe9d5f
commit e21e7054ce
5 changed files with 108 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/js/plyr.js
View File

@ -37,13 +37,14 @@
enabled: true,
debug: false,
autoplay: false,
loop: false,
loopin: 0,
loopout: null,
loopKeyEvents: {
toggleLoop: 76,
loopin: 73,
loopout: 79
loop: {
enabled: false,
start: 0,
end: null,
inidicator: {
start: 0,
end: 0
}
},
seekTime: 10,
volume: 10,
@ -62,7 +63,7 @@
hideControls: true,
showPosterOnEnd: false,
disableContextMenu: true,
keyboardShorcuts: {
keyboardShortcuts: {
focused: true,
global: false
},
@ -103,7 +104,8 @@
progress: {
container: '.plyr__progress',
buffer: '.plyr__progress--buffer',
played: '.plyr__progress--played'
played: '.plyr__progress--played',
looped: '.plyr__progress-loop'
},
captions: '.plyr__captions',
currentTime: '.plyr__time--current',
@ -176,10 +178,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'],
@ -902,6 +904,7 @@
/* beautify ignore:start */
html.push(
'<span class="plyr__progress">',
'<div class="plyr__progress-loop"></div>',
'<label for="seek-{id}" class="plyr__sr-only">Seek</label>',
'<input id="seek-{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
'<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
@ -1011,13 +1014,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>',
@ -1135,26 +1138,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>',
@ -1770,8 +1773,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
@ -2270,7 +2273,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,
@ -2467,55 +2470,80 @@
}
// Toggle loop
function toggleLoop(toggle) {
if (['loopin', 'loopout', 'loopall', 'toggle'].indexOf(toggle) === -1) {
toggle = 'loopclear';
function toggleLoop(type) {
if (!inArray(['start', 'end', 'all', 'toggle'], 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 = currentTime;
config.loop.indicator.start = plyr.progress.played.value;
break;
case 'loopout':
if (config.loopin >= currentTime) {
case 'end':
if (config.loop.start >= currentTime) {
return;
}
config.loopout = currentTime;
config.loop.end = currentTime;
config.loop.indicator.end = plyr.progress.played.value;
break;
case 'loopall':
config.loopin = 0;
config.loopout = plyr.media.duration - 2;
case 'all':
config.loop.start = 0;
config.loop.end = plyr.media.duration - 2;
config.loop.indicator.start = 0;
config.loop.indicator.end = 100;
break;
case 'toggle':
if (config.loop) {
config.loopin = 0;
config.loopout = null;
config.loop.start = 0;
config.loop.end = null;
} else {
config.loopin = 0;
config.loopout = plyr.media.duration - 2;
config.loop.start = 0;
config.loop.end = plyr.media.duration - 2;
}
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) {
// TODO: Improve the design of the loop indicator and put styling in CSS where it's meant to be
//getElement('[data-menu="loop"]').innerHTML = start + ' - ' + end;
getElement(config.selectors.progress.looped).style.position = 'absolute';
getElement(config.selectors.progress.looped).style.left = config.loopinPositionPercentage + '%';
getElement(config.selectors.progress.looped).style.width = (config.loopoutPositionPercentage - config.loopinPositionPercentage) + '%';
getElement(config.selectors.progress.looped).style.background = '#ffbb00';
getElement(config.selectors.progress.looped).style.height = '3px';
getElement(config.selectors.progress.looped).style.top = '3px';
getElement(config.selectors.progress.looped).style['border-radius'] = '100px';
} else {
//getElement('[data-menu="loop"]').innerHTML = config.i18n.loopNone;
getElement(config.selectors.progress.looped).style.width = '0px';
}
}
// Speed-up
@ -2529,6 +2557,7 @@
warn('Invalid speeds format');
return;
}
if (!is.number(speed)) {
var index = config.speeds.indexOf(config.currentSpeed);
@ -3056,10 +3085,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
@ -3486,11 +3519,11 @@
}
// Keyboard shortcuts
if (config.keyboardShorcuts.focused) {
if (config.keyboardShortcuts.focused) {
var last = null;
// Handle global presses
if (config.keyboardShorcuts.global) {
if (config.keyboardShortcuts.global) {
on(window, 'keydown keyup', function(event) {
var code = getKeyCode(event),
focused = getFocusElement(),
@ -3716,11 +3749,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);
}
});