@gcorevideo/player 2.25.9 → 2.26.0

package/src/Player.ts

@@ -159,20 +159,13 @@ export class Player {
    * ```
    */
   attachTo(playerElement: HTMLElement): void {
-    trace(`${T} attachTo`, {
-      player: !!this.player,
-    })
     assert.ok(!this.player, 'Player already initialized')
     assert.ok(playerElement, 'Player container element is required')
     if (this.config.debug === 'all' || this.config.debug === 'clappr') {
       Log.setLevel(0)
     }
-
     const coreOpts = this.buildCoreOptions(playerElement)
     const { core, container } = Player.getRegisteredPlugins()
-    trace(`${T} init`, {
-      registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.prototype.name),
-    })
     coreOpts.plugins = {
       core: Object.values(core),
       container: Object.values(container),
@@ -185,9 +178,6 @@ export class Player {
    * Destroys the player, releasing all resources and unmounting its UI from the DOM.
    */
   destroy() {
-    trace(`${T} destroy`, {
-      player: !!this.player,
-    })
     if (this.player) {
       this.player.destroy()
       this.player = null
@@ -398,12 +388,6 @@ export class Player {
   }
 
   private initPlayer(coreOptions: CoreOptions): void {
-    trace(`${T} initPlayer`, {
-      autoPlay: coreOptions.autoPlay,
-      sources: coreOptions.sources,
-      player: !!this.player,
-      // TODO selected options
-    })
     const player = new PlayerClappr(coreOptions)
     this.player = player
     this.bindCoreListeners()
@@ -564,13 +548,6 @@ export class Player {
     core.on(
       ClapprEvents.CORE_SCREEN_ORIENTATION_CHANGED,
       ({ orientation }: { orientation: 'landscape' | 'portrait' }) => {
-        trace(`${T} on CORE_SCREEN_ORIENTATION_CHANGED`, {
-          orientation,
-          rootNode: {
-            width: this.rootNode?.clientWidth,
-            height: this.rootNode?.clientHeight,
-          },
-        })
         if (Browser.isiOS && this.rootNode) {
           core?.resize({
             width: this.rootNode.clientWidth,
@@ -583,10 +560,6 @@ export class Player {
     core.on(
       ClapprEvents.CORE_RESIZE,
       ({ width, height }: { width: number; height: number }) => {
-        trace(`${T} on CORE_RESIZE`, {
-          width,
-          height,
-        })
         this.safeTriggerEvent(PlayerEvent.Resize, { width, height })
       },
       null,
@@ -594,9 +567,6 @@ export class Player {
     core.on(
       ClapprEvents.CORE_FULLSCREEN,
       (isFullscreen: boolean) => {
-        trace(`${T} CORE_FULLSCREEN`, {
-          isFullscreen,
-        })
         this.safeTriggerEvent(PlayerEvent.Fullscreen, isFullscreen)
       },
       null,

package/src/playback/HTML5Video.ts

@@ -18,9 +18,6 @@ export default class HTML5Video extends BasePlayback {
    * @internal
    */
   override createError(errorData: any, options?: ErrorOptions) {
-    trace(`${T} createError`, {
-      errorData: { ...errorData },
-    })
     const i18n =
       this.i18n ||
       // @ts-ignore
@@ -39,12 +36,10 @@ export default class HTML5Video extends BasePlayback {
   }
 
   override _onWaiting() {
-    trace(`${T} _onWaiting`)
     super._onWaiting()
   }
 
   override _onEnded() {
-    trace(`${T} _onEnded`)
     if (this.stallTimerId) {
       clearTimeout(this.stallTimerId)
       this.stallTimerId = null
@@ -53,15 +48,8 @@ export default class HTML5Video extends BasePlayback {
   }
 
   override _handleBufferingEvents() {
-    trace(`${T} _handleBufferingEvents`, {
-      networkState: (this.el as HTMLMediaElement).networkState,
-    })
     if (!this.stallTimerId) {
       this.stallTimerId = setTimeout(() => {
-        trace(`${T} _handleBufferingEvents stall timeout`, {
-          buffering: this.buffering,
-          ended: this.ended,
-        })
         this.stallTimerId = null
         const error = this.createError({
           code: PlaybackErrorCode.MediaSourceUnavailable,
@@ -77,7 +65,6 @@ export default class HTML5Video extends BasePlayback {
   }
 
   override _onPlaying() {
-    trace(`${T} _onPlaying`)
     if (this.stallTimerId) {
       clearTimeout(this.stallTimerId)
       this.stallTimerId = null
@@ -86,7 +73,6 @@ export default class HTML5Video extends BasePlayback {
   }
 
   override _onPause() {
-    trace(`${T} _onPause`)
     super._onPause()
     if (this.stallTimerId) {
       clearTimeout(this.stallTimerId)
@@ -97,7 +83,6 @@ export default class HTML5Video extends BasePlayback {
   get audioTracks(): AudioTrack[] {
     const tracks = (this.el as HTMLMediaElement).audioTracks
     const supported = !!tracks
-    trace(`${T} get audioTracks`, { supported })
     const retval: AudioTrack[] = []
     if (supported) {
       for (let i = 0; i < tracks.length; i++) {
@@ -117,9 +102,6 @@ export default class HTML5Video extends BasePlayback {
   get currentAudioTrack() {
     const tracks = (this.el as HTMLMediaElement).audioTracks
     const supported = !!tracks
-    trace(`${T} get currentAudioTrack`, {
-      supported,
-    })
     if (supported) {
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i]

package/src/playback/dash-playback/DashPlayback.ts

@@ -436,7 +436,6 @@ export default class DashPlayback extends BasePlayback {
   }
 
   private _onDASHJSSError = (event: DashErrorEvent) => {
-    trace(`${T} _onDASHJSSError`, { event })
     this._stopTimeUpdateTimer()
 
     // Note that the other error types are deprecated
@@ -475,8 +474,6 @@ export default class DashPlayback extends BasePlayback {
   private triggerError(
     error: Pick<PlaybackError, 'code' | 'message' | 'description' | 'level'>,
   ) {
-    trace(`${T} triggerError`, { error })
-
     // this triggers Events.ERROR to be handled by the UI
     this.trigger(
       Events.PLAYBACK_ERROR,
@@ -525,14 +522,8 @@ export default class DashPlayback extends BasePlayback {
 
   get dvrEnabled() {
     if (!this._dash) {
-      trace(`${T} dvrEnable no dash player instance`)
       return false
     }
-    trace(`${T} get.dvrEnabled`, {
-      dvrWindowSize: this._dash?.getDVRWindowSize(),
-      minDvrSize: this._minDvrSize,
-      playbackType: this.getPlaybackType(),
-    })
     return (
       this._dash?.getDVRWindowSize() >= this._minDvrSize &&
       this.getPlaybackType() === Playback.LIVE
@@ -556,7 +547,6 @@ export default class DashPlayback extends BasePlayback {
   }
 
   override play() {
-    trace(`${T} play`, { dash: !!this._dash })
     !this._dash && this._setup()
     super.play()
     this._startTimeUpdateTimer()
@@ -663,7 +653,6 @@ export default class DashPlayback extends BasePlayback {
 
   // @ts-expect-error
   get currentAudioTrack(): AudioTrack | null {
-    trace(`${T} get currentAudioTrack`)
     assert.ok(this._dash, 'DASH.js MediaPlayer is not initialized')
     const t = this._dash.getCurrentTrackFor('audio')
     if (!t) {

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

@@ -373,8 +373,6 @@ export default class HlsPlayback extends BasePlayback {
       },
       this.options.playback.hlsjsConfig,
     )
-    trace(`${T} _createHLSInstance`, { config })
-
     this._hls = new HLSJS(config)
   }
 
@@ -450,14 +448,9 @@ export default class HlsPlayback extends BasePlayback {
     this._hls.on(HLSJS.Events.ERROR, (evt, data) =>
       this._onHLSJSError(evt, data),
     )
-    // this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, (evt, data) => this._onSubtitleLoaded(evt, data));
-    this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, () =>
-      this._onSubtitleLoaded(),
-    )
-    this._hls.on(
-      HLSJS.Events.SUBTITLE_TRACKS_UPDATED,
-      () => (this._ccTracksUpdated = true),
-    )
+    // this._hls.on(HLSJS.Events.SUBTITLE_TRACK_LOADED, () =>
+    //   this._onSubtitleLoaded(),
+    // )
     this._hls.on(HlsEvents.AUDIO_TRACKS_UPDATED, (evt, data) =>
       this._onAudioTracksUpdated(evt, data),
     )
@@ -863,13 +856,13 @@ export default class HlsPlayback extends BasePlayback {
     ) as PlaybackType
     this._onLevelUpdated(evt, data)
     // Live stream subtitle tracks detection hack (may not immediately available)
-    if (
-      this._ccTracksUpdated &&
-      this._playbackType === Playback.LIVE &&
-      this.hasClosedCaptionsTracks
-    ) {
-      this._onSubtitleLoaded()
-    }
+    // if (
+    //   this._ccTracksUpdated &&
+    //   this._playbackType === Playback.LIVE &&
+    //   this.hasClosedCaptionsTracks
+    // ) {
+    //   this._onSubtitleLoaded()
+    // }
     if (prevPlaybackType !== this._playbackType) {
       this._updateSettings()
     }
@@ -1044,18 +1037,19 @@ export default class HlsPlayback extends BasePlayback {
     this.trigger(Events.PLAYBACK_FRAGMENT_LOADED, data)
   }
 
-  _onSubtitleLoaded() {
-    // This event may be triggered multiple times
-    // Setup CC only once (disable CC by default)
-    if (!this._ccIsSetup) {
-      this.trigger(Events.PLAYBACK_SUBTITLE_AVAILABLE)
-      const trackId =
-        this._playbackType === Playback.LIVE ? -1 : this.closedCaptionsTrackId
+  // _onSubtitleLoaded() {
+  //   trace(`${T} _onSubtitleLoaded`)
+  //   // This event may be triggered multiple times
+  //   // Setup CC only once (disable CC by default)
+  //   if (!this._ccIsSetup) {
+  //     this.trigger(Events.PLAYBACK_SUBTITLE_AVAILABLE)
+  //     const trackId =
+  //       this._playbackType === Playback.LIVE ? -1 : this.closedCaptionsTrackId
 
-      this.closedCaptionsTrackId = trackId
-      this._ccIsSetup = true
-    }
-  }
+  //     this.closedCaptionsTrackId = trackId
+  //     this._ccIsSetup = true
+  //   }
+  // }
 
   _onLevelSwitch(evt: HlsEvents.LEVEL_SWITCHING, data: LevelSwitchingData) {
     if (!this.levels.length) {
@@ -1138,7 +1132,6 @@ export default class HlsPlayback extends BasePlayback {
     _: HlsEvents.AUDIO_TRACKS_UPDATED,
     data: AudioTracksUpdatedData,
   ) {
-    trace(`${T} onAudioTracksUpdated`)
     this.trigger(
       Events.PLAYBACK_AUDIO_AVAILABLE,
       data.audioTracks.map(toClapprTrack),

package/src/plugins/big-mute-button/BigMuteButton.ts

@@ -1,6 +1,5 @@
 import { Events, template, UICorePlugin, Utils } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
-import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
@@ -14,7 +13,7 @@ const T = 'plugins.big_mute_button'
 
 /**
  * `PLUGIN` that displays a big mute button over the video when it's being played muted.
- * @beta
+ * @public
  * @remarks
  * When pressed, it unmutes the video.
  * @example
@@ -142,7 +141,6 @@ export class BigMuteButton extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`)
     this.$el.html(BigMuteButton.template())
     this.$el.find('#gplayer-big-mute-icon').append(volumeMuteIcon)
 
