Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.min.js.map
#	demo/index.html
#	dist/plyr.css
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs.map
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs.map
#	gulpfile.js
#	src/sass/base.scss
#	src/sass/components/control.scss
#	src/sass/settings/colors.scss
#	src/sass/settings/controls.scss

4 files changed, 141 insertions, 55 deletions

diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index e6fab967..9f1088fa 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -10,7 +10,8 @@ import { createElement } from '../utils/elements';
 import { triggerEvent } from '../utils/events';
 import i18n from '../utils/i18n';
 import is from '../utils/is';
-import loadScript from '../utils/loadScript';
+import loadScript from '../utils/load-script';
+import { silencePromise } from '../utils/promise';
 import { formatTime } from '../utils/time';
 import { buildUrlParams } from '../utils/urls';
 
@@ -136,7 +137,7 @@ class Ads {
             cb: Date.now(),
             AV_WIDTH: 640,
             AV_HEIGHT: 480,
-            AV_CDIM2: this.publisherId,
+            AV_CDIM2: config.publisherId,
         };
 
         const base = 'https://go.aniview.com/api/adserver6/vast/';
@@ -172,6 +173,17 @@ class Ads {
         // We assume the adContainer is the video container of the plyr element that will house the ads
         this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media);
 
+        // Create ads loader
+        this.loader = new google.ima.AdsLoader(this.elements.displayContainer);
+
+        // Listen and respond to ads loaded and error events
+        this.loader.addEventListener(
+            google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+            event => this.onAdsManagerLoaded(event),
+            false,
+        );
+        this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
+
         // Request video ads to be pre-loaded
         this.requestAds();
     }
