@gcorevideo/player 2.25.10 → 2.26.0

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)
   }
 
@@ -1134,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.
  */

package/src/plugins/level-selector/QualityLevels.ts

@@ -1,5 +1,5 @@
 import { Events, template, UICorePlugin } from '@clappr/core'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
 import { type QualityLevel } from '../../playback.types.js'
@@ -17,12 +17,12 @@ import checkIcon from '../../../assets/icons/new/check.svg'
 import '../../../assets/level-selector/style.scss'
 import { MediaControl } from '../media-control/MediaControl.js'
 
-const T = 'plugins.quality_levels'
+// const T = 'plugins.quality_levels'
 const VERSION = 'v2.22.5'
 
 /**
  * Configuration options for the {@link QualityLevels} plugin.
- * @beta
+ * @public
  */
 export interface QualityLevelsPluginSettings {
   /**
@@ -41,7 +41,7 @@ export interface QualityLevelsPluginSettings {
 
 /**
  * `PLUGIN` that provides a UI to select the desired quality level of the playback.
- * @beta
+ * @public
  *
  * @remarks
  * Depends on:
@@ -133,7 +133,6 @@ export class QualityLevels extends UICorePlugin {
   }
 
   private onCoreReady() {
-    trace(`${T} onCoreReady`)
     const gear = this.core.getPlugin('bottom_gear') as BottomGear
     assert(gear, 'bottom_gear plugin is required')
 
@@ -142,7 +141,6 @@ export class QualityLevels extends UICorePlugin {
   }
 
   private onGearRendered() {
-    trace(`${T} onGearRendered`)
     this.render()
   }
 
@@ -191,7 +189,6 @@ export class QualityLevels extends UICorePlugin {
   }
 
   private onStop() {
-    trace(`${T} onStop`)
     this.listenToOnce(this.core.activePlayback, Events.PLAYBACK_PLAY, () => {
       if (this.core.activePlayback.getPlaybackType() === 'live') {
         if (this.selectedLevelId !== -1) {
@@ -316,7 +313,6 @@ export class QualityLevels extends UICorePlugin {
   }
 
   private goBack() {
-    trace(`${T} goBack`)
     this.core.getPlugin('bottom_gear').refresh()
   }
 
@@ -361,14 +357,10 @@ export class QualityLevels extends UICorePlugin {
   }
 
   private onBitrate(info: QualityLevel) {
-    trace(`${T} updateCurrentLevel`, { info })
     this.highlightCurrentLevel()
   }
 
   private highlightCurrentLevel() {
-    trace(`${T} highlightCurrentLevel`, {
-      selectedLevelId: this.selectedLevelId,
-    })
     this.allLevelElements()
       .removeClass('current')
       .find('a')

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

@@ -15,7 +15,7 @@ import {
   $,
   Core,
 } from '@clappr/core'
-import { reportError, trace } from '@gcorevideo/utils'
+import { reportError/* , trace */ } from '@gcorevideo/utils'
 
 import { type TimeProgress } from '../../playback.types.js'
 
@@ -119,11 +119,11 @@ const INITIAL_SETTINGS: MediaControlSettings = {
   seekEnabled: false,
 }
 
-const T = 'plugins.media_control'
+// const T = 'plugins.media_control'
 
 /**
  * Extended events for the {@link MediaControl} plugin
- * @beta
+ * @public
  */
 export enum ExtendedEvents {
   MEDIACONTROL_VOLUME = 'mediacontrol:volume',
@@ -132,10 +132,6 @@ export enum ExtendedEvents {
 
 const { Config, Fullscreen, formatTime, extend, removeArrayItem } = Utils
 
-export type MediaControlPluginSettings = {
-  hideMediaControlDelay?: number
-}
-
 /**
  * `PLUGIN` that provides framework for building media control UI.
  * @beta
@@ -251,7 +247,7 @@ export class MediaControl extends UICorePlugin {
 
   /**
    * @returns  Default media control layout settings
-   * @remark
+   * @remarks
    * The method can be used to change the default dashboard layout, for example, removing the standard UI elements
    * @example
    * ```ts
@@ -532,7 +528,6 @@ export class MediaControl extends UICorePlugin {
    * Hides the media control UI
    */
   override disable() {
-    trace(`${T} disable`)
     this.userDisabled = true // TODO distinguish between user and system (e.g., unplayable) disabled?
     this.hide()
     this.unbindKeyEvents()
@@ -543,7 +538,6 @@ export class MediaControl extends UICorePlugin {
    * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
    */
   override enable() {
-    trace(`${T} enable`)
     if (this.options.chromeless) {
       return
     }

package/src/plugins/picture-in-picture/PictureInPicture.ts

@@ -13,14 +13,14 @@ const VERSION = '0.0.1';
 const T = `plugins.pip`;
 
 /**
- * `PLUGIN` that enables picture in picture mode.
- * @beta
+ * `PLUGIN` that enables picture-in-picture mode.
+ * @public
  * @remarks
  * Depends on:
  *
  * - {@link MediaControl}
  *
- * It renders a button to toggle picture in picture mode in the media control UI.
+ * It renders a button to toggle picture-in-picture mode in the media control UI.
  */
 export class PictureInPicture extends UICorePlugin {
   /**

package/src/plugins/playback-rate/PlaybackRate.ts

@@ -17,7 +17,7 @@ import { MediaControl } from '../media-control/MediaControl.js'
 import { TimerId } from '../../utils/types.js'
 
 /**
- * @beta
+ * @public
  */
 export type PlaybackRateOption = {
   value: number
@@ -25,7 +25,7 @@ export type PlaybackRateOption = {
 }
 
 /**
- * @beta
+ * @public
  */
 export type PlaybackRateSettings = {
   options?: PlaybackRateOption[]
@@ -249,11 +249,6 @@ export class PlaybackRate extends UICorePlugin {
   }
 
   private shouldMount() {
-    trace(`${T} shouldMount`, {
-      playbackType: this.core.activePlayback?.getPlaybackType(),
-      dvrEnabled: this.core.activePlayback?.dvrEnabled,
-    })
-
     if (!this.core.activePlayback || !this.metadataLoaded) {
       return false
     }
@@ -272,10 +267,6 @@ export class PlaybackRate extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`, {
-      shouldMount: this.shouldMount(),
-    })
-
     this.$el.html(
       PlaybackRate.listTemplate({
         arrowLeftIcon,
@@ -394,9 +385,6 @@ export class PlaybackRate extends UICorePlugin {
   }
 
   private updateGearOptionLabel() {
-    trace(`${T} updateGearOptionLabel`, {
-      selectedRate: this.selectedRate,
-    })
     this.mount()
   }
 }