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

Merge branch 'develop' into feature/subtitles

Browse Source
This commit is contained in:
Sam Potts
2017-03-25 18:43:36 +11:00
committed by GitHub
parent 47b53fffb4 b083bf4297
commit 33fef7faee
13 changed files with 274 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/js/plyr.js
View File

@ -37,9 +37,15 @@
enabled: true,
debug: false,
autoplay: false,
loop: false,
loopin: 0,
loopout: null,
loop: {
active: false,
start: 0,
end: null,
indicator: {
start: 0,
end: 0
}
},
seekTime: 10,
volume: 10,
volumeMin: 0,
@ -57,8 +63,10 @@
hideControls: true,
showPosterOnEnd: false,
disableContextMenu: true,
qualityOptions: false,
keyboardShorcuts: {
quality: {
options: false
},
keyboardShortcuts: {
focused: true,
global: false
},
@ -102,7 +110,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',
@ -175,10 +184,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'],
@ -915,6 +924,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>',
@ -1033,12 +1043,19 @@
'</button>',
'</li>',
'<li role="tab">',
showQuality,
'<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">{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>',
@ -1156,26 +1173,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>',
@ -1794,9 +1811,9 @@
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),
captions_lang: getElements(config.selectors.buttons.captions_lang)
lang: getElement(config.selectors.buttons.captions_lang),
speed: getElement(config.selectors.buttons.speed),
loop: getElement(config.selectors.buttons.loop)
};
// Inputs
@ -2296,7 +2313,7 @@
// https://github.com/vimeo/player.js
plyr.embed = new window.Vimeo.Player(container, {
id: parseInt(mediaId),
loop: config.loop,
loop: config.loop.active,
autoplay: config.autoplay,
byline: false,
portrait: false,
@ -2493,46 +2510,82 @@
}
// Toggle loop
function toggleLoop(toggle) {
if (['loopin', 'loopout', 'loopall'].indexOf(toggle) === -1) {
toggle = 'loopclear';
// TODO: Set the indicator on load as user may pass loop as config
function toggleLoop(type) {
// Set default to be a true toggle
if (!inArray(['start', 'end', 'all', 'none', 'toggle'], type)) {
type = 'toggle';
}
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.active) {
config.loop.start = 0;
config.loop.end = null;
} else {
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.active = 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.active) {
// 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
@ -2546,6 +2599,7 @@
warn('Invalid speeds format');
return;
}
if (!is.number(speed)) {
var index = config.speeds.indexOf(config.currentSpeed);
@ -3026,8 +3080,8 @@
}
}
if (is.number(config.loopin) && is.number(config.loopout) && plyr.media.currentTime >= config.loopout) {
seek(config.loopin);
if (is.number(config.loop.start) && is.number(config.loop.end) && plyr.media.currentTime >= config.loop.end) {
seek(config.loop.start);
}
setProgress(progress, value);
@ -3089,10 +3143,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
@ -3395,7 +3453,7 @@
if ('poster' in source) {
plyr.media.setAttribute('poster', source.poster);
}
if (config.loop) {
if (config.loop.active) {
plyr.media.setAttribute('loop', '');
}
}
@ -3519,16 +3577,16 @@
}
// 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(),
allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67],
count = get().length;
var code = getKeyCode(event);
var focused = getFocusElement();
var allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67, 73, 76, 79];
var count = get().length;
// Only handle global key press if there's only one player
// and the key is in the allowed keys
@ -3545,9 +3603,9 @@
}
function handleKey(event) {
var code = getKeyCode(event),
pressed = event.type === 'keydown',
held = pressed && code === last;
var code = getKeyCode(event);
var pressed = event.type === 'keydown';
var held = pressed && code === last;
// If the event is bubbled from the media element
// Firefox doesn't get the keycode for whatever reason
@ -3573,7 +3631,7 @@
// Reset on keyup
if (pressed) {
// 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];
if (inArray(checkFocus, code)) {
@ -3628,7 +3686,7 @@
case 77:
// M key
if (!held) {
toggleMute()
toggleMute();
}
break;
@ -3653,6 +3711,18 @@
toggleCaptions();
}
break;
case 73:
toggleLoop('start');
break;
case 76:
toggleLoop();
break;
case 79:
toggleLoop('end');
break;
}
// Escape is handle natively when in full screen
@ -3723,11 +3793,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);
}
});
@ -3737,10 +3808,10 @@
}
// Captions
on(plyr.buttons.captions, 'click', toggleCaptions);
on(plyr.buttons.captions_menu, 'click', toggleCaptions);
// Captions language
proxy(plyr.buttons.captions_lang, 'click', config.listeners.captions_lang, function(e) {
proxy(plyr.buttons.captions, 'click', config.listeners.captions toggleCaptions);
// ?? on(plyr.buttons.captions_menu, 'click', toggleCaptions);
// Language
proxy(plyr.buttons.lang, 'click', config.listeners.lang, function(e) {
var langIndex = e.target.attributes.getNamedItem("data-index").value;
setCaptionIndex(langIndex);
});
@ -4226,7 +4297,7 @@
return plyr.media.paused;
},
isLooping: function() {
return config.loopin && config.loopout;
return config.loop.active;
},
on: function(event, callback) {
on(plyr.container, event, callback);

18
src/less/plyr.less
View File

@ -198,7 +198,11 @@
.plyr__video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
border-radius: inherit;
// Require overflow and z-index to force border-radius
overflow: hidden;
z-index: 0;
iframe {
position: absolute;
@ -208,7 +212,6 @@
height: 100%;
border: 0;
user-select: none;
z-index: 1;
}
// Vimeo hack
@ -291,16 +294,14 @@
.plyr__menu {
margin-left: (@plyr-control-spacing / 2);
&:first-child {
&:first-child,
&:first-child + [data-plyr="pause"] {
margin-left: 0;
}
}
.plyr__volume {
margin-left: (@plyr-control-spacing / 2);
}
[data-plyr="pause"] {
margin-left: 0;
}
@media (min-width: @plyr-bp-screen-sm) {
> .plyr__control,
@ -343,6 +344,7 @@
height: @plyr-control-icon-size;
display: block;
fill: currentColor;
pointer-events: none;
}
// Hide toggle icons by default
.icon--exit-fullscreen,
@ -363,6 +365,7 @@
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
border-bottom-left-radius: inherit;
@ -423,6 +426,7 @@
height: 20px;
display: block;
fill: currentColor;
pointer-events: none;
}
&:focus {
@ -921,6 +925,10 @@
height: 100%;
width: 100%;
}
.plyr__video-embed {
// Revert overflow change
overflow: visible;
}
.plyr__controls {
position: absolute;
bottom: 0;

48
src/scss/plyr.scss
View File

@ -61,14 +61,14 @@
height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
width: 100%;
margin: 0;
padding: 0;
padding: 0;
vertical-align: middle;
appearance: none;
cursor: pointer;
border: none;
background: transparent;
// WebKit
&::-webkit-slider-runnable-track {
@include plyr-range-track();
@ -86,7 +86,7 @@
&::-moz-range-thumb {
@include plyr-range-thumb();
}
// Microsoft
&::-ms-track {
height: $plyr-range-track-height;
@ -104,7 +104,7 @@
&::-ms-thumb {
@include plyr-range-thumb();
// For some reason, Edge uses the -webkit margin above
margin-top: 0;
margin-top: 0;
}
&::-ms-tooltip {
display: none;
@ -116,11 +116,11 @@
}
&::-moz-focus-outer {
border: 0;
}
}
&.tab-focus:focus {
outline-offset: 3px;
}
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@ -181,9 +181,12 @@
.plyr__video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: inherit;
// Require overflow and z-index to force border-radius
overflow: hidden;
z-index: 0;
iframe {
position: absolute;
top: 0;
@ -264,26 +267,25 @@
// Playback controls
.plyr__controls {
display: flex;
align-items: center;
align-items: center;
line-height: 1;
text-align: center;
// Spacing
> button,
> .plyr__control,
.plyr__progress,
.plyr__time {
.plyr__time,
.plyr__menu {
margin-left: ($plyr-control-spacing / 2);
&:first-child {
&:first-child,
&:first-child + [data-plyr="pause"] {
margin-left: 0;
}
}
.plyr__volume {
margin-left: ($plyr-control-spacing / 2);
}
[data-plyr="pause"] {
margin-left: 0;
}
// Buttons
button {
@ -305,6 +307,7 @@
height: $plyr-control-icon-size;
display: block;
fill: currentColor;
pointer-events: none;
}
// Default focus
@ -328,7 +331,7 @@
}
}
}
// Hide controls
// Hide controls
.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
@ -398,6 +401,7 @@
height: 20px;
display: block;
fill: currentColor;
pointer-events: none;
}
&:focus {
@ -475,7 +479,7 @@
height: 0;
left: 50%;
transform: translateX(-50%);
// The background triangle
bottom: -$plyr-tooltip-arrow-size;
border-right: $plyr-tooltip-arrow-size solid transparent;
@ -624,16 +628,16 @@
}
&::-moz-progress-bar {
transition: width .2s ease;
}
}
&::-ms-fill {
transition: width .2s ease;
}
}
}
.plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display {
background: $plyr-video-range-track-bg;
}
.plyr--video .plyr__progress--buffer {
.plyr--video .plyr__progress--buffer {
color: $plyr-video-progress-buffered-bg;
}
.plyr--audio .plyr__progress--buffer,
@ -740,6 +744,10 @@
height: 100%;
width: 100%;
}
.plyr__video-embed {
// Revert overflow change
overflow: visible;
}
.plyr__controls {
position: absolute;
bottom: 0;