@gcorevideo/player 2.20.6 → 2.20.7

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
+}