@gcorevideo/player 2.20.6 → 2.20.8

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

@@ -90,6 +90,8 @@ export class SourceController extends CorePlugin {
 
   private active = false
 
+  private switching = false
+
   private sync: SyncFn = noSync
 
   /**
@@ -166,15 +168,18 @@ export class SourceController extends CorePlugin {
             description: error?.description,
             level: error?.level,
           },
+          switching: this.switching,
           retrying: this.active,
           currentSource: this.sourcesList[this.currentSourceIndex],
         })
+        if (this.switching) {
+          return
+        }
         switch (error.code) {
           case PlaybackErrorCode.MediaSourceUnavailable:
             this.core.activeContainer?.getPlugin('poster_custom')?.disable()
-            setTimeout(() => this.retryPlayback(), 0)
+            this.retryPlayback()
             break
-          // TODO handle other errors
           default:
             break
         }
@@ -187,7 +192,6 @@ export class SourceController extends CorePlugin {
       })
       if (this.active) {
         this.reset()
-        // TODO make poster reset its state on enable
         this.core.activeContainer?.getPlugin('poster_custom')?.enable()
         this.core.activeContainer?.getPlugin('spinner')?.hide()
       }
@@ -205,6 +209,7 @@ export class SourceController extends CorePlugin {
       currentSource: this.sourcesList[this.currentSourceIndex],
     })
     this.active = true
+    this.switching = true
     this.core.activeContainer?.getPlugin('spinner')?.show(0)
     this.getNextMediaSource().then((nextSource: PlayerMediaSourceDesc) => {
       trace(`${T} retryPlayback syncing...`, {
@@ -213,12 +218,12 @@ export class SourceController extends CorePlugin {
       const rnd = RETRY_DELAY_BLUR * Math.random()
       this.sync(() => {
         trace(`${T} retryPlayback loading...`)
+        this.switching = false
         this.core.load(nextSource.source, nextSource.mimeType)
         trace(`${T} retryPlayback loaded`, {
           nextSource,
         })
         setTimeout(() => {
-          // this.core.activePlayback.consent()
           this.core.activePlayback.play()
           trace(`${T} retryPlayback playing`)
         }, rnd)

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

@@ -74,7 +74,6 @@ describe('SourceController', () => {
   describe('on fatal playback failure', () => {
     let core: any
     let nextPlayback: any
-
     describe('basically', () => {
       beforeEach(() => {
         core = createMockCore({
@@ -215,5 +214,40 @@ describe('SourceController', () => {
         })
       })
     })
+    describe('given that playback triggers many errors in a row', () => {
+      beforeEach(async () => {
+        core = createMockCore({
+          sources: MOCK_SOURCES,
+        })
+        const _ = new SourceController(core)
+        core.emit('core:ready')
+        core.emit('core:active:container:changed')
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
+        await clock.tickAsync(1)
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
+        await clock.tickAsync(1)
+        core.activePlayback.emit('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+        })
+        await clock.tickAsync(1)
+        nextPlayback = createMockPlayback()
+        vi.spyOn(nextPlayback, 'consent')
+        vi.spyOn(nextPlayback, 'play')
+        core.activePlayback = nextPlayback
+      })
+      it('should run handler only once', async () => {
+        expect(core.load).not.toHaveBeenCalled()
+        await clock.tickAsync(1000)
+        expect(core.load).toHaveBeenCalledTimes(1)
+        expect(core.load).toHaveBeenCalledWith(
+          MOCK_SOURCES[1].source,
+          MOCK_SOURCES[1].mimeType,
+        )
+      })
+    })
   })
 })

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

@@ -2,14 +2,19 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import { Container, Events as ClapprEvents, UIContainerPlugin, template } from '@clappr/core';
-import { PlaybackError, PlaybackErrorCode } from '../../playback.types.js';
-import { trace } from '@gcorevideo/utils';
-
-import spinnerHTML from '../../../assets/spinner-three-bounce/spinner.ejs';
-import '../../../assets/spinner-three-bounce/spinner.scss';
-import { TimerId } from '../../utils/types.js';
-import { CLAPPR_VERSION } from '../../build.js';
+import {
+  Container,
+  Events as ClapprEvents,
+  UIContainerPlugin,
+  template,
+} from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
+
+import { PlaybackError, PlaybackErrorCode } from '../../playback.types.js'
+import spinnerHTML from '../../../assets/spinner-three-bounce/spinner.ejs'
+import '../../../assets/spinner-three-bounce/spinner.scss'
+import { TimerId } from '../../utils/types.js'
+import { CLAPPR_VERSION } from '../../build.js'
 
 const T = 'plugins.spinner'
 
@@ -28,21 +33,23 @@ export enum SpinnerEvents {
  * Shows a pending operation indicator when playback is buffering or in other appropriate cases
  * @beta
  * @remarks
- * The plugin emits 
+ * The plugin emits
  */
 export class SpinnerThreeBounce extends UIContainerPlugin {
+  private userShown = false
+
   /**
    * @internal
    */
   get name() {
-    return 'spinner';
+    return 'spinner'
   }
 
   /**
    * @internal
    */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
   /**
@@ -50,47 +57,53 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
    */
   override get attributes() {
     return {
-      'data-spinner':'',
-      'class': 'spinner-three-bounce'
-    };
+      'data-spinner': '',
+      class: 'spinner-three-bounce',
+    }
   }
 
-  private hideTimeout: TimerId | null = null;
-
-  private showTimeout: TimerId | null = null;
+  private showTimeout: TimerId | null = null
 
-  private template = template(spinnerHTML);
+  private template = template(spinnerHTML)
 
   private hasFatalError = false
 
   private hasBuffering = false
 
   constructor(container: Container) {
-    super(container);
-    this.listenTo(this.container, ClapprEvents.CONTAINER_STATE_BUFFERING, this.onBuffering);
-    this.listenTo(this.container, ClapprEvents.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
-    this.listenTo(this.container, ClapprEvents.CONTAINER_PLAY, this.onPlay);
-    this.listenTo(this.container, ClapprEvents.CONTAINER_STOP, this.onStop);
-    this.listenTo(this.container, ClapprEvents.CONTAINER_ENDED, this.onStop);
-    this.listenTo(this.container, ClapprEvents.CONTAINER_ERROR, this.onError);
-    this.listenTo(this.container, ClapprEvents.CONTAINER_READY, this.render);
+    super(container)
+    this.listenTo(
+      this.container,
+      ClapprEvents.CONTAINER_STATE_BUFFERING,
+      this.onBuffering,
+    )
+    this.listenTo(
+      this.container,
+      ClapprEvents.CONTAINER_STATE_BUFFERFULL,
+      this.onBufferFull,
+    )
+    this.listenTo(this.container, ClapprEvents.CONTAINER_PLAY, this.onPlay)
+    this.listenTo(this.container, ClapprEvents.CONTAINER_STOP, this.onStop)
+    this.listenTo(this.container, ClapprEvents.CONTAINER_ENDED, this.onStop)
+    this.listenTo(this.container, ClapprEvents.CONTAINER_ERROR, this.onError)
+    this.listenTo(this.container, ClapprEvents.CONTAINER_READY, this.render)
   }
 
   private onBuffering() {
     this.hasBuffering = true
-    this.show();
+    this._show()
   }
 
   private onBufferFull() {
     if (!this.hasFatalError && this.hasBuffering) {
-      this.hide();
+      this._hide()
     }
     this.hasBuffering = false
   }
 
   private onPlay() {
-    trace(`${T} onPlay`);
-    this.hide();
+    trace(`${T} onPlay`)
+    this._hide()
   }
 
   private onStop() {
@@ -99,7 +112,7 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
       hasFatalError: this.hasFatalError,
     })
     if (!(this.hasFatalError && this.options.spinner?.showOnError)) {
-      this.hide();
+      this._hide()
     }
   }
 
