Remove ui.checkFailed() and error class
This commit is contained in:
parent
4db6bf7a2e
commit
d7356726a1
@ -338,7 +338,6 @@ const defaults = {
|
|||||||
paused: 'plyr--paused',
|
paused: 'plyr--paused',
|
||||||
stopped: 'plyr--stopped',
|
stopped: 'plyr--stopped',
|
||||||
loading: 'plyr--loading',
|
loading: 'plyr--loading',
|
||||||
error: 'plyr--has-error',
|
|
||||||
hover: 'plyr--hover',
|
hover: 'plyr--hover',
|
||||||
tooltip: 'plyr__tooltip',
|
tooltip: 'plyr__tooltip',
|
||||||
cues: 'plyr__cues',
|
cues: 'plyr__cues',
|
||||||
|
@ -283,9 +283,6 @@ class Listeners {
|
|||||||
// Loading state
|
// Loading state
|
||||||
utils.on(this.player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(this.player, event));
|
utils.on(this.player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(this.player, event));
|
||||||
|
|
||||||
// Check if media failed to load
|
|
||||||
// utils.on(this.player.media, 'play', event => ui.checkFailed.call(this.player, event));
|
|
||||||
|
|
||||||
// If autoplay, then load advertisement if required
|
// If autoplay, then load advertisement if required
|
||||||
// TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
|
// TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
|
||||||
utils.on(this.player.media, 'playing', () => {
|
utils.on(this.player.media, 'playing', () => {
|
||||||
|
23
src/js/ui.js
23
src/js/ui.js
@ -196,29 +196,6 @@ const ui = {
|
|||||||
}, this.loading ? 250 : 0);
|
}, 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
|
// Update volume UI and storage
|
||||||
updateVolume() {
|
updateVolume() {
|
||||||
if (!this.supported.ui) {
|
if (!this.supported.ui) {
|
||||||
|
@ -39,7 +39,6 @@
|
|||||||
@import 'components/video';
|
@import 'components/video';
|
||||||
@import 'components/volume';
|
@import 'components/volume';
|
||||||
|
|
||||||
@import 'states/error';
|
|
||||||
@import 'states/fullscreen';
|
@import 'states/fullscreen';
|
||||||
|
|
||||||
@import 'plugins/ads';
|
@import 'plugins/ads';
|
||||||
|
@ -1,25 +0,0 @@
|
|||||||
// --------------------------------------------------------------
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
x
Reference in New Issue
Block a user