@gcorevideo/player 2.22.31 → 2.23.1

package/src/plugins/thumbnails/Thumbnails.ts

@@ -1,6 +1,14 @@
-import { UICorePlugin, Events, template, $, Container } from '@clappr/core'
-import { reportError, trace } from '@gcorevideo/utils'
+import {
+  UICorePlugin,
+  Events,
+  template,
+  $,
+  Container,
+  Core,
+} from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
 import parseSRT, { type ParsedSRT } from 'parse-srt'
+import assert from 'assert'
 
 import { TimeValue } from '../../playback.types.js'
 
@@ -9,22 +17,24 @@ import { CLAPPR_VERSION } from '../../build.js'
 import pluginHtml from '../../../assets/thumbnails/scrub-thumbnails.ejs'
 import '../../../assets/thumbnails/style.scss'
 import { ZeptoResult } from '../../types.js'
-import { getPageX } from '../utils.js'
+import { MediaControl } from '../media-control/MediaControl.js'
+import { Clips } from '../clips/Clips.js'
+import { loadImageDimensions } from './utils.js'
 
 /**
  * Plugin configuration options for the thumbnails plugin.
  * @beta
  */
 export type ThumbnailsPluginSettings = {
-  backdropHeight: number
-  backdropMaxOpacity: number
-  backdropMinOpacity: number
-  spotlightHeight: number
+  backdropHeight?: number
+  backdropMaxOpacity?: number
+  backdropMinOpacity?: number
+  spotlightHeight?: number
   sprite: string
   vtt: string
 }
 