@@ -112,65 +125,75 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
       error: e.code,
     })
     if (this.options.spinner?.showOnError) {
-      this.show();
+      this._show()
     } else {
-      this.hide();
+      this._hide()
     }
   }
 
   /**
-   * Shows the spinner
+   * Shows the spinner.
+   *
+   * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce#hide} is called
    */
   show(delay = 300) {
     trace(`${T} show`)
+    this.userShown = true
+    this._show(delay)
+  }
+
+  /**
+   * Hides the spinner.
+   */
+  hide() {
+    this.userShown = false
+    this._hide()
+  }
+
+  private _show(delay = 300) {
     if (this.showTimeout === null) {
-      if (this.hideTimeout !== null) {
-        clearTimeout(this.hideTimeout);
-        this.hideTimeout = null;
-      }
       this.showTimeout = setTimeout(() => {
         this.showTimeout = null
         this.$el.show()
-      }, delay);
+      }, delay)
     }
   }
 
-  /**
-   * Hides the spinner
-   */
-  hide() {
+  private _hide() {
+    trace(`${T} _hide`, {
+      userShown: this.userShown,
+    })
+    if (this.userShown) {
+      return
+    }
     if (this.showTimeout !== null) {
-      clearTimeout(this.showTimeout);
-      this.showTimeout = null;
+      clearTimeout(this.showTimeout)
+      this.showTimeout = null
     }
-    this.hideTimeout = setTimeout(() => {
-      this.hideTimeout = null
-      if (this.showTimeout === null) {
-        this.$el.hide();
-      }
-    }, 0);
+    this.$el.hide()
+    this.trigger(SpinnerEvents.SYNC) // TODO test
   }
 
   /**
    * @internal
    */
   override render() {
-    const showOnStart = this.options.spinner?.showOnStart;
+    const showOnStart = this.options.spinner?.showOnStart
     trace(`${T} render`, {
       buffering: this.container.buffering,
       showOnStart,
     })
-    this.$el.html(this.template());
+    this.$el.html(this.template())
     this.el.firstElementChild?.addEventListener('animationiteration', () => {
       this.trigger(SpinnerEvents.SYNC)
     })
-    this.container.$el.append(this.$el[0]);
+    this.container.$el.append(this.$el[0])
     if (showOnStart || this.container.buffering) {
-      this.show();
+      this._show()
     } else {
-      this.hide();
+      this._hide()
     }
 
-    return this;
+    return this
   }
 }

