@gcorevideo/player 2.22.31 → 2.23.1

package/lib/plugins/thumbnails/Thumbnails.js

@@ -1,14 +1,21 @@
-import { UICorePlugin, Events, template, $ } from '@clappr/core';
-import { reportError, trace } from '@gcorevideo/utils';
+import { UICorePlugin, Events, template, $, } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
 import parseSRT from 'parse-srt';
+import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/thumbnails/scrub-thumbnails.ejs';
 import '../../../assets/thumbnails/style.scss';
-import { getPageX } from '../utils.js';
+import { loadImageDimensions } from './utils.js';
 const T = 'plugins.thumbnails';
 /**
  * `PLUGIN` that displays the thumbnails of the video when available.
  * @beta
+ * @remarks
+ * The plugin needs specially crafted VTT file with a thumbnail sprite sheet to work.
+ * The VTT consist of timestamp records followed by a thumbnail area
+ *
+ * Configuration options - {@link ThumbnailsPluginSettings}
+ *
  * @example
  * ```ts
  * import { Thumbnails } from '@gcorevideo/player'
@@ -29,19 +36,15 @@ const T = 'plugins.thumbnails';
  * ```
  */
 export class Thumbnails extends UICorePlugin {
-    _$spotlight = null;
-    _$backdrop = null;
-    $container = null;
-    $img = null;
-    _$carousel = null;
-    $textThumbnail = null;
-    _$backdropCarouselImgs = [];
+    $backdropCarouselImgs = [];
     spriteSheetHeight = 0;
-    _hoverPosition = 0;
-    _show = false;
-    _thumbsLoaded = false;
-    _oldContainer = null;
-    _thumbs = [];
+    spriteSheetWidth = 0;
+    hoverPosition = 0;
+    showing = false;
+    thumbsLoaded = false;
+    spotlightHeight = 0;
+    backdropHeight = 0;
+    thumbs = [];
     /**
      * @internal
      */
@@ -59,10 +62,14 @@ export class Thumbnails extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'scrub-thumbnails',
         };
     }
     static template = template(pluginHtml);
+    constructor(core) {
+        super(core);
+        this.backdropHeight = this.options.thumbnails?.backdropHeight ?? 0;
+    }
     /*
      * Helper to build the "thumbs" property for a sprite sheet.
      *
@@ -74,25 +81,21 @@ export class Thumbnails extends UICorePlugin {
      * timeInterval- The interval (in seconds) between the thumbnails.
      * startTime- The time (in seconds) that the first thumbnail represents. (defaults to 0)
      */
