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

Clean up

Browse Source
This commit is contained in:
Sam Potts
2017-03-25 10:47:37 +11:00
parent 4a2866d05f
commit a60868bfe8
2 changed files with 41 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

78
src/js/plyr.js
View File

@ -38,10 +38,10 @@
debug: false, debug: false,
autoplay: false, autoplay: false,
loop: { loop: {
enabled: false, active: false,
start: 0, start: 0,
end: null, end: null,
inidicator: { indicator: {
start: 0, start: 0,
end: 0 end: 0
} }
@ -2273,7 +2273,7 @@
// https://github.com/vimeo/player.js // https://github.com/vimeo/player.js
plyr.embed = new window.Vimeo.Player(container, { plyr.embed = new window.Vimeo.Player(container, {
id: parseInt(mediaId), id: parseInt(mediaId),
loop: config.loop.enabled, loop: config.loop.active,
autoplay: config.autoplay, autoplay: config.autoplay,
byline: false, byline: false,
portrait: false, portrait: false,
@ -2470,9 +2470,11 @@
} }
// Toggle loop // Toggle loop
// TODO: Set the indicator on load as user may pass loop as config
function toggleLoop(type) { function toggleLoop(type) {
if (!inArray(['start', 'end', 'all', 'toggle'], type)) { // Set default to be a true toggle
type = 'none'; if (!inArray(['start', 'end', 'all', 'none', 'toggle'], type)) {
type = 'toggle';
} }
var currentTime = Number(plyr.media.currentTime); var currentTime = Number(plyr.media.currentTime);
@ -2502,7 +2504,7 @@
break; break;
case 'toggle': case 'toggle':
if (config.loop) { if (config.loop.active) {
config.loop.start = 0; config.loop.start = 0;
config.loop.end = null; config.loop.end = null;
} else { } else {
@ -2518,7 +2520,7 @@
} }
// Check if can loop // Check if can loop
config.loop = is.number(config.loop.start) && is.number(config.loop.end); config.loop.active = is.number(config.loop.start) && is.number(config.loop.end);
var start = updateTimeDisplay(config.loop.start, getElement('[data-plyr-loop="start"]')); var start = updateTimeDisplay(config.loop.start, getElement('[data-plyr-loop="start"]'));
var end = null; var end = null;
@ -2530,19 +2532,19 @@
//end = document.querySelector('[data-loop__value="loopout"]').innerHTML = ''; //end = document.querySelector('[data-loop__value="loopout"]').innerHTML = '';
} }
if (config.loop) { if (config.loop.active) {
// TODO: Improve the design of the loop indicator and put styling in CSS where it's meant to be // 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('[data-menu="loop"]').innerHTML = start + ' - ' + end;
getElement(config.selectors.progress.looped).style.position = 'absolute'; //getElement(config.selectors.progress.looped).style.position = 'absolute';
getElement(config.selectors.progress.looped).style.left = config.loopinPositionPercentage + '%'; //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.width = (config.loopoutPositionPercentage - config.loopinPositionPercentage) + '%';
getElement(config.selectors.progress.looped).style.background = '#ffbb00'; //getElement(config.selectors.progress.looped).style.background = '#ffbb00';
getElement(config.selectors.progress.looped).style.height = '3px'; //getElement(config.selectors.progress.looped).style.height = '3px';
getElement(config.selectors.progress.looped).style.top = '3px'; //getElement(config.selectors.progress.looped).style.top = '3px';
getElement(config.selectors.progress.looped).style['border-radius'] = '100px'; //getElement(config.selectors.progress.looped).style['border-radius'] = '100px';
} else { } else {
//getElement('[data-menu="loop"]').innerHTML = config.i18n.loopNone; //getElement('[data-menu="loop"]').innerHTML = config.i18n.loopNone;
getElement(config.selectors.progress.looped).style.width = '0px'; //getElement(config.selectors.progress.looped).style.width = '0px';
} }
} }
@ -3022,8 +3024,8 @@
} }
} }
if (is.number(config.loopin) && is.number(config.loopout) && plyr.media.currentTime >= config.loopout) { if (is.number(config.loop.start) && is.number(config.loop.end) && plyr.media.currentTime >= config.loop.end) {
seek(config.loopin); seek(config.loop.start);
} }
setProgress(progress, value); setProgress(progress, value);
@ -3395,7 +3397,7 @@
if ('poster' in source) { if ('poster' in source) {
plyr.media.setAttribute('poster', source.poster); plyr.media.setAttribute('poster', source.poster);
} }
if (config.loop) { if (config.loop.active) {
plyr.media.setAttribute('loop', ''); plyr.media.setAttribute('loop', '');
} }
} }
@ -3527,12 +3529,9 @@
on(window, 'keydown keyup', function(event) { on(window, 'keydown keyup', function(event) {
var code = getKeyCode(event); var code = getKeyCode(event);
var focused = getFocusElement(); var focused = getFocusElement();
var allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67]; var allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67, 73, 76, 79];
var count = get().length; var count = get().length;
//add also to allowed the keys of looping events
allowed = allowed.concat(Object.values(config.loopKeyEvents));
// Only handle global key press if there's only one player // Only handle global key press if there's only one player
// and the key is in the allowed keys // and the key is in the allowed keys
// and if the focused element is not editable (e.g. text input) // and if the focused element is not editable (e.g. text input)
@ -3576,11 +3575,10 @@
// Reset on keyup // Reset on keyup
if (pressed) { if (pressed) {
// Which keycodes should we prevent default // Which keycodes should we prevent default
var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67]; var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67, 73, 76, 79];
var checkFocus = [38, 40]; var checkFocus = [38, 40];
var loopKeyEventsValues = Object.values(config.loopKeyEvents);
if (inArray(checkFocus, code) || inArray(loopKeyEventsValues, code)) { if (inArray(checkFocus, code)) {
var focused = getFocusElement(); var focused = getFocusElement();
if (is.htmlElement(focused) && getFocusElement().type === "radio") { if (is.htmlElement(focused) && getFocusElement().type === "radio") {
@ -3657,27 +3655,17 @@
toggleCaptions(); toggleCaptions();
} }
break; break;
}
//Loop events case 73:
var loopKeyBindings = config.loopKeyEvents; toggleLoop('start');
var hasBindedKey = loopKeyEventsValues.filter(function(el) {
return preventDefault.indexOf(el) > -1;
}).length >= 1;
if (hasBindedKey) {
loopKeyBindings = defaults.loopKeyEvents;
}
switch (code) {
case loopKeyBindings.toggleLoop:
toggleLoop('toggle');
break; break;
case loopKeyBindings.loopin:
toggleLoop('loopin'); case 76:
toggleLoop();
break; break;
case loopKeyBindings.loopout:
toggleLoop('loopout'); case 79:
toggleLoop('end');
break; break;
} }
@ -4246,7 +4234,7 @@
return plyr.media.paused; return plyr.media.paused;
}, },
isLooping: function() { isLooping: function() {
return config.loopin && config.loopout; return config.loop.active;
}, },
on: function(event, callback) { on: function(event, callback) {
on(plyr.container, event, callback); on(plyr.container, event, callback);