-type Thumb = {
+type ThumbnailDesc = {
   url: string
   time: number
   w: number
@@ -40,6 +50,12 @@ 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'
@@ -60,31 +76,23 @@ const T = 'plugins.thumbnails'
  * ```
  */
 export class Thumbnails extends UICorePlugin {
-  private _$spotlight: ZeptoResult | null = null
-
-  private _$backdrop: ZeptoResult | null = null
-
-  private $container: ZeptoResult | null = null
-
-  private $img: ZeptoResult | null = null
+  private $backdropCarouselImgs: ZeptoResult[] = []
 
-  private _$carousel: ZeptoResult | null = null
-
-  private $textThumbnail: ZeptoResult | null = null
+  private spriteSheetHeight: number = 0
 
-  private _$backdropCarouselImgs: ZeptoResult[] = []
+  private spriteSheetWidth: number = 0
 
-  private spriteSheetHeight: number = 0
+  private hoverPosition = 0
 
-  private _hoverPosition = 0
+  private showing = false
 
-  private _show = false
+  private thumbsLoaded = false
 
-  private _thumbsLoaded = false
+  private spotlightHeight = 0
 
-  private _oldContainer: Container | null = null
+  private backdropHeight = 0
 
-  private _thumbs: Thumb[] = []
+  private thumbs: ThumbnailDesc[] = []
 
   /**
    * @internal
@@ -105,12 +113,17 @@ export class Thumbnails extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: this.name,
+      class: 'scrub-thumbnails',
     }
   }
 
   private static readonly template = template(pluginHtml)
 
+  constructor(core: Core) {
+    super(core)
+    this.backdropHeight = this.options.thumbnails?.backdropHeight ?? 0
+  }
+
   /*
    * Helper to build the "thumbs" property for a sprite sheet.
    *
@@ -122,26 +135,25 @@ 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) {
-  private buildSpriteConfig(vtt: ParsedSRT[], spriteSheetUrl: string): Thumb[] {
-    const thumbs: Thumb[] = []
-    // let coor: string[] = [];
+  private buildSpriteConfig(
+    vtt: ParsedSRT[],
+    baseUrl: string,
+  ): ThumbnailDesc[] {
+    const thumbs: ThumbnailDesc[] = []
 
     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,
@@ -156,318 +168,197 @@ export class Thumbnails extends UICorePlugin {
     return thumbs
   }
 
-  // TODO check if seek enabled
-
   /**
    * @internal
    */
   override 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)
   }
 
-  private _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,
-    )
+  private bindContainerEvents(container: Container) {
+    this.listenTo(container, Events.CONTAINER_TIMEUPDATE, this.update)
   }
 
-  private _onCoreReady() {
-    try {
-      if (
-        !this.options.thumbnails ||
-        !this.options.thumbnails.sprite ||
-        !this.options.thumbnails.vtt
-      ) {
-        this.destroy()
-
-        return
-      }
-    } catch (error) {
-      reportError(error)
+  private onCoreReady() {
+    const mediaControl = this.core.getPlugin('media_control') as
+      | MediaControl
+      | undefined
+    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),
+    )
   }
 
   private async loadSpriteSheet(spriteSheetUrl: string): Promise<void> {
-    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
     })
   }
 
-  private _onMediaControlContainerChanged() {
-    this._bindContainerEvents()
+  private onContainerChanged(container: Container) {
+    this.bindContainerEvents(container)
   }
 
-  private _init() {
-    if (!this._thumbsLoaded) {
-      // _init() will be called when the thumbs are loaded,
+  private 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()
-  }
-
-  private _getOptions(): ThumbnailsPluginSettings {
-    if (!('thumbnails' in this.core.options)) {
-      throw "'thumbnail property missing from options object."
-    }
-
-    return this.core.options.thumbnails
+    this.$backdropCarouselImgs = []
+    this.fixElements()
+    this.loadBackdrop()
+    this.update()
   }
 
-  private _appendElToMediaControl() {
-    // insert after the background
-    this.core.mediaControl.$el.find('.seek-time').css('bottom', 56)
-    this.core.mediaControl.$el.first().after(this.el)
+  private mount() {
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
+    mediaControl.$el.find('.seek-time').css('bottom', 56) // TODO check the offset
+    mediaControl.$el.first().after(this.$el);
   }
 
-  private _onMouseMove(e: MouseEvent) {
-    // trace(`${T} _onMouseMove`, {
-    //   e: (e as any).name,
-    //   t: typeof e,
-    //   t2: typeof arguments[1],
-    // });
-    this._calculateHoverPosition(e)
-    this._show = true
-    this._renderPlugin()
-  }
-
-  private _onMouseLeave() {
-    this._show = false
-    this._renderPlugin()
+  private onMouseMoveSeekbar(_: MouseEvent, pos: number) {
+    if (Math.abs(pos - this.hoverPosition) >= 0.01) {
+      this.hoverPosition = pos
+      this.showing = true
+      this.update()
+    }
   }
 
-  private _calculateHoverPosition(e: MouseEvent) {
-    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 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
-  private _buildImg(thumb: Thumb, height: number) {
+  // scaled to the given height
+  private buildThumbImage(
+    thumb: ThumbnailDesc,
+    height: number,
+    $ref?: ZeptoResult,
+  ) {
     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
   }
 
-  private _loadBackdrop() {
-    if (!this._getOptions().backdropHeight) {
+  private loadBackdrop() {
+    if (!this.backdropHeight) {
       // disabled
       return
     }
 
     // append each of the thumbnails to the backdrop carousel
-    const $carousel = this._$carousel
+    const $carousel = this.$el.find('#thumbnails-carousel')
 
-    for (const thumb of this._thumbs) {
-      const $img = this._buildImg(thumb, this._getOptions().backdropHeight)
-
-      // Keep reference to thumbnail
-      this._$backdropCarouselImgs.push($img)
+    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)
     }
   }
 
   private setText(time: TimeValue) {
-    if (this.core.getPlugin('clips')) {
-      const txt = this.core.getPlugin('clips').getText(time)
-
-      this.$textThumbnail.text(txt)
+    const clips = this.core.getPlugin('clips') as 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
-  private _updateCarousel() {
-    trace(`${T} _updateCarousel`, {
-      backdropHeight: this._getOptions().backdropHeight,
-    })
-    if (!this._getOptions().backdropHeight) {
+  private 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') as MediaControl
+
+    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
@@ -477,15 +368,15 @@ 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
+    const carouselXCoord = xCoordInCarousel - this.hoverPosition * backdropWidth
 
-    $carousel.css('left', -carouselXCoord)
+    $carousel.css('left', -carouselXCoord) // TODO +px
 
-    const maxOpacity = this._getOptions().backdropMaxOpacity || 0.6
-    const minOpacity = this._getOptions().backdropMinOpacity || 0.08
+    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
 
@@ -502,61 +393,63 @@ export class Thumbnails extends UICorePlugin {
         minOpacity,
       )
 
-      this._$backdropCarouselImgs[i].css('opacity', opacity)
+      this.$backdropCarouselImgs[i].css('opacity', opacity)
     }
   }
 
-  private _updateSpotlightThumb() {
-    trace(`${T} _updateSpotlightThumb`, {
-      spotlightHeight: this._getOptions().spotlightHeight,
-    })
-    if (!this._getOptions().spotlightHeight) {
+  private updateSpotlightThumb() {
+    if (!this.spotlightHeight) {
       // disabled
       return
     }
 
-    const hoverPosition = this._hoverPosition
-    const videoDuration = this.core.mediaControl.container.getDuration()
+    const mediaControl = this.core.getPlugin('media_control') as MediaControl
+    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))
+    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
-  private _getThumbIndexForTime(time: TimeValue) {
-    const thumbs = this._thumbs
-
-    for (let i = thumbs.length - 1; i >= 0; i--) {
-      const thumb = thumbs[i]
+  private getThumbIndexForTime(time: TimeValue) {
+    for (let i = this.thumbs.length - 1; i >= 0; i--) {
+      const thumb = this.thumbs[i]
 
       if (thumb.time <= time) {
         return i
@@ -567,38 +460,50 @@ export class Thumbnails extends UICorePlugin {
     return 0
   }
 
-  private _renderPlugin() {
-    trace(`${T} _renderPlugin`, {
-      show: this._show,
-      thumbsLoaded: this._thumbsLoaded,
-      thumbs: this._thumbs.length,
-    })
-    if (!this._thumbsLoaded) {
+  private 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')
     }
   }
 
-  private _createElements() {
-    trace(`${T} _createElements`)
-    this.$el.html(
-      Thumbnails.template({
-        backdropHeight: this._getOptions().backdropHeight,
-        spotlightHeight: this._getOptions().spotlightHeight,
-      }),
+  private 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()
+  }
+
+  private get shouldRender() {
+    return (
+      this.options.thumbnails &&
+      this.options.thumbnails.sprite &&
+      this.options.thumbnails.vtt
     )
-    // 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')
+  }
+
+  override render() {
+    if (!this.shouldRender) {
+      return this
+    }
+    this.$el.html(Thumbnails.template())
     this.$el.addClass('hidden')
-    this._appendElToMediaControl()
+
+    return this
   }
 }