Merge branch 'develop' of https://github.com/Selz/plyr into develop
This commit is contained in:
Sam Potts
commit
e14e2cfaff
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js.map
vendored
2
dist/plyr.js.map
vendored
File diff suppressed because one or more lines are too long
@ -260,7 +260,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
|
||||
| `displayDuration` | Boolean | `true` | Displays the duration of the media on the "metadataloaded" event (on startup) in the current time display. This will only work if the `preload` attribute is not set to `none` (or is not set at all) and you choose not to display the duration (see `controls` option). |
|
||||
| `invertTime` | Boolean | `true` | Display the current time as a countdown rather than an incremental counter. |
|
||||
| `toggleInvert` | Boolean | `true` | Allow users to click to toggle the above. |
|
||||
| `listeners` | Object | `null` | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. IF your handler prevents default on the event, the default handler will not fire. |
|
||||
| `listeners` | Object | `null` | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire. |
|
||||
| `captions` | Object | `{ active: false, language: window.navigator.language.split('-')[0] }` | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). |
|
||||
| `fullscreen` | Object | `{ enabled: true, fallback: true }` | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution. |
|
||||
| `ratio` | String | `16:9` | The aspect ratio you want to use for embedded players. |
|
||||
|
||||
@ -305,6 +305,7 @@ const defaults = {
|
||||
stopped: 'plyr--stopped',
|
||||
playing: 'plyr--playing',
|
||||
loading: 'plyr--loading',
|
||||
error: 'plyr--has-error',
|
||||
hover: 'plyr--hover',
|
||||
tooltip: 'plyr__tooltip',
|
||||
hidden: 'plyr__sr-only',
|
||||
|
||||
@ -221,6 +221,11 @@ const listeners = {
|
||||
utils.on(document, fullscreen.eventType, event => {
|
||||
this.toggleFullscreen(event);
|
||||
});
|
||||
|
||||
// Fullscreen toggle on double click
|
||||
utils.on(this.elements.container, 'dblclick', event => {
|
||||
this.toggleFullscreen(event);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@ -263,6 +268,9 @@ const listeners = {
|
||||
// Loading
|
||||
utils.on(this.media, 'stalled waiting canplay seeked playing', event => ui.checkLoading.call(this, event));
|
||||
|
||||
// Check if media failed to load
|
||||
// utils.on(this.media, 'play', event => ui.checkFailed.call(this, event));
|
||||
|
||||
// Click video
|
||||
if (this.supported.ui && this.config.clickToPlay && !this.isAudio) {
|
||||
// Re-fetch the wrapper
|
||||
|
||||
@ -35,7 +35,11 @@ let scrollPosition = {
|
||||
class Plyr {
|
||||
constructor(target, options) {
|
||||
this.timers = {};
|
||||
|
||||
// State
|
||||
this.ready = false;
|
||||
this.loading = false;
|
||||
this.failed = false;
|
||||
|
||||
// Set the media element
|
||||
this.media = target;
|
||||
@ -809,6 +813,11 @@ class Plyr {
|
||||
* @param {event} event
|
||||
*/
|
||||
toggleFullscreen(event) {
|
||||
// Video only
|
||||
if (this.isAudio) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for native support
|
||||
if (fullscreen.enabled) {
|
||||
if (utils.is.event(event) && event.type === fullscreen.eventType) {
|
||||
|
||||
25
src/js/ui.js
25
src/js/ui.js
@ -153,7 +153,7 @@ const ui = {
|
||||
|
||||
// Check if media is loading
|
||||
checkLoading(event) {
|
||||
this.loading = [
|
||||
this.loading = this.media.networkState === 2 || [
|
||||
'stalled',
|
||||
'waiting',
|
||||
].includes(event.type);
|
||||
@ -171,6 +171,29 @@ const ui = {
|
||||
}, this.loading ? 250 : 0);
|
||||
},
|
||||
|
||||
// Check if media failed to load
|
||||
checkFailed() {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/networkState
|
||||
this.failed = this.media.networkState === 3;
|
||||
|
||||
if (this.failed) {
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.loading, false);
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.error, true);
|
||||
}
|
||||
|
||||
// Clear timer
|
||||
clearTimeout(this.timers.failed);
|
||||
|
||||
// Timer to prevent flicker when seeking
|
||||
this.timers.loading = setTimeout(() => {
|
||||
// Toggle container class hook
|
||||
utils.toggleClass(this.elements.container, this.config.classNames.loading, this.loading);
|
||||
|
||||
// Show controls if loading, hide if done
|
||||
this.toggleControls(this.loading);
|
||||
}, this.loading ? 250 : 0);
|
||||
},
|
||||
|
||||
// Update volume UI and storage
|
||||
updateVolume() {
|
||||
if (!this.supported.ui) {
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
@import 'components/video';
|
||||
@import 'components/volume';
|
||||
|
||||
@import 'states/error';
|
||||
@import 'states/fullscreen';
|
||||
|
||||
@import 'utils/animation';
|
||||
|
||||
@ -6,5 +6,5 @@ $plyr-captions-bg: rgba(#000, 0.8) !default;
|
||||
$plyr-captions-color: #fff !default;
|
||||
$plyr-font-size-captions-base: $plyr-font-size-base !default;
|
||||
$plyr-font-size-captions-small: $plyr-font-size-small !default;
|
||||
$plyr-font-size-captions-medium: 18px !default;
|
||||
$plyr-font-size-captions-large: 21px !default;
|
||||
$plyr-font-size-captions-medium: $plyr-font-size-large !default;
|
||||
$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
|
||||
$plyr-font-size-base: 16px !default;
|
||||
$plyr-font-size-small: 14px !default;
|
||||
$plyr-font-size-large: 18px !default;
|
||||
$plyr-font-size-xlarge: 21px !default;
|
||||
|
||||
$plyr-font-size-time: 14px !default;
|
||||
$plyr-font-size-badge: 9px !default;
|
||||
|
||||
25
src/sass/states/error.scss
Normal file
25
src/sass/states/error.scss
Normal file
@ -0,0 +1,25 @@
|
||||
// --------------------------------------------------------------
|
||||
// Error state
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr--has-error {
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
align-items: center;
|
||||
background: rgba(#000, 90%);
|
||||
color: #fff;
|
||||
content: attr(data-plyr-error);
|
||||
display: flex;
|
||||
font-size: $plyr-font-size-base;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 1px rgba(#000, 10%);
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
@ -6,14 +6,17 @@
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.plyr:-webkit-full-screen {
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.plyr:-moz-full-screen {
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.plyr:-ms-fullscreen {
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
@ -22,10 +25,10 @@
|
||||
.plyr--fullscreen-fallback {
|
||||
@include plyr-fullscreen-active();
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10000000;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user