package/src/testUtils.ts

@@ -1,3 +1,4 @@
+import { $, UICorePlugin } from '@clappr/core'
 import Events from 'eventemitter3'
 import { vi } from 'vitest'
 /**
@@ -83,12 +84,10 @@ export class _MockPlayback extends Events {
 
 export function createMockCore(options: Record<string, unknown> = {}, container: any = createMockContainer()) {
   const el = document.createElement('div')
-  return Object.assign(new Events(), {
+  const emitter = new Events()
+  return Object.assign(emitter, {
     el,
-    $el: {
-      [0]: el,
-      append: vi.fn(),
-    },
+    $el: $(el),
     activePlayback: container.playback,
     activeContainer: container,
     options: {
@@ -97,6 +96,7 @@ export function createMockCore(options: Record<string, unknown> = {}, container:
     configure: vi.fn(),
     getPlugin: vi.fn(),
     load: vi.fn(),
+    trigger: emitter.emit,
   })
 }
 
@@ -166,12 +166,19 @@ export function createMockPlayback(name = 'mock') {
 export function createMockContainer(playback: any = createMockPlayback()) {
   const el = document.createElement('div')
   return Object.assign(new Events(), {
-    $el: {
-      html: vi.fn(),
-      [0]: el,
-    },
+    $el: $(el),
     el,
     getPlugin: vi.fn(),
     playback,
   })
 }
+
+export function createMockMediaControl(core: any) {
+  const mediaControl = new UICorePlugin(core)
+  const elements = {
+    gear: $(document.createElement('div')),
+  }
+  // @ts-ignore
+  mediaControl.getElement = vi.fn().mockImplementation((name) => elements[name])
+  return mediaControl
+}