aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js81
-rw-r--r--src/less/plyr.less50
2 files changed, 66 insertions, 65 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 0a303d83..117eb70d 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -65,6 +65,7 @@
controls: false,
seek: true
},
+ tracks: [],
selectors: {
html5: 'video, audio',
embed: '[data-type]',
@@ -104,7 +105,10 @@
},
captions: '.plyr__captions',
currentTime: '.plyr__time--current',
- duration: '.plyr__time--duration'
+ duration: '.plyr__time--duration',
+ menu: {
+ quality: '.js-plyr__menu__list--quality'
+ }
},
classes: {
setup: 'plyr--setup',
@@ -1010,9 +1014,9 @@
'<svg><use xlink:href="' + iconPath + '-settings" /></svg>',
'<span class="plyr__sr-only">' + config.i18n.settings + '</span>',
'</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 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>',
captionsMenuItem,
'<li role="tab">',
@@ -1035,7 +1039,7 @@
'</li>',
'</ul>',
'</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>',
'<li role="tab">',
'<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>',
'</ul>',
'</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>',
'<li role="tab">',
'<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>',
'</li>',
'</ul>',
- '</form>',
- '<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>',
+ '<div id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
'<ul>',
'<li role="tab">',
'<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>',
'</ul>',
'</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>',
'<li role="tab">',
'<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>',
'</div>',
'</div>',
- '</div>',
+ '</form>',
'</div>'
);
/* beautify ignore:end */
@@ -1297,7 +1301,7 @@
return [
'<li>',
'<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),
getBadge(quality),
'</label>',
@@ -1313,7 +1317,7 @@
'</li>'
].join(''));
- console.warn(list);
+ getElement(config.selectors.menu.quality).innerHTML = list.join('');
}
}
@@ -1764,7 +1768,7 @@
}
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
@@ -2489,27 +2493,27 @@
var currentTime = Number(plyr.media.currentTime);
- switch(toggle) {
- case 'loopin':
- if (config.loopout && config.loopout <= currentTime) {
+ switch (toggle) {
+ case 'loopin':
+ 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.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;
+ break;
}
//check if can loop
@@ -2517,9 +2521,9 @@
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;
+ document.querySelector('[data-menu="loop"]').innerHTML = loopin + ' - ' + loopout;
} 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);
// Speed-up
- proxy(plyr.buttons.speed, 'click', config.listeners.speed, function () {
- var speedValue = document.querySelector('[data-plyr="speed"]:checked').value;
- setSpeed(Number(speedValue));
+ proxy(plyr.buttons.speed, 'click', config.listeners.speed, function() {
+ var speedValue = document.querySelector('[data-plyr="speed"]:checked').value;
+ setSpeed(Number(speedValue));
});
// Seek
@@ -3713,7 +3717,7 @@
proxy(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen);
// 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');
if (['loopin', 'loopout', 'loopall', 'loopclear'].indexOf(loopValue) > -1) {
toggleLoop(loopValue);
@@ -4169,7 +4173,6 @@
// Set playback speed
setSpeed();
-
// Set loop
toggleLoop();
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 76d46dbe..9e1dee8d 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -12,13 +12,13 @@
to { background-position: @plyr-progress-loading-size 0; }
}
@keyframes plyr-popup {
- from {
- transform: translateY(10px);
- opacity: .5;
+ from {
+ transform: translateY(10px);
+ opacity: .5;
}
- to {
- transform: translateY(0);
- opacity: 1;
+ to {
+ transform: translateY(0);
+ opacity: 1;
}
}
@@ -77,14 +77,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 {
.plyr-range-track();
@@ -102,7 +102,7 @@
&::-moz-range-thumb {
.plyr-range-thumb();
}
-
+
// Microsoft
&::-ms-track {
height: @plyr-range-track-height;
@@ -120,7 +120,7 @@
&::-ms-thumb {
.plyr-range-thumb();
// For some reason, Edge uses the -webkit margin above
- margin-top: 0;
+ margin-top: 0;
}
&::-ms-tooltip {
display: none;
@@ -132,11 +132,11 @@
}
&::-moz-focus-outer {
border: 0;
- }
+ }
&.tab-focus:focus {
outline-offset: 3px;
}
-
+
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@@ -280,7 +280,7 @@
// Playback controls
.plyr__controls {
display: flex;
- align-items: center;
+ align-items: center;
line-height: 1;
text-align: center;
@@ -302,8 +302,6 @@
margin-left: 0;
}
-
-
@media (min-width: @plyr-bp-screen-sm) {
> .plyr__control,
.plyr__progress,
@@ -319,7 +317,7 @@
}
}
}
-// Hide controls
+// Hide controls
.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
@@ -489,7 +487,7 @@
display: none;
}
}
-
+
// The actual menu container
&__container {
position: absolute;
@@ -530,8 +528,8 @@
list-style: none;
overflow: hidden;
}
-
- // Options
+
+ // Options
.plyr__control {
display: flex;
width: 100%;
@@ -547,7 +545,7 @@
transform: translateY(-50%);
border: 5px solid transparent;
}
-
+
&--forward {
padding-right: ceil(@plyr-control-padding * 4);
@@ -556,7 +554,7 @@
border-left-color: fade(@plyr-menu-color, 80%);
}
}
-
+
&--back {
position: relative;
padding-top: floor(@plyr-control-padding * .7);
@@ -657,7 +655,7 @@
height: 0;
left: 50%;
transform: translateX(-50%);
-
+
// The background triangle
bottom: -@plyr-tooltip-arrow-size;
border-right: @plyr-tooltip-arrow-size solid transparent;
@@ -807,16 +805,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,
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-19 12:54:28 +0000