@gcorevideo/player 2.20.11 → 2.20.13

package/src/playback/hls-playback/HlsPlayback.ts

@@ -504,7 +504,7 @@ export default class HlsPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_READY, this.name)
   }
 
-  _recover(evt: HlsEvents.ERROR, data: HlsErrorData, error: PlaybackError) {
+  private _recover(evt: HlsEvents.ERROR, data: HlsErrorData, error: PlaybackError) {
     assert(this._hls, 'Hls.js instance is not available')
     if (!this._recoveredDecodingError) {
       this._recoveredDecodingError = true
@@ -690,6 +690,10 @@ export default class HlsPlayback extends BasePlayback {
               details: data.details,
             })
             error.level = PlayerError.Levels.WARN
+            // TODO check
+            // if (data.error instanceof MediaError && data.error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
+            //   error.code = PlaybackErrorCode.MediaSourceUnavailable
+            // }
             this._recover(evt, data, error)
             break
           default:

package/src/playback.types.ts

@@ -109,7 +109,7 @@ export interface PlaybackError {
    */
   message: string
   /**
-   * Exact component that originated the error.
+   * Name of the component that originated the error.
    * @example
    * - 'core'
    * - 'dash'
@@ -117,7 +117,7 @@ export interface PlaybackError {
    */
   origin: string
   /**
-   * Component subsystem of the error origin
+   * Component subsystem of the error origin, together with the `origin` uniquely identifies the originating component.
    */
   scope: PlayerComponentType
 

package/src/plugins/click-to-pause/ClickToPause.ts

@@ -70,11 +70,6 @@ export class ClickToPause extends ContainerPlugin {
     const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE
     const pointerEnabled = !isLivePlayback || this.container.isDvrEnabled()
 
-    trace(`${T} settingsUpdate`, {
-      isLivePlayback,
-      pointerEnabled,
-    })
-
     if (pointerEnabled === this.pointerEnabled) {
       return
     }

package/src/plugins/context-menu/ContextMenu.ts

@@ -18,7 +18,7 @@ type MenuOption = {
 }
 
 /**
- * The plugin adds a context menu to the player.
+ * Context menu plugin settings
  * @beta
  */
 export interface ContextMenuPluginSettings {

package/src/plugins/dvr-controls/DvrControls.ts

@@ -129,7 +129,6 @@ export class DvrControls extends UICorePlugin {
   }
 
   private settingsUpdate() {
-    trace(`${T} settingsUpdate`)
     this.core.getPlugin('media_control').$el.removeClass('live')
     this.render()
   }

package/src/plugins/error-screen/ErrorScreen.ts

@@ -154,7 +154,6 @@ export class ErrorScreen extends UICorePlugin {
       }),
     )
 
-    // TODO append to container instead of core?
     if (!this.el.parentElement) {
       this.core.$el.append(this.el)
     }

package/src/plugins/favicon/Favicon.ts

@@ -10,15 +10,23 @@ import stopIcon from '../../../assets/icons/new/stop.svg';
 const FAVICON_COLOR = '#567';
 const FAVICON_SELECTOR = 'link[rel="shortcut icon"]';
 
-// const oldIcon = $(FAVICON_SELECTOR);
+/**
+ * @beta
+ */
+export interface FaviconPluginSettings {
+  /**
+   * CSS color of the favicon.
+   */
+  faviconColor?: string;
+}
 
 /**
- * `PLUGIN` that adds custom favicon to the player's tab.
+ * `PLUGIN` that changes the favicon according to the player's state.
  * @beta
+ * @remarks
+ * There are three states: stopped, playing and paused.
  */
 export class Favicon extends CorePlugin {
-  private _container: Container | null = null;
-
   private oldIcon: ZeptoResult;
 
   private playIcon: ZeptoResult | null = null;
@@ -27,18 +35,23 @@ export class Favicon extends CorePlugin {
 
   private stopIcon: ZeptoResult | null = null;
 
+  /**
+   * @internal
+   */
   get name() {
     return 'favicon';
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
     return { min: CLAPPR_VERSION };
   }
 
-  //   get oldIcon() {
-  //     return oldIcon;
-  //   }
-
+  /**
+   * @internal
+   */
   constructor(core: Core) {
     super(core);
     this.oldIcon = $(FAVICON_SELECTOR);
@@ -46,45 +59,35 @@ export class Favicon extends CorePlugin {
       this.stopIcon = this.createIcon(stopIcon);
       this.changeIcon(this.stopIcon);
     }
-    this.configure();
-  }
-
-  configure() {
-    if (this.core.options.changeFavicon) {
-      if (!this.enabled) {
-        // @ts-ignore
-        this.stopListening(this.core, Events.CORE_OPTIONS_CHANGE);
-        this.enable();
-      }
-    } else if (this.enabled) {
-      this.disable();
-      this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure);
-    }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_OPTIONS_CHANGE, this.configure);
     this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.containerChanged);
-    this.core.activeContainer && this.containerChanged();
   }
 
   private containerChanged() {
-    // @ts-ignore
-    this._container && this.stopListening(this._container);
-    this._container = this.core.activeContainer;
-    this.listenTo(this._container, Events.CONTAINER_PLAY, this.setPlayIcon);
-    this.listenTo(this._container, Events.CONTAINER_PAUSE, this.setPauseIcon);
-    this.listenTo(this._container, Events.CONTAINER_STOP, this.resetIcon);
-    this.listenTo(this._container, Events.CONTAINER_ENDED, this.resetIcon);
-    this.listenTo(this._container, Events.CONTAINER_ERROR, this.resetIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAY, this.setPlayIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_PAUSE, this.setPauseIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_STOP, this.resetIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_ENDED, this.resetIcon);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_ERROR, this.resetIcon);
     this.resetIcon();
   }
 
+  /**
+   * @internal
+   */
   override disable() {
     super.disable();
     this.resetIcon();
   }
 
+  /**
+   * @internal
+   */
   override destroy() {
     super.destroy();
     this.resetIcon();
@@ -113,7 +116,6 @@ export class Favicon extends CorePlugin {
     if (!this.playIcon) {
       this.playIcon = this.createIcon(playIcon);
     }
-
     this.changeIcon(this.playIcon);
   }
 
@@ -121,21 +123,16 @@ export class Favicon extends CorePlugin {
     if (!this.pauseIcon) {
       this.pauseIcon = this.createIcon(pauseIcon);
     }
-
     this.changeIcon(this.pauseIcon);
   }
 
   private resetIcon() {
-    $(FAVICON_SELECTOR).remove();
     const icon = this.oldIcon.length > 0 ? this.oldIcon : this.stopIcon;
-
     this.changeIcon(icon);
   }
 
-  private changeIcon(icon: ZeptoResult | null) {
-    if (icon) {
-      $('link[rel="shortcut icon"]').remove();
-      $('head').append(icon);
-    }
+  private changeIcon(icon: ZeptoResult) {
+    $('link[rel="shortcut icon"]').remove();
+    $('head').append(icon);
   }
 }

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

@@ -19,6 +19,7 @@ import { reportError, trace } from '@gcorevideo/utils'
 
 import { type TimeProgress } from '../../playback.types.js'
 
+// TODO replace Kibo with mousetrap
 import { Kibo } from '../kibo/index.js'
 
 import { CLAPPR_VERSION } from '../../build.js'
@@ -90,17 +91,10 @@ type DisabledClickable = {
 }
 
 /**
- * `PLUGIN` that provides a foundation for developing custom media controls UI.
+ * `PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
  * @beta
  * @remarks
  * The methods exposed are to be used by the other plugins that extend the media control UI.
- * The plugin registration should be arranged so that MediaControl is initialized before every other `PLUGIN` that depends on it.
- * @example
- * ```ts
- * Player.registerPlugin(MediaControl) // <--- This must go first
- * Player.registerPlugin(LevelSelector) // a media control plugin
- * Player.registerPlugin(NerdStats) // another media control plugin
- * ```
  */
 export class MediaControl extends UICorePlugin {
   private advertisementPlaying = false
@@ -1316,7 +1310,6 @@ export class MediaControl extends UICorePlugin {
   }
 
   private configure() {
-    // this.advertisementPlaying ? this.disable() : this.enable()
     this.trigger(Events.MEDIACONTROL_OPTIONS_CHANGE)
   }
 

package/src/plugins/poster/Poster.ts

@@ -9,7 +9,6 @@ import {
   UIContainerPlugin,
   template,
   $,
-  Container,
 } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 
@@ -28,6 +27,8 @@ const T = 'plugins.poster'
  * @beta
  * @remarks
  * When the playback is stopped, media control UI is disabled.
+ * Note that the poster image, if specified via the player config, will be used to update video element's poster attribute by the
+ * HTML5-video-based playback module.
  *
  * Configuration options:
  *
@@ -51,6 +52,8 @@ const T = 'plugins.poster'
  * ```
  */
 export class Poster extends UIContainerPlugin {
+  // TODO merge non-poster related functionality into the ClickToPause plugin
+
   private hasFatalError = false
 
   private hasStartedPlaying = false
@@ -236,8 +239,6 @@ export class Poster extends UIContainerPlugin {
         this.container.playback.consent()
         this.container.playback.play()
       }
-    } else {
-      this.container.trigger('container:start')
     }
 
     return false

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

@@ -108,6 +108,9 @@ export class SourceController extends CorePlugin {
     return { min: CLAPPR_VERSION }
   }
 
+  /**
+   * @internal
+   */
   constructor(core: ClapprCore) {
     super(core)
     this.sourcesList = this.core.options.sources