@gcorevideo/player 2.23.2 → 2.24.0

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

@@ -41,7 +41,7 @@ export function createSpinnerPlugin() {
   })
 }
 
-export function createMockPlayback(name = 'mock') {
+export function createMockPlayback(name = 'mock', options: Record<string, unknown> = {}) {
   const emitter = new Events()
   return Object.assign(emitter, {
     name,
@@ -51,6 +51,7 @@ export function createMockPlayback(name = 'mock') {
     dvrInUse: false,
     isAudioOnly: false,
     levels: [],
+    options: { ...options },
     consent: vi.fn(),
     play: vi.fn(),
     pause: vi.fn(),
@@ -80,7 +81,7 @@ export function createMockPlayback(name = 'mock') {
 
 export function createMockContainer(
   options: Record<string, unknown> = {},
-  playback: any = createMockPlayback(),
+  playback: any = createMockPlayback('html5_video', options),
 ) {
   const el = playback.el
   const emitter = new Events()
@@ -98,6 +99,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 +123,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)