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

readme.md

@@ -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.                                                                                                                                                                                                                                                                                           |

src/js/defaults.js

@@ -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',

src/js/listeners.js

@@ -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

src/js/plyr.js

@@ -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) {

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) {

src/sass/plyr.scss

@@ -37,6 +37,7 @@
 @import 'components/video';
 @import 'components/volume';
 
+@import 'states/error';
 @import 'states/fullscreen';
 
 @import 'utils/animation';

src/sass/settings/captions.scss

@@ -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-medium: $plyr-font-size-large !default;
-$plyr-font-size-captions-large: 21px !default;
+$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;

src/sass/settings/type.scss

@@ -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;

src/sass/states/error.scss

@@ -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;
+    }
+}

src/sass/states/fullscreen.scss

@@ -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;
 }