-    // buildSpriteConfig(vtt, spriteSheetUrl, numThumbs, thumbWidth, thumbHeight, numColumns, timeInterval, startTime) {
-    buildSpriteConfig(vtt, spriteSheetUrl) {
+    buildSpriteConfig(vtt, baseUrl) {
         const thumbs = [];
-        // let coor: string[] = [];
         for (const vt of vtt) {
             const el = vt.text;
-            // if (el && el.search(/\d*,\d*,\d*,\d*/g) > -1) {
-            //   el = el.match(/\d*,\d*,\d*,\d*/g)[0];
-            //   coor = el.split(',');
-            // }
             if (el) {
-                const m = el.match(/xywh=\d*,\d*,\d*,\d*/g);
+                const m = el.match(/(\w+)#xywh=(\d+,\d+,\d+,\d+)/);
                 if (m) {
-                    const coor = m[0].split(',');
+                    const coor = m[2].split(',');
                     const w = parseInt(coor[2], 10);
                     const h = parseInt(coor[3], 10);
                     if (w > 0 && h > 0) {
                         thumbs.push({
-                            url: spriteSheetUrl,
+                            // TODO handle relative URLs
+                            // url: new URL(m[0], baseUrl).toString(),
+                            url: baseUrl,
                             time: vt.start,
                             w,
                             h,
@@ -105,242 +108,147 @@ export class Thumbnails extends UICorePlugin {
         }
         return thumbs;
     }
-    // TODO check if seek enabled
     /**
      * @internal
      */
     bindEvents() {
-        this.listenToOnce(this.core, Events.CORE_READY, this._onCoreReady);
-        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this._onMouseMove);
-        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this._onMouseLeave);
-        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this._init);
-        this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged);
+        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
     }
-    _bindContainerEvents() {
-        if (this._oldContainer) {
-            this.stopListening(this._oldContainer, Events.CONTAINER_TIMEUPDATE, this._renderPlugin);
-        }
-        this._oldContainer = this.core.mediaControl.container;
-        this.listenTo(this.core.mediaControl.container, Events.CONTAINER_TIMEUPDATE, this._renderPlugin);
+    bindContainerEvents(container) {
+        this.listenTo(container, Events.CONTAINER_TIMEUPDATE, this.update);
     }
-    _onCoreReady() {
-        try {
-            if (!this.options.thumbnails ||
-                !this.options.thumbnails.sprite ||
-                !this.options.thumbnails.vtt) {
-                this.destroy();
-                return;
-            }
-        }
-        catch (error) {
-            reportError(error);
+    onCoreReady() {
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, `MediaControl is required for ${this.name} plugin to work`);
+        if (!this.options.thumbnails ||
+            !this.options.thumbnails.sprite ||
+            !this.options.thumbnails.vtt) {
+            trace(`${T} misconfigured: options.thumbnails.sprite and options.thumbnails.vtt are required`);
+            this.destroy();
             return;
         }
-        // TODO options
-        const spriteSheet = this.options.thumbnails.sprite;
-        this._thumbs = this.buildSpriteConfig(parseSRT(this.options.thumbnails.vtt), spriteSheet);
-        if (!this._thumbs.length) {
+        const { sprite: spriteSheet, vtt } = this.options.thumbnails;
+        this.thumbs = this.buildSpriteConfig(parseSRT(vtt), spriteSheet);
+        if (!this.thumbs.length) {
+            trace(`${T} failed to parse the sprite sheet`);
             this.destroy();
             return;
         }
+        this.spotlightHeight = this.options.thumbnails?.spotlightHeight ?? 0;
         this.loadSpriteSheet(spriteSheet).then(() => {
-            this._thumbsLoaded = true;
-            this.core.options.thumbnails.spotlightHeight = this._thumbs[0].h;
-            this._init();
+            this.thumbsLoaded = true;
+            this.spotlightHeight = this.spotlightHeight
+                ? Math.min(this.spotlightHeight, this.thumbs[0].h)
+                : this.thumbs[0].h;
+            this.init();
         });
+        this.listenTo(mediaControl, Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this.onMouseMoveSeekbar);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this.onMouseLeave);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.init);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, () => this.onContainerChanged(mediaControl.container));
     }
     async loadSpriteSheet(spriteSheetUrl) {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.onload = () => {
-                this.spriteSheetHeight = img.height;
-                resolve();
-            };
-            img.onerror = reject;
-            img.src = spriteSheetUrl;
+        return loadImageDimensions(spriteSheetUrl).then(({ height, width }) => {
+            this.spriteSheetHeight = height;
+            this.spriteSheetWidth = width;
         });
     }
-    _onMediaControlContainerChanged() {
-        this._bindContainerEvents();
+    onContainerChanged(container) {
+        this.bindContainerEvents(container);
     }
-    _init() {
-        if (!this._thumbsLoaded) {
-            // _init() will be called when the thumbs are loaded,
+    init() {
+        if (!this.thumbsLoaded) {
+            // init() will be called when the thumbs are loaded,
             // and whenever the media control rendered event is fired as just before this the dom elements get wiped in IE (https://github.com/tjenkinson/clappr-thumbnails-plugin/issues/5)
             return;
         }
         // Init the backdropCarousel as array to keep reference of thumbnail images
-        this._$backdropCarouselImgs = [];
-        // create/recreate the dom elements for the plugin
-        this._createElements();
-        this._loadBackdrop();
-        this._renderPlugin();
+        this.$backdropCarouselImgs = [];
+        this.fixElements();
+        this.loadBackdrop();
+        this.update();
     }
-    _getOptions() {
-        if (!('thumbnails' in this.core.options)) {
-            throw "'thumbnail property missing from options object.";
-        }
-        return this.core.options.thumbnails;
-    }
-    _appendElToMediaControl() {
-        // insert after the background
-        this.core.mediaControl.$el.find('.seek-time').css('bottom', 56);
-        this.core.mediaControl.$el.first().after(this.el);
+    mount() {
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.$el.find('.seek-time').css('bottom', 56); // TODO check the offset
+        mediaControl.$el.first().after(this.$el);
     }
-    _onMouseMove(e) {
-        // trace(`${T} _onMouseMove`, {
-        //   e: (e as any).name,
-        //   t: typeof e,
-        //   t2: typeof arguments[1],
-        // });
-        this._calculateHoverPosition(e);
-        this._show = true;
-        this._renderPlugin();
-    }
-    _onMouseLeave() {
-        this._show = false;
-        this._renderPlugin();
+    onMouseMoveSeekbar(_, pos) {
+        if (Math.abs(pos - this.hoverPosition) >= 0.01) {
+            this.hoverPosition = pos;
+            this.showing = true;
+            this.update();
+        }
     }
-    _calculateHoverPosition(e) {
-        const offset = getPageX(e) - this.core.mediaControl.$seekBarContainer.offset().left;
-        // proportion into the seek bar that the mouse is hovered over 0-1
-        this._hoverPosition = Math.min(1, Math.max(offset / this.core.mediaControl.$seekBarContainer.width(), 0));
+    onMouseLeave() {
+        this.showing = false;
+        this.update();
     }
-    // private _buildThumbsFromOptions() {
-    //   const thumbs = this._thumbs;
-    //   const promises = thumbs.map((thumb) => {
-    //     return this._addThumbFromSrc(thumb);
-    //   });
-    //   return Promise.all(promises);
-    // }
-    // private _addThumbFromSrc(thumbSrc) {
-    //   return new Promise((resolve, reject) => {
-    //     const img = new Image();
-    //     img.onload = () => {
-    //       resolve(img);
-    //     };
-    //     img.onerror = reject;
-    //     img.src = thumbSrc.url;
-    //   }).then((img) => {
-    //     const startTime = thumbSrc.time;
-    //     // determine the thumb index
-    //     let index = null;
-    //     this._thumbs.some((thumb, i) => {
-    //       if (startTime < thumb.time) {
-    //         index = i;
-    //         return true;
-    //       }
-    //       return false;
-    //     });
-    //     if (index === null) {
-    //       index = this._thumbs.length;
-    //     }
-    //     const next = index < this._thumbs.length ? this._thumbs[index] : null;
-    //     const prev = index > 0 ? this._thumbs[index - 1] : null;
-    //     if (prev) {
-    //       // update the duration of the previous thumbnail
-    //       prev.duration = startTime - prev.time;
-    //     }
-    //     // the duration this thumb lasts for
-    //     // if it is the last thumb then duration will be null
-    //     const duration = next ? next.time - thumbSrc.time : null;
-    //     const imageW = img.width;
-    //     const imageH = img.height;
-    //     const thumb = {
-    //       imageW: imageW, // actual width of image
-    //       imageH: imageH, // actual height of image
-    //       x: thumbSrc.x || 0, // x coord in image of sprite
-    //       y: thumbSrc.y || 0, // y coord in image of sprite
-    //       w: thumbSrc.w || imageW, // width of sprite
-    //       h: thumbSrc.h || imageH, // height of sprite
-    //       url: thumbSrc.url,
-    //       time: startTime, // time this thumb represents
-    //       duration: duration, // how long (from time) this thumb represents
-    //       src: thumbSrc
-    //     };
-    //     this._thumbs.splice(index, 0, thumb);
-    //     return thumb;
-    //   });
-    // }
     // builds a dom element which represents the thumbnail
-    // scaled to the provided height
-    _buildImg(thumb, height) {
+    // scaled to the given height
+    buildThumbImage(thumb, height, $ref) {
         const scaleFactor = height / thumb.h;
-        if (!this.$img) {
-            this.$img = $('<img />').addClass('thumbnail-img').attr('src', thumb.url);
-        }
-        // the container will contain the image positioned so that the correct sprite
-        // is visible
-        if (!this.$container) {
-            this.$container = $('<div />').addClass('thumbnail-container');
-        }
-        this.$container.css('width', thumb.w * scaleFactor);
-        this.$container.css('height', height);
-        this.$img.css({
-            height: this.spriteSheetHeight * scaleFactor,
-            left: -1 * thumb.x * scaleFactor,
-            top: -1 * thumb.y * scaleFactor,
+        const $container = $ref && $ref.length ? $ref : $('<div />').addClass('thumbnail-container');
+        $container.css('width', thumb.w * scaleFactor);
+        $container.css('height', height);
+        $container.css({
+            backgroundImage: `url(${thumb.url})`,
+            backgroundSize: `${Math.floor(this.spriteSheetWidth * scaleFactor)}px ${Math.floor(this.spriteSheetHeight * scaleFactor)}px`,
+            backgroundPosition: `-${Math.floor(thumb.x * scaleFactor)}px -${Math.floor(thumb.y * scaleFactor)}px`,
         });
-        if (this.$container.find(this.$img).length === 0) {
-            this.$container.append(this.$img);
-        }
-        return this.$container;
+        return $container;
     }
-    _loadBackdrop() {
-        if (!this._getOptions().backdropHeight) {
+    loadBackdrop() {
+        if (!this.backdropHeight) {
             // disabled
             return;
         }
         // append each of the thumbnails to the backdrop carousel
-        const $carousel = this._$carousel;
-        for (const thumb of this._thumbs) {
-            const $img = this._buildImg(thumb, this._getOptions().backdropHeight);
-            // Keep reference to thumbnail
-            this._$backdropCarouselImgs.push($img);
+        const $carousel = this.$el.find('#thumbnails-carousel');
+        for (const thumb of this.thumbs) {
+            const $img = this.buildThumbImage(thumb, this.backdropHeight);
+            // Keep reference to the thumbnail
+            this.$backdropCarouselImgs.push($img);
             // Add thumbnail to DOM
             $carousel.append($img);
         }
     }
     setText(time) {
-        if (this.core.getPlugin('clips')) {
-            const txt = this.core.getPlugin('clips').getText(time);
-            this.$textThumbnail.text(txt);
+        const clips = this.core.getPlugin('clips');
+        if (clips) {
+            const txt = clips.getText(time);
+            this.$el.find('#thumbnails-text').text(txt ?? '');
         }
     }
     // calculate how far along the carousel should currently be slid
     // depending on where the user is hovering on the progress bar
-    _updateCarousel() {
-        trace(`${T} _updateCarousel`, {
-            backdropHeight: this._getOptions().backdropHeight,
-        });
-        if (!this._getOptions().backdropHeight) {
+    updateCarousel() {
+        if (!this.backdropHeight) {
             // disabled
             return;
         }
-        const hoverPosition = this._hoverPosition;
-        const videoDuration = this.core.mediaControl.container.getDuration();
-        const startTimeOffset = this.core.mediaControl.container.getStartTimeOffset();
+        const mediaControl = this.core.getPlugin('media_control');
+        const videoDuration = mediaControl.container.getDuration();
+        const startTimeOffset = mediaControl.container.getStartTimeOffset();
         // the time into the video at the current hover position
-        const hoverTime = startTimeOffset + videoDuration * hoverPosition;
-        const backdropWidth = this._$backdrop.width();
-        const $carousel = this._$carousel;
+        const hoverTime = startTimeOffset + videoDuration * this.hoverPosition;
+        const $backdrop = this.$el.find('#thumbnails-backdrop');
+        const backdropWidth = $backdrop.width();
+        const $carousel = this.$el.find('#thumbnails-carousel');
         const carouselWidth = $carousel.width();
         // slide the carousel so that the image on the carousel that is above where the person
         // is hovering maps to that position in time.
         // Thumbnails may not be distributed at even times along the video
-        const thumbs = this._thumbs;
         // assuming that each thumbnail has the same width
-        const thumbWidth = carouselWidth / thumbs.length;
+        const thumbWidth = carouselWidth / this.thumbs.length;
         // determine which thumbnail applies to the current time
-        const thumbIndex = this._getThumbIndexForTime(hoverTime);
-        const thumb = thumbs[thumbIndex];
-        let thumbDuration = thumb.duration;
-        if (!thumbDuration) {
-            // the last thumbnail duration will be null as it can't be determined
-            // e.g the duration of the video may increase over time (live stream)
-            // so calculate the duration now so this last thumbnail lasts till the end
-            thumbDuration = Math.max(videoDuration + startTimeOffset - thumb.time, 0);
-        }
+        const thumbIndex = this.getThumbIndexForTime(hoverTime);
+        const thumb = this.thumbs[thumbIndex];
+        // the last thumbnail duration will be null as it can't be determined
+        // e.g the duration of the video may increase over time (live stream)
+        // so calculate the duration now so this last thumbnail lasts till the end
+        const thumbDuration = thumb.duration ??
+            Math.max(videoDuration + startTimeOffset - thumb.time, 0);
         // determine how far accross that thumbnail we are
         const timeIntoThumb = hoverTime - thumb.time;
         const positionInThumb = timeIntoThumb / thumbDuration;
@@ -348,12 +256,12 @@ export class Thumbnails extends UICorePlugin {
         // now calculate the position along carousel that we want to be above the hover position
         const xCoordInCarousel = thumbIndex * thumbWidth + xCoordInThumb;
         // and finally the position of the carousel when the hover position is taken in to consideration
-        const carouselXCoord = xCoordInCarousel - hoverPosition * backdropWidth;
-        $carousel.css('left', -carouselXCoord);
-        const maxOpacity = this._getOptions().backdropMaxOpacity || 0.6;
-        const minOpacity = this._getOptions().backdropMinOpacity || 0.08;
+        const carouselXCoord = xCoordInCarousel - this.hoverPosition * backdropWidth;
+        $carousel.css('left', -carouselXCoord); // TODO +px
+        const maxOpacity = this.options.thumbnails.backdropMaxOpacity ?? 0.6;
+        const minOpacity = this.options.thumbnails.backdropMinOpacity ?? 0.08;
         // now update the transparencies so that they fade in around the active one
-        for (let i = 0; i < thumbs.length; i++) {
+        for (let i = 0; i < this.thumbs.length; i++) {
             const thumbXCoord = thumbWidth * i;
             let distance = thumbXCoord - xCoordInCarousel;
             if (distance < 0) {
@@ -365,47 +273,42 @@ export class Thumbnails extends UICorePlugin {
             }
             // fade over the width of 2 thumbnails
             const opacity = Math.max(maxOpacity - Math.abs(distance) / (2 * thumbWidth), minOpacity);
-            this._$backdropCarouselImgs[i].css('opacity', opacity);
+            this.$backdropCarouselImgs[i].css('opacity', opacity);
         }
     }
-    _updateSpotlightThumb() {
-        trace(`${T} _updateSpotlightThumb`, {
-            spotlightHeight: this._getOptions().spotlightHeight,
-        });
-        if (!this._getOptions().spotlightHeight) {
+    updateSpotlightThumb() {
+        if (!this.spotlightHeight) {
             // disabled
             return;
         }
-        const hoverPosition = this._hoverPosition;
-        const videoDuration = this.core.mediaControl.container.getDuration();
+        const mediaControl = this.core.getPlugin('media_control');
+        const videoDuration = mediaControl.container.getDuration();
         // the time into the video at the current hover position
-        const startTimeOffset = this.core.mediaControl.container.getStartTimeOffset();
-        const hoverTime = startTimeOffset + videoDuration * hoverPosition;
+        const startTimeOffset = mediaControl.container.getStartTimeOffset();
+        const hoverTime = startTimeOffset + videoDuration * this.hoverPosition;
         this.setText(hoverTime);
         // determine which thumbnail applies to the current time
-        const thumbIndex = this._getThumbIndexForTime(hoverTime);
-        const thumb = this._thumbs[thumbIndex];
+        const thumbIndex = this.getThumbIndexForTime(hoverTime);
+        const thumb = this.thumbs[thumbIndex];
         // update thumbnail
-        const $spotlight = this._$spotlight;
-        $spotlight.empty();
-        $spotlight.append(this._buildImg(thumb, this._getOptions().spotlightHeight));
+        const $spotlight = this.$el.find('#thumbnails-spotlight');
+        this.buildThumbImage(thumb, this.spotlightHeight, $spotlight.find('.thumbnail-container')).appendTo($spotlight);
         const elWidth = this.$el.width();
         const thumbWidth = $spotlight.width();
         const thumbHeight = $spotlight.height();
-        let spotlightXPos = elWidth * hoverPosition - thumbWidth / 2;
         // adjust so the entire thumbnail is always visible
-        spotlightXPos = Math.max(Math.min(spotlightXPos, elWidth - thumbWidth), 0);
+        const spotlightXPos = Math.max(Math.min(elWidth * this.hoverPosition - thumbWidth / 2, elWidth - thumbWidth), 0);
         $spotlight.css('left', spotlightXPos);
-        this.$textThumbnail.css('left', spotlightXPos);
-        this.$textThumbnail.css('width', thumbWidth);
-        this.$textThumbnail.css('bottom', thumbHeight + 1);
+        const $textThumbnail = this.$el.find('#thumbnails-text');
+        $textThumbnail.css('left', spotlightXPos);
+        $textThumbnail.css('width', thumbWidth);
+        $textThumbnail.css('bottom', thumbHeight + 1);
     }
     // returns the thumbnail which represents a time in the video
     // or null if there is no thumbnail that can represent the time
-    _getThumbIndexForTime(time) {
-        const thumbs = this._thumbs;
-        for (let i = thumbs.length - 1; i >= 0; i--) {
-            const thumb = thumbs[i];
+    getThumbIndexForTime(time) {
+        for (let i = this.thumbs.length - 1; i >= 0; i--) {
+            const thumb = this.thumbs[i];
             if (thumb.time <= time) {
                 return i;
             }
@@ -413,36 +316,47 @@ export class Thumbnails extends UICorePlugin {
         // stretch the first thumbnail back to the start
         return 0;
     }
-    _renderPlugin() {
-        trace(`${T} _renderPlugin`, {
-            show: this._show,
-            thumbsLoaded: this._thumbsLoaded,
-            thumbs: this._thumbs.length,
-        });
-        if (!this._thumbsLoaded) {
+    update() {
+        if (!this.thumbsLoaded) {
             return;
         }
-        if (this._show && this._thumbs.length > 0) {
+        if (this.showing && this.thumbs.length > 0) {
+            this.updateCarousel();
+            this.updateSpotlightThumb();
             this.$el.removeClass('hidden');
-            this._updateCarousel();
-            this._updateSpotlightThumb();
         }
         else {
             this.$el.addClass('hidden');
         }
     }
-    _createElements() {
-        trace(`${T} _createElements`);
-        this.$el.html(Thumbnails.template({
-            backdropHeight: this._getOptions().backdropHeight,
-            spotlightHeight: this._getOptions().spotlightHeight,
-        }));
-        // cache dom references
-        this._$spotlight = this.$el.find('.spotlight');
-        this._$backdrop = this.$el.find('.backdrop');
-        this._$carousel = this._$backdrop.find('.carousel');
-        this.$textThumbnail = this.$el.find('.thumbnails-text');
+    fixElements() {
+        const $spotlight = this.$el.find('#thumbnails-spotlight');
+        if (this.spotlightHeight) {
+            $spotlight.css('height', this.spotlightHeight);
+        }
+        else {
+            $spotlight.remove();
+        }
+        const $backdrop = this.$el.find('#thumbnails-backdrop');
+        if (this.backdropHeight) {
+            $backdrop.css('height', this.backdropHeight);
+        }
+        else {
+            $backdrop.remove();
+        }
+        this.mount();
+    }
+    get shouldRender() {
+        return (this.options.thumbnails &&
+            this.options.thumbnails.sprite &&
+            this.options.thumbnails.vtt);
+    }
+    render() {
+        if (!this.shouldRender) {
+            return this;
+        }
+        this.$el.html(Thumbnails.template());
         this.$el.addClass('hidden');
-        this._appendElToMediaControl();
+        return this;
     }
 }

package/lib/plugins/thumbnails/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function loadImageDimensions(url: string): Promise<{
+    width: number;
+    height: number;
+}>;
+//# sourceMappingURL=utils.d.ts.map

package/lib/plugins/thumbnails/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/plugins/thumbnails/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAW3F"}

package/lib/plugins/thumbnails/utils.js

@@ -0,0 +1,12 @@
+export function loadImageDimensions(url) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = url;
+        img.onload = () => {
+            resolve({ width: img.width, height: img.height });
+        };
+        img.onerror = () => {
+            reject(new Error('Failed to load image'));
+        };
+    });
+}

package/lib/testUtils.js

@@ -100,16 +100,16 @@ export function createMockContainer(options = {}, playback = createMockPlayback(
 }
 export function createMockMediaControl(core) {
     const mediaControl = new UICorePlugin(core);
+    // TODO <div class="media-control-layer">
     mediaControl.$el.html(`<div class="media-control-left-panel" data-media-control></div>
     <div class="media-control-right-panel" data-media-control></div>
     <div class="media-control-center-panel" data-media-control></div>`);
     // @ts-ignore
-    mediaControl.putElement = vi.fn();
-    // @ts-ignore
     mediaControl.mount = vi.fn();
     // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     vi.spyOn(mediaControl, 'trigger');
+    core.$el.append(mediaControl.$el);
     return mediaControl;
 }
 export function createMockBottomGear(core) {

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.31",
+  "version": "2.23.1",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
   "typings": "lib/index.d.ts",
+  "keywords": [
+    "player",
+    "video streaming"
+  ],
   "scripts": {
     "build": "npm run build:ts && npm run build:bundle",
     "build:1": "npm run build:ts && npm run build:bundle && date",