@gcorevideo/player 2.22.30 → 2.23.0

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 to media controls', () => {
+      expect(mediaControl.$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 = mediaControl.$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

@@ -1,86 +1,6 @@
-import { $, Playback, UICorePlugin } from '@clappr/core'
+import { $, UICorePlugin } from '@clappr/core'
 import Events from 'eventemitter3'
 import { vi } from 'vitest'
-/**
- * @internal
- * @deprecated
- * TODO use createMockPlayback() instead
- */
-export class _MockPlayback extends Events {
-  constructor(
-    protected options: any,
-    readonly i18n: any,
-    protected playerError?: any,
-  ) {
-    super()
-  }
-
-  get name() {
-    return 'mock'
-  }
-
-  consent() {}
-
-  play() {}
-
-  pause() {}
-
-  stop() {}
-
-  destroy() {}
-
-  seek() {}
-
-  seekPercentage() {}
-
-  getDuration() {
-    return 100
-  }
-
-  enterPiP() {}
-
-  exitPiP() {}
-
-  getPlaybackType() {
-    return Playback.LIVE
-  }
-
-  getStartTimeOffset() {
-    return 0
-  }
-
-  getCurrentTime() {
-    return 0
-  }
-
-  isHighDefinitionInUse() {
-    return false
-  }
-
-  mute() {}
-
-  unmute() {}
-
-  volume() {}
-
-  configure() {}
-
-  attemptAutoPlay() {
-    return true
-  }
-
-  canAutoPlay() {
-    return true
-  }
-
-  onResize() {
-    return true
-  }
-
-  trigger(event: string, ...args: any[]) {
-    this.emit(event, ...args)
-  }
-}
 
 export function createMockCore(
   options: Record<string, unknown> = {},
@@ -129,11 +49,12 @@ export function createMockPlayback(name = 'mock') {
     el: document.createElement('video'),
     dvrEnabled: false,
     dvrInUse: false,
+    isAudioOnly: false,
     levels: [],
-    consent() {},
-    play() {},
-    pause() {},
-    stop() {},
+    consent: vi.fn(),
+    play: vi.fn(),
+    pause: vi.fn(),
+    stop: vi.fn(),
     destroy: vi.fn(),
     seek: vi.fn(),
     seekPercentage: vi.fn(),
@@ -166,13 +87,20 @@ export function createMockContainer(
   return Object.assign(emitter, {
     el,
     playback,
-    options,
+    options: {
+      ...options,
+    },
     $el: $(el),
+    disableMediaControl: vi.fn(),
+    enableMediaControl: vi.fn(),
+    enterPiP: vi.fn(),
+    exitPiP: vi.fn(),
     getDuration: vi.fn().mockReturnValue(0),
     getPlugin: vi.fn(),
     getPlaybackType: vi.fn(),
     isDvrInUse: vi.fn().mockReturnValue(false),
     isDvrEnabled: vi.fn().mockReturnValue(false),
+    isHighDefinitionInUse: vi.fn().mockReturnValue(false),
     isPlaying: vi.fn().mockReturnValue(false),
     play: vi.fn(),
     seek: vi.fn(),
@@ -184,14 +112,13 @@ 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()