@gcorevideo/player 2.19.14 → 2.19.15

package/src/plugins/media-control/MediaControl.ts

@@ -45,6 +45,7 @@ export type MediaControlElement =
   | 'pip'
   | 'playbackRate'
   | 'seekBarContainer'
+  | 'subtitlesSelector'
 
 const T = 'plugins.media_control'
 
@@ -207,7 +208,7 @@ export class MediaControl extends UICorePlugin {
    * @deprecated
    */
   get container() {
-    return this.core && this.core.activeContainer
+    return this.core.activeContainer
   }
 
   /**
@@ -215,7 +216,7 @@ export class MediaControl extends UICorePlugin {
    * @deprecated
    */
   get playback() {
-    return this.core && this.core.activePlayback
+    return this.core.activePlayback
   }
 
   /**
@@ -327,7 +328,6 @@ export class MediaControl extends UICorePlugin {
     this.listenTo(this.core, Events.CORE_FULLSCREEN, this.show)
     this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure)
     this.listenTo(this.core, Events.CORE_RESIZE, this.playerResize)
-    this.bindContainerEvents()
 
     this.listenTo(this.core, 'core:advertisement:start', this.onStartAd)
     this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd)
@@ -355,63 +355,60 @@ export class MediaControl extends UICorePlugin {
   }
 
   private bindContainerEvents() {
-    if (!this.container) {
-      return
-    }
-    this.listenTo(this.container, Events.CONTAINER_PLAY, this.changeTogglePlay)
-    this.listenTo(this.container, Events.CONTAINER_PAUSE, this.changeTogglePlay)
-    this.listenTo(this.container, Events.CONTAINER_STOP, this.changeTogglePlay)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.changeTogglePlay)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.changeTogglePlay)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.changeTogglePlay)
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_DBLCLICK,
       this.toggleFullscreen,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_TIMEUPDATE,
       this.onTimeUpdate,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_PROGRESS,
       this.updateProgressBar,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_SETTINGSUPDATE,
       this.settingsUpdate,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
       this.settingsUpdate,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_HIGHDEFINITIONUPDATE,
       this.highDefinitionUpdate,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_MEDIACONTROL_DISABLE,
       this.disable,
     )
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_MEDIACONTROL_ENABLE,
       this.enable,
     )
-    this.listenTo(this.container, Events.CONTAINER_ENDED, this.ended)
-    this.listenTo(this.container, Events.CONTAINER_VOLUME, this.onVolumeChanged)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.ended)
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, this.onVolumeChanged)
     this.listenTo(
-      this.container,
+      this.core.activeContainer,
       Events.CONTAINER_OPTIONS_CHANGE,
       this.setInitialVolume,
     )
-    if (this.container.playback.el.nodeName.toLowerCase() === 'video') {
+    if (this.core.activePlayback.el.nodeName.toLowerCase() === 'video') {
       // wait until the metadata has loaded and then check if fullscreen on video tag is supported
       this.listenToOnce(
-        this.container,
+        this.core.activeContainer,
         Events.CONTAINER_LOADEDMETADATA,
         this.onLoadedMetadataOnVideoTag,
       )
@@ -455,7 +452,7 @@ export class MediaControl extends UICorePlugin {
   }
 
   private onLoadedMetadataOnVideoTag(event: any) {
-    const video = this.playback && this.playback.el
+    const video = this.core.activePlayback?.el
 
     // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
     // see https://github.com/clappr/clappr/issues/1127
@@ -729,32 +726,33 @@ export class MediaControl extends UICorePlugin {
 
   private onActiveContainerChanged() {
     this.fullScreenOnVideoTagSupported = null
-    this.bindEvents()
     // set the new container to match the volume of the last one
     this.setInitialVolume()
     this.changeTogglePlay()
     this.bindContainerEvents()
     this.settingsUpdate()
-    this.container &&
-      this.container.trigger(
+    this.core.activeContainer &&
+      this.core.activeContainer.trigger(
         Events.CONTAINER_PLAYBACKDVRSTATECHANGED,
-        this.container.isDvrInUse(),
+        this.core.activeContainer.isDvrInUse(),
       )
-    this.container && this.container.mediaControlDisabled && this.disable()
+    this.core.activeContainer && this.core.activeContainer.mediaControlDisabled && this.disable()
     this.trigger(Events.MEDIACONTROL_CONTAINERCHANGED)
 
-    if (this.container.$el) {
-      this.container.$el.addClass('container-skin-1')
+    if (this.core.activeContainer.$el) {
+      this.core.activeContainer.$el.addClass('container-skin-1')
     }
 
     if (this.options.cropVideo) {
-      this.container.$el.addClass('crop-video')
+      this.core.activeContainer.$el.addClass('crop-video')
     }
 
-    const spinnerPlugin = this.container.getPlugin('spinner')
+    // TODO handle by the spinner itself
+    const spinnerPlugin = this.core.activeContainer.getPlugin('spinner')
 
     spinnerPlugin?.$el.find('div').addClass('gcore-skin-main-color')
 
+    // TODO handle by the seek_time itself
     const seekTimePlugin = this.container.getPlugin('seek_time')
 
     seekTimePlugin?.$el.addClass('gcore-skin-bg-color')
@@ -964,12 +962,11 @@ export class MediaControl extends UICorePlugin {
   }
 
   private settingsUpdate() {
-    const newSettings = this.getSettings()
-    $.extend(true, newSettings, {
+    const newSettings = $.extend(true, {
       left: [],
       default: [],
       right: [],
-    })
+    }, this.core.activeContainer?.settings)
 
     newSettings.left = orderByOrderPattern(
       [...newSettings.left, 'clipsText', 'volume'],
@@ -1014,11 +1011,6 @@ export class MediaControl extends UICorePlugin {
     }
   }
 
-  private getSettings() {
-    // TODO show live and remove duration/position if live
-    return $.extend(true, {}, this.container && this.container.settings)
-  }
-
   private highDefinitionUpdate(isHD: boolean) {
     this.isHD = isHD
   }
@@ -1102,9 +1094,19 @@ export class MediaControl extends UICorePlugin {
         return this.$playbackRate
       case 'seekBarContainer':
         return this.$seekBarContainer
+      case 'subtitlesSelector':
+        return this.$subtitlesSelector
     }
   }
 
+  /**
+   * Get the right panel area to append custom elements to
+   * @returns  ZeptoSelector of the right panel element
+   */
+  getRightPanel() {
+    return this.$el.find('.media-control-right-panel')
+  }
+
   private resetIndicators() {
     assert.ok(
       this.$duration && this.$position,
@@ -1298,7 +1300,7 @@ export class MediaControl extends UICorePlugin {
 
     this.changeTogglePlay()
 
-    if (this.container) {
+    if (this.core.activeContainer) {
       this.hideId = setTimeout(() => this.hide(), timeout)
       this.disabled && this.hide()
     }

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

@@ -11,6 +11,7 @@ import {
   type PlayerMediaSourceDesc,
 } from '../../types.js'
 import { trace } from '@gcorevideo/utils'
+import { SpinnerEvents } from '../spinner-three-bounce/SpinnerThreeBounce.js'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
@@ -96,10 +97,16 @@ export class SourceController extends CorePlugin {
 
   private sync: SyncFn = noSync
 
+  /**
+   * @internal
+   */
   get name() {
     return 'source_controller'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION }
   }
@@ -132,7 +139,7 @@ export class SourceController extends CorePlugin {
     const spinner = this.core.activeContainer?.getPlugin('spinner')
     if (spinner) {
       this.sync = (cb: () => void) => {
-        spinner.once('spinner:sync', cb)
+        spinner.once(SpinnerEvents.SYNC, cb)
       }
     } else {
       this.sync = noSync
@@ -228,6 +235,9 @@ export class SourceController extends CorePlugin {
     })
   }
 
+  /**
+   * @internal
+   */
   static get version() {
     return VERSION
   }

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

@@ -146,7 +146,7 @@ describe('SourceController', () => {
       it('should sync with the spinner before reloading the source', async () => {
         await clock.tickAsync(1000)
         expect(core.load).not.toHaveBeenCalled()
-        spinner.emit('spinner:sync')
+        spinner.emit('plugins:spinner:sync')
         expect(core.load).toHaveBeenCalled()
       })
     })

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import { Container, Events, UIContainerPlugin, template } from '@clappr/core';
+import { Container, Events as ClapprEvents, UIContainerPlugin, template } from '@clappr/core';
 import { PlaybackError, PlaybackErrorCode } from '../../playback.types.js';
 import { trace } from '@gcorevideo/utils';
 
@@ -13,15 +13,41 @@ import { CLAPPR_VERSION } from '../../build.js';
 
 const T = 'plugins.spinner'
 
+/**
+ * Custom events emitted by the plugin
+ */
+export enum SpinnerEvents {
+  /**
+   * Emitted at the end of the spinner animation cycle to facilitate smooth UI updates,
+   * e.g. {@link SourceController} listens to this event to reload the source when the spinner is hidden
+   */
+  SYNC = 'plugins:spinner:sync',
+}
+
+/**
+ * Shows a pending operation indicator when playback is buffering or in other appropriate cases
+ * @beta
+ * @remarks
+ * The plugin emits 
+ */
 export class SpinnerThreeBounce extends UIContainerPlugin {
+  /**
+   * @internal
+   */
   get name() {
     return 'spinner';
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION };
   }
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
       'data-spinner':'',
@@ -39,13 +65,13 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
 
   constructor(container: Container) {
     super(container);
-    this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERING, this.onBuffering);
-    this.listenTo(this.container, Events.CONTAINER_STATE_BUFFERFULL, this.onBufferFull);
-    this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
-    this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
-    this.listenTo(this.container, Events.CONTAINER_ENDED, this.onStop);
-    this.listenTo(this.container, Events.CONTAINER_ERROR, this.onError);
-    this.listenTo(this.container, Events.CONTAINER_READY, this.render);
+    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() {
@@ -90,21 +116,16 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     }
   }
 
-  show(immediate = false) {
-    trace(`${T} show`, {
-      immediate,
-    })
-    if (immediate) {
-      if (this.showTimeout !== null) {
-        clearTimeout(this.showTimeout);
-        this.showTimeout = null;
-      }
-      this.$el.show();
-    } else if (this.showTimeout === null) {
-      this.showTimeout = setTimeout(() => this.$el.show(), 300);
-    }
+  /**
+   * Shows the spinner
+   */
+  show() {
+    this.showTimeout = setTimeout(() => this.$el.show(), 300);
   }
 
+  /**
+   * Hides the spinner
+   */
   hide() {
     if (this.showTimeout !== null) {
       clearTimeout(this.showTimeout);
@@ -113,6 +134,9 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     this.$el.hide();
   }
 
+  /**
+   * @internal
+   */
   override render() {
     const showOnStart = this.options.spinner?.showOnStart;
     trace(`${T} render`, {
@@ -121,7 +145,7 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     })
     this.$el.html(this.template());
     this.el.firstElementChild?.addEventListener('animationiteration', () => {
-      this.trigger('spinner:sync')
+      this.trigger(SpinnerEvents.SYNC)
     })
     this.container.$el.append(this.$el[0]);
     if (showOnStart || this.container.buffering) {