@gcorevideo/player 2.20.4 → 2.20.5

package/src/plugins/poster/Poster.ts

@@ -78,7 +78,7 @@ export class Poster extends UIContainerPlugin {
   private static readonly template = template(posterHTML)
 
   private get shouldRender() {
-    if (!this.enabled) {
+    if (!this.enabled || this.options.reloading) {
       return false
     }
     const showForNoOp = !!this.options.poster?.showForNoOp

package/src/plugins/source-controller/SourceController.ts

@@ -3,13 +3,8 @@ import {
   CorePlugin,
   type Core as ClapprCore,
 } from '@clappr/core'
-import {
-  type PlaybackError,
-  PlaybackErrorCode,
-} from '../../playback.types.js'
-import {
-  type PlayerMediaSourceDesc,
-} from '../../types.js'
+import { type PlaybackError, PlaybackErrorCode } from '../../playback.types.js'
+import { type PlayerMediaSourceDesc } from '../../types.js'
 import { trace } from '@gcorevideo/utils'
 import { SpinnerEvents } from '../spinner-three-bounce/SpinnerThreeBounce.js'
 
@@ -44,7 +39,7 @@ function noSync(cb: () => void) {
  * @example
  * ```ts
  * import { SourceController } from '@gcorevideo/player'
- * 
+ *
  * Player.registerPlugin(SourceController)
  * ```
  */
@@ -53,7 +48,7 @@ export class SourceController extends CorePlugin {
    * The Logic itself is quite simple:
    * * Here is the short diagram:
    *
-   * sources_list:  
+   * sources_list:
    *       - a.mpd  |    +--------------------+
    *       - b.m3u8 |--->|         init       |
    *       - ...    |    |--------------------|
@@ -128,11 +123,21 @@ export class SourceController extends CorePlugin {
   override bindEvents() {
     super.bindEvents()
 
-    this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, () => this.onReady())
+    this.listenTo(this.core, ClapprEvents.CORE_READY, this.onCoreReady)
+    this.listenTo(
+      this.core,
+      ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onActiveContainerChanged,
+    )
+  }
+
+  private onCoreReady() {
+    trace(`${T} onCoreReady`)
+    this.core.getPlugin('error_screen')?.disable() //  TODO test
   }
 
-  private onReady() {
-    trace(`${T} onReady`, {
+  private onActiveContainerChanged() {
+    trace(`${T} onActiveContainerChanged`, {
       retrying: this.active,
       currentSource: this.sourcesList[this.currentSourceIndex],
     })
@@ -147,7 +152,7 @@ export class SourceController extends CorePlugin {
     this.bindContainerEventListeners()
     if (this.active) {
       this.core.activeContainer?.getPlugin('poster_custom')?.disable()
-      spinner?.show()
+      spinner?.show(0)
     }
   }
 
@@ -167,7 +172,7 @@ export class SourceController extends CorePlugin {
         switch (error.code) {
           case PlaybackErrorCode.MediaSourceUnavailable:
             this.core.activeContainer?.getPlugin('poster_custom')?.disable()
-            this.retryPlayback()
+            setTimeout(() => this.retryPlayback(), 0)
             break
           // TODO handle other errors
           default:
@@ -200,6 +205,7 @@ export class SourceController extends CorePlugin {
       currentSource: this.sourcesList[this.currentSourceIndex],
     })
     this.active = true
+    this.core.activeContainer?.getPlugin('spinner')?.show(0)
     this.getNextMediaSource().then((nextSource: PlayerMediaSourceDesc) => {
       trace(`${T} retryPlayback syncing...`, {
         nextSource,

package/src/plugins/source-controller/__tests__/SourceController.test.ts

@@ -1,11 +1,16 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 
-import EventLite from 'event-lite'
 import FakeTimers from '@sinonjs/fake-timers'
 
 import { SourceController } from '../SourceController'
 import { PlaybackErrorCode } from '../../../playback.types.js'
-import { _MockPlayback } from '../../../testUtils.js'
+import {
+  _MockPlayback,
+  createMockCore,
+  createMockPlayback,
+  createMockPlugin,
+  createSpinnerPlugin,
+} from '../../../testUtils.js'
 
 const MOCK_SOURCES = [
   {
@@ -60,7 +65,9 @@ describe('SourceController', () => {
       it('should keep a single source for the core', () => {
         core = createMockCore(inputSourcesConfig)
         const _ = new SourceController(core)
-        expect(core.options).toEqual(expect.objectContaining(correctedSourcesConfig))
+        expect(core.options).toEqual(
+          expect.objectContaining(correctedSourcesConfig),
+        )
       })
     })
   })
@@ -76,8 +83,10 @@ describe('SourceController', () => {
         const _ = new SourceController(core)
         core.emit('core:ready')
         core.emit('core:active:container:changed')
-        core.activePlayback.emit('playback:error', { code: PlaybackErrorCode.MediaSourceUnavailable })
-        nextPlayback =  new _MockPlayback({} as any, {} as any)
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
+        nextPlayback = createMockPlayback()
         vi.spyOn(nextPlayback, 'consent')
         vi.spyOn(nextPlayback, 'play')
         core.activePlayback = nextPlayback
@@ -85,7 +94,10 @@ describe('SourceController', () => {
       it('should load the next source after a delay', async () => {
         expect(core.load).not.toHaveBeenCalled()
         await clock.tickAsync(1000)
-        expect(core.load).toHaveBeenCalledWith(MOCK_SOURCES[1].source, MOCK_SOURCES[1].mimeType)
+        expect(core.load).toHaveBeenCalledWith(
+          MOCK_SOURCES[1].source,
+          MOCK_SOURCES[1].mimeType,
+        )
       })
       it('should try to play after loading the source in a random delay', async () => {
         await clock.tickAsync(1000)
@@ -101,6 +113,7 @@ describe('SourceController', () => {
         let poster: any
         let spinner: any
         beforeEach(async () => {
+          await clock.tickAsync(0)
           poster = createMockPlugin()
           spinner = createSpinnerPlugin()
           core.activeContainer.getPlugin.mockImplementation((name: string) => {
@@ -111,7 +124,6 @@ describe('SourceController', () => {
               return spinner
             }
           })
-          core.emit('core:ready')
           core.emit('core:active:container:changed')
         })
         it('should disable the poster', async () => {
@@ -137,8 +149,10 @@ describe('SourceController', () => {
         const _ = new SourceController(core)
         core.emit('core:ready')
         core.emit('core:active:container:changed')
-        core.activePlayback.emit('playback:error', { code: PlaybackErrorCode.MediaSourceUnavailable })
-        nextPlayback =  new _MockPlayback({} as any, {} as any)
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
+        nextPlayback = new _MockPlayback({} as any, {} as any)
         vi.spyOn(nextPlayback, 'consent')
         vi.spyOn(nextPlayback, 'play')
         core.activePlayback = nextPlayback
@@ -161,9 +175,11 @@ describe('SourceController', () => {
         const _ = new SourceController(core)
         core.emit('core:ready')
         core.emit('core:active:container:changed')
-        core.activePlayback.emit('playback:error', { code: PlaybackErrorCode.MediaSourceUnavailable })
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
         await clock.tickAsync(1000)
-        nextPlayback =  new _MockPlayback({} as any, {} as any)
+        nextPlayback = createMockPlayback()
         core.activePlayback = nextPlayback
         poster = createMockPlugin()
         spinner = createSpinnerPlugin()
@@ -186,14 +202,8 @@ describe('SourceController', () => {
         expect(spinner.hide).toHaveBeenCalled()
       })
       describe.each([
-        [
-          'buffering',
-          'playback:buffering',
-        ],
-        [
-          'pause',
-          'playback:pause',
-        ],
+        ['buffering', 'playback:buffering'],
+        ['pause', 'playback:pause'],
       ])('on a following playback:play event due to %s', (_, event) => {
         it('should do nothing', async () => {
           nextPlayback.emit(event)
@@ -207,30 +217,3 @@ describe('SourceController', () => {
     })
   })
 })
-
-function createMockCore(options: Record<string, unknown> = {}) {
-  return Object.assign(new EventLite(), {
-    activePlayback: new _MockPlayback({} as any, {} as any),
-    activeContainer: Object.assign(new EventLite(), {
-      getPlugin: vi.fn(),
-    }),
-    options: {
-      ...options,
-    },
-    load: vi.fn(),
-  })
-}
-
-function createMockPlugin() {
-  return Object.assign(new EventLite(), {
-    enable: vi.fn(),
-    disable: vi.fn(),
-  })
-}
-
-function createSpinnerPlugin() {
-  return Object.assign(createMockPlugin(), {
-    show: vi.fn(),
-    hide: vi.fn(),
-  })
-}

package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts

@@ -55,6 +55,8 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     };
   }
 
+  private hideTimeout: TimerId | null = null;
+
   private showTimeout: TimerId | null = null;
 
   private template = template(spinnerHTML);
@@ -119,8 +121,18 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
   /**
    * Shows the spinner
    */
-  show() {
-    this.showTimeout = setTimeout(() => this.$el.show(), 300);
+  show(delay = 300) {
+    trace(`${T} show`)
+    if (this.showTimeout === null) {
+      if (this.hideTimeout !== null) {
+        clearTimeout(this.hideTimeout);
+        this.hideTimeout = null;
+      }
+      this.showTimeout = setTimeout(() => {
+        this.showTimeout = null
+        this.$el.show()
+      }, delay);
+    }
   }
 
   /**
@@ -131,7 +143,12 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
       clearTimeout(this.showTimeout);
       this.showTimeout = null;
     }
-    this.$el.hide();
+    this.hideTimeout = setTimeout(() => {
+      this.hideTimeout = null
+      if (this.showTimeout === null) {
+        this.$el.hide();
+      }
+    }, 0);
   }
 
   /**

package/src/testUtils.ts

@@ -1,9 +1,11 @@
-import EventLite from 'event-lite'
-
+import Events from 'eventemitter3'
+import { vi } from 'vitest'
 /**
  * @internal
+ * @deprecated
+ * TODO use createMockPlayback() instead
  */
-export class _MockPlayback extends EventLite {
+export class _MockPlayback extends Events {
   constructor(
     protected options: any,
     readonly i18n: any,
@@ -78,3 +80,98 @@ export class _MockPlayback extends EventLite {
     this.emit(event, ...args)
   }
 }
+
+export function createMockCore(options: Record<string, unknown> = {}, container: any = createMockContainer()) {
+  const el = document.createElement('div')
+  return Object.assign(new Events(), {
+    el,
+    $el: {
+      [0]: el,
+      append: vi.fn(),
+    },
+    activePlayback: container.playback,
+    activeContainer: container,
+    options: {
+      ...options,
+    },
+    configure: vi.fn(),
+    getPlugin: vi.fn(),
+    load: vi.fn(),
+  })
+}
+
+export function createMockPlugin() {
+  return Object.assign(new Events(), {
+    enable: vi.fn(),
+    disable: vi.fn(),
+  })
+}
+
+export function createSpinnerPlugin() {
+  return Object.assign(createMockPlugin(), {
+    show: vi.fn(),
+    hide: vi.fn(),
+  })
+}
+
+export function createMockPlayback(name = 'mock') {
+  const emitter = new Events()
+  return Object.assign(emitter, {
+    name,
+    currentLevel: -1,
+    levels: [],
+    consent() {},
+    play() {},
+    pause() {},
+    stop() {},
+    destroy() {},
+    seek() {},
+    seekPercentage() {},
+    getDuration() {
+      return 100
+    },
+    enterPiP() {},
+    exitPiP() {},
+    getPlaybackType() {
+      return '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[]) {
+      emitter.emit(event, ...args)
+    },
+  })
+}
+
+export function createMockContainer(playback: any = createMockPlayback()) {
+  const el = document.createElement('div')
+  return Object.assign(new Events(), {
+    $el: {
+      html: vi.fn(),
+      [0]: el,
+    },
+    el,
+    getPlugin: vi.fn(),
+    playback,
+  })
+}