aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js142
-rw-r--r--src/less/plyr.less99
2 files changed, 189 insertions, 52 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 317e3b1b..bd79df0e 100644
--- a/src/js/plyr.js
+++ b/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,32 +879,91 @@
);
}
- // 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}">',
- '<ul>',
- '<li>',
- '<button type="button" data-plyr="slide-captions">',
- config.i18n.captions + ' <span class="plyr__menu__value">{lang}</span>',
- '</button>',
- '</li>',
- '<li>',
- '<button type="button" data-plyr="slide-speed">',
- config.i18n.speed + ' <span class="plyr__menu__value">{speed}</span>',
- '</button>',
- '</li>',
- '<li>',
- '<button type="button" data-plyr="slide-quality">',
- config.i18n.quality + ' <span class="plyr__menu__value">Auto</span>',
- '</button>',
- '</li>',
- '</ul>',
+ '<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 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 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 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&times;</button>',
+ '</li>',
+ '<li>',
+ '<button type="button">1.5&times;</button>',
+ '</li>',
+ '<li>',
+ '<button type="button">1&times;</button>',
+ '</li>',
+ '<li>',
+ '<button type="button">0.5&times;</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', '') + '&times;');
// 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);
diff --git a/src/less/plyr.less b/src/less/plyr.less
index ae9fae0e..26c92b2d 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -473,8 +473,16 @@
position: relative;
// Hide tooltip
- button[aria-expanded='true'] .plyr__tooltip {
- display: none;
+ button svg {
+ transition: transform .3s ease;
+ }
+ button[aria-expanded='true'] {
+ svg {
+ transform: rotate(45deg);
+ }
+ .plyr__tooltip {
+ display: none;
+ }
}
// The actual menu container
@@ -492,49 +500,96 @@
color: @plyr-menu-color;
font-size: @plyr-font-size-small;
+ // Arrow
+ &::after {
+ content: "";
+ position: absolute;
+ top: 100%;
+ right: 15px;
+ height: 0;
+ width: 0;
+ border: 6px solid transparent;
+ border-top-color: @plyr-menu-bg;
+ }
+
ul {
margin: 0;
padding: 5px;
list-style: none;
}
-
button {
display: flex;
width: 100%;
- padding: 10px 30px 10px 12px;
+ 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);
- // Arrow
&::after {
- content: "";
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
right: 5px;
- border: 5px solid transparent;
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__value {
+ .plyr__menu__btn__value,
+ .plyr__menu__btn__badge {
+ display: inherit;
margin-left: auto;
- padding-left: 25px;
+ 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%);
}
- // Arrow
- &::after {
- content: "";
- position: absolute;
- top: 100%;
- right: 15px;
- height: 0;
- width: 0;
- border: 6px solid transparent;
- border-top-color: @plyr-menu-bg;
+ // Option value
+ .plyr__menu__btn__badge span {
+ padding: 2px 4px;
+ border-radius: 2px;
+ background: @plyr-menu-color;
+ color: @plyr-menu-bg;
+ font-size: 10px;
}
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 20:35:19 +0000