@gcorevideo/player 2.23.1 → 2.23.3

package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts

@@ -2,9 +2,14 @@ import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { BottomGear, GearEvents } from '../BottomGear'
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
-import { Events } from '@clappr/core'
+import { $, Events } from '@clappr/core'
 import { ExtendedEvents } from '../../media-control/MediaControl'
 
+// import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+
+// Logger.enable('*')
+// setTracer(new LogTracer('BottomGear.test'))
+
 describe('BottomGear', () => {
   let mediaControl: any
   let core: any
@@ -18,66 +23,135 @@ describe('BottomGear', () => {
       .mockImplementation((name) =>
         name === 'media_control' ? mediaControl : null,
       )
-    bottomGear = new BottomGear(core)
-    onGearRendered = vi.fn()
-    bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
-    bottomGear.render()
-    core.emit(Events.CORE_READY)
-  })
-  it('should render', () => {
-    expect(bottomGear.el.innerHTML).toMatchSnapshot()
-  })
-  it('should emit event in the next cycle', async () => {
-    expect(onGearRendered).not.toHaveBeenCalled()
-    await new Promise((resolve) => setTimeout(resolve, 0))
-    expect(onGearRendered).toHaveBeenCalled()
   })
-  it('should render the gear menu hidden', () => {
-    expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-      'none',
-    )
-  })
-  describe('until media control is rendered', () => {
-    it('should not attach to media control', () => {
-      expect(mediaControl.mount).not.toHaveBeenCalledWith(
-        'gear',
-        expect.anything(),
+  describe('basically', () => {
+    beforeEach(() => {
+      bottomGear = new BottomGear(core)
+      onGearRendered = vi.fn()
+      bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
+      core.emit(Events.CORE_READY)
+      bottomGear.addItem('test', null).html('<button>test</button>')
+    })
+    it('should render', () => {
+      expect(bottomGear.el.innerHTML).toMatchSnapshot()
+    })
+    it('should render the gear menu hidden', () => {
+      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+        'none',
       )
     })
-  })
-  describe('when media control is rendered', () => {
-    beforeEach(() => {
-      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+    it('should emit event in the next render cycle', async () => {
+      expect(onGearRendered).not.toHaveBeenCalled()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      expect(onGearRendered).toHaveBeenCalled()
     })
-    it('should attach to media control', () => {
-      expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
+    it('should render the gear menu hidden', () => {
+      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+        'none',
+      )
+    })
+    describe('until media control is rendered', () => {
+      it('should not attach to media control', () => {
+        expect(mediaControl.mount).not.toHaveBeenCalledWith(
+          'gear',
+          expect.anything(),
+        )
+      })
+    })
+    describe('when media control is rendered', () => {
+      beforeEach(() => {
+        mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+      })
+      it('should attach to media control', () => {
+        expect(mediaControl.mount).toHaveBeenCalledWith('gear', bottomGear.$el)
+      })
+    })
+    describe('when clicked', () => {
+      beforeEach(() => {
+        bottomGear.$el.find('#gear-button').click()
+      })
+      it('should open the gear menu', () => {
+        expect(
+          bottomGear.$el.find('#gear-options-wrapper').css('display'),
+        ).not.toBe('none')
+        expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
+          'true',
+        )
+      })
+      it('should trigger media control menu collapse', () => {
+        expect(mediaControl.trigger).toHaveBeenCalledWith(
+          ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
+          'bottom_gear',
+        )
+      })
+    })
+    describe('when clicked twice', () => {
+      beforeEach(() => {
+        bottomGear.$el.find('#gear-button').click()
+        bottomGear.$el.find('#gear-button').click()
+      })
+      it('should collapse the gear menu', () => {
+        expect(
+          bottomGear.$el.find('#gear-options-wrapper').css('display'),
+        ).toBe('none')
+        expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
+          'false',
+        )
+      })
     })
   })
-  describe('when clicked', () => {
+  describe('when there are no items', () => {
     beforeEach(() => {
-      bottomGear.$el.find('#gear-button').click()
+      bottomGear = new BottomGear(core)
+      core.emit(Events.CORE_READY)
     })
-    it('should open the gear menu', () => {
-      expect(
-        bottomGear.$el.find('#gear-options-wrapper').css('display'),
-      ).not.toBe('none')
+    it('should render hidden', () => {
+      expect(bottomGear.$el.css('display')).toBe('none')
     })
-    it('should trigger media control menu collapse', () => {
-      expect(mediaControl.trigger).toHaveBeenCalledWith(
-        ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
-        'bottom_gear',
-      )
+    it('should show button after item is added', () => {
+      bottomGear.addItem('test', null).html('<button>test</button>')
+      expect(bottomGear.$el.css('display')).not.toBe('none')
     })
   })
-  describe('when clicked twice', () => {
-    beforeEach(() => {
-      bottomGear.$el.find('#gear-button').click()
+  describe('when container is clicked', () => {
+    beforeEach(async () => {
+      bottomGear = new BottomGear(core)
+      core.emit(Events.CORE_READY)
+      bottomGear
+        .addItem('test', $('<ul id="test-options"><li>Item</li></ul>'))
+        .html('<button id="test-button">test</button>')
       bottomGear.$el.find('#gear-button').click()
     })
-    it('should collapse the gear menu', () => {
-      expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-        'none',
-      )
+    describe('basically', () => {
+      beforeEach(async () => {
+        mediaControl.container.trigger(Events.CONTAINER_CLICK)
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      })
+      it('should collapse the gear menu', () => {
+        expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+          'none',
+        )
+        expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
+          'false',
+        )
+        expect(bottomGear.$el.find('#test-options').css('display')).toBe('none')
+      })
+    })
+    describe('when submenu is open', () => {
+      beforeEach(async () => {
+        // bottomGear.$el.find('#test-submenu').click()
+        bottomGear.$el.find('#test-options').show(); // as if it was clicked
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        mediaControl.container.trigger(Events.CONTAINER_CLICK)
+      })
+      it('should collapse it as well', () => {
+        expect(bottomGear.$el.find('#test-options').css('display')).toBe(
+          'none',
+        )
+        expect(bottomGear.$el.find('#gear-options').css('display')).not.toBe(
+          'none',
+        )
+      })
     })
   })
 })

package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BottomGear > should render 1`] = `
-"<button class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button">
+exports[`BottomGear > basically > should render 1`] = `
+"<button class="media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" id="gear-button" aria-expanded="false" aria-controls="gear-options">
     /assets/icons/new/gear.svg
 </button>
-<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display:none">
-    <ul class="gear-options-list" id="gear-options" role="menu"></ul>
+<div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display: none;">
+    <ul class="gear-options-list" id="gear-options" role="menu"><li data-test=""><button>test</button></li></ul>
 </div>
 "
 `;

package/src/plugins/thumbnails/Thumbnails.ts

@@ -261,11 +261,9 @@ export class Thumbnails extends UICorePlugin {
   }
 
   private onMouseMoveSeekbar(_: MouseEvent, pos: number) {
-    if (Math.abs(pos - this.hoverPosition) >= 0.01) {
-      this.hoverPosition = pos
-      this.showing = true
-      this.update()
-    }
+    this.hoverPosition = pos
+    this.showing = true
+    this.update()
   }
 
   private onMouseLeave() {
@@ -415,7 +413,6 @@ export class Thumbnails extends UICorePlugin {
     const thumbIndex = this.getThumbIndexForTime(hoverTime)
     const thumb = this.thumbs[thumbIndex]
 
-    // update thumbnail
     const $spotlight = this.$el.find('#thumbnails-spotlight')
 
     this.buildThumbImage(

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

@@ -8,7 +8,7 @@ import { createMockCore, createMockMediaControl } from '../../../testUtils'
 import { Thumbnails } from '../Thumbnails'
 import { loadImageDimensions } from '../utils'
 
-import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+// import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
 
 // Logger.enable('*')
 // setTracer(new LogTracer('Thumbnails.test'))
@@ -30,11 +30,11 @@ describe('Thumbnails', () => {
         vtt: `
 1
 00:00:00.000 --> 00:00:01.000
-sprite.png#xywh=100,100,100,100
+sprite.png#xywh=0,0,100,100
 
 2
 00:00:01.000 --> 00:00:02.000
-sprite.png#xywh=200,200,100,100
+sprite.png#xywh=100,0,100,100
 `,
       },
     })
@@ -69,4 +69,21 @@ sprite.png#xywh=200,200,100,100
       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

@@ -3,7 +3,7 @@
 exports[`Thumbnails > 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: -100px -100px;"></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: -200px -200px;"></div></div>
+    <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>
 "

package/src/testUtils.ts

@@ -98,6 +98,7 @@ export function createMockContainer(
     getDuration: vi.fn().mockReturnValue(0),
     getPlugin: vi.fn(),
     getPlaybackType: vi.fn(),
+    getStartTimeOffset: vi.fn().mockReturnValue(0),
     isDvrInUse: vi.fn().mockReturnValue(false),
     isDvrEnabled: vi.fn().mockReturnValue(false),
     isHighDefinitionInUse: vi.fn().mockReturnValue(false),
@@ -121,6 +122,8 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.mount = vi.fn()
   // @ts-ignore
+  mediaControl.container = core.activeContainer
+  // @ts-ignore
   mediaControl.toggleElement = vi.fn()
   vi.spyOn(mediaControl, 'trigger')
   core.$el.append(mediaControl.$el)

package/temp/player.api.json

@@ -1293,6 +1293,55 @@
               "isAbstract": false,
               "name": "enable"
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@gcorevideo/player!Clips#getText:member(1)",
+              "docComment": "/**\n * Get the text of the clip at the given time\n *\n * @param time - The time to get the text for\n *\n * @returns The text of the clip at the given time\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "getText(time: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "TimeValue",
+                  "canonicalReference": "@gcorevideo/player!TimeValue:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": "): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string | undefined"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              },
+              "releaseTag": "Beta",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "time",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "getText"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@gcorevideo/player!Clips#render:member(1)",
@@ -3459,72 +3508,6 @@
               "isProtected": false,
               "isAbstract": false
             },
-            {
-              "kind": "Method",
-              "canonicalReference": "@gcorevideo/player!MediaControl#putElement:member(1)",
-              "docComment": "/**\n * @deprecated\n *\n * Use {@link MediaControl.mount} instead\n *\n * @param name - \n *\n * @param element - \n */\n",
-              "excerptTokens": [
-                {
-                  "kind": "Content",
-                  "text": "putElement(name: "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "MediaControlElement",
-                  "canonicalReference": "@gcorevideo/player!MediaControlElement:type"
-                },
-                {
-                  "kind": "Content",
-                  "text": ", element: "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "ZeptoResult",
-                  "canonicalReference": "@gcorevideo/player!ZeptoResult:type"
-                },
-                {
-                  "kind": "Content",
-                  "text": "): "
-                },
-                {
-                  "kind": "Content",
-                  "text": "void"
-                },
-                {
-                  "kind": "Content",
-                  "text": ";"
-                }
-              ],
-              "isStatic": false,
-              "returnTypeTokenRange": {
-                "startIndex": 5,
-                "endIndex": 6
-              },
-              "releaseTag": "Beta",
-              "isProtected": false,
-              "overloadIndex": 1,
-              "parameters": [
-                {
-                  "parameterName": "name",
-                  "parameterTypeTokenRange": {
-                    "startIndex": 1,
-                    "endIndex": 2
-                  },
-                  "isOptional": false
-                },
-                {
-                  "parameterName": "element",
-                  "parameterTypeTokenRange": {
-                    "startIndex": 3,
-                    "endIndex": 4
-                  },
-                  "isOptional": false
-                }
-              ],
-              "isOptional": false,
-              "isAbstract": false,
-              "name": "putElement"
-            },
             {
               "kind": "Method",
               "canonicalReference": "@gcorevideo/player!MediaControl#setInitialVolume:member(1)",
@@ -6903,7 +6886,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@gcorevideo/player!Poster:class",
-          "docComment": "/**\n * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped\n *\n * @remarks\n *\n * When the playback is stopped, media control UI is disabled. 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.\n *\n * Configuration options:\n *\n * - `poster.custom` - custom CSS background\n *\n * - `poster.showForNoOp` - whether to show the poster when the playback is not started\n *\n * - `poster.url` - the URL of the poster image\n *\n * - `poster.showOnVideoEnd` - whether to show the poster when the playback is ended\n *\n * @example\n * ```ts\n * new Player({\n *  ...\n *  poster: {\n *    showForNoOp: true,\n *    url: 'https://via.placeholder.com/150.png',\n *  }\n * })\n * ```\n *\n * @beta\n */\n",
+          "docComment": "/**\n * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped\n *\n * @remarks\n *\n * 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.\n *\n * Configuration options - {@link PosterPluginSettings}\n *\n * @example\n * ```ts\n * new Player({\n *  ...\n *  poster: {\n *    showForNoOp: true,\n *    url: 'https://via.placeholder.com/150.png',\n *  }\n * })\n * ```\n *\n * @beta\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -6994,6 +6977,32 @@
           },
           "implementsTokenRanges": []
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@gcorevideo/player!PosterPluginSettings:type",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export type PosterPluginSettings = "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    custom?: string;\n    showForNoOp?: boolean;\n    url?: string;\n    showOnVideoEnd?: boolean;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "src/plugins/poster/Poster.ts",
+          "releaseTag": "Public",
+          "name": "PosterPluginSettings",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@gcorevideo/player!QualityLevel:interface",
@@ -8938,7 +8947,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@gcorevideo/player!Thumbnails:class",
-          "docComment": "/**\n * `PLUGIN` that displays the thumbnails of the video when available.\n *\n * @example\n * ```ts\n * import { Thumbnails } from '@gcorevideo/player'\n *\n * Player.registerPlugin(Thumbnails)\n *\n * new Player({\n *   thumbnails: {\n *     backdropHeight: 200,\n *     backdropMinOpacity: 0.9,\n *     backdropMaxOpacity: 0.99,\n *     spotlightHeight: 100,\n *     vtt: '1\\n00:00:00,000 --> 00:00:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56\\n\\n2\\n00:00:10,000 --> 00:00:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56\\n\\n3\\n00:00:20,000 --> 00:00:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,0,100,56\\n\\n4\\n00:00:30,000 --> 00:00:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,0,100,56\\n\\n5\\n00:00:40,000 --> 00:00:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,0,100,56\\n\\n6\\n00:00:50,000 --> 00:01:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,0,100,56\\n\\n7\\n00:01:00,000 --> 00:01:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,0,100,56\\n\\n8\\n00:01:10,000 --> 00:01:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,56,100,56\\n\\n9\\n00:01:20,000 --> 00:01:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,56,100,56\\n\\n10\\n00:01:30,000 --> 00:01:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,56,100,56\\n\\n11\\n00:01:40,000 --> 00:01:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,56,100,56\\n\\n12\\n00:01:50,000 --> 00:02:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,56,100,56\\n\\n13\\n00:02:00,000 --> 00:02:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,56,100,56\\n\\n14\\n00:02:10,000 --> 00:02:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,56,100,56\\n\\n15\\n00:02:20,000 --> 00:02:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,112,100,56\\n\\n16\\n00:02:30,000 --> 00:02:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,112,100,56\\n\\n17\\n00:02:40,000 --> 00:02:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,112,100,56\\n\\n18\\n00:02:50,000 --> 00:03:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,112,100,56\\n\\n19\\n00:03:00,000 --> 00:03:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,112,100,56\\n\\n20\\n00:03:10,000 --> 00:03:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,112,100,56\\n\\n21\\n00:03:20,000 --> 00:03:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,112,100,56\\n\\n22\\n00:03:30,000 --> 00:03:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,168,100,56\\n\\n23\\n00:03:40,000 --> 00:03:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,168,100,56\\n\\n24\\n00:03:50,000 --> 00:04:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,168,100,56\\n\\n25\\n00:04:00,000 --> 00:04:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,168,100,56\\n\\n26\\n00:04:10,000 --> 00:04:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,168,100,56\\n\\n27\\n00:04:20,000 --> 00:04:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,168,100,56\\n\\n28\\n00:04:30,000 --> 00:04:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,168,100,56\\n\\n29\\n00:04:40,000 --> 00:04:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,224,100,56\\n\\n30\\n00:04:50,000 --> 00:05:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,224,100,56\\n\\n31\\n00:05:00,000 --> 00:05:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,224,100,56\\n\\n32\\n00:05:10,000 --> 00:05:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,224,100,56\\n\\n33\\n00:05:20,000 --> 00:05:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,224,100,56\\n\\n34\\n00:05:30,000 --> 00:05:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,224,100,56\\n\\n35\\n00:05:40,000 --> 00:05:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,224,100,56\\n\\n36\\n00:05:50,000 --> 00:06:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,280,100,56\\n\\n37\\n00:06:00,000 --> 00:06:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,280,100,56\\n\\n38\\n00:06:10,000 --> 00:06:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,280,100,56\\n\\n39\\n00:06:20,000 --> 00:06:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,280,100,56\\n\\n40\\n00:06:30,000 --> 00:06:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,280,100,56\\n\\n41\\n00:06:40,000 --> 00:06:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,280,100,56\\n\\n42\\n00:06:50,000 --> 00:07:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,280,100,56\\n\\n43\\n00:07:00,000 --> 00:07:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,336,100,56\\n\\n44\\n00:07:10,000 --> 00:07:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,336,100,56\\n\\n45\\n00:07:20,000 --> 00:07:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,336,100,56\\n\\n46\\n00:07:30,000 --> 00:07:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,336,100,56\\n\\n47\\n00:07:40,000 --> 00:07:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,336,100,56\\n\\n48\\n00:07:50,000 --> 00:08:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,336,100,56\\n\\n49\\n00:08:00,000 --> 00:08:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,336,100,56\\n',\n *     sprite:\n *      'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',\n *   },\n * })\n * ```\n *\n * @beta\n */\n",
+          "docComment": "/**\n * `PLUGIN` that displays the thumbnails of the video when available.\n *\n * @remarks\n *\n * 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\n *\n * Configuration options - {@link ThumbnailsPluginSettings}\n *\n * @example\n * ```ts\n * import { Thumbnails } from '@gcorevideo/player'\n *\n * Player.registerPlugin(Thumbnails)\n *\n * new Player({\n *   thumbnails: {\n *     backdropHeight: 200,\n *     backdropMinOpacity: 0.9,\n *     backdropMaxOpacity: 0.99,\n *     spotlightHeight: 100,\n *     vtt: '1\\n00:00:00,000 --> 00:00:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,0,100,56\\n\\n2\\n00:00:10,000 --> 00:00:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,0,100,56\\n\\n3\\n00:00:20,000 --> 00:00:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,0,100,56\\n\\n4\\n00:00:30,000 --> 00:00:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,0,100,56\\n\\n5\\n00:00:40,000 --> 00:00:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,0,100,56\\n\\n6\\n00:00:50,000 --> 00:01:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,0,100,56\\n\\n7\\n00:01:00,000 --> 00:01:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,0,100,56\\n\\n8\\n00:01:10,000 --> 00:01:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,56,100,56\\n\\n9\\n00:01:20,000 --> 00:01:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,56,100,56\\n\\n10\\n00:01:30,000 --> 00:01:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,56,100,56\\n\\n11\\n00:01:40,000 --> 00:01:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,56,100,56\\n\\n12\\n00:01:50,000 --> 00:02:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,56,100,56\\n\\n13\\n00:02:00,000 --> 00:02:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,56,100,56\\n\\n14\\n00:02:10,000 --> 00:02:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,56,100,56\\n\\n15\\n00:02:20,000 --> 00:02:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,112,100,56\\n\\n16\\n00:02:30,000 --> 00:02:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,112,100,56\\n\\n17\\n00:02:40,000 --> 00:02:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,112,100,56\\n\\n18\\n00:02:50,000 --> 00:03:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,112,100,56\\n\\n19\\n00:03:00,000 --> 00:03:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,112,100,56\\n\\n20\\n00:03:10,000 --> 00:03:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,112,100,56\\n\\n21\\n00:03:20,000 --> 00:03:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,112,100,56\\n\\n22\\n00:03:30,000 --> 00:03:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,168,100,56\\n\\n23\\n00:03:40,000 --> 00:03:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,168,100,56\\n\\n24\\n00:03:50,000 --> 00:04:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,168,100,56\\n\\n25\\n00:04:00,000 --> 00:04:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,168,100,56\\n\\n26\\n00:04:10,000 --> 00:04:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,168,100,56\\n\\n27\\n00:04:20,000 --> 00:04:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,168,100,56\\n\\n28\\n00:04:30,000 --> 00:04:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,168,100,56\\n\\n29\\n00:04:40,000 --> 00:04:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,224,100,56\\n\\n30\\n00:04:50,000 --> 00:05:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,224,100,56\\n\\n31\\n00:05:00,000 --> 00:05:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,224,100,56\\n\\n32\\n00:05:10,000 --> 00:05:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,224,100,56\\n\\n33\\n00:05:20,000 --> 00:05:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,224,100,56\\n\\n34\\n00:05:30,000 --> 00:05:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,224,100,56\\n\\n35\\n00:05:40,000 --> 00:05:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,224,100,56\\n\\n36\\n00:05:50,000 --> 00:06:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,280,100,56\\n\\n37\\n00:06:00,000 --> 00:06:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,280,100,56\\n\\n38\\n00:06:10,000 --> 00:06:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,280,100,56\\n\\n39\\n00:06:20,000 --> 00:06:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,280,100,56\\n\\n40\\n00:06:30,000 --> 00:06:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,280,100,56\\n\\n41\\n00:06:40,000 --> 00:06:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,280,100,56\\n\\n42\\n00:06:50,000 --> 00:07:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,280,100,56\\n\\n43\\n00:07:00,000 --> 00:07:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=0,336,100,56\\n\\n44\\n00:07:10,000 --> 00:07:20,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=100,336,100,56\\n\\n45\\n00:07:20,000 --> 00:07:30,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=200,336,100,56\\n\\n46\\n00:07:30,000 --> 00:07:40,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=300,336,100,56\\n\\n47\\n00:07:40,000 --> 00:07:50,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=400,336,100,56\\n\\n48\\n00:07:50,000 --> 00:08:00,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=500,336,100,56\\n\\n49\\n00:08:00,000 --> 00:08:10,000\\n3dk4NsRt6vWsffEr_sprite.jpg#xywh=600,336,100,56\\n',\n *     sprite:\n *      'https://static.gvideo.co/videoplatform/sprites/2675/2452164_3dk4NsRt6vWsffEr.mp4_sprite.jpg',\n *   },\n * })\n * ```\n *\n * @beta\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -8959,7 +8968,72 @@
           "isAbstract": false,
           "name": "Thumbnails",
           "preserveMemberOrder": false,
-          "members": [],
+          "members": [
+            {
+              "kind": "Constructor",
+              "canonicalReference": "@gcorevideo/player!Thumbnails:constructor(1)",
+              "docComment": "/**\n * Constructs a new instance of the `Thumbnails` class\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "constructor(core: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "Core",
+                  "canonicalReference": "@clappr/core!default:class"
+                },
+                {
+                  "kind": "Content",
+                  "text": ");"
+                }
+              ],
+              "releaseTag": "Beta",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [
+                {
+                  "parameterName": "core",
+                  "parameterTypeTokenRange": {
+                    "startIndex": 1,
+                    "endIndex": 2
+                  },
+                  "isOptional": false
+                }
+              ]
+            },
+            {
+              "kind": "Method",
+              "canonicalReference": "@gcorevideo/player!Thumbnails#render:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "render(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "this"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Beta",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "render"
+            }
+          ],
           "extendsTokenRange": {
             "startIndex": 1,
             "endIndex": 2
@@ -8977,7 +9051,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    backdropHeight: number;\n    backdropMaxOpacity: number;\n    backdropMinOpacity: number;\n    spotlightHeight: number;\n    sprite: string;\n    vtt: string;\n}"
+              "text": "{\n    backdropHeight?: number;\n    backdropMaxOpacity?: number;\n    backdropMinOpacity?: number;\n    spotlightHeight?: number;\n    sprite: string;\n    vtt: string;\n}"
             },
             {
               "kind": "Content",