@gcorevideo/player 2.22.30 → 2.23.0

package/dist/index.js

@@ -43303,7 +43303,7 @@ class Player {
     }
 }
 
-var version$1 = "2.22.30";
+var version$1 = "2.23.0";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -43727,8 +43727,8 @@ class MediaControl extends UICorePlugin {
         return this.userDisabled || playbackIsNOOP;
     }
     /**
+     * Use in mediacontrol-based plugins to access the active container
      * @internal
-     * @deprecated Use core.activeContainer directly
      */
     get container() {
         return this.core.activeContainer;
@@ -43995,16 +43995,16 @@ class MediaControl extends UICorePlugin {
         this.applyButtonStyle(this.$playStopToggle);
     }
     mousemoveOnSeekBar(event) {
+        const offset = MediaControl.getPageX(event) -
+            (this.$seekBarContainer.offset().left ?? 0); // TODO check if the result can be negative
+        const hoverOffset = offset -
+            (this.$seekBarHover.width() ?? 0) / 2;
+        const pos = offset ? Math.min(1, Math.max(offset / this.$seekBarContainer.width(), 0)) : 0;
         if (this.settings.seekEnabled) {
-            // assert.ok(this.$seekBarHover && this.$seekBarContainer, 'seek bar elements must be present');
-            if (this.$seekBarHover && this.$seekBarContainer) {
-                const offsetX = MediaControl.getPageX(event) -
-                    this.$seekBarContainer.offset().left -
-                    this.$seekBarHover.width() / 2;
-                this.$seekBarHover.css({ left: offsetX });
-            }
+            // TODO test that it works when the element does not exist
+            this.$seekBarHover.css({ left: hoverOffset });
         }
-        this.trigger(Events$1.MEDIACONTROL_MOUSEMOVE_SEEKBAR, event);
+        this.trigger(Events$1.MEDIACONTROL_MOUSEMOVE_SEEKBAR, event, pos);
     }
     mouseleaveOnSeekBar(event) {
         this.trigger(Events$1.MEDIACONTROL_MOUSELEAVE_SEEKBAR, event);
@@ -44428,17 +44428,8 @@ class MediaControl extends UICorePlugin {
             else {
                 panel.append(element);
             }
-            return;
         }
     }
-    /**
-     * @deprecated  Use {@link MediaControl.mount} instead
-     * @param name
-     * @param element
-     */
-    putElement(name, element) {
-        this.mount(name, element);
-    }
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
@@ -48377,6 +48368,14 @@ class Clips extends UICorePlugin {
         this.render();
         return super.enable();
     }
+    /**
+     * Get the text of the clip at the given time
+     * @param time - The time to get the text for
+     * @returns The text of the clip at the given time
+     */
+    getText(time) {
+        return this.clips.find((clip) => clip.start <= time && clip.end >= time)?.text;
+    }
     onCoreReady() {
         trace(`${T$d} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
@@ -50001,7 +50000,7 @@ class PlaybackRate extends UICorePlugin {
     }
 }
 
-const posterHTML = "<div class=\"play-wrapper\" data-poster></div>\n";
+const posterHTML = "<div class=\"play-wrapper\" id=\"gplayer-poster\">\n    <div class='circle-poster gcore-skin-button-color gcore-skin-border-color' id='poster-play'></div>\n</div>\n";
 
 //Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
@@ -50011,19 +50010,13 @@ const T$8 = 'plugins.poster';
  * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
  * @beta
  * @remarks
- * When the playback is stopped, media control UI is disabled.
+ * When the playback is stopped or not yet started, the media control UI is disabled and hidden.
+ * Media control gets activated once the metadata is loaded after playback is initiated.
+ * This plugin displays a big play button on top of the poster image to allow user to start playback.
  * Note that the poster image, if specified via the player config, will be used to update video element's poster attribute by the
  * HTML5-video-based playback module.
  *
- * Configuration options:
- *
- * - `poster.custom` - custom CSS background
- *
- * - `poster.showForNoOp` - whether to show the poster when the playback is not started
- *
- * - `poster.url` - the URL of the poster image
- *
- * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended
+ * Configuration options - {@link PosterPluginSettings}
  *
  * @example
  * ```ts
@@ -50039,10 +50032,9 @@ const T$8 = 'plugins.poster';
 class Poster extends UIContainerPlugin {
     // TODO merge non-poster related functionality into the ClickToPause plugin
     hasFatalError = false;
-    hasStartedPlaying = false;
+    playing = false;
     playRequested = false;
     $playButton = null;
-    $playWrapper = null;
     /**
      * @internal
      */
@@ -50062,8 +50054,10 @@ class Poster extends UIContainerPlugin {
         }
         const showForNoOp = !!this.options.poster?.showForNoOp;
         return (this.container.playback.name !== 'html_img' &&
-            (this.container.playback.getPlaybackType() !== Playback.NO_OP ||
-                showForNoOp));
+            (!this.isNoOp || showForNoOp));
+    }
+    get isNoOp() {
+        return this.container.playback.getPlaybackType() === Playback.NO_OP;
     }
     /**
      * @internal
@@ -50071,7 +50065,6 @@ class Poster extends UIContainerPlugin {
     get attributes() {
         return {
             class: 'player-poster',
-            'data-poster': '',
         };
     }
     /**
@@ -50082,9 +50075,6 @@ class Poster extends UIContainerPlugin {
             click: 'clicked',
         };
     }
-    get showOnVideoEnd() {
-        return this.options.poster?.showOnVideoEnd !== false;
-    }
     /**
      * @internal
      */
@@ -50093,19 +50083,22 @@ class Poster extends UIContainerPlugin {
         this.listenTo(this.container, Events$1.CONTAINER_PLAY, this.onPlay);
         this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERING, this.update);
         this.listenTo(this.container, Events$1.CONTAINER_STATE_BUFFERFULL, this.update);
-        this.listenTo(this.container, Events$1.CONTAINER_OPTIONS_CHANGE, this.render);
+        this.listenTo(this.container, Events$1.CONTAINER_OPTIONS_CHANGE, this.update);
         this.listenTo(this.container, Events$1.CONTAINER_ERROR, this.onError);
-        this.showOnVideoEnd &&
+        // TODO check if this event is always accompanied with the CONTAINER_STOP
+        if (this.options.poster?.showOnVideoEnd !== false) {
             this.listenTo(this.container, Events$1.CONTAINER_ENDED, this.onStop);
+        }
         this.listenTo(this.container, Events$1.CONTAINER_READY, this.render);
-        this.listenTo(this.container, Events$1.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
+        this.listenTo(this.container.playback, Events$1.PLAYBACK_PLAY_INTENT, this.onPlayIntent);
     }
     /**
      * Reenables earlier disabled plugin
      */
     enable() {
+        trace(`${T$8} enable`);
         super.enable();
-        this.hasStartedPlaying = this.container.playback.isPlaying();
+        this.playing = this.container.playback.isPlaying();
         this.update();
     }
     /**
@@ -50113,7 +50106,7 @@ class Poster extends UIContainerPlugin {
      */
     disable() {
         trace(`${T$8} disable`);
-        this.hasStartedPlaying = false;
+        this.playing = false;
         this.playRequested = false;
         super.disable();
     }
@@ -50122,17 +50115,15 @@ class Poster extends UIContainerPlugin {
             error,
             enabled: this.enabled,
         });
-        this.hasFatalError = error.level === PlayerError.Levels.FATAL;
         if (this.hasFatalError) {
-            this.hasStartedPlaying = false;
-            if (!this.playRequested) {
-                this.showPlayButton();
-            }
+            return;
         }
+        this.hasFatalError = error.level === PlayerError.Levels.FATAL;
+        // this.hasFatalError is reset on container recreate
     }
     onPlay() {
         trace(`${T$8} onPlay`);
-        this.hasStartedPlaying = true;
+        this.playing = true;
         this.playRequested = false;
         this.update();
     }
