4 files changed, 42 insertions, 8 deletions
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index db55e499..6b4fca10 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -136,7 +136,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/';
diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js
index 61021d64..44e6ace7 100644
--- a/src/js/plugins/preview-thumbnails.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.
@@ -540,8 +554,11 @@ 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;
         }
 
         return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
@@ -624,9 +641,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
@@ -639,9 +659,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 91019abf..8df5ad15 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -335,6 +335,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 31d22bb4..ba5d8de9 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -416,6 +416,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;
                     }