@@ -168,7 +166,6 @@ export class BigMuteButton extends UICorePlugin {
   }
 
   private clicked(e: MouseEvent) {
-    trace(`${T} clicked`)
     const mediaControl = this.core.getPlugin('media_control')
     // TODO delegate to media_control plugin
     const localVolume = Utils.Config.restore('volume')

package/src/plugins/bottom-gear/BottomGear.ts

@@ -5,7 +5,7 @@ import {
   $,
   Container,
 } from '@clappr/core'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
@@ -20,14 +20,13 @@ import { ExtendedEvents } from '../media-control/MediaControl.js'
 
 const VERSION = '2.19.12'
 
-const T = 'plugins.bottom_gear'
+// const T = 'plugins.bottom_gear'
 
-const MENU_VMARGIN = 12
 const MENU_BACKLINK_HEIGHT = 44
 
 /**
  * Events triggered by the plugin
- * @beta
+ * @public
  */
 export enum GearEvents {
   /**
@@ -38,7 +37,7 @@ export enum GearEvents {
 
 /**
  * `PLUGIN` that adds a button to extend the media controls UI with extra options.
- * @beta
+ * @public
  * @remarks
  * The plugin renders small gear icon to the right of the media controls.
  * It provides a base for attaching custom settings UI in the gear menu
@@ -184,14 +183,12 @@ export class BottomGear extends UICorePlugin {
   addItem(name: string, $subMenu?: ZeptoResult): ZeptoResult {
     const $existingItem = this.$el.find(`#gear-options li[data-${name}]`)
     if ($existingItem.length) {
-      trace(`${T} addItem already exists`, { name })
       return $existingItem
     }
     const $item = $('<li></li>')
       .attr(`data-${name}`, '')
       .appendTo(this.$el.find('#gear-options'))
     if ($subMenu) {
-      trace(`${T} addItem adding submenu`, { name })
       $subMenu
         .addClass('gear-sub-menu-wrapper')
         .hide()
@@ -220,7 +217,6 @@ export class BottomGear extends UICorePlugin {
   }
 
   private highDefinitionUpdate(isHd: boolean) {
-    trace(`${T} highDefinitionUpdate`, { isHd })
     this.hd = isHd
     this.$el.find('#gear-button').html(isHd ? gearHdIcon : gearIcon)
   }

package/src/plugins/clappr-nerd-stats/NerdStats.ts

@@ -6,7 +6,7 @@ import {
   Container,
   Playback,
 } from '@clappr/core'
-import { reportError, trace } from '@gcorevideo/utils'
+import { reportError/* , trace */ } from '@gcorevideo/utils'
 import Mousetrap from 'mousetrap'
 import assert from 'assert'
 
@@ -59,11 +59,11 @@ type Metrics = PerfMetrics & {
   }
 }
 
