Merge pull request #1684 from sampotts/develop

v3.5.8

9 files changed, 73 insertions, 37 deletions

diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js
index bf0f8c42..be289e6a 100644
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@@ -419,6 +419,11 @@ const defaults = {
         title: false,
         speed: true,
         transparent: false,
+        // These settings require a pro or premium account to work
+        sidedock: false,
+        controls: false,
+        // Custom settings from Plyr
+        referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
     },
 
     // YouTube plugin
diff --git a/src/js/controls.js b/src/js/controls.js
index 1cce51f6..66ec7139 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -9,7 +9,7 @@ import captions from './captions';
 import html5 from './html5';
 import support from './support';
 import { repaint, transitionEndEvent } from './utils/animation';
-import { dedupe, fillRange } from './utils/arrays';
+import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
 import {
     createElement,
@@ -1053,13 +1053,8 @@ const controls = {
         const type = 'speed';
         const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
 
-        // Determine options to display
-        // Vimeo and YouTube limit to 0.5x-2x
-        if (this.isVimeo || this.isYouTube) {
-            this.options.speed = fillRange(0.5, 2, 0.25).filter(s => this.config.speed.options.includes(s));
-        } else {
-            this.options.speed = this.config.speed.options;
-        }
+        // Filter out invalid speeds
+        this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);
 
         // Toggle the pane and tab
         const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
diff --git a/src/js/html5.js b/src/js/html5.js
index d1e82489..0591a709 100644
--- a/src/js/html5.js
+++ b/src/js/html5.js
@@ -42,13 +42,16 @@ const html5 = {
             .filter(Boolean);
     },
 
-    extend() {
+    setup() {
         if (!this.isHTML5) {
             return;
         }
 
         const player = this;
 
+        // Set speed options from config
+        player.options.speed = player.config.speed.options;
+
         // Set aspect ratio if fixed
         if (!is.empty(this.config.ratio)) {
             setAspectRatio.call(player);
@@ -93,7 +96,6 @@ const html5 = {
                     if (preload !== 'none' || readyState) {
                         // Restore time
                         player.once('loadedmetadata', () => {
-
                             player.speed = playbackRate;
                             player.currentTime = currentTime;
 
diff --git a/src/js/media.js b/src/js/media.js
index cd1533d0..8c08456d 100644
--- a/src/js/media.js
+++ b/src/js/media.js
@@ -49,7 +49,7 @@ const media = {
         }
 
         if (this.isHTML5) {
-            html5.extend.call(this);
+            html5.setup.call(this);
         } else if (this.isYouTube) {
             youtube.setup.call(this);
         } else if (this.isVimeo) {
diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js
index 6cd09ef2..86eeebc8 100644
--- a/src/js/plugins/preview-thumbnails.js
+++ b/src/js/plugins/preview-thumbnails.js
@@ -104,7 +104,7 @@ class PreviewThumbnails {
     }
 
     load() {
-        // Togglethe regular seek tooltip
+        // Toggle the regular seek tooltip
         if (this.player.elements.display.seekTooltip) {
             this.player.elements.display.seekTooltip.hidden = this.enabled;
         }
@@ -328,6 +328,15 @@ class PreviewThumbnails {
         this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
     }
 
+    destroy() {
+        if (this.elements.thumb.container) {
+            this.elements.thumb.container.remove();
+        }
+        if (this.elements.scrubbing.container) {
+            this.elements.scrubbing.container.remove();
+        }
+    }
+
     showImageAtCurrentTime() {
         if (this.mouseDown) {
             this.setScrubbingContainerSize();
@@ -561,6 +570,11 @@ class PreviewThumbnails {
             return height;
         }
 
+        // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+        if (this.sizeSpecifiedInCSS) {
+            return this.elements.thumb.imageContainer.clientHeight;
+        }
+
         return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
     }
 
@@ -601,7 +615,7 @@ class PreviewThumbnails {
     }
 
     determineContainerAutoSizing() {
-        if (this.elements.thumb.imageContainer.clientHeight > 20) {
+        if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
             // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
             this.sizeSpecifiedInCSS = true;
         }
@@ -613,6 +627,12 @@ class PreviewThumbnails {
             const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
             this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
             this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
+        } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
+            const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
+            this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
+        } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
+            const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
+            this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
         }
 
         this.setThumbContainerPos();
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 9529f2cd..fa965d8e 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -42,23 +42,28 @@ function assurePlaybackState(play) {
 
 const vimeo = {
     setup() {
+        const player = this;
+
         // Add embed class for responsive
-        toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
+        toggleClass(player.elements.wrapper, player.config.classNames.embed, true);
+
+        // Set speed options from config
+        player.options.speed = player.config.speed.options;
 
         // Set intial ratio
-        setAspectRatio.call(this);
+        setAspectRatio.call(player);
 
         // Load the SDK if not already
         if (!is.object(window.Vimeo)) {
-            loadScript(this.config.urls.vimeo.sdk)
+            loadScript(player.config.urls.vimeo.sdk)
                 .then(() => {
-                    vimeo.ready.call(this);
+                    vimeo.ready.call(player);
                 })
                 .catch(error => {
-                    this.debug.warn('Vimeo SDK (player.js) failed to load', error);
+                    player.debug.warn('Vimeo SDK (player.js) failed to load', error);
                 });
         } else {
-            vimeo.ready.call(this);
+            vimeo.ready.call(player);
         }
     },
 
@@ -99,6 +104,11 @@ const vimeo = {
         iframe.setAttribute('allowtransparency', '');
         iframe.setAttribute('allow', 'autoplay');
 
+        // Set the referrer policy if required
+        if (!is.empty(config.referrerPolicy)) {
+            iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+        }
+
         // Get poster, if already set
         const { poster } = player;
         // Inject the package
@@ -191,12 +201,10 @@ const vimeo = {
                 return speed;
             },
             set(input) {
-                player.embed
-                    .setPlaybackRate(input)
-                    .then(() => {
-                        speed = input;
-                        triggerEvent.call(player, player.media, 'ratechange');
-                    });
+                player.embed.setPlaybackRate(input).then(() => {
+                    speed = input;
+                    triggerEvent.call(player, player.media, 'ratechange');
+                });
             },
         });
 
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index ba5d8de9..8c65b1dc 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -297,7 +297,9 @@ const youtube = {
                     });
 
                     // Get available speeds
-                    player.options.speed = instance.getAvailablePlaybackRates();
+                    const speeds = instance.getAvailablePlaybackRates();
+                    // Filter based on config
+                    player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
 
                     // Set the tabindex to avoid focus entering iframe
                     if (player.supported.ui) {
diff --git a/src/js/source.js b/src/js/source.js
index 0173cc9e..cb806746 100644
--- a/src/js/source.js
+++ b/src/js/source.js
@@ -5,6 +5,7 @@
 import { providers } from './config/types';
 import html5 from './html5';
 import media from './media';
+import PreviewThumbnails from './plugins/preview-thumbnails';
 import support from './support';
 import ui from './ui';
 import { createElement, insertElement, removeElement } from './utils/elements';
@@ -130,9 +131,20 @@ const source = {
                     this.media.load();
                 }
 
-                // Reload thumbnails
-                if (this.previewThumbnails) {
-                    this.previewThumbnails.load();
+                // Update previewThumbnails config & reload plugin
+                if (!is.empty(input.previewThumbnails)) {
+                    Object.assign(this.config.previewThumbnails, input.previewThumbnails);
+
+                    // Cleanup previewThumbnails plugin if it was loaded
+                    if (this.previewThumbnails && this.previewThumbnails.loaded) {
+                        this.previewThumbnails.destroy();
+                        this.previewThumbnails = null;
+                    }
+
+                    // Create new instance if it is still enabled
+                    if (this.config.previewThumbnails.enabled) {
+                        this.previewThumbnails = new PreviewThumbnails(this);
+                    }
                 }
 
                 // Update the fullscreen support
diff --git a/src/js/utils/arrays.js b/src/js/utils/arrays.js
index c0d69626..69ef242c 100644
--- a/src/js/utils/arrays.js
+++ b/src/js/utils/arrays.js
@@ -21,11 +21,3 @@ export function closest(array, value) {
 
     return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
 }
-
-export function fillRange(start, end, step = 1) {
-    const len = Math.floor((end - start) / step) + 1;
-
-    return Array(len)
-        .fill()
-        .map((_, idx) => start + idx * step);
-}