@gcorevideo/player 2.22.31 → 2.23.1

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

@@ -0,0 +1,72 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+
+import { Events } from '@clappr/core'
+
+
+import { createMockCore, createMockMediaControl } from '../../../testUtils'
+
+import { Thumbnails } from '../Thumbnails'
+import { loadImageDimensions } from '../utils'
+
+import { Logger, LogTracer, setTracer } from '@gcorevideo/utils'
+
+// Logger.enable('*')
+// setTracer(new LogTracer('Thumbnails.test'))
+
+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: `
+1
+00:00:00.000 --> 00:00:01.000
+sprite.png#xywh=100,100,100,100
+
+2
+00:00:01.000 --> 00:00:02.000
+sprite.png#xywh=200,200,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)
+    })
+  })
+})

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

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+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>
+<div class="spotlight" id="thumbnails-spotlight" style="height: 100px;"></div>
+"
+`;

package/src/plugins/thumbnails/utils.ts

@@ -0,0 +1,12 @@
+export function loadImageDimensions(url: string): Promise<{ width: number, height: number }> {
+  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'))
+    }
+  })
+}

package/src/testUtils.ts

@@ -112,18 +112,18 @@ export function createMockContainer(
 
 export function createMockMediaControl(core: any) {
   const mediaControl = new UICorePlugin(core)
+  // TODO <div class="media-control-layer">
   mediaControl.$el.html(
     `<div class="media-control-left-panel" data-media-control></div>
     <div class="media-control-right-panel" data-media-control></div>
     <div class="media-control-center-panel" data-media-control></div>`,
   )
   // @ts-ignore
-  mediaControl.putElement = vi.fn()
-  // @ts-ignore
   mediaControl.mount = vi.fn()
   // @ts-ignore
   mediaControl.toggleElement = vi.fn()
   vi.spyOn(mediaControl, 'trigger')
+  core.$el.append(mediaControl.$el)
   return mediaControl
 }