@@ -183,17 +195,6 @@ class Ads {
         const { container } = this.player.elements;
 
         try {
-            // Create ads loader
-            this.loader = new google.ima.AdsLoader(this.elements.displayContainer);
-
-            // Listen and respond to ads loaded and error events
-            this.loader.addEventListener(
-                google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
-                event => this.onAdsManagerLoaded(event),
-                false,
-            );
-            this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
-
             // Request video ads
             const request = new google.ima.AdsRequest();
             request.adTagUrl = this.tagUrl;
@@ -369,7 +370,12 @@ class Ads {
                 // TODO: So there is still this thing where a video should only be allowed to start
                 // playing when the IMA SDK is ready or has failed
 
-                this.loadAds();
+                if (this.player.ended) {
+                    this.loadAds();
+                } else {
+                    // The SDK won't allow new ads to be called without receiving a contentComplete()
+                    this.loader.contentComplete();
+                }
 
                 break;
 
@@ -510,7 +516,7 @@ class Ads {
         this.playing = false;
 
         // Play video
-        this.player.media.play();
+        silencePromise(this.player.media.play());
     }
 
     /**
@@ -563,6 +569,8 @@ class Ads {
                     this.on('loaded', resolve);
                     this.player.debug.log(this.manager);
                 });
+                // Now that the manager has been destroyed set it to also be un-initialized
+                this.initialized = false;
 
                 // Now request some new advertisements
                 this.requestAds();
diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/preview-thumbnails.js
index 2d34fe46..290ce949 100644
--- a/src/js/plugins/previewThumbnails.js
+++ b/src/js/plugins/preview-thumbnails.js
@@ -63,6 +63,20 @@ const parseVtt = vttDataString => {
  * - This implementation uses multiple separate img elements. Other implementations use background-image on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that YouTube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered
  */
 
+const fitRatio = (ratio, outer) => {
+    const targetRatio = outer.width / outer.height;
+    const result = {};
+    if (ratio > targetRatio) {
+        result.width = outer.width;
+        result.height = (1 / ratio) * outer.width;
+    } else {
+        result.height = outer.height;
+        result.width = ratio * outer.height;
+    }
+
+    return result;
+};
+
 class PreviewThumbnails {
     /**
      * PreviewThumbnails constructor.
@@ -90,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;
         }
@@ -100,6 +114,10 @@ class PreviewThumbnails {
         }
 
         this.getThumbnails().then(() => {
+            if (!this.enabled) {
+                return;
+            }
+
             // Render DOM elements
             this.render();
 
@@ -119,19 +137,32 @@ class PreviewThumbnails {
                 throw new Error('Missing previewThumbnails.src config attribute');
             }
 
-            // If string, convert into single-element list
-            const urls = is.string(src) ? [src] : src;
-            // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
-            const promises = urls.map(u => this.getThumbnail(u));
-
-            Promise.all(promises).then(() => {
+            // Resolve promise
+            const sortAndResolve = () => {
                 // Sort smallest to biggest (e.g., [120p, 480p, 1080p])
                 this.thumbnails.sort((x, y) => x.height - y.height);
 
                 this.player.debug.log('Preview thumbnails', this.thumbnails);
 
                 resolve();
-            });
+            };
+
+            // Via callback()
+            if (is.function(src)) {
+                src(thumbnails => {
+                    this.thumbnails = thumbnails;
+                    sortAndResolve();
+                });
+            }
+            // VTT urls
+            else {
+                // If string, convert into single-element list
+                const urls = is.string(src) ? [src] : src;
+                // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
+                const promises = urls.map(u => this.getThumbnail(u));
+                // Resolve
+                Promise.all(promises).then(sortAndResolve);
+            }
         });
     }
 
@@ -221,8 +252,8 @@ class PreviewThumbnails {
     }
 
     startScrubbing(event) {
-        // Only act on left mouse button (0), or touch device (event.button is false)
-        if (event.button === false || event.button === 0) {
+        // Only act on left mouse button (0), or touch device (event.button does not exist or is false)
+        if (is.nullOrUndefined(event.button) || event.button === false || event.button === 0) {
             this.mouseDown = true;
 
             // Wait until media has a duration
@@ -310,6 +341,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();
@@ -536,8 +576,16 @@ class PreviewThumbnails {
 
     get thumbContainerHeight() {
         if (this.mouseDown) {
-            // Can't use media.clientHeight - HTML5 video goes big and does black bars above and below
-            return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio);
+            const { height } = fitRatio(this.thumbAspectRatio, {
+                width: this.player.media.clientWidth,
+                height: this.player.media.clientHeight,
+            });
+            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);
@@ -580,7 +628,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;
         }
@@ -592,6 +640,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();
@@ -620,9 +674,12 @@ class PreviewThumbnails {
 
     // Can't use 100% width, in case the video is a different aspect ratio to the video container
     setScrubbingContainerSize() {
-        this.elements.scrubbing.container.style.width = `${this.player.media.clientWidth}px`;
-        // Can't use media.clientHeight - html5 video goes big and does black bars above and below
-        this.elements.scrubbing.container.style.height = `${this.player.media.clientWidth / this.thumbAspectRatio}px`;
+        const { width, height } = fitRatio(this.thumbAspectRatio, {
+            width: this.player.media.clientWidth,
+            height: this.player.media.clientHeight,
+        });
+        this.elements.scrubbing.container.style.width = `${width}px`;
+        this.elements.scrubbing.container.style.height = `${height}px`;
     }
 
     // Sprites need to be offset to the correct location
@@ -635,9 +692,9 @@ class PreviewThumbnails {
         const multiplier = this.thumbContainerHeight / frame.h;
 
         // eslint-disable-next-line no-param-reassign
-        previewImage.style.height = `${Math.floor(previewImage.naturalHeight * multiplier)}px`;
+        previewImage.style.height = `${previewImage.naturalHeight * multiplier}px`;
         // eslint-disable-next-line no-param-reassign
-        previewImage.style.width = `${Math.floor(previewImage.naturalWidth * multiplier)}px`;
+        previewImage.style.width = `${previewImage.naturalWidth * multiplier}px`;
         // eslint-disable-next-line no-param-reassign
         previewImage.style.left = `-${frame.x * multiplier}px`;
         // eslint-disable-next-line no-param-reassign
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index bef48708..010cf5f7 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -9,7 +9,7 @@ import { createElement, replaceElement, toggleClass } from '../utils/elements';
 import { triggerEvent } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
-import loadScript from '../utils/loadScript';
+import loadScript from '../utils/load-script';
 import { extend } from '../utils/objects';
 import { format, stripHTML } from '../utils/strings';
 import { setAspectRatio } from '../utils/style';
@@ -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,18 +201,13 @@ const vimeo = {
                 return speed;
             },
             set(input) {
-                player.embed
-                    .setPlaybackRate(input)
-                    .then(() => {
-                        speed = input;
-                        triggerEvent.call(player, player.media, 'ratechange');
-                    })
-                    .catch(error => {
-                        // Hide menu item (and menu if empty)
-                        if (error.name === 'Error') {
-                            controls.setSpeedMenu.call(player, []);
-                        }
-                    });
+                player.embed.setPlaybackRate(input).then(() => {
+                    speed = input;
+                    triggerEvent.call(player, player.media, 'ratechange');
+                }).catch(() => {
+                    // Cannot set Playback Rate, Video is probably not on Pro account
+                    player.options.speed = [1];
+                });
             },
         });
 
@@ -335,6 +340,14 @@ const vimeo = {
             }
         });
 
+        player.embed.on('bufferstart', () => {
+            triggerEvent.call(player, player.media, 'waiting');
+        });
+
+        player.embed.on('bufferend', () => {
+            triggerEvent.call(player, player.media, 'playing');
+        });
+
         player.embed.on('play', () => {
             assurePlaybackState.call(player, true);
             triggerEvent.call(player, player.media, 'playing');
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 34c5de7e..8c65b1dc 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -7,8 +7,8 @@ import { createElement, replaceElement, toggleClass } from '../utils/elements';
 import { triggerEvent } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
-import loadImage from '../utils/loadImage';
-import loadScript from '../utils/loadScript';
+import loadImage from '../utils/load-image';
+import loadScript from '../utils/load-script';
 import { extend } from '../utils/objects';
 import { format, generateId } from '../utils/strings';
 import { setAspectRatio } from '../utils/style';
@@ -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) {
@@ -416,6 +418,12 @@ const youtube = {
 
                             break;
 
+                        case 3:
+                            // Trigger waiting event to add loading classes to container as the video buffers.
+                            triggerEvent.call(player, player.media, 'waiting');
+
+                            break;
+
                         default:
                             break;
                     }