-const T = 'plugins.nerd_stats'
+// const T = 'plugins.nerd_stats'
 
 /**
  * `PLUGIN` that displays useful statistics regarding the playback as well as the network quality estimation.
- * @beta
+ * @public
  *
  * @remarks
  * Depends on:
@@ -446,7 +446,6 @@ export class NerdStats extends UICorePlugin {
   }
 
   private attach() {
-    trace(`${T} attach`)
     const gear = this.core.getPlugin('bottom_gear') as BottomGear
     gear
       .addItem('nerd_stats')
@@ -463,7 +462,6 @@ export class NerdStats extends UICorePlugin {
   }
 
   private clearSpeedtestMetrics() {
-    trace(`${T} clearSpeedtestMetrics`);
     const clapprStats = this.container?.getPlugin('clappr_stats')
 
     this.speedtestMetrics.connectionSpeed = 0

package/src/plugins/clappr-stats/ClapprStats.ts

@@ -22,7 +22,7 @@ import { isFullscreen } from '../utils/fullscreen.js'
 
 /**
  * Config options for the {@link ClapprStats} plugin
- * @beta
+ * @public
  */
 export interface ClapprStatsSettings {
   /**
@@ -34,7 +34,7 @@ export interface ClapprStatsSettings {
 
 /**
  * `PLUGIN` that measures data about playback, which can be useful for analyzing performance and UX.
- * @beta
+ * @public
  * @remarks
  * This plugin does not render anything and is supposed to be extended or used together with other plugins that actually render something.
  *
@@ -175,7 +175,7 @@ export class ClapprStats extends ContainerPlugin {
 
   /**
    * Returns the collected metrics.
-   * @returns Measurements collected so far
+   * @returns {@link ClapprStatsMetrics | Measurements} collected so far
    */
   exportMetrics() {
     return structuredClone(this.metrics)

package/src/plugins/clappr-stats/types.ts

@@ -1,5 +1,5 @@
 /**
- * @beta
+ * @public
  */
 export enum ClapprStatsChronograph {
   Startup = 'startup',
@@ -11,7 +11,7 @@ export enum ClapprStatsChronograph {
 }
 
 /**
- * @beta
+ * @public
  */
 export enum ClapprStatsCounter {
   Play = 'play',
@@ -28,7 +28,7 @@ export enum ClapprStatsCounter {
 }
 
 /**
- * @beta
+ * @public
  */
 export type ClapprStatsMetrics = {
   /**
@@ -87,7 +87,7 @@ export type ClapprStatsMetrics = {
 }
 
 /**
- * @beta
+ * @public
  */
 export type ClapprStatsBitrateTrack = {
   start: number
@@ -97,7 +97,7 @@ export type ClapprStatsBitrateTrack = {
 }
 
 /**
- * @beta
+ * @public
  */
 export enum ClapprStatsEvents {
   /**

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

@@ -4,17 +4,17 @@
 // license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE.
 
 import { ContainerPlugin, Events, Playback } from '@clappr/core'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
 type Timer = ReturnType<typeof setTimeout>
 
-const T = 'plugins.click_to_pause'
+// const T = 'plugins.click_to_pause'
 
 /**
  * A small `PLUGIN` that toggles the playback state on click over the video container
- * @beta
+ * @public
  */
 export class ClickToPause extends ContainerPlugin {
   private pointerEnabled = false
@@ -51,11 +51,6 @@ export class ClickToPause extends ContainerPlugin {
     const isLivePlayback = this.container.getPlaybackType() === Playback.LIVE
     const isDvrEnabled = this.container.isDvrEnabled()
 
-    trace(`${T} click`, {
-      isLivePlayback,
-      isDvrEnabled,
-    })
-
     if (isLivePlayback && !isDvrEnabled) {
       this.togglePlay(true)
       return

package/src/plugins/clips/Clips.ts

@@ -1,5 +1,5 @@
 import { Container, Events, UICorePlugin, $, template } from '@clappr/core'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
 import { TimeProgress, TimeValue } from '../../playback.types.js'
@@ -9,11 +9,11 @@ import { ClipDesc } from './types.js'
 import { buildSvg, parseClips } from './utils.js'
 import clipsHTML from '../../../assets/clips/clips.ejs'
 
-const T = 'plugins.clips'
+// const T = 'plugins.clips'
 
 /**
  * Configuration options for the {@link Clips} plugin.
- * @beta
+ * @public
  */
 export interface ClipsPluginSettings {
   /**
@@ -30,7 +30,7 @@ const COMPACT_WIDTH = 495
 
 /**
  * `PLUGIN` that allows marking up the timeline of the video
- * @beta
+ * @public
  * @remarks
  * The plugin decorates the seekbar with notches to indicate the clips of the video and displays current clip text in the left panel
  *
@@ -129,7 +129,6 @@ export class Clips extends UICorePlugin {
   }
 
   private onCoreReady() {
-    trace(`${T} onCoreReady`)
     const mediaControl = this.core.getPlugin('media_control')
     assert(mediaControl, 'media_control plugin is required')
 
@@ -138,12 +137,10 @@ export class Clips extends UICorePlugin {
   }
 
   private onMcRender() {
-    trace(`${T} onMcRender`)
     this.core.getPlugin('media_control')?.slot('clips', this.$el)
   }
 
   private onContainerChanged() {
-    trace(`${T} onContainerChanged`)
     // TODO figure out the conditions of changing the container (without destroying the previous one)
     // probably it is the case with the MultiCamera plugin
     if (this.oldContainer) {

package/src/plugins/cmcd-config/CmcdConfig.ts

@@ -28,7 +28,7 @@ const CMCD_KEYS = [
 
 /**
  * Config options for the {@link CmcdConfig} plugin
- * @beta
+ * @public
  */
 export interface CmcdConfigOptions {
   /**
@@ -46,7 +46,7 @@ export interface CmcdConfigOptions {
 
 /**
  * A `PLUGIN` that configures {@link https://cdn.cta.tech/cta/media/media/resources/standards/pdfs/cta-5004-final.pdf | CMCD} for playback
- * @beta
+ * @public
  * @remarks
  * Configuration options - {@link CmcdConfigOptions}.
  * @example

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

@@ -6,7 +6,7 @@ import '../../../assets/context-menu/context_menu.scss'
 import templateHtml from '../../../assets/context-menu/context_menu.ejs'
 
 /**
- * @beta
+ * @public
  */
 export type MenuOption = {
   /**

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

@@ -1,6 +1,6 @@
 import { Events, Playback, UICorePlugin, template } from '@clappr/core'
 import assert from 'assert'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
@@ -8,12 +8,12 @@ import dvrHTML from '../../../assets/dvr-controls/index.ejs'
 import '../../../assets/dvr-controls/dvr_controls.scss'
 import { MediaControl } from '../media-control/MediaControl.js'
 
-const T = 'plugins.dvr_controls'
+// const T = 'plugins.dvr_controls'
 
 /**
  * `PLUGIN` that adds the DVR controls to the media control UI
  *
- * @beta
+ * @public
  *
  * @remarks
  * Depends on:
@@ -104,7 +104,6 @@ export class DvrControls extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`)
     this.$el.html(
       DvrControls.template({
         i18n: this.core.i18n,

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

@@ -131,9 +131,6 @@ export class ErrorScreen extends UICorePlugin {
   }
 
   private onActiveContainerChanged() {
-    trace(`${T} onActiveContainerChanged`, {
-      reloading: this.core.options.reloading,
-    })
     this.err = null
     this.listenTo(
       this.core.activeContainer.playback,

package/src/plugins/favicon/Favicon.ts

@@ -11,7 +11,7 @@ const FAVICON_COLOR = '#567';
 const FAVICON_SELECTOR = 'link[rel="shortcut icon"]';
 
 /**
- * @beta
+ * @public
  */
 export interface FaviconPluginSettings {
   /**
@@ -22,7 +22,7 @@ export interface FaviconPluginSettings {
 
 /**
  * `PLUGIN` that changes the favicon according to the player's state.
- * @beta
+ * @public
  * @remarks
  * There are three states: stopped, playing and paused.
  */