Menu work
This commit is contained in:
Sam Potts
parent
7608615702
commit
cbef45841c
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -98,7 +98,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',
|
||||
@ -976,7 +979,7 @@
|
||||
'</button>',
|
||||
'<div 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>',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
|
||||
@ -998,7 +1001,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">',
|
||||
@ -1013,7 +1016,7 @@
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>',
|
||||
'<div 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">',
|
||||
@ -1034,8 +1037,8 @@
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</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">',
|
||||
'<ul>',
|
||||
'<div id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
|
||||
'<ul class="js-plyr__menu__list--quality">',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
||||
config.i18n.quality,
|
||||
@ -1216,7 +1219,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>',
|
||||
@ -1232,7 +1235,7 @@
|
||||
'</li>'
|
||||
].join(''));
|
||||
|
||||
console.warn(list);
|
||||
getElement(config.selectors.menu.quality).innerHTML = list.join('');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user