Merge branch 'develop' of https://github.com/Selz/plyr into develop

1 files changed, 24 insertions, 1 deletions

diff --git a/src/js/ui.js b/src/js/ui.js
index 44f1a367..7a45a6c3 100644
--- a/src/js/ui.js
+++ b/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) {