@gcorevideo/player 2.28.21 → 2.28.22

package/lib/plugins/subtitles/ClosedCaptions.d.ts

@@ -126,7 +126,6 @@ export declare class ClosedCaptions extends UICorePlugin {
     private renderIcon;
     private clampPopup;
     private mount;
-    private get shouldKeepVisible();
     private clickaway;
 }
 //# sourceMappingURL=ClosedCaptions.d.ts.map

package/lib/plugins/subtitles/ClosedCaptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAiB7C;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAyB;IAEhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAE3D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAK9B;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,kBAAkB;IAmD1B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,iBAAiB;IAqBzB;;OAEG;IACH,IAAI;IAcJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA4Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,yBAAyB;IAejC,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;IAOb,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,CAAC,SAAS,CAA+C;CACjE"}
+{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,sCAAsC,CAAA;AAiB7C;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,oBAAoB,CAAQ;IAEpC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAyB;IAEhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAE3D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAK9B;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,kBAAkB;IAmD1B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,iBAAiB;IAkCzB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,iBAAiB;IAqBzB;;OAEG;IACH,IAAI;IAcJ;;OAEG;IACH,IAAI;IAiBJ,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IA4Bf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,yBAAyB;IAejC,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,SAAS,CAA+C;CACjE"}

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -336,10 +336,8 @@ export class ClosedCaptions extends UICorePlugin {
         this.setKeepVisible(this.open);
     }
     setKeepVisible(keepVisible) {
-        if (this.shouldKeepVisible) {
-            this.core.getPlugin('media_control').setKeepVisible(keepVisible);
-            this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null);
-        }
+        this.core.getPlugin('media_control').setKeepVisible(keepVisible);
+        this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null);
     }
     itemElement(id) {
         // TODO fix semantically
@@ -414,8 +412,5 @@ export class ClosedCaptions extends UICorePlugin {
             mediaControl.slot('cc', this.$el);
         }
     }
-    get shouldKeepVisible() {
-        return !!this.options.cc?.keepVisible;
-    }
     clickaway = mediaControlClickaway(() => this.hideMenu());
 }

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

@@ -32,7 +32,7 @@ export interface ThumbnailsPluginSettings {
  * @public
  * @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
+ * The VTT cues refer to a thumbnail, an area within the sprite sheet, to associate with a time span.
  *
  * Configuration options - {@link ThumbnailsPluginSettings}
  *

package/lib/plugins/thumbnails/Thumbnails.js

@@ -1,6 +1,6 @@
 import { UICorePlugin, Events, template, $, } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
-import parseSRT from 'parse-srt';
+import { WebVTT } from 'videojs-vtt.js';
 import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/thumbnails/scrub-thumbnails.ejs';
@@ -12,7 +12,7 @@ const T = 'plugins.thumbnails';
  * @public
  * @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
+ * The VTT cues refer to a thumbnail, an area within the sprite sheet, to associate with a time span.
  *
  * Configuration options - {@link ThumbnailsPluginSettings}
  *
@@ -129,7 +129,7 @@ export class Thumbnails extends UICorePlugin {
             return;
         }
         const { sprite: spriteSheet, vtt } = this.options.thumbnails;
-        this.thumbs = this.buildSpriteConfig(parseSRT(vtt), spriteSheet);
+        this.thumbs = this.buildSpriteConfig(parseVTT(vtt), spriteSheet);
         if (!this.thumbs.length) {
             trace(`${T} failed to parse the sprite sheet`);
             this.destroy();
@@ -358,3 +358,23 @@ export class Thumbnails extends UICorePlugin {
         return this;
     }
 }
+function parseVTT(vtt) {
+    const correctedVTT = vtt.startsWith('WEBVTT') ? vtt : 'WEBVTT\n\n' + vtt;
+    const parser = new WebVTT.Parser(window);
+    const cues = [];
+    parser.oncue = (cue) => {
+        cues.push({
+            id: cue.id,
+            start: cue.startTime,
+            end: cue.endTime,
+            text: cue.text
+        });
+    };
+    // TextEncoder is available in all modern browsers and Node >=v11
+    const uint8Array = typeof TextEncoder !== 'undefined'
+        ? new TextEncoder().encode(correctedVTT)
+        : Buffer.from(correctedVTT, 'utf-8');
+    parser.parse(uint8Array);
+    parser.flush();
+    return cues;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.28.21",
+  "version": "2.28.22",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
@@ -44,6 +44,7 @@
     "@types/mousetrap": "^1.6.15",
     "@types/node": "^22.10.1",
     "@types/sinonjs__fake-timers": "^8.1.5",
+    "@types/videojs-vtt.js": "^0.15.3",
     "assert": "^2.1.0",
     "eventemitter3": "^5.0.1",
     "happy-dom": "^20.0.8",
@@ -64,6 +65,6 @@
     "hls.js": "^1.5.17",
     "human-format": "^1.2.1",
     "mousetrap": "^1.6.5",
-    "parse-srt": "^1.0.0-alpha"
+    "videojs-vtt.js": "^0.15.5"
   }
 }

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -448,10 +448,8 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private setKeepVisible(keepVisible: boolean) {
-    if (this.shouldKeepVisible) {
-      this.core.getPlugin('media_control').setKeepVisible(keepVisible)
-      this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null)
-    }
+    this.core.getPlugin('media_control').setKeepVisible(keepVisible)
+    this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null)
   }
 
   private itemElement(id: number): ZeptoResult {
@@ -543,9 +541,5 @@ export class ClosedCaptions extends UICorePlugin {
     }
   }
 
