Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
0c9759455c | ||
|
|
ae59c117b5 | ||
|
|
8da1a78342 | ||
|
|
747c5f5f31 | ||
|
|
39c6049850 | ||
|
|
0202e8efb0 | ||
|
|
e17d0220c0 | ||
|
|
aa4eaec742 | ||
|
|
851c39d44e | ||
|
|
f012a7df36 | ||
|
|
b8c40ead0a | ||
|
|
874bb8d3e8 |
21
CHANGELOG.md
21
CHANGELOG.md
@ -1,3 +1,24 @@
|
||||
# Changelog
|
||||
|
||||
### v3.7.8
|
||||
|
||||
- Feat: Minor demo style tweaks
|
||||
- Fix: Minor style fixes related to backgrounds and border radii (🚨 Requires a SCSS/CSS update 🚨)
|
||||
|
||||
### v3.7.7
|
||||
|
||||
- Fix (Accessibility): Don’t set tabindex on parent container
|
||||
- Fix (Accessibility): Add `role="timer"` to time elements
|
||||
- Fix (Accessibility): Leverage native `:focus-visible` in CSS, instead of a custom solution (🚨 Requires a SCSS/CSS update 🚨)
|
||||
|
||||
### v3.7.6
|
||||
|
||||
- Fix: Revert postinstall script
|
||||
|
||||
### v3.7.5
|
||||
|
||||
- Fix: Replace `pnpm` with `npm` in scripts to fix build issues
|
||||
|
||||
### v3.7.4
|
||||
|
||||
- Fix: Fixed event key with space (thanks @royeden!)
|
||||
|
||||
13
README.md
13
README.md
@ -137,13 +137,13 @@ See [initialising](#initializing) for more information on advanced setups.
|
||||
You can use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately as part of your application but to make life easier you can use the polyfilled build.
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/3.7.4/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
|
||||
```
|
||||
|
||||
...or...
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/3.7.4/plyr.polyfilled.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
|
||||
```
|
||||
|
||||
## CSS
|
||||
@ -157,13 +157,13 @@ Include the `plyr.css` stylesheet into your `<head>`.
|
||||
If you want to use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the default CSS, you can use the following:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.4/plyr.css" />
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
||||
```
|
||||
|
||||
## SVG Sprite
|
||||
|
||||
The SVG sprite is loaded automatically from our CDN (provided by [Cloudflare](https://www.cloudflare.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.7.4/plyr.svg`.
|
||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.7.8/plyr.svg`.
|
||||
|
||||
### Self hosting
|
||||
|
||||
@ -171,7 +171,7 @@ If you don't want to create a build system to include Plyr as an npm module, you
|
||||
|
||||
- Download the files from the CDN links above, they're already minified.
|
||||
- Download the files from [unpkg](https://unpkg.com/browse/plyr/dist/) or similar services.
|
||||
- Build the project yourself using `pnpm i`, which installs the dependencies and spits out a build to `dist`.
|
||||
- Build the project yourself using `npm i && npm run build`, which installs the dependencies and spits out a build to `dist`.
|
||||
|
||||
# Ads
|
||||
|
||||
@ -197,11 +197,10 @@ Here's a list of the properties and what they are used for:
|
||||
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
|
||||
| `--plyr-color-main` | The primary UI color. |  `#00b3ff` |
|
||||
| `--plyr-video-background` | The background color of video and poster wrappers for using alpha channel videos and poster images. | `rgba(0, 0, 0, 1)` |
|
||||
| `--plyr-tab-focus-color` | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus. | `--plyr-color-main` |
|
||||
| `--plyr-focus-visible-color` | The color used for the focus styles when an element is `:focus-visible` (keyboard focused). | `--plyr-color-main` |
|
||||
| `--plyr-badge-background` | The background color for badges in the menu. |  `#4a5464` |
|
||||
| `--plyr-badge-text-color` | The text color for badges. |  `#ffffff` |
|
||||
| `--plyr-badge-border-radius` | The border radius used for badges. | `2px` |
|
||||
| `--plyr-tab-focus-color` | The color used to highlight tab (keyboard) focus. | `--plyr-color-main` |
|
||||
| `--plyr-captions-background` | The color for the background of captions. | `rgba(0, 0, 0, 0.8)` |
|
||||
| `--plyr-captions-text-color` | The color used for the captions text. |  `#ffffff` |
|
||||
| `--plyr-control-icon-size` | The size of the icons used in the controls. | `18px` |
|
||||
|
||||
@ -66,42 +66,46 @@
|
||||
<h1>Pl<span>a</span>y<span>e</span>r</h1>
|
||||
<p>
|
||||
A simple, accessible and customisable media player for
|
||||
<button type="button" class="faux-link" data-source="video">
|
||||
<button type="button" class="link" data-source="video">
|
||||
<svg class="icon">
|
||||
<title>HTML5</title>
|
||||
<path
|
||||
d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
|
||||
></path></svg
|
||||
>Video</button
|
||||
></path>
|
||||
</svg>
|
||||
Video</button
|
||||
>,
|
||||
<button type="button" class="faux-link" data-source="audio">
|
||||
<button type="button" class="link" data-source="audio">
|
||||
<svg class="icon">
|
||||
<title>HTML5</title>
|
||||
<path
|
||||
d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
|
||||
></path></svg
|
||||
>Audio</button
|
||||
></path>
|
||||
</svg>
|
||||
Audio</button
|
||||
>,
|
||||
<button type="button" class="faux-link" data-source="youtube">
|
||||
<button type="button" class="link" data-source="youtube">
|
||||
<svg class="icon" role="presentation">
|
||||
<title>YouTube</title>
|
||||
<path
|
||||
d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
|
||||
s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
|
||||
M6,11V5l5,3L6,11z"
|
||||
></path></svg
|
||||
>YouTube
|
||||
></path>
|
||||
</svg>
|
||||
YouTube
|
||||
</button>
|
||||
and
|
||||
<button type="button" class="faux-link" data-source="vimeo">
|
||||
<button type="button" class="link" data-source="vimeo">
|
||||
<svg class="icon" role="presentation">
|
||||
<title>Vimeo</title>
|
||||
<path
|
||||
d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
|
||||
C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
|
||||
c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
|
||||
></path></svg
|
||||
>Vimeo
|
||||
></path>
|
||||
</svg>
|
||||
Vimeo
|
||||
</button>
|
||||
</p>
|
||||
|
||||
@ -177,7 +181,10 @@
|
||||
d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
|
||||
></path>
|
||||
</svg>
|
||||
<a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank"
|
||||
<a
|
||||
href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
|
||||
target="_blank"
|
||||
class="link"
|
||||
>View From A Blue Moon</a
|
||||
>
|
||||
© Brainfarm
|
||||
@ -191,7 +198,7 @@
|
||||
d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
|
||||
></path>
|
||||
</svg>
|
||||
<a href="http://www.kishibashi.com/" target="_blank"
|
||||
<a href="http://www.kishibashi.com/" target="_blank" class="link"
|
||||
>Kishi Bashi – “It All Began With A Burst”</a
|
||||
>
|
||||
© Kishi Bashi
|
||||
@ -215,7 +222,7 @@
|
||||
</li>
|
||||
<li class="plyr__cite plyr__cite--vimeo" hidden>
|
||||
<small>
|
||||
<a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a>
|
||||
<a href="https://vimeo.com/40648169" target="_blank" class="link">Toob “Wavaphon” Music Video</a>
|
||||
on
|
||||
<span class="color--vimeo">
|
||||
<svg class="icon" role="presentation">
|
||||
@ -248,7 +255,7 @@
|
||||
<a
|
||||
href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
|
||||
target="_blank"
|
||||
class="js-shr"
|
||||
class="link js-shr"
|
||||
>tweet it</a
|
||||
>
|
||||
👍
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
// Please see README.md in the root or github.com/sampotts/plyr
|
||||
// ==========================================================================
|
||||
|
||||
import './tab-focus';
|
||||
import 'custom-event-polyfill';
|
||||
import 'url-polyfill';
|
||||
|
||||
@ -13,7 +12,6 @@ import Shr from 'shr-buttons';
|
||||
|
||||
import Plyr from '../../../src/js/plyr';
|
||||
import sources from './sources';
|
||||
import toggleClass from './toggle-class';
|
||||
|
||||
(() => {
|
||||
const production = 'plyr.io';
|
||||
@ -108,10 +106,10 @@ import toggleClass from './toggle-class';
|
||||
|
||||
function render(type) {
|
||||
// Remove active classes
|
||||
Array.from(buttons).forEach((button) => toggleClass(button.parentElement, 'active', false));
|
||||
Array.from(buttons).forEach((button) => button.parentElement.classList.toggle('active', false));
|
||||
|
||||
// Set active on parent
|
||||
toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
|
||||
document.querySelector(`[data-source="${type}"]`).classList.toggle('active', true);
|
||||
|
||||
// Show cite
|
||||
Array.from(document.querySelectorAll('.plyr__cite')).forEach((cite) => {
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
// Setup tab focus
|
||||
const container = document.getElementById('container');
|
||||
const tabClassName = 'tab-focus';
|
||||
|
||||
// Remove class on blur
|
||||
document.addEventListener('focusout', (event) => {
|
||||
if (!event.target.classList || container.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.target.classList.remove(tabClassName);
|
||||
});
|
||||
|
||||
// Add classname to tabbed elements
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'Tab') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Delay the adding of classname until the focus has changed
|
||||
// This event fires before the focusin event
|
||||
setTimeout(() => {
|
||||
const focused = document.activeElement;
|
||||
|
||||
if (!focused || !focused.classList || container.contains(focused)) {
|
||||
return;
|
||||
}
|
||||
|
||||
focused.classList.add(tabClassName);
|
||||
}, 10);
|
||||
});
|
||||
@ -1,5 +0,0 @@
|
||||
// Toggle class on an element
|
||||
const toggleClass = (element, className = '', toggle = false) =>
|
||||
element && element.classList[toggle ? 'add' : 'remove'](className);
|
||||
|
||||
export default toggleClass;
|
||||
@ -7,8 +7,7 @@
|
||||
.button__count {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-radius: $border-radius-base;
|
||||
box-shadow: 0 1px 1px rgba(#000, 0.1);
|
||||
border-radius: $border-radius-medium;
|
||||
display: inline-flex;
|
||||
padding: ($spacing-base * 0.75);
|
||||
position: relative;
|
||||
@ -19,45 +18,49 @@
|
||||
|
||||
// Buttons
|
||||
.button {
|
||||
background: $color-button-background;
|
||||
--shadow-color: 0deg 0% 20%;
|
||||
align-items: center;
|
||||
background-color: $color-button-background;
|
||||
background-image: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.05));
|
||||
border: 1px solid darken($color-button-background, 5);
|
||||
box-shadow: 0 0.8px 1px hsl(var(--shadow-color) / 0.05), 0 1.3px 1.6px -1px hsl(var(--shadow-color) / 0.06),
|
||||
0 2.8px 3.4px -2px hsl(var(--shadow-color) / 0.07);
|
||||
color: $color-button-text;
|
||||
display: inline-flex;
|
||||
font-weight: $font-weight-bold;
|
||||
gap: 0.25rem;
|
||||
padding-left: ($spacing-base * 1.25);
|
||||
padding-right: ($spacing-base * 1.25);
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $color-button-background-hover;
|
||||
border-color: darken($color-button-background, 7);
|
||||
|
||||
// Remove the underline/border
|
||||
&::after {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 2px rgba(#000, 0.1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.tab-focus {
|
||||
@include tab-focus;
|
||||
&:focus-visible {
|
||||
@include focus-visible($color-button-background);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Button group
|
||||
.button--with-count {
|
||||
display: inline-flex;
|
||||
|
||||
.button .icon {
|
||||
.icon {
|
||||
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
@ -66,19 +69,21 @@
|
||||
.button__count {
|
||||
animation: fade-in 0.2s ease;
|
||||
background: $color-button-count-background;
|
||||
border: 1px solid $color-gray-100;
|
||||
color: $color-button-count-text;
|
||||
margin-left: ($spacing-base * 0.75);
|
||||
|
||||
&::before {
|
||||
border: $arrow-size solid transparent;
|
||||
border-left-width: 0;
|
||||
border-right-color: $color-button-count-background;
|
||||
background-color: $color-button-count-background;
|
||||
border: inherit;
|
||||
border-width: 0 0 1px 1px;
|
||||
content: '';
|
||||
height: 0;
|
||||
display: block;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
transform: translateY(-50%) translateX(50%) translateX(-1px) rotate(45deg);
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,15 +2,9 @@
|
||||
// Links
|
||||
// ==========================================================================
|
||||
|
||||
// Make a <button> look like an <a>
|
||||
button.faux-link {
|
||||
@extend a; // stylelint-disable-line
|
||||
@include cancel-button-styles;
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
border-bottom: 1px dotted currentColor;
|
||||
.link {
|
||||
align-items: center;
|
||||
border-bottom: 1px dashed currentColor;
|
||||
color: $color-link;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
@ -38,8 +32,8 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-focus {
|
||||
@include tab-focus;
|
||||
&:focus-visible {
|
||||
@include focus-visible($color-link);
|
||||
}
|
||||
|
||||
&.no-border::after {
|
||||
|
||||
@ -6,8 +6,10 @@
|
||||
|
||||
// Example players
|
||||
.plyr {
|
||||
border-radius: $border-radius-large;
|
||||
box-shadow: 0 2px 15px rgba(#000, 0.1);
|
||||
--shadow-color: 197deg 32% 65%;
|
||||
border-radius: $border-radius-2x-large;
|
||||
box-shadow: 0 0.5px 0.6px hsl(var(--shadow-color) / 0.36), 0 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
|
||||
0 4.3px 4.8px -1.7px hsl(var(--shadow-color) / 0.36), -0.1px 10.6px 11.9px -2.5px hsl(var(--shadow-color) / 0.36);
|
||||
margin: $spacing-base auto;
|
||||
|
||||
&.plyr--audio {
|
||||
@ -17,6 +19,7 @@
|
||||
|
||||
.plyr__video-wrapper::after {
|
||||
border: 1px solid rgba(#000, 0.15);
|
||||
border-bottom-color: rgba(#000, 0.25);
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
|
||||
@ -37,6 +37,7 @@ main {
|
||||
aside {
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
@ -58,8 +59,8 @@ aside {
|
||||
a {
|
||||
color: $color-twitter;
|
||||
|
||||
&.tab-focus {
|
||||
@include tab-focus($color-twitter);
|
||||
&:focus-visible {
|
||||
@include focus-visible($color-twitter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,30 +4,11 @@
|
||||
|
||||
@use 'sass:math';
|
||||
|
||||
// Convert a <button> into an <a>
|
||||
// ---------------------------------------
|
||||
@mixin cancel-button-styles() {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
line-height: $line-height-base;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
text-shadow: inherit;
|
||||
user-select: text;
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Nicer focus styles
|
||||
// ---------------------------------------
|
||||
@mixin tab-focus($color: $tab-focus-default-color) {
|
||||
box-shadow: 0 0 0 3px rgba($color, 0.35);
|
||||
outline: 0;
|
||||
@mixin focus-visible($color: $focus-default-color) {
|
||||
outline: 2px dashed $color;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Use rems for font sizing
|
||||
|
||||
@ -9,3 +9,7 @@
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
@ -39,4 +39,4 @@ $color-button-count-background: #fff;
|
||||
$color-button-count-text: $color-gray-600;
|
||||
|
||||
// Focus
|
||||
$tab-focus-default-color: #fff;
|
||||
$focus-default-color: $color-brand-primary;
|
||||
|
||||
@ -6,8 +6,9 @@
|
||||
$arrow-size: 5px;
|
||||
|
||||
// Radii
|
||||
$border-radius-base: 4px;
|
||||
$border-radius-large: 8px;
|
||||
$border-radius-small: 4px;
|
||||
$border-radius-medium: 6px;
|
||||
$border-radius-2x-large: 12px;
|
||||
|
||||
// Background
|
||||
$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
|
||||
|
||||
4
demo/src/sass/utilities/focus.scss
Normal file
4
demo/src/sass/utilities/focus.scss
Normal file
@ -0,0 +1,4 @@
|
||||
*:focus-visible {
|
||||
outline: 2px dotted $color-brand-primary;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "3.7.4",
|
||||
"version": "3.7.8",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "https://plyr.io",
|
||||
"author": "Sam Potts <sam@potts.es>",
|
||||
@ -30,12 +30,11 @@
|
||||
},
|
||||
"browserslist": "> 1%",
|
||||
"scripts": {
|
||||
"postinstall": "pnpm build",
|
||||
"build": "gulp build",
|
||||
"lint": "eslint src/js && pnpm remark && stylelint **/*.scss",
|
||||
"lint": "eslint src/js && npm run remark && stylelint **/*.scss",
|
||||
"lint:fix": "eslint --fix src/js && stylelint **/*.scss --fix",
|
||||
"remark": "remark -f --use 'validate-links=repository:\"sampotts/plyr\"' '{,!(node_modules),.?**/}*.md'",
|
||||
"deploy": "pnpm lint && gulp version && gulp build && gulp deploy",
|
||||
"deploy": "npm run lint && gulp version && gulp build && gulp deploy",
|
||||
"format": "prettier --write \"./{src,demo/src}/**/*.{js,scss}\"",
|
||||
"spellcheck": "cspell \"**/*.{js,md,scss,json}\" --no-must-find-files",
|
||||
"start": "gulp"
|
||||
|
||||
@ -60,7 +60,7 @@ const defaults = {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.7.4/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.7.8/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
@ -379,7 +379,6 @@ const defaults = {
|
||||
supported: 'plyr--airplay-supported',
|
||||
active: 'plyr--airplay-active',
|
||||
},
|
||||
tabFocus: 'plyr__tab-focus',
|
||||
previewThumbnails: {
|
||||
// Tooltip thumbs
|
||||
thumbContainer: 'plyr__preview-thumb',
|
||||
|
||||
9
src/js/controls.js
vendored
9
src/js/controls.js
vendored
@ -383,6 +383,7 @@ const controls = {
|
||||
extend(attributes, {
|
||||
class: `${attributes.class ? attributes.class : ''} ${this.config.classNames.display.time} `.trim(),
|
||||
'aria-label': i18n.get(type, this.config),
|
||||
role: 'timer',
|
||||
}),
|
||||
'00:00',
|
||||
);
|
||||
@ -1105,7 +1106,7 @@ const controls = {
|
||||
},
|
||||
|
||||
// Focus the first menu item in a given (or visible) menu
|
||||
focusFirstMenuItem(pane, tabFocus = false) {
|
||||
focusFirstMenuItem(pane, focusVisible = false) {
|
||||
if (this.elements.settings.popup.hidden) {
|
||||
return;
|
||||
}
|
||||
@ -1118,7 +1119,7 @@ const controls = {
|
||||
|
||||
const firstItem = target.querySelector('[role^="menuitem"]');
|
||||
|
||||
setFocus.call(this, firstItem, tabFocus);
|
||||
setFocus.call(this, firstItem, focusVisible);
|
||||
},
|
||||
|
||||
// Show/hide menu
|
||||
@ -1195,7 +1196,7 @@ const controls = {
|
||||
},
|
||||
|
||||
// Show a panel in the menu
|
||||
showMenuPanel(type = '', tabFocus = false) {
|
||||
showMenuPanel(type = '', focusVisible = false) {
|
||||
const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);
|
||||
|
||||
// Nothing to show, bail
|
||||
@ -1246,7 +1247,7 @@ const controls = {
|
||||
toggleHidden(target, false);
|
||||
|
||||
// Focus the first item
|
||||
controls.focusFirstMenuItem.call(this, target, tabFocus);
|
||||
controls.focusFirstMenuItem.call(this, target, focusVisible);
|
||||
},
|
||||
|
||||
// Set the download URL
|
||||
|
||||
@ -21,7 +21,6 @@ class Listeners {
|
||||
|
||||
this.handleKey = this.handleKey.bind(this);
|
||||
this.toggleMenu = this.toggleMenu.bind(this);
|
||||
this.setTabFocus = this.setTabFocus.bind(this);
|
||||
this.firstTouch = this.firstTouch.bind(this);
|
||||
}
|
||||
|
||||
@ -194,57 +193,6 @@ class Listeners {
|
||||
toggleClass(elements.container, player.config.classNames.isTouch, true);
|
||||
};
|
||||
|
||||
setTabFocus = (event) => {
|
||||
const { player } = this;
|
||||
const { elements } = player;
|
||||
const { key, type, timeStamp } = event;
|
||||
|
||||
clearTimeout(this.focusTimer);
|
||||
|
||||
// Ignore any key other than tab
|
||||
if (type === 'keydown' && key !== 'Tab') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Store reference to event timeStamp
|
||||
if (type === 'keydown') {
|
||||
this.lastKeyDown = timeStamp;
|
||||
}
|
||||
|
||||
// Remove current classes
|
||||
const removeCurrent = () => {
|
||||
const className = player.config.classNames.tabFocus;
|
||||
const current = getElements.call(player, `.${className}`);
|
||||
toggleClass(current, className, false);
|
||||
};
|
||||
|
||||
// Determine if a key was pressed to trigger this event
|
||||
const wasKeyDown = timeStamp - this.lastKeyDown <= 20;
|
||||
|
||||
// Ignore focus events if a key was pressed prior
|
||||
if (type === 'focus' && !wasKeyDown) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove all current
|
||||
removeCurrent();
|
||||
|
||||
// Delay the adding of classname until the focus has changed
|
||||
// This event fires before the focusin event
|
||||
if (type !== 'focusout') {
|
||||
this.focusTimer = setTimeout(() => {
|
||||
const focused = document.activeElement;
|
||||
|
||||
// Ignore if current focus element isn't inside the player
|
||||
if (!elements.container.contains(focused)) {
|
||||
return;
|
||||
}
|
||||
|
||||
toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
|
||||
}, 10);
|
||||
}
|
||||
};
|
||||
|
||||
// Global window & document listeners
|
||||
global = (toggle = true) => {
|
||||
const { player } = this;
|
||||
@ -259,9 +207,6 @@ class Listeners {
|
||||
|
||||
// Detect touch by events
|
||||
once.call(player, document.body, 'touchstart', this.firstTouch);
|
||||
|
||||
// Tab focus detection
|
||||
toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
|
||||
};
|
||||
|
||||
// Container listeners
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v3.7.4
|
||||
// plyr.js v3.7.8
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -267,7 +267,7 @@ class Plyr {
|
||||
|
||||
// Wrap media
|
||||
if (!is.element(this.elements.container)) {
|
||||
this.elements.container = createElement('div', { tabindex: 0 });
|
||||
this.elements.container = createElement('div');
|
||||
wrap(this.media, this.elements.container);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr Polyfilled Build
|
||||
// plyr.js v3.7.4
|
||||
// plyr.js v3.7.8
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
|
||||
@ -37,9 +37,7 @@ export function wrap(elements, wrapper) {
|
||||
|
||||
// Set attributes
|
||||
export function setAttributes(element, attributes) {
|
||||
if (!is.element(element) || is.empty(attributes)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element) || is.empty(attributes)) return;
|
||||
|
||||
// Assume null and undefined attributes should be left out,
|
||||
// Setting them would otherwise convert them to "null" and "undefined"
|
||||
@ -69,18 +67,14 @@ export function createElement(type, attributes, text) {
|
||||
|
||||
// Insert an element after another
|
||||
export function insertAfter(element, target) {
|
||||
if (!is.element(element) || !is.element(target)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element) || !is.element(target)) return;
|
||||
|
||||
target.parentNode.insertBefore(element, target.nextSibling);
|
||||
}
|
||||
|
||||
// Insert a DocumentFragment
|
||||
export function insertElement(type, parent, attributes, text) {
|
||||
if (!is.element(parent)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(parent)) return;
|
||||
|
||||
parent.appendChild(createElement(type, attributes, text));
|
||||
}
|
||||
@ -101,9 +95,7 @@ export function removeElement(element) {
|
||||
|
||||
// Remove all child elements
|
||||
export function emptyElement(element) {
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element)) return;
|
||||
|
||||
let { length } = element.childNodes;
|
||||
|
||||
@ -115,9 +107,7 @@ export function emptyElement(element) {
|
||||
|
||||
// Replace element
|
||||
export function replaceElement(newChild, oldChild) {
|
||||
if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) {
|
||||
return null;
|
||||
}
|
||||
if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) return null;
|
||||
|
||||
oldChild.parentNode.replaceChild(newChild, oldChild);
|
||||
|
||||
@ -131,9 +121,7 @@ export function getAttributesFromSelector(sel, existingAttributes) {
|
||||
// '#test' to { id: 'test' }
|
||||
// '[data-test="test"]' to { 'data-test': 'test' }
|
||||
|
||||
if (!is.string(sel) || is.empty(sel)) {
|
||||
return {};
|
||||
}
|
||||
if (!is.string(sel) || is.empty(sel)) return {};
|
||||
|
||||
const attributes = {};
|
||||
const existing = extend({}, existingAttributes);
|
||||
@ -181,9 +169,7 @@ export function getAttributesFromSelector(sel, existingAttributes) {
|
||||
|
||||
// Toggle hidden
|
||||
export function toggleHidden(element, hidden) {
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element)) return;
|
||||
|
||||
let hide = hidden;
|
||||
|
||||
@ -268,16 +254,9 @@ export function getElement(selector) {
|
||||
}
|
||||
|
||||
// Set focus and tab focus class
|
||||
export function setFocus(element = null, tabFocus = false) {
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
export function setFocus(element = null, focusVisible = false) {
|
||||
if (!is.element(element)) return;
|
||||
|
||||
// Set regular focus
|
||||
element.focus({ preventScroll: true });
|
||||
|
||||
// If we want to mimic keyboard focus via tab
|
||||
if (tabFocus) {
|
||||
toggleClass(element, this.config.classNames.tabFocus);
|
||||
}
|
||||
element.focus({ preventScroll: true, focusVisible });
|
||||
}
|
||||
|
||||
@ -28,8 +28,8 @@
|
||||
}
|
||||
|
||||
// Tab focus
|
||||
&.plyr__tab-focus {
|
||||
@include plyr-tab-focus;
|
||||
&:focus-visible {
|
||||
@include plyr-focus-visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
|
||||
}
|
||||
|
||||
&.plyr__tab-focus::after,
|
||||
&:focus-visible::after,
|
||||
&:hover::after {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
@ -132,7 +132,7 @@
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
&.plyr__tab-focus::after,
|
||||
&:focus-visible::after,
|
||||
&:hover::after {
|
||||
border-right-color: currentColor;
|
||||
}
|
||||
@ -181,7 +181,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.plyr__tab-focus::before,
|
||||
&:focus-visible::before,
|
||||
&:hover::before {
|
||||
background: rgba($plyr-color-gray-900, 0.1);
|
||||
}
|
||||
|
||||
@ -83,17 +83,17 @@
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.plyr__tab-focus {
|
||||
&:focus-visible {
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include plyr-tab-focus;
|
||||
@include plyr-focus-visible;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include plyr-tab-focus;
|
||||
@include plyr-focus-visible;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
@include plyr-tab-focus;
|
||||
@include plyr-focus-visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
|
||||
// Displaying
|
||||
.plyr .plyr__control:hover .plyr__tooltip,
|
||||
.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
|
||||
.plyr .plyr__control:focus-visible .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
@ -82,7 +82,7 @@
|
||||
.plyr__controls > .plyr__control:first-child + .plyr__control,
|
||||
.plyr__controls > .plyr__control:last-child {
|
||||
&:hover .plyr__tooltip,
|
||||
&.plyr__tab-focus .plyr__tooltip,
|
||||
&:focus-visible .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
|
||||
// Nicer focus styles
|
||||
// ---------------------------------------
|
||||
@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
|
||||
outline: $color dotted 3px;
|
||||
@mixin plyr-focus-visible($color: $plyr-focus-visible-color) {
|
||||
outline: 2px dashed $color;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
$plyr-preview-padding: $plyr-tooltip-padding !default;
|
||||
$plyr-preview-background: $plyr-tooltip-background !default;
|
||||
$plyr-preview-radius: $plyr-tooltip-radius !default;
|
||||
$plyr-preview-radius: $plyr-menu-radius !default;
|
||||
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
|
||||
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
|
||||
$plyr-preview-image-background: $plyr-color-gray-200 !default;
|
||||
|
||||
@ -6,7 +6,7 @@ $plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
|
||||
$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
|
||||
$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
|
||||
$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
|
||||
$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
|
||||
$plyr-control-radius: var(--plyr-control-radius, 4px) !default;
|
||||
$plyr-control-toggle-checked-background: var(
|
||||
--plyr-control-toggle-checked-background,
|
||||
var(--plyr-color-main, $plyr-color-main)
|
||||
|
||||
@ -2,4 +2,4 @@
|
||||
// Cosmetic
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
|
||||
$plyr-focus-visible-color: var(--plyr-focus-visible-color, var(--plyr-color-main, $plyr-color-main)) !default;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
|
||||
$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
|
||||
$plyr-menu-radius: var(--plyr-menu-radius, 8px) !default;
|
||||
$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
|
||||
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
|
||||
$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
// Tooltips
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
|
||||
$plyr-tooltip-background: var(--plyr-tooltip-background, #fff) !default;
|
||||
$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
|
||||
$plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2);
|
||||
$plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
// Control elements
|
||||
.plyr--audio .plyr__control {
|
||||
&.plyr__tab-focus,
|
||||
&:focus-visible,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: $plyr-audio-control-background-hover;
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
|
||||
// Container
|
||||
.plyr--video {
|
||||
background: var(--plyr-video-background, $plyr-video-background);
|
||||
overflow: hidden;
|
||||
|
||||
&.plyr--menu-open {
|
||||
@ -16,6 +15,7 @@
|
||||
|
||||
.plyr__video-wrapper {
|
||||
background: var(--plyr-video-background, $plyr-video-background);
|
||||
border-radius: inherit;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
@ -87,8 +87,7 @@ $embed-padding: (math.div(100, 16) * 9);
|
||||
|
||||
// Control elements
|
||||
.plyr--video .plyr__control {
|
||||
// Hover and tab focus
|
||||
&.plyr__tab-focus,
|
||||
&:focus-visible,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: $plyr-video-control-background-hover;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user