@@ -50142,21 +50133,21 @@ class Poster extends UIContainerPlugin {
         this.update();
     }
     onStop() {
-        trace(`${T$8} onStop`, {
-            enabled: this.enabled,
-        });
-        this.hasStartedPlaying = false;
+        trace(`${T$8} onStop`);
+        this.playing = false;
         this.playRequested = false;
         this.update();
     }
-    updatePlayButton(show) {
-        trace(`${T$8} updatePlayButton`, {
-            show,
-            chromeless: this.options.chromeless,
-            allowUserInteraction: this.options.allowUserInteraction,
-        });
-        if (show &&
-            (!this.options.chromeless || this.options.allowUserInteraction)) {
+    updatePlayButton() {
+        trace(`${T$8} updatePlayButton`);
+        const show = !this.isNoOp &&
+            !(this.options.chromeless && !this.options.allowUserInteraction) &&
+            !this.playRequested &&
+            !this.playing &&
+            !this.container.buffering &&
+            !this.hasFatalError &&
+            !this.options.disableMediaControl;
+        if (show) {
             this.showPlayButton();
         }
         else {
@@ -50164,59 +50155,42 @@ class Poster extends UIContainerPlugin {
         }
     }
     showPlayButton() {
-        if (this.options.disableMediaControl) {
-            return;
-        }
-        if (this.hasFatalError && !this.options.disableErrorScreen) {
-            return;
-        }
-        this.$playButton?.show();
+        trace(`${T$8} showPlayButton`);
+        this.$el.find('#poster-play').show();
         this.$el.addClass('clickable');
         this.container.$el.addClass('container-with-poster-clickable');
     }
     hidePlayButton() {
-        this.$playButton.hide();
+        trace(`${T$8} hidePlayButton`);
+        this.$el.find('#poster-play').hide();
         this.$el.removeClass('clickable');
     }
-    clicked() {
-        trace(`${T$8} clicked`, {
-            hasStartedPlaying: this.hasStartedPlaying,
-            chromeless: this.options.chromeless,
-            allowUserInteraction: this.options.allowUserInteraction,
-        });
+    clicked(e) {
+        trace(`${T$8} clicked`);
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.options.chromeless && !this.options.allowUserInteraction) {
+            return;
+        }
         // Let "click_to_pause" plugin handle click event if media has started playing
-        if (!this.hasStartedPlaying) {
-            if (!this.options.chromeless || this.options.allowUserInteraction) {
-                this.playRequested = true;
-                this.update();
-                this.container.playback.consent();
-                this.container.playback.play();
-            }
+        if (!this.playing) {
+            this.playRequested = true;
+            this.update();
+            this.container.play();
         }
-        return false;
     }
     shouldHideOnPlay() {
         // Audio broadcasts should keep the poster up; video should hide poster while playing.
         return !this.container.playback.isAudioOnly;
     }
     update() {
-        trace(`${T$8} update`, {
-            shouldRender: this.shouldRender,
-        });
-        if (!this.shouldRender) {
-            return;
-        }
-        const showPlayButton = !this.playRequested &&
-            !this.hasStartedPlaying &&
-            !this.container.buffering;
-        this.updatePlayButton(showPlayButton);
+        trace(`${T$8} update`);
+        this.updatePlayButton();
         this.updatePoster();
     }
     updatePoster() {
-        trace(`${T$8} updatePoster`, {
-            hasStartedPlaying: this.hasStartedPlaying,
-        });
-        if (!this.hasStartedPlaying) {
+        trace(`${T$8} updatePoster`);
+        if (!this.playing) {
             this.showPoster();
         }
         else {
@@ -50228,9 +50202,7 @@ class Poster extends UIContainerPlugin {
         this.$el.show();
     }
     hidePoster() {
-        trace(`${T$8} hidePoster`, {
-            shouldHideOnPlay: this.shouldHideOnPlay(),
-        });
+        trace(`${T$8} hidePoster`);
         if (!this.options.disableMediaControl) {
             this.container.enableMediaControl();
         }
@@ -50246,27 +50218,24 @@ class Poster extends UIContainerPlugin {
             return this;
         }
         this.$el.html(Poster.template());
-        const isRegularPoster = this.options.poster && this.options.poster.custom === undefined;
-        if (isRegularPoster) {
-            const posterUrl = this.options.poster.url || this.options.poster;
-            this.$el.css({ 'background-image': 'url(' + posterUrl + ')' });
-        }
-        else if (this.options.poster) {
+        const isCustomPoster = this.options.poster?.custom !== undefined;
+        if (isCustomPoster) {
             this.$el.css({ background: this.options.poster.custom });
         }
+        else {
+            const posterUrl = typeof this.options.poster === 'string'
+                ? this.options.poster
+                : this.options.poster?.url;
+            if (posterUrl) {
+                this.$el.css({ 'background-image': 'url(' + posterUrl + ')' });
+            }
+        }
         this.container.$el.removeClass('container-with-poster-clickable');
         this.container.$el.append(this.el);
-        this.$playWrapper = this.$el.find('.play-wrapper');
-        this.$playWrapper.addClass('control-need-disable');
-        this.$playButton = $("<div class='circle-poster gcore-skin-button-color gcore-skin-border-color'></div>");
-        this.$playWrapper.append(this.$playButton);
-        this.$playButton.append(playIcon);
-        if (this.options.autoPlay) {
-            this.$playButton.hide();
+        this.$el.find('#poster-play').append(playIcon);
+        if (this.options.autoPlay || this.isNoOp) {
+            this.$el.find('#poster-play').hide();
         }
-        this.$playButton.addClass('poster-icon');
-        this.$playButton.attr('data-poster', '');
-        this.update();
         return this;
     }
     /**
@@ -51997,12 +51966,31 @@ function requireParseSrt () {
 var parseSrtExports = requireParseSrt();
 const parseSRT = /*@__PURE__*/getDefaultExportFromCjs$1(parseSrtExports);
 
-const pluginHtml = "<div class=\"thumbnails-text\"></div>\n<% if (backdropHeight) { %>\n    <div class=\"backdrop\" style=\"height: <%= backdropHeight %>px;\">\n        <div class=\"carousel\"></div>\n    </div>\n<% }; %>\n<% if (spotlightHeight) { %>\n    <div class=\"spotlight\" style=\"height: <%= spotlightHeight %>px;\">\n    </div>\n<% }; %>\n";
+const pluginHtml = "<div class=\"thumbnails-text\" id=\"thumbnails-text\"></div>\n<div class=\"backdrop\" id=\"thumbnails-backdrop\">\n    <div class=\"carousel\" id=\"thumbnails-carousel\"></div>\n</div>\n<div class=\"spotlight\" id=\"thumbnails-spotlight\"></div>\n";
+
+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'));
+        };
+    });
+}
 
 const T$1 = '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'
@@ -52023,19 +52011,15 @@ const T$1 = 'plugins.thumbnails';
  * ```
  */
 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
      */
@@ -52053,10 +52037,14 @@ class Thumbnails extends UICorePlugin {
      */
     get attributes() {
         return {
-            class: this.name,
+            class: 'scrub-thumbnails',
         };
     }
     static template = tmpl(pluginHtml);
+    constructor(core) {
+        super(core);
+        this.backdropHeight = this.options.thumbnails?.backdropHeight ?? 0;
+    }
     /*
      * Helper to build the "thumbs" property for a sprite sheet.
      *
@@ -52068,25 +52056,21 @@ 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,
@@ -52099,242 +52083,147 @@ class Thumbnails extends UICorePlugin {
         }
         return thumbs;
     }
-    // TODO check if seek enabled
     /**
      * @internal
      */
     bindEvents() {
-        this.listenToOnce(this.core, Events$1.CORE_READY, this._onCoreReady);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this._onMouseMove);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this._onMouseLeave);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_RENDERED, this._init);
-        this.listenTo(this.core.mediaControl, Events$1.MEDIACONTROL_CONTAINERCHANGED, this._onMediaControlContainerChanged);
+        this.listenToOnce(this.core, Events$1.CORE_READY, this.onCoreReady);
     }
-    _bindContainerEvents() {
-        if (this._oldContainer) {
-            this.stopListening(this._oldContainer, Events$1.CONTAINER_TIMEUPDATE, this._renderPlugin);
-        }
-        this._oldContainer = this.core.mediaControl.container;
-        this.listenTo(this.core.mediaControl.container, Events$1.CONTAINER_TIMEUPDATE, this._renderPlugin);
+    bindContainerEvents(container) {
+        this.listenTo(container, Events$1.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$1} 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$1} 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$1.MEDIACONTROL_MOUSEMOVE_SEEKBAR, this.onMouseMoveSeekbar);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_MOUSELEAVE_SEEKBAR, this.onMouseLeave);
+        this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.init);
+        this.listenTo(mediaControl, Events$1.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();
-    }
-    _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);
-    }
-    _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();
-    }
-    _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));
-    }
-    // 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;
-    //   });
-    // }
+        this.$backdropCarouselImgs = [];
+        this.fixElements();
+        this.loadBackdrop();
+        this.update();
+    }
+    mount() {
+        // insert after the background TODO figure out why
+        const mediaControl = this.core.getPlugin('media_control');
+        mediaControl.$el.find('.seek-time').css('bottom', 56); // TODO check
+        // TODO use mediaControl.mount? into the `layer`
+        mediaControl.$el.append(this.$el);
+    }
+    onMouseMoveSeekbar(_, pos) {
+        this.hoverPosition = pos;
+        this.showing = true;
+        this.update();
+    }
+    onMouseLeave() {
+        this.showing = false;
+        this.update();
+    }
     // builds a dom element which represents the thumbnail
-    // scaled to the provided height
-    _buildImg(thumb, height) {
+    // scaled to the given height
+    buildThumbImage(thumb, height) {
         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 = $('<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$1} _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;
@@ -52342,12 +52231,12 @@ 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) {
@@ -52359,47 +52248,43 @@ 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$1} _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;
+        const $spotlight = this.$el.find('#thumbnails-spotlight');
         $spotlight.empty();
-        $spotlight.append(this._buildImg(thumb, this._getOptions().spotlightHeight));
+        $spotlight.append(this.buildThumbImage(thumb, this.spotlightHeight));
         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;
             }
@@ -52407,37 +52292,48 @@ class Thumbnails extends UICorePlugin {
         // stretch the first thumbnail back to the start
         return 0;
     }
-    _renderPlugin() {
-        trace(`${T$1} _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$1} _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;
     }
 }