More menu work
This commit is contained in:
Sam Potts
parent
f608317eec
commit
d3bbf09d12
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
@ -4,15 +4,15 @@
|
||||
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
|
||||
url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
|
||||
src: url("https://cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
|
||||
url("https://cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
|
||||
font-style: normal;
|
||||
font-weight: @font-weight-base;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Avenir";
|
||||
src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
|
||||
url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
|
||||
src: url("https://cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
|
||||
url("https://cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
|
||||
font-style: normal;
|
||||
font-weight: @font-weight-bold;
|
||||
}
|
||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -296,7 +296,7 @@ gulp.task("demo", function () {
|
||||
});
|
||||
|
||||
// Open the demo site to check it's sweet
|
||||
gulp.task("symlinks", function () {
|
||||
/*gulp.task("symlinks", function () {
|
||||
console.log("Updating symlinks...");
|
||||
|
||||
return gulp.src(paths.upload)
|
||||
@ -316,7 +316,7 @@ gulp.task("symlinks", function () {
|
||||
|
||||
callback(null, chunk);
|
||||
}));
|
||||
});
|
||||
});*/
|
||||
|
||||
// Open the demo site to check it's sweet
|
||||
gulp.task("open", function () {
|
||||
@ -333,5 +333,5 @@ gulp.task("open", function () {
|
||||
|
||||
// Do everything
|
||||
gulp.task("publish", function () {
|
||||
run(tasks.js, tasks.less, tasks.sprite, "cdn", "demo", "symlinks");
|
||||
run(tasks.js, tasks.less, tasks.sprite, "cdn", "demo");
|
||||
});
|
||||
|
||||
126
src/js/plyr.js
126
src/js/plyr.js
@ -532,10 +532,10 @@
|
||||
// Check variable types
|
||||
var _is = {
|
||||
object: function(input) {
|
||||
return input !== null && typeof(input) === 'object';
|
||||
return input !== null && typeof(input) === 'object' && input.constructor === Object;
|
||||
},
|
||||
array: function(input) {
|
||||
return input !== null && (typeof(input) === 'object' && input.constructor === Array);
|
||||
return input !== null && typeof(input) === 'object' && input.constructor === Array;
|
||||
},
|
||||
number: function(input) {
|
||||
return input !== null && (typeof(input) === 'number' && !isNaN(input - 0) || (typeof input === 'object' && input.constructor === Number));
|
||||
@ -555,6 +555,9 @@
|
||||
function: function(input) {
|
||||
return input !== null && typeof input === 'function';
|
||||
},
|
||||
event: function(input) {
|
||||
return input !== null && typeof input === 'object' && (input.constructor === Event || input.constructor === CustomEvent);
|
||||
},
|
||||
undefined: function(input) {
|
||||
return input !== null && typeof input === 'undefined';
|
||||
},
|
||||
@ -876,33 +879,92 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Settings button
|
||||
// Settings button / menu
|
||||
if (_inArray(config.controls, 'settings')) {
|
||||
html.push(
|
||||
'<div class="plyr__menu">',
|
||||
'<button type="button" id="plyr-settings-toggle-{id}" data-plyr="settings" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">',
|
||||
'<div class="plyr__menu" data-plyr="settings">',
|
||||
'<button type="button" id="plyr-settings-toggle-{id}" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">',
|
||||
'<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}">',
|
||||
'<div class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">',
|
||||
'<div class="plyr__menu__primary" id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
|
||||
'<ul>',
|
||||
'<li>',
|
||||
'<button type="button" data-plyr="slide-captions">',
|
||||
config.i18n.captions + ' <span class="plyr__menu__value">{lang}</span>',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-captions-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-captions" aria-expanded="false">',
|
||||
config.i18n.captions + ' <span class="plyr__menu__btn__value">{lang}</span>',
|
||||
'</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button" data-plyr="slide-speed">',
|
||||
config.i18n.speed + ' <span class="plyr__menu__value">{speed}</span>',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
|
||||
config.i18n.speed + ' <span class="plyr__menu__btn__value">{speed}</span>',
|
||||
'</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button" data-plyr="slide-quality">',
|
||||
config.i18n.quality + ' <span class="plyr__menu__value">Auto</span>',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--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__btn__value">Auto</span>',
|
||||
'</button>',
|
||||
'</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">',
|
||||
'<ul>',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
||||
config.i18n.captions,
|
||||
'</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">English</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">Off</button>',
|
||||
'</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">',
|
||||
'<ul>',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
||||
config.i18n.speed,
|
||||
'</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">2×</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">1.5×</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">1×</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">0.5×</button>',
|
||||
'</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>',
|
||||
'<li role="tab">',
|
||||
'<button type="button" class="plyr__menu__btn plyr__menu__btn--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
|
||||
config.i18n.quality,
|
||||
'</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">1080P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">720P <span class="plyr__menu__btn__badge"><span>HD</span></span></button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">480P</button>',
|
||||
'</li>',
|
||||
'<li>',
|
||||
'<button type="button">320P</button>',
|
||||
'</li>',
|
||||
'</ul>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
@ -1303,7 +1365,7 @@
|
||||
html = _replaceAll(html, '{seektime}', config.seekTime);
|
||||
|
||||
// Replace seek time instances
|
||||
html = _replaceAll(html, '{speed}', config.currentSpeed === 1 ? 'Normal' : config.currentSpeed.toFixed(1) + 'x');
|
||||
html = _replaceAll(html, '{speed}', config.currentSpeed.toFixed(1).toString().replace('.0', '') + '×');
|
||||
|
||||
// Replace current captions language
|
||||
html = _replaceAll(html, '{lang}', 'English');
|
||||
@ -2037,7 +2099,7 @@
|
||||
|
||||
if (_is.number(input)) {
|
||||
targetTime = input;
|
||||
} else if (_is.object(input) && _inArray(['input', 'change'], input.type)) {
|
||||
} else if (_is.event(input) && _inArray(['input', 'change'], input.type)) {
|
||||
// It's the seek slider
|
||||
// Seek to the selected time
|
||||
targetTime = ((input.target.value / input.target.max) * duration);
|
||||
@ -3092,15 +3154,35 @@
|
||||
// Captions
|
||||
_on(plyr.buttons.captions, 'click', _toggleCaptions);
|
||||
|
||||
// Menus
|
||||
_on(plyr.controls.querySelectorAll('[aria-haspopup="true"]'), 'click', function() {
|
||||
var toggle = this,
|
||||
target = document.querySelector('#' + toggle.getAttribute('aria-controls')),
|
||||
// Settings
|
||||
/*_on(plyr.buttons.settings, 'click', function(event) {
|
||||
var menu = this,
|
||||
toggle = event.target,
|
||||
target = document.getElementById(toggle.getAttribute('aria-controls')),
|
||||
tabs = menu.querySelectorAll('[role="tabpanel"]'),
|
||||
show = (toggle.getAttribute('aria-expanded') === 'false');
|
||||
|
||||
// Nothing to show, bail
|
||||
if (!_is.htmlElement(target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide all other tabs
|
||||
if (target.getAttribute('role') === 'tabpanel') {
|
||||
[].forEach.call(tabs, function(tab) {
|
||||
tab.setAttribute('aria-hidden', true);
|
||||
tab.setAttribute('tabindex', -1);
|
||||
|
||||
[].forEach.call(menu.querySelectorAll('[aria-controls="' + tab.getAttribute('id') + '"]'), function(toggle) {
|
||||
toggle.setAttribute('aria-expanded', false);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
toggle.setAttribute('aria-expanded', show);
|
||||
target.setAttribute('aria-hidden', !show);
|
||||
});
|
||||
target.setAttribute('tabindex', 0);
|
||||
});*/
|
||||
|
||||
// Seek tooltip
|
||||
_on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
|
||||
|
||||
@ -473,9 +473,17 @@
|
||||
position: relative;
|
||||
|
||||
// Hide tooltip
|
||||
button[aria-expanded='true'] .plyr__tooltip {
|
||||
button svg {
|
||||
transition: transform .3s ease;
|
||||
}
|
||||
button[aria-expanded='true'] {
|
||||
svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.plyr__tooltip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// The actual menu container
|
||||
&__container {
|
||||
@ -492,39 +500,6 @@
|
||||
color: @plyr-menu-color;
|
||||
font-size: @plyr-font-size-small;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px 30px 10px 12px;
|
||||
color: @plyr-menu-color;
|
||||
font-weight: 600;
|
||||
|
||||
// Arrow
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 5px;
|
||||
border: 5px solid transparent;
|
||||
border-left-color: fade(@plyr-menu-color, 80%);
|
||||
}
|
||||
}
|
||||
|
||||
// Option value
|
||||
.plyr__menu__value {
|
||||
margin-left: auto;
|
||||
padding-left: 25px;
|
||||
font-weight: 500;
|
||||
color: fade(@plyr-menu-color, 80%);
|
||||
}
|
||||
|
||||
// Arrow
|
||||
&::after {
|
||||
content: "";
|
||||
@ -536,6 +511,86 @@
|
||||
border: 6px solid transparent;
|
||||
border-top-color: @plyr-menu-bg;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: @plyr-control-padding (@plyr-control-padding * 2);
|
||||
color: @plyr-menu-color;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.plyr__menu__btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 5px solid transparent;
|
||||
}
|
||||
.plyr__menu__btn--forward {
|
||||
padding-right: ceil(@plyr-control-padding * 4);
|
||||
|
||||
&::after {
|
||||
right: 5px;
|
||||
border-left-color: fade(@plyr-menu-color, 80%);
|
||||
}
|
||||
}
|
||||
.plyr__menu__btn--back {
|
||||
position: relative;
|
||||
padding-top: floor(@plyr-control-padding * .7);
|
||||
padding-bottom: floor(@plyr-control-padding * .7);
|
||||
padding-left: ceil(@plyr-control-padding * 4);
|
||||
margin-bottom: ceil(@plyr-control-padding * 1.3);
|
||||
font-weight: 500;
|
||||
|
||||
&::after {
|
||||
left: 5px;
|
||||
border-right-color: fade(@plyr-menu-color, 80%);
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
margin-top: ceil(@plyr-control-padding / 2);
|
||||
background: fade(#000, 15%);
|
||||
box-shadow: 0 1px 0 fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Option value
|
||||
.plyr__menu__btn__value,
|
||||
.plyr__menu__btn__badge {
|
||||
display: inherit;
|
||||
margin-left: auto;
|
||||
padding-left: ceil(@plyr-control-padding * 3.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Option value
|
||||
.plyr__menu__btn__value {
|
||||
font-weight: 500;
|
||||
color: fade(@plyr-menu-color, 80%);
|
||||
}
|
||||
|
||||
// Option value
|
||||
.plyr__menu__btn__badge span {
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
background: @plyr-menu-color;
|
||||
color: @plyr-menu-bg;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user