@gcorevideo/player 2.25.9 → 2.26.0

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()
   }
 }

package/src/plugins/poster/Poster.ts

@@ -9,7 +9,7 @@ import {
   UIContainerPlugin,
   template,
 } from '@clappr/core'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 import type { ZeptoResult } from '../../types.js'
@@ -21,7 +21,7 @@ import { PlaybackError } from '../../playback.types.js'
 
 /**
  * Config options for the {@link Poster} plugin
- * @beta
+ * @public
  */
 export interface PosterPluginSettings {
   /**
@@ -42,11 +42,11 @@ export interface PosterPluginSettings {
   showOnVideoEnd?: boolean
 }
 
-const T = 'plugins.poster'
+// const T = 'plugins.poster'
 
 /**
  * `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
- * @beta
+ * @public
  * @remarks
  * When the playback is stopped or not yet started, the media control UI is disabled and hidden.
  * Media control gets activated once the metadata is loaded after playback is initiated.
@@ -157,7 +157,6 @@ export class Poster extends UIContainerPlugin {
    * Reenables earlier disabled plugin
    */
   override enable() {
-    trace(`${T} enable`)
     super.enable()
     this.playing = this.container.playback.isPlaying()
     this.update()
@@ -167,17 +166,12 @@ export class Poster extends UIContainerPlugin {
    * Disables the plugin, unmounting it from the DOM
    */
   override disable() {
-    trace(`${T} disable`)
     this.playing = false
     this.playRequested = false
     super.disable()
   }
 
   private onError(error: PlaybackError) {
-    trace(`${T} onError`, {
-      error,
-      enabled: this.enabled,
-    })
     if (this.hasFatalError) {
       return
     }
@@ -186,27 +180,23 @@ export class Poster extends UIContainerPlugin {
   }
 
   private onPlay() {
-    trace(`${T} onPlay`)
     this.playing = true
     this.playRequested = false
     this.update()
   }
 
   private onPlayIntent() {
-    trace(`${T} onPlayIntent`)
     this.playRequested = true
     this.update()
   }
 
   private onStop() {
-    trace(`${T} onStop`)
     this.playing = false
     this.playRequested = false
     this.update()
   }
 
   private updatePlayButton() {
-    trace(`${T} updatePlayButton`)
     const show =
       !this.isNoOp &&
       !(this.options.chromeless && !this.options.allowUserInteraction) &&
@@ -223,20 +213,17 @@ export class Poster extends UIContainerPlugin {
   }
 
   private showPlayButton() {
-    trace(`${T} showPlayButton`)
     this.$el.find('#poster-play').show()
     this.$el.addClass('clickable')
     this.container.$el.addClass('container-with-poster-clickable')
   }
 
   private hidePlayButton() {
-    trace(`${T} hidePlayButton`)
     this.$el.find('#poster-play').hide()
     this.$el.removeClass('clickable')
   }
 
   private clicked(e: MouseEvent) {
-    trace(`${T} clicked`)
     e.preventDefault()
     e.stopPropagation()
     if (this.options.chromeless && !this.options.allowUserInteraction) {
@@ -256,14 +243,11 @@ export class Poster extends UIContainerPlugin {
   }
 
   private update() {
-    trace(`${T} update`)
-
     this.updatePlayButton()
     this.updatePoster()
   }
 
   private updatePoster() {
-    trace(`${T} updatePoster`)
     if (!this.playing) {
       this.showPoster()
     } else {
@@ -277,7 +261,6 @@ export class Poster extends UIContainerPlugin {
   }
 
   private hidePoster() {
-    trace(`${T} hidePoster`)
     if (!this.options.disableMediaControl) {
       this.container.enableMediaControl()
     }

package/src/plugins/seek-time/SeekTime.ts

@@ -10,7 +10,7 @@ import { CLAPPR_VERSION } from '../../build.js'
 
 import seekTimeHTML from '../../../assets/seek-time/seek-time.html'
 import '../../../assets/seek-time/seek-time.scss'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 
 /**
  * Configuration options for the SeekTime plugin.
@@ -26,7 +26,7 @@ export type SeekTimeSettings = {
 
 const { formatTime } = Utils
 
-const T = 'plugins.seek_time'
+// const T = 'plugins.seek_time'
 
 /**
  * `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
@@ -128,14 +128,10 @@ export class SeekTime extends UICorePlugin {
   private showTime(event: MouseEvent) {
     this.hoveringOverSeekBar = true
     this.calculateHoverPosition(event)
-    trace(`${T} showTime`, {
-      hoverPosition: this.hoverPosition,
-    })
     this.update()
   }
 
   private hideTime() {
-    trace(`${T} hideTime`)
     this.hoveringOverSeekBar = false
     this.update()
   }

package/src/plugins/skip-time/SkipTime.ts

@@ -1,5 +1,5 @@
 import { UICorePlugin, Browser, Playback, Events, template } from '@clappr/core'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
@@ -8,11 +8,11 @@ import '../../../assets/skip-time/style.scss'
 
 type Position = 'mid' | 'left' | 'right'
 
-const T = 'plugins.skip_time'
+// const T = 'plugins.skip_time'
 
 /**
  * `PLUGIN` that allows skipping time by tapping on the left or right side of the video.
- * @beta
+ * @public
  */
 export class SkipTime extends UICorePlugin {
   get name() {
@@ -69,14 +69,10 @@ export class SkipTime extends UICorePlugin {
   }
 
   private setBack() {
-    trace(`${T} setBack`)
     this.position = 'left'
   }
 
   private handleRewindClicks() {
-    trace(`${T} handleRewindClicks`, {
-      position: this.position,
-    })
     if (
       this.core.getPlaybackType() === Playback.LIVE &&
       !this.container.isDvrEnabled()
@@ -88,9 +84,6 @@ export class SkipTime extends UICorePlugin {
   }
 
   private handleSkip() {
-    trace(`${T} handleSkip`, {
-      position: this.position,
-    })
     if (Browser.isMobile) {
       if (this.position === 'left') {
         const seekPos = this.container.getCurrentTime() - 10
@@ -114,17 +107,14 @@ export class SkipTime extends UICorePlugin {
   }
 
   private setMidClick() {
-    trace(`${T} setMidClick`)
     this.position = 'mid'
   }
 
   private setForward() {
-    trace(`${T} setForward`)
     this.position = 'right'
   }
 
   private toggleFullscreen() {
-    trace(`${T} toggleFullscreen`)
     this.trigger(Events.MEDIACONTROL_FULLSCREEN, this.name)
     this.container.fullscreen()
     this.core.toggleFullscreen()
@@ -134,14 +124,12 @@ export class SkipTime extends UICorePlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`)
     this.$el.html(SkipTime.template())
 
     return this
   }
 
   private mount() {
-    trace(`${T} mount`)
     this.core.activeContainer.$el.append(this.el)
   }
 }

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

@@ -176,15 +176,10 @@ export class SourceController extends CorePlugin {
   }
 
   private onCoreReady() {
-    trace(`${T} onCoreReady`)
     this.core.getPlugin('error_screen')?.disable() //  TODO test
   }
 
   private onActiveContainerChanged() {
-    trace(`${T} onActiveContainerChanged`, {
-      retrying: this.active,
-      currentSource: this.sourcesList[this.currentSourceIndex],
-    })
     const spinner = this.core.activeContainer?.getPlugin('spinner')
     if (spinner) {
       this.sync = (cb: () => void) => {

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

@@ -10,7 +10,7 @@ import {
   UIContainerPlugin,
   template,
 } from '@clappr/core'
-import { trace } from '@gcorevideo/utils'
+// import { trace } from '@gcorevideo/utils'
 
 import { PlaybackError, PlaybackErrorCode } from '../../playback.types.js'
 import spinnerHTML from '../../../assets/spinner-three-bounce/spinner.ejs'
@@ -18,7 +18,7 @@ import '../../../assets/spinner-three-bounce/spinner.scss'
 import { TimerId } from '../../utils/types.js'
 import { CLAPPR_VERSION } from '../../build.js'
 
-const T = 'plugins.spinner'
+// const T = 'plugins.spinner'
 
 /**
  * Custom events emitted by the plugin
@@ -108,24 +108,15 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
   }
 
   private onPlay() {
-    trace(`${T} onPlay`)
     this._hide()
   }
 
   private onStop() {
-    trace(`${T} onStop`, {
-      hasFatalError: this.hasFatalError,
-    })
     this._hide()
   }
 
   private onError(e: PlaybackError) {
     this.hasFatalError = e.code === PlaybackErrorCode.MediaSourceUnavailable
-    trace(`${T} onError`, {
-      e,
-      hasFatalError: this.hasFatalError,
-      error: e.code,
-    })
     this._hide()
   }
 
@@ -137,7 +128,6 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
    * @param delay - The delay in milliseconds before the spinner is shown.
    */
   show(delay = 300) {
-    trace(`${T} show`)
     this.userShown = true
     this._show(delay)
   }
@@ -160,9 +150,6 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
   }
 
   private _hide() {
-    trace(`${T} _hide`, {
-      userShown: this.userShown,
-    })
     if (this.userShown) {
       return
     }
@@ -178,9 +165,6 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
    * @internal
    */
   override render() {
-    trace(`${T} render`, {
-      buffering: this.container.buffering,
-    })
     this.$el.html(this.template())
     this.el.firstElementChild?.addEventListener('animationiteration', () => {
       this.trigger(SpinnerEvents.SYNC)

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -23,7 +23,7 @@ const T = 'plugins.cc'
 
 /**
  * Configuration options for the {@link ClosedCaptions} plugin.
- * @beta
+ * @public
  */
 export type ClosedCaptionsPluginSettings = {
   /**
@@ -34,7 +34,7 @@ export type ClosedCaptionsPluginSettings = {
 
 /**
  * `PLUGIN` that provides a UI to select the subtitles when available.
- * @beta
+ * @public
  *
  * @remarks
  * The plugin is activated when closed captions tracks are detected in the media source.
@@ -45,6 +45,14 @@ export type ClosedCaptionsPluginSettings = {
  * - {@link MediaControl}
  *
  * Configuration options -  {@link ClosedCaptionsPluginSettings}
+ *
+ * Known issues:
+ *
+ * 1. When media source changes, the subtitles tracks aren't reloaded. Possible solution: use `playback.recycleVideo = false`
+ * {@link PlayerConfig | main config option}, which will force new video element creation every time media source changes.
+ * However, this may lead to other issues, such as autoplay not working (after media source has been changed).
+ * {@link https://github.com/video-dev/hls.js/issues/2198 | related discussion}
+ *
  * @example
  * ```ts
  * import { ClosedCaptions } from '@gcorevideo/player'
@@ -203,7 +211,9 @@ export class ClosedCaptions extends UICorePlugin {
   }
 
   private onSubtitleAvailable() {
-    trace(`${T} onSubtitleAvailable`)
+    trace(`${T} onSubtitleAvailable`, {
+      tracks: this.core.activePlayback.closedCaptionsTracks.length,
+    })
     this.applyTracks()
     this.mount()
   }

package/src/plugins/volume-fade/VolumeFade.ts

@@ -6,7 +6,7 @@ import { ExtendedEvents } from '../media-control/MediaControl.js'
 
 /**
  * Events emitted by the VolumeFade plugin.
- * @beta
+ * @public
  */
 export enum VolumeFadeEvents {
   FADE = 'core:volume:fade',
@@ -18,7 +18,7 @@ const DEFAULT_DURATION = 600
 const DEFAULT_VOLUME_LEVEL = 80
 
 /**
- * @beta
+ * @public
  */
 export type VolumeFadeSettings = {
   /**

package/src/types.ts

@@ -300,6 +300,6 @@ export enum PlayerEvent {
 
 /**
  * {@link https://zeptojs.com/#$() | Zepto query result}
- * @beta
+ * @public
  */
 export type ZeptoResult = ReturnType<typeof $>;