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

Conflicts and tracks array on config

Browse Source
This commit is contained in:
Chrysa Papadopoulou 2017-02-24 16:38:00 +02:00
commit 8464ffe6ad
3 changed files with 68 additions and 67 deletions
Show Stats 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

81
src/js/plyr.js
View File

@ -65,6 +65,7 @@
controls: false, controls: false,
seek: true seek: true
}, },
tracks: [],
selectors: { selectors: {
html5: 'video, audio', html5: 'video, audio',
embed: '[data-type]', embed: '[data-type]',
@ -104,7 +105,10 @@
}, },
captions: '.plyr__captions', captions: '.plyr__captions',
currentTime: '.plyr__time--current', currentTime: '.plyr__time--current',
duration: '.plyr__time--duration' duration: '.plyr__time--duration',
menu: {
quality: '.js-plyr__menu__list--quality'
}
}, },
classes: { classes: {
setup: 'plyr--setup', setup: 'plyr--setup',
@ -1010,9 +1014,9 @@
'<svg><use xlink:href="' + iconPath + '-settings" /></svg>', '<svg><use xlink:href="' + iconPath + '-settings" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.settings + '</span>', '<span class="plyr__sr-only">' + config.i18n.settings + '</span>',
'</button>', '</button>',
'<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">', '<form class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">',
'<div>', '<div>',
'<div class="plyr__menu__primary" id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">', '<div id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
'<ul>', '<ul>',
captionsMenuItem, captionsMenuItem,
'<li role="tab">', '<li role="tab">',
@ -1035,7 +1039,7 @@
'</li>', '</li>',
'</ul>', '</ul>',
'</div>', '</div>',
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">', '<div id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
'<ul>', '<ul>',
'<li role="tab">', '<li role="tab">',
'<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
@ -1050,7 +1054,7 @@
'</li>', '</li>',
'</ul>', '</ul>',
'</div>', '</div>',
'<form class="plyr__menu__secondary" id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">', '<div id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
'<ul>', '<ul>',
'<li role="tab">', '<li role="tab">',
'<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
@ -1082,8 +1086,8 @@
'</label>', '</label>',
'</li>', '</li>',
'</ul>', '</ul>',
'</form>', '</div>',
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">', '<div id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
'<ul>', '<ul>',
'<li role="tab">', '<li role="tab">',
'<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
@ -1140,7 +1144,7 @@
'</li>', '</li>',
'</ul>', '</ul>',
'</div>', '</div>',
'<div class="plyr__menu__secondary" id="plyr-settings-{id}-loop" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-loop-toggle" role="tabpanel" tabindex="-1">', '<div id="plyr-settings-{id}-loop" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-loop-toggle" role="tabpanel" tabindex="-1">',
'<ul>', '<ul>',
'<li role="tab">', '<li role="tab">',
'<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">', '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
@ -1173,7 +1177,7 @@
'</ul>', '</ul>',
'</div>', '</div>',
'</div>', '</div>',
'</div>', '</form>',
'</div>' '</div>'
); );
/* beautify ignore:end */ /* beautify ignore:end */
@ -1297,7 +1301,7 @@
return [ return [
'<li>', '<li>',
'<label class="plyr__control">', '<label class="plyr__control">',
'<input type="radio" name="quality" value="' + quality + '"' + (quality === current ? ' checked' : '') + '>', '<input type="radio" name="quality" value="' + quality + '"' + (quality === plyr.quality.current ? ' checked' : '') + '>',
getLabel(quality), getLabel(quality),
getBadge(quality), getBadge(quality),
'</label>', '</label>',
@ -1313,7 +1317,7 @@
'</li>' '</li>'
].join('')); ].join(''));
console.warn(list); getElement(config.selectors.menu.quality).innerHTML = list.join('');
} }
} }
@ -1764,7 +1768,7 @@
} }
function getSpeedDisplayValue() { function getSpeedDisplayValue() {
return config.currentSpeed.toFixed(1).toString().replace('.0', '') + '&times;' return config.currentSpeed.toFixed(1).toString().replace('.0', '') + '&times;'
} }
// Find the UI controls and store references // Find the UI controls and store references
@ -2489,27 +2493,27 @@
var currentTime = Number(plyr.media.currentTime); var currentTime = Number(plyr.media.currentTime);
switch(toggle) { switch (toggle) {
case 'loopin': case 'loopin':
if (config.loopout && config.loopout <= currentTime) { if (config.loopout && config.loopout <= currentTime) {
config.loopout = null;
}
config.loopin = currentTime;
break;
case 'loopout':
if (config.loopin >= currentTime) {
return;
}
config.loopout = currentTime;
break;
case 'loopall':
config.loopin = 0;
config.loopout = plyr.media.duration - 2;
break;
default:
config.loopin = 0;
config.loopout = null; config.loopout = null;
} break;
config.loopin = currentTime;
break;
case 'loopout':
if (config.loopin >= currentTime) {
return;
}
config.loopout = currentTime;
break;
case 'loopall':
config.loopin = 0;
config.loopout = plyr.media.duration - 2;
break;
default:
config.loopin = 0;
config.loopout = null;
break;
} }
//check if can loop //check if can loop
@ -2517,9 +2521,9 @@
var loopin = updateTimeDisplay(config.loopin, document.querySelector('[data-loop__value="loopin"]')); 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 = ''; 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) { if (config.loop) {
document.querySelector('[data-menu="loop"]').innerHTML = loopin + ' - ' + loopout; document.querySelector('[data-menu="loop"]').innerHTML = loopin + ' - ' + loopout;
} else { } else {
document.querySelector('[data-menu="loop"]').innerHTML = config.i18n.loopclear; document.querySelector('[data-menu="loop"]').innerHTML = config.i18n.loopclear;
} }
} }
@ -3693,9 +3697,9 @@
proxy(plyr.buttons.forward, 'click', config.listeners.forward, forward); proxy(plyr.buttons.forward, 'click', config.listeners.forward, forward);
// Speed-up // Speed-up
proxy(plyr.buttons.speed, 'click', config.listeners.speed, function () { proxy(plyr.buttons.speed, 'click', config.listeners.speed, function() {
var speedValue = document.querySelector('[data-plyr="speed"]:checked').value; var speedValue = document.querySelector('[data-plyr="speed"]:checked').value;
setSpeed(Number(speedValue)); setSpeed(Number(speedValue));
}); });
// Seek // Seek
@ -3713,7 +3717,7 @@
proxy(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen); proxy(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen);
// Loop // Loop
proxy(plyr.buttons.loop, 'click', config.listeners.loop, function (event) { proxy(plyr.buttons.loop, 'click', config.listeners.loop, function(event) {
var loopValue = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type'); var loopValue = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type');
if (['loopin', 'loopout', 'loopall', 'loopclear'].indexOf(loopValue) > -1) { if (['loopin', 'loopout', 'loopall', 'loopclear'].indexOf(loopValue) > -1) {
toggleLoop(loopValue); toggleLoop(loopValue);
@ -4169,7 +4173,6 @@
// Set playback speed // Set playback speed
setSpeed(); setSpeed();
// Set loop // Set loop
toggleLoop(); toggleLoop();

50
src/less/plyr.less
View File

@ -12,13 +12,13 @@
to { background-position: @plyr-progress-loading-size 0; } to { background-position: @plyr-progress-loading-size 0; }
} }
@keyframes plyr-popup { @keyframes plyr-popup {
from { from {
transform: translateY(10px); transform: translateY(10px);
opacity: .5; opacity: .5;
} }
to { to {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
} }
@ -77,14 +77,14 @@
height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale); height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
vertical-align: middle; vertical-align: middle;
appearance: none; appearance: none;
cursor: pointer; cursor: pointer;
border: none; border: none;
background: transparent; background: transparent;
// WebKit // WebKit
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
.plyr-range-track(); .plyr-range-track();
@ -102,7 +102,7 @@
&::-moz-range-thumb { &::-moz-range-thumb {
.plyr-range-thumb(); .plyr-range-thumb();
} }
// Microsoft // Microsoft
&::-ms-track { &::-ms-track {
height: @plyr-range-track-height; height: @plyr-range-track-height;
@ -120,7 +120,7 @@
&::-ms-thumb { &::-ms-thumb {
.plyr-range-thumb(); .plyr-range-thumb();
// For some reason, Edge uses the -webkit margin above // For some reason, Edge uses the -webkit margin above
margin-top: 0; margin-top: 0;
} }
&::-ms-tooltip { &::-ms-tooltip {
display: none; display: none;
@ -132,11 +132,11 @@
} }
&::-moz-focus-outer { &::-moz-focus-outer {
border: 0; border: 0;
} }
&.tab-focus:focus { &.tab-focus:focus {
outline-offset: 3px; outline-offset: 3px;
} }
// Pressed styles // Pressed styles
&:active { &:active {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
@ -280,7 +280,7 @@
// Playback controls // Playback controls
.plyr__controls { .plyr__controls {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
@ -302,8 +302,6 @@
margin-left: 0; margin-left: 0;
} }
@media (min-width: @plyr-bp-screen-sm) { @media (min-width: @plyr-bp-screen-sm) {
> .plyr__control, > .plyr__control,
.plyr__progress, .plyr__progress,
@ -319,7 +317,7 @@
} }
} }
} }
// Hide controls // Hide controls
.plyr--hide-controls .plyr__controls { .plyr--hide-controls .plyr__controls {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -489,7 +487,7 @@
display: none; display: none;
} }
} }
// The actual menu container // The actual menu container
&__container { &__container {
position: absolute; position: absolute;
@ -530,8 +528,8 @@
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
} }
// Options // Options
.plyr__control { .plyr__control {
display: flex; display: flex;
width: 100%; width: 100%;
@ -547,7 +545,7 @@
transform: translateY(-50%); transform: translateY(-50%);
border: 5px solid transparent; border: 5px solid transparent;
} }
&--forward { &--forward {
padding-right: ceil(@plyr-control-padding * 4); padding-right: ceil(@plyr-control-padding * 4);
@ -556,7 +554,7 @@
border-left-color: fade(@plyr-menu-color, 80%); border-left-color: fade(@plyr-menu-color, 80%);
} }
} }
&--back { &--back {
position: relative; position: relative;
padding-top: floor(@plyr-control-padding * .7); padding-top: floor(@plyr-control-padding * .7);
@ -657,7 +655,7 @@
height: 0; height: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
// The background triangle // The background triangle
bottom: -@plyr-tooltip-arrow-size; bottom: -@plyr-tooltip-arrow-size;
border-right: @plyr-tooltip-arrow-size solid transparent; border-right: @plyr-tooltip-arrow-size solid transparent;
@ -807,16 +805,16 @@
} }
&::-moz-progress-bar { &::-moz-progress-bar {
transition: width .2s ease; transition: width .2s ease;
} }
&::-ms-fill { &::-ms-fill {
transition: width .2s ease; transition: width .2s ease;
} }
} }
.plyr--video .plyr__progress--buffer, .plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display { .plyr--video .plyr__volume--display {
background: @plyr-video-range-track-bg; background: @plyr-video-range-track-bg;
} }
.plyr--video .plyr__progress--buffer { .plyr--video .plyr__progress--buffer {
color: @plyr-video-progress-buffered-bg; color: @plyr-video-progress-buffered-bg;
} }
.plyr--audio .plyr__progress--buffer, .plyr--audio .plyr__progress--buffer,