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

3.4.0-beta.2

Browse Source
This commit is contained in:
Sam Potts 2018-08-05 22:43:35 +10:00
parent 0bc6b1f1b3
commit 3ad118c026
13 changed files with 126 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
changelog.md
View File

@ -1,4 +1,4 @@
# v3.4.0-beta.1
# v3.4.0
- Accessibility improvements (see #905)
- Improvements to the way the controls work on iOS

80
dist/plyr.js vendored
View File

@ -540,7 +540,7 @@ typeof navigator === "object" && (function (global, factory) {
var hide = hidden;
if (!is.boolean(hide)) {
hide = !element.hasAttribute('hidden');
hide = !element.hidden;
}
if (hide) {
@ -1700,7 +1700,7 @@ typeof navigator === "object" && (function (global, factory) {
bindMenuItemShortcuts: function bindMenuItemShortcuts(menuItem, type) {
var _this = this;
// Handle space or -> to open menu
// Navigate through menus via arrow keys and space
on(menuItem, 'keydown keyup', function (event) {
// We only care about space and ⬆️ ⬇️️ ➡️
if (![32, 38, 39, 40].includes(event.which)) {
@ -1743,6 +1743,16 @@ typeof navigator === "object" && (function (global, factory) {
}
}
}, false);
// Enter will fire a `click` event but we still need to manage focus
// So we bind to keyup which fires after and set focus here
on(menuItem, 'keyup', function (event) {
if (event.which !== 13) {
return;
}
controls.focusFirstMenuItem.call(_this, null, true);
});
},
@ -1978,7 +1988,7 @@ typeof navigator === "object" && (function (global, factory) {
} else if (matches(range, this.config.selectors.inputs.volume)) {
var percent = range.value * 100;
range.setAttribute('aria-valuenow', percent);
range.setAttribute('aria-valuetext', percent + '%');
range.setAttribute('aria-valuetext', percent.toFixed(1) + '%');
} else {
range.setAttribute('aria-valuenow', range.value);
}
@ -2415,6 +2425,28 @@ typeof navigator === "object" && (function (global, factory) {
},
// Focus the first menu item in a given (or visible) menu
focusFirstMenuItem: function focusFirstMenuItem(pane) {
var tabFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (this.elements.settings.popup.hidden) {
return;
}
var target = pane;
if (!is.element(target)) {
target = Object.values(this.elements.settings.panels).find(function (pane) {
return !pane.hidden;
});
}
var firstItem = target.querySelector('[role^="menuitem"]');
setFocus.call(this, firstItem, tabFocus);
},
// Show/hide menu
toggleMenu: function toggleMenu(input) {
var popup = this.elements.settings.popup;
@ -2427,7 +2459,8 @@ typeof navigator === "object" && (function (global, factory) {
}
// True toggle by default
var hidden = popup.hasAttribute('hidden');
var hidden = popup.hidden;
var show = hidden;
if (is.boolean(input)) {
@ -2436,19 +2469,13 @@ typeof navigator === "object" && (function (global, factory) {
show = false;
} else if (is.event(input)) {
var isMenuItem = popup.contains(input.target);
var isButton = input.target === button;
// If the click was inside the menu or if the click
// wasn't the button or menu item and we're trying to
// show the menu (a doc click shouldn't show the menu)
if (isMenuItem || !isMenuItem && !isButton && show) {
if (isMenuItem || !isMenuItem && input.target !== button && show) {
return;
}
// Prevent the toggle being caught by the doc listener
if (isButton) {
input.stopPropagation();
}
}
// Set button attributes
@ -2462,11 +2489,7 @@ typeof navigator === "object" && (function (global, factory) {
// Focus the first item if key interaction
if (show && is.keyboardEvent(input)) {
var pane = Object.values(this.elements.settings.panels).find(function (pane) {
return !pane.hidden;
});
var firstItem = pane.querySelector('[role^="menuitem"]');
setFocus.call(this, firstItem, true);
controls.focusFirstMenuItem.call(this, null, true);
}
// If closing, re-focus the button
else if (!show && !hidden) {
@ -2558,8 +2581,7 @@ typeof navigator === "object" && (function (global, factory) {
toggleHidden(target, false);
// Focus the first item
var firstItem = target.querySelector('[role^="menuitem"]');
setFocus.call(this, firstItem, tabFocus);
controls.focusFirstMenuItem.call(this, target, tabFocus);
},
@ -2670,7 +2692,6 @@ typeof navigator === "object" && (function (global, factory) {
});
control.appendChild(controls.createButton.call(this, 'settings', {
id: 'plyr-settings-toggle-' + data.id,
'aria-haspopup': true,
'aria-controls': 'plyr-settings-' + data.id,
'aria-expanded': false
@ -2679,8 +2700,7 @@ typeof navigator === "object" && (function (global, factory) {
var popup = createElement('div', {
class: 'plyr__menu__container',
id: 'plyr-settings-' + data.id,
hidden: '',
'aria-labelled-by': 'plyr-settings-toggle-' + data.id
hidden: ''
});
var inner = createElement('div');
@ -4899,6 +4919,9 @@ typeof navigator === "object" && (function (global, factory) {
// Settings menu - click toggle
this.bind(elements.buttons.settings, 'click', function (event) {
// Prevent the document click listener closing the menu
event.stopPropagation();
controls.toggleMenu.call(player, event);
});
@ -4906,8 +4929,16 @@ typeof navigator === "object" && (function (global, factory) {
// We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
// https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
this.bind(elements.buttons.settings, 'keyup', function (event) {
var code = event.which;
// We only care about space and return
if (event.which !== 32 && event.which !== 13) {
if (![13, 32].includes(code)) {
return;
}
// Because return triggers a click anyway, all we need to do is set focus
if (code === 13) {
controls.focusFirstMenuItem.call(player, null, true);
return;
}
@ -4915,13 +4946,12 @@ typeof navigator === "object" && (function (global, factory) {
event.preventDefault();
// Prevent playing video (Firefox)
if (event.which === 32) {
event.stopPropagation();
}
// Toggle menu
controls.toggleMenu.call(player, event);
}, null, false);
}, null, false // Can't be passive as we're preventing default
);
// Escape closes menu
this.bind(elements.settings.menu, 'keydown', function (event) {

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

80
dist/plyr.polyfilled.js vendored
View File

@ -5937,7 +5937,7 @@ typeof navigator === "object" && (function (global, factory) {
var hide = hidden;
if (!is$1.boolean(hide)) {
hide = !element.hasAttribute('hidden');
hide = !element.hidden;
}
if (hide) {
@ -7097,7 +7097,7 @@ typeof navigator === "object" && (function (global, factory) {
bindMenuItemShortcuts: function bindMenuItemShortcuts(menuItem, type) {
var _this = this;
// Handle space or -> to open menu
// Navigate through menus via arrow keys and space
on(menuItem, 'keydown keyup', function (event) {
// We only care about space and ⬆️ ⬇️️ ➡️
if (![32, 38, 39, 40].includes(event.which)) {
@ -7140,6 +7140,16 @@ typeof navigator === "object" && (function (global, factory) {
}
}
}, false);
// Enter will fire a `click` event but we still need to manage focus
// So we bind to keyup which fires after and set focus here
on(menuItem, 'keyup', function (event) {
if (event.which !== 13) {
return;
}
controls.focusFirstMenuItem.call(_this, null, true);
});
},
@ -7375,7 +7385,7 @@ typeof navigator === "object" && (function (global, factory) {
} else if (matches(range, this.config.selectors.inputs.volume)) {
var percent = range.value * 100;
range.setAttribute('aria-valuenow', percent);
range.setAttribute('aria-valuetext', percent + '%');
range.setAttribute('aria-valuetext', percent.toFixed(1) + '%');
} else {
range.setAttribute('aria-valuenow', range.value);
}
@ -7812,6 +7822,28 @@ typeof navigator === "object" && (function (global, factory) {
},
// Focus the first menu item in a given (or visible) menu
focusFirstMenuItem: function focusFirstMenuItem(pane) {
var tabFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (this.elements.settings.popup.hidden) {
return;
}
var target = pane;
if (!is$1.element(target)) {
target = Object.values(this.elements.settings.panels).find(function (pane) {
return !pane.hidden;
});
}
var firstItem = target.querySelector('[role^="menuitem"]');
setFocus.call(this, firstItem, tabFocus);
},
// Show/hide menu
toggleMenu: function toggleMenu(input) {
var popup = this.elements.settings.popup;
@ -7824,7 +7856,8 @@ typeof navigator === "object" && (function (global, factory) {
}
// True toggle by default
var hidden = popup.hasAttribute('hidden');
var hidden = popup.hidden;
var show = hidden;
if (is$1.boolean(input)) {
@ -7833,19 +7866,13 @@ typeof navigator === "object" && (function (global, factory) {
show = false;
} else if (is$1.event(input)) {
var isMenuItem = popup.contains(input.target);
var isButton = input.target === button;
// If the click was inside the menu or if the click
// wasn't the button or menu item and we're trying to
// show the menu (a doc click shouldn't show the menu)
if (isMenuItem || !isMenuItem && !isButton && show) {
if (isMenuItem || !isMenuItem && input.target !== button && show) {
return;
}
// Prevent the toggle being caught by the doc listener
if (isButton) {
input.stopPropagation();
}
}
// Set button attributes
@ -7859,11 +7886,7 @@ typeof navigator === "object" && (function (global, factory) {
// Focus the first item if key interaction
if (show && is$1.keyboardEvent(input)) {
var pane = Object.values(this.elements.settings.panels).find(function (pane) {
return !pane.hidden;
});
var firstItem = pane.querySelector('[role^="menuitem"]');
setFocus.call(this, firstItem, true);
controls.focusFirstMenuItem.call(this, null, true);
}
// If closing, re-focus the button
else if (!show && !hidden) {
@ -7955,8 +7978,7 @@ typeof navigator === "object" && (function (global, factory) {
toggleHidden(target, false);
// Focus the first item
var firstItem = target.querySelector('[role^="menuitem"]');
setFocus.call(this, firstItem, tabFocus);
controls.focusFirstMenuItem.call(this, target, tabFocus);
},
@ -8067,7 +8089,6 @@ typeof navigator === "object" && (function (global, factory) {
});
control.appendChild(controls.createButton.call(this, 'settings', {
id: 'plyr-settings-toggle-' + data.id,
'aria-haspopup': true,
'aria-controls': 'plyr-settings-' + data.id,
'aria-expanded': false
@ -8076,8 +8097,7 @@ typeof navigator === "object" && (function (global, factory) {
var popup = createElement('div', {
class: 'plyr__menu__container',
id: 'plyr-settings-' + data.id,
hidden: '',
'aria-labelled-by': 'plyr-settings-toggle-' + data.id
hidden: ''
});
var inner = createElement('div');
@ -10296,6 +10316,9 @@ typeof navigator === "object" && (function (global, factory) {
// Settings menu - click toggle
this.bind(elements.buttons.settings, 'click', function (event) {
// Prevent the document click listener closing the menu
event.stopPropagation();
controls.toggleMenu.call(player, event);
});
@ -10303,8 +10326,16 @@ typeof navigator === "object" && (function (global, factory) {
// We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
// https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
this.bind(elements.buttons.settings, 'keyup', function (event) {
var code = event.which;
// We only care about space and return
if (event.which !== 32 && event.which !== 13) {
if (![13, 32].includes(code)) {
return;
}
// Because return triggers a click anyway, all we need to do is set focus
if (code === 13) {
controls.focusFirstMenuItem.call(player, null, true);
return;
}
@ -10312,13 +10343,12 @@ typeof navigator === "object" && (function (global, factory) {
event.preventDefault();
// Prevent playing video (Firefox)
if (event.which === 32) {
event.stopPropagation();
}
// Toggle menu
controls.toggleMenu.call(player, event);
}, null, false);
}, null, false // Can't be passive as we're preventing default
);
// Escape closes menu
this.bind(elements.settings.menu, 'keydown', function (event) {

2
dist/plyr.polyfilled.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.polyfilled.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "3.4.0-beta.1",
"version": "3.4.0-beta.2",
"description":
"A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "https://plyr.io",

8
readme.md
View File

@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
```html
<script src="https://cdn.plyr.io/3.4.0-beta.1/plyr.js"></script>
<script src="https://cdn.plyr.io/3.4.0-beta.2/plyr.js"></script>
```
...or...
```html
<script src="https://cdn.plyr.io/3.4.0-beta.1/plyr.polyfilled.js"></script>
<script src="https://cdn.plyr.io/3.4.0-beta.2/plyr.polyfilled.js"></script>
```
### CSS
@ -152,13 +152,13 @@ Include the `plyr.css` stylsheet into your `<head>`
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
```html
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.0-beta.1/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.0-beta.2/plyr.css">
```
### SVG Sprite
The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.0-beta.1/plyr.svg`.
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.0-beta.2/plyr.svg`.
## Ads

2
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v3.4.0-beta.1
// plyr.js v3.4.0-beta.2
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================

2
src/js/plyr.polyfilled.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr Polyfilled Build
// plyr.js v3.4.0-beta.1
// plyr.js v3.4.0-beta.2
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================