-  private get shouldKeepVisible() {
-    return !!this.options.cc?.keepVisible
-  }
-
   private clickaway = mediaControlClickaway(() => this.hideMenu())
 }

package/src/plugins/thumbnails/Thumbnails.ts

@@ -7,7 +7,7 @@ import {
   Core,
 } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
-import parseSRT, { type ParsedSRT } from 'parse-srt'
+import { WebVTT } from 'videojs-vtt.js'
 import assert from 'assert'
 
 import { TimeValue } from '../../playback.types.js'
@@ -67,7 +67,7 @@ const T = 'plugins.thumbnails'
  * @public
  * @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
+ * The VTT cues refer to a thumbnail, an area within the sprite sheet, to associate with a time span.
  *
  * Configuration options - {@link ThumbnailsPluginSettings}
  *
@@ -152,7 +152,7 @@ export class Thumbnails extends UICorePlugin {
    * startTime- The time (in seconds) that the first thumbnail represents. (defaults to 0)
    */
   private buildSpriteConfig(
-    vtt: ParsedSRT[],
+    vtt: ParsedVTT[],
     baseUrl: string,
   ): ThumbnailDesc[] {
     const thumbs: ThumbnailDesc[] = []
@@ -216,7 +216,7 @@ export class Thumbnails extends UICorePlugin {
       return
     }
     const { sprite: spriteSheet, vtt } = this.options.thumbnails
-    this.thumbs = this.buildSpriteConfig(parseSRT(vtt), spriteSheet)
+    this.thumbs = this.buildSpriteConfig(parseVTT(vtt), spriteSheet)
     if (!this.thumbs.length) {
       trace(`${T} failed to parse the sprite sheet`)
       this.destroy()
@@ -521,3 +521,34 @@ export class Thumbnails extends UICorePlugin {
     return this
   }
 }
+
+type ParsedVTT = {
+  id: string;
+  start: number;
+  end: number;
+  text: string;
+}
+
+
+function parseVTT(vtt: string): ParsedVTT[] {
+  const correctedVTT = vtt.startsWith('WEBVTT') ? vtt : 'WEBVTT\n\n' + vtt;
+  const parser = new WebVTT.Parser(window);
+  const cues: ParsedVTT[] = [];
+  (parser as any).oncue = (cue: any) => {
+    cues.push({
+      id: cue.id,
+      start: cue.startTime,
+      end: cue.endTime,
+      text: cue.text
+    });
+  };
+
+  // TextEncoder is available in all modern browsers and Node >=v11
+  const uint8Array = typeof TextEncoder !== 'undefined'
+    ? new TextEncoder().encode(correctedVTT)
+    : Buffer.from(correctedVTT, 'utf-8');
+  parser.parse(uint8Array as any);
+  parser.flush();
+
+  return cues;
+}

package/src/plugins/thumbnails/__tests__/Thumbnails.test.ts

@@ -17,17 +17,17 @@ vi.mock('../utils.ts', () => ({
   loadImageDimensions: vi.fn().mockResolvedValue({ width: 600, height: 900 }),
 }))
 
-describe('Thumbnails', () => {
-  let core: any
-  let mediaControl: any
-  let thumbnails: Thumbnails
-  beforeEach(() => {
-    core = createMockCore({
-      thumbnails: {
-        backdropHeight: 100,
-        spotlightHeight: 100,
-        sprite: 'https://example.com/sprite.png',
-        vtt: `
+const baselineVTT = `1
+00:00:00.000 --> 00:00:01.000
+sprite.png#xywh=0,0,100,100
+
+2
+00:00:01.000 --> 00:00:02.000
+sprite.png#xywh=100,0,100,100
+`
+
+const headerfulVTT = `WEBVTT
+
 1
 00:00:00.000 --> 00:00:01.000
 sprite.png#xywh=0,0,100,100
@@ -35,54 +35,109 @@ sprite.png#xywh=0,0,100,100
 2
 00:00:01.000 --> 00:00:02.000
 sprite.png#xywh=100,0,100,100
-`,
-      },
-    })
-    mediaControl = createMockMediaControl(core)
-    core.getPlugin.mockImplementation((name) => {
-      switch (name) {
-        case 'media_control':
-          return mediaControl
-      }
-    });
-    thumbnails = new Thumbnails(core)
-  })
-  describe('loading', () => {
-    beforeEach(async () => {
-      core.emit(Events.CORE_READY)
-      await new Promise(resolve => setTimeout(resolve, 1))
-    })
-    it('should render', () => {
-      expect(thumbnails.$el.html()).toMatchSnapshot()
-    })
-    it('should mount along with media controls', () => {
-      expect(core.$el.find('.scrub-thumbnails')).toHaveLength(1)
-    })
-    it('should load image dimensions', () => {
-      expect(loadImageDimensions).toHaveBeenCalledWith('https://example.com/sprite.png')
-    })
-    it('should parse sprite sheet and create thumbnails', () => {
-      const thumbs = thumbnails.$el.find('#thumbnails-carousel .thumbnail-container')
-      expect(thumbs).toHaveLength(2)
-    })
-    it('should hide', () => {
-      expect(thumbnails.$el.hasClass('hidden')).toBe(true)
+`
+
+const blockfulVTT = `WEBVTT
+
+STYLE
+.cue { font-weight: bold; }
+
+1
+00:00:00.000 --> 00:00:01.000
+sprite.png#xywh=0,0,100,100
+
+NOTE
+This is a note
+
+2 - This is fancy cue ID
+00:00:01.000 --> 00:00:02.000
+sprite.png#xywh=100,0,100,100
+`
+
+const idlessVTT = `WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+sprite.png#xywh=0,0,100,100
+
+00:00:01.000 --> 00:00:02.000
+sprite.png#xywh=100,0,100,100
+`
+
+const richcueVTT = `WEBVTT
+
+00:00:00.000 --> 00:00:01.000 align:start size:100%
+sprite.png#xywh=0,0,100,100
+
+00:00:01.000 --> 00:00:02.000 align:center size:100%
+sprite.png#xywh=100,0,100,100
+`
+
+describe('Thumbnails', () => {
+  let core: any
+  let mediaControl: any
+  let thumbnails: Thumbnails
+  describe.each([
+    ['baseline VTT', baselineVTT],
+    ['VTT where cues are without ids', idlessVTT],
+    ['VTT with a WebVTT header', headerfulVTT],
+    ['VTT with NOTE and STYLE blocks', blockfulVTT],
+    ['VTT where cues have settings', richcueVTT],
+  ])('%s', (name, vtt) => {
+    beforeEach(() => {
+      core = createMockCore({
+        thumbnails: {
+          backdropHeight: 100,
+          spotlightHeight: 100,
+          sprite: 'https://example.com/sprite.png',
+          vtt,
+        },
+      })
+      mediaControl = createMockMediaControl(core)
+      core.getPlugin.mockImplementation((name) => {
+        switch (name) {
+          case 'media_control':
+            return mediaControl
+        }
+      });
+      thumbnails = new Thumbnails(core)
     })
-  })
-  describe('update', () => {
-    describe('when mouse pointer is over the scrubber', () => {
+    describe('loading', () => {
       beforeEach(async () => {
         core.emit(Events.CORE_READY)
         await new Promise(resolve => setTimeout(resolve, 1))
-        mediaControl.container.getDuration.mockReturnValue(5)
-        vi.spyOn(thumbnails.$el, 'width').mockReturnValue(300)
-        mediaControl.trigger(Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, {}, 0.5)
       })
-      it('should show thumbnails', () => {
-        expect(thumbnails.$el.hasClass('hidden')).toBe(false)
+      it('should render', () => {
+        expect(thumbnails.$el.html()).toMatchSnapshot()
+      })
+      it('should mount along with media controls', () => {
+        expect(core.$el.find('.scrub-thumbnails')).toHaveLength(1)
+      })
+      it('should load image dimensions', () => {
+        expect(loadImageDimensions).toHaveBeenCalledWith('https://example.com/sprite.png')
       })
-      it('should show the matching spotlight thumbnail', () => {
-        expect(thumbnails.$el.find('#thumbnails-spotlight .thumbnail-container').css('background-position')).toBe('-100px 0px')
+      it('should parse sprite sheet and create thumbnails', () => {
+        const thumbs = thumbnails.$el.find('#thumbnails-carousel .thumbnail-container')
+        expect(thumbs).toHaveLength(2)
+      })
+      it('should hide', () => {
+        expect(thumbnails.$el.hasClass('hidden')).toBe(true)
+      })
+    })
+    describe('update', () => {
+      describe('when mouse pointer is over the scrubber', () => {
+        beforeEach(async () => {
+          core.emit(Events.CORE_READY)
+          await new Promise(resolve => setTimeout(resolve, 1))
+          mediaControl.container.getDuration.mockReturnValue(5)
+          vi.spyOn(thumbnails.$el, 'width').mockReturnValue(300)
+          mediaControl.trigger(Events.MEDIACONTROL_MOUSEMOVE_SEEKBAR, {}, 0.5)
+        })
+        it('should show thumbnails', () => {
+          expect(thumbnails.$el.hasClass('hidden')).toBe(false)
+        })
+        it('should show the matching spotlight thumbnail', () => {
+          expect(thumbnails.$el.find('#thumbnails-spotlight .thumbnail-container').css('background-position')).toBe('-100px 0px')
+        })
       })
     })
   })

package/src/plugins/thumbnails/__tests__/__snapshots__/Thumbnails.test.ts.snap

@@ -1,6 +1,42 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Thumbnails > loading > should render 1`] = `
+exports[`Thumbnails > VTT where cues are without ids > loading > should render 1`] = `
+"<div class="thumbnails-text" id="thumbnails-text"></div>
+<div class="backdrop" id="thumbnails-backdrop" style="height: 100px;">
+    <div class="carousel" id="thumbnails-carousel"><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: 0px 0px;"></div><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: -100px 0px;"></div></div>
+</div>
+<div class="spotlight" id="thumbnails-spotlight" style="height: 100px;"></div>
+"
+`;
+
+exports[`Thumbnails > VTT where cues have settings > loading > should render 1`] = `
+"<div class="thumbnails-text" id="thumbnails-text"></div>
+<div class="backdrop" id="thumbnails-backdrop" style="height: 100px;">
+    <div class="carousel" id="thumbnails-carousel"><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: 0px 0px;"></div><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: -100px 0px;"></div></div>
+</div>
+<div class="spotlight" id="thumbnails-spotlight" style="height: 100px;"></div>
+"
+`;
+
+exports[`Thumbnails > VTT with NOTE and STYLE blocks > loading > should render 1`] = `
+"<div class="thumbnails-text" id="thumbnails-text"></div>
+<div class="backdrop" id="thumbnails-backdrop" style="height: 100px;">
+    <div class="carousel" id="thumbnails-carousel"><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: 0px 0px;"></div><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: -100px 0px;"></div></div>
+</div>
+<div class="spotlight" id="thumbnails-spotlight" style="height: 100px;"></div>
+"
+`;
+
+exports[`Thumbnails > VTT with a WebVTT header > loading > should render 1`] = `
+"<div class="thumbnails-text" id="thumbnails-text"></div>
+<div class="backdrop" id="thumbnails-backdrop" style="height: 100px;">
+    <div class="carousel" id="thumbnails-carousel"><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: 0px 0px;"></div><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: -100px 0px;"></div></div>
+</div>
+<div class="spotlight" id="thumbnails-spotlight" style="height: 100px;"></div>
+"
+`;
+
+exports[`Thumbnails > baseline VTT > loading > should render 1`] = `
 "<div class="thumbnails-text" id="thumbnails-text"></div>
 <div class="backdrop" id="thumbnails-backdrop" style="height: 100px;">
     <div class="carousel" id="thumbnails-carousel"><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: 0px 0px;"></div><div class="thumbnail-container" style="width: 100px; height: 100px; background-image: url(&quot;https://example.com/sprite.png&quot;); background-size: 600px 900px; background-position: -100px 0px;"></div></div>