@gcorevideo/player 2.20.8 → 2.20.11

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

@@ -8,7 +8,8 @@ import '../../../assets/skip-time/style.scss';
 type Position = 'mid' | 'left' | 'right';
 
 /**
- * The plugin adds skip controls to the media control UI.
+ * `PLUGIN` that adds skip controls to the media control UI.
+ * @beta
  */
 export class SkipTime extends UICorePluginOriginal {
   get name() {

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

@@ -27,7 +27,7 @@ function noSync(cb: () => void) {
 }
 
 /**
- * This plugin is responsible for managing the automatic failover between sources.
+ * `PLUGIN` that is responsible for managing the automatic failover between sources.
  * @beta
  * @remarks
  * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
@@ -153,7 +153,7 @@ export class SourceController extends CorePlugin {
     }
     this.bindContainerEventListeners()
     if (this.active) {
-      this.core.activeContainer?.getPlugin('poster_custom')?.disable()
+      this.core.activeContainer?.getPlugin('poster')?.disable()
       spinner?.show(0)
     }
   }
@@ -177,7 +177,7 @@ export class SourceController extends CorePlugin {
         }
         switch (error.code) {
           case PlaybackErrorCode.MediaSourceUnavailable:
-            this.core.activeContainer?.getPlugin('poster_custom')?.disable()
+            this.core.activeContainer?.getPlugin('poster')?.disable()
             this.retryPlayback()
             break
           default:
@@ -192,7 +192,7 @@ export class SourceController extends CorePlugin {
       })
       if (this.active) {
         this.reset()
-        this.core.activeContainer?.getPlugin('poster_custom')?.enable()
+        this.core.activeContainer?.getPlugin('poster')?.enable()
         this.core.activeContainer?.getPlugin('spinner')?.hide()
       }
     })

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

@@ -116,7 +116,7 @@ describe('SourceController', () => {
           poster = createMockPlugin()
           spinner = createSpinnerPlugin()
           core.activeContainer.getPlugin.mockImplementation((name: string) => {
-            if (name === 'poster_custom') {
+            if (name === 'poster') {
               return poster
             }
             if (name === 'spinner') {
@@ -183,7 +183,7 @@ describe('SourceController', () => {
         poster = createMockPlugin()
         spinner = createSpinnerPlugin()
         core.activeContainer.getPlugin.mockImplementation((name: string) => {
-          if (name === 'poster_custom') {
+          if (name === 'poster') {
             return poster
           }
           if (name === 'spinner') {

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

@@ -20,6 +20,7 @@ const T = 'plugins.spinner'
 
 /**
  * Custom events emitted by the plugin
+ * @beta
  */
 export enum SpinnerEvents {
   /**
@@ -30,10 +31,12 @@ export enum SpinnerEvents {
 }
 
 /**
- * Shows a pending operation indicator when playback is buffering or in other appropriate cases
+ * `PLUGIN` that shows a pending operation indicator when playback is buffering or in a similar state
  * @beta
  * @remarks
- * The plugin emits
+ * Events emitted- {@link SpinnerEvents}
+ * Other plugins can use {@link SpinnerThreeBounce.show | show} and {@link SpinnerThreeBounce.hide | hide} methods to
+ * implement custom pending/progress indication scenarios.
  */
 export class SpinnerThreeBounce extends UIContainerPlugin {
   private userShown = false
@@ -134,7 +137,7 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
   /**
    * Shows the spinner.
    *
-   * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce#hide} is called
+   * When called, the spinner will not hide (due to its built-in logic) until {@link SpinnerThreeBounce.hide} is called
    */
   show(delay = 300) {
     trace(`${T} show`)

package/src/plugins/subtitles/Subtitles.ts

@@ -17,7 +17,7 @@ import comboboxHTML from '../../../assets/subtitles/combobox.ejs'
 import stringHTML from '../../../assets/subtitles/string.ejs'
 
 import { isFullscreen } from '../utils.js'
-import type { ZeptoResult } from '../../utils/types.js'
+import type { ZeptoResult } from '../../types.js'
 
 const VERSION: string = '2.19.14'
 
@@ -34,7 +34,7 @@ type TextTrackInfo = {
 const NO_TRACK = { language: 'off' }
 
 /**
- * A {@link MediaControl | media control} plugin that provides a UI to select the subtitles when available.
+ * `PLUGIN` that provides a UI to select the subtitles when available.
  * @beta
  *
  * @remarks

package/src/plugins/telemetry/Telemetry.ts

@@ -77,7 +77,7 @@ export type TelemetryRecord = {
  * @param data - The telemetry record to send.
  * @beta
  */
-type TelemetrySendFn = (data: TelemetryRecord) => void
+export type TelemetrySendFn = (data: TelemetryRecord) => void
 
 /**
  * Plugin settings
@@ -103,7 +103,7 @@ export enum TelemetryEvent {
 }
 
 /**
- * Collects and reports the performance statistics.
+ * `PLUGIN` that collects and reports the performance statistics.
  * @beta
  * @remarks
  * This plugin is experimental and its API is likely to change.

package/src/plugins/thumbnails/Thumbnails.ts

@@ -8,7 +8,7 @@ import { CLAPPR_VERSION } from '../../build.js'
 
 import pluginHtml from '../../../assets/thumbnails/scrub-thumbnails.ejs'
 import '../../../assets/thumbnails/style.scss'
-import { ZeptoResult } from '../../utils/types.js'
+import { ZeptoResult } from '../../types.js'
 import { getPageX } from '../utils.js'
 
 /**
@@ -38,7 +38,7 @@ type Thumb = {
 const T = 'plugins.thumbnails'
 
 /**
- * Displays the thumbnails of the video when available.
+ * `PLUGIN` that displays the thumbnails of the video when available.
  * @beta
  * @example
  * ```ts

package/src/plugins/vast-ads/VastAds.ts

@@ -16,7 +16,8 @@ import assert from 'assert'
 import { TimePosition } from '../../playback.types.js'
 
 import { CLAPPR_VERSION } from '../../build.js'
-import { TimerId, ZeptoResult } from '../../utils/types.js'
+import { ZeptoResult } from '../../types.js'
+import { TimerId } from '../../utils/types.js'
 import RollManager from './rollmanager.js'
 import SCTEManager from './sctemanager.js'
 import { VolumeFadeEvents } from '../volume-fade/VolumeFade.js'
@@ -286,7 +287,7 @@ export class VastAds extends UICorePlugin {
 
   private onPlaybackPlay() {
     setTimeout(() => {
-      const posterPlugin = this.container?.getPlugin('poster_custom')
+      const posterPlugin = this.container?.getPlugin('poster')
 
       posterPlugin?.enable()
       posterPlugin?.$el.hide()
@@ -618,7 +619,7 @@ export class VastAds extends UICorePlugin {
       this._pluginError('failed to get Clappr playback')
     }
     // Attempt to get poster plugin. (May interfere with media control)
-    this._posterPlugin = this._container?.getPlugin('poster_custom')
+    this._posterPlugin = this._container?.getPlugin('poster')
 
     // Attempt to get click-to-pause plugin. (May interfere with advert click handling)
     this._clickToPausePlugin = this._container?.getPlugin(
@@ -721,7 +722,7 @@ export class VastAds extends UICorePlugin {
 
   private adsPlaying() {
     assert(this.container, 'container is not defined')
-    const poster = this.container.getPlugin('poster_custom')
+    const poster = this.container.getPlugin('poster')
 
     poster && poster.disable()
     try {

package/src/plugins/vast-ads/roll.ts

@@ -3,7 +3,8 @@ import { $, Container, Core, Events, Log, Playback } from '@clappr/core';
 import { reportError } from '@gcorevideo/utils';
 import assert from 'assert';
 
-import type { TimerId, ZeptoResult } from '../../utils/types.js';
+import type { ZeptoResult } from '../../types.js';
+import type { TimerId } from '../../utils/types.js';
 
 type RollConstructorOptions = {
   core: Core;

package/src/plugins/vast-ads/rollmanager.ts

@@ -4,7 +4,7 @@ import assert from 'assert';
 
 import LoaderXML from './loaderxml.js';
 import Roll from './roll.js';
-import { ZeptoResult } from '../../utils/types.js';
+import { ZeptoResult } from '../../types.js';
 import { AdRollDesc, AdRollItem, AdRollType, VastAdsOptions } from './types.js';
 
 type CoreOptions = Record<string, unknown>;
@@ -71,7 +71,7 @@ export default class RollManager extends Events {
     this.$areaClick = $areaClick;
     this._playback = this.core.activePlayback;
     this._contentElement = this._playback.el as HTMLMediaElement;
-    this._posterPlugin = this._container.getPlugin('poster_custom');
+    this._posterPlugin = this._container.getPlugin('poster');
     this._clickToPausePlugin = this._container.getPlugin('click_to_pause_custom');
     this._adContainer = _adContainer;
     this._events = {};
@@ -210,7 +210,7 @@ export default class RollManager extends Events {
     //чтобы реклама шла одна за другой
     this._allURLRequest = !!roll.oneByOne;
     try {
-      const customPosterPlugin = this.container.getPlugin('poster_custom');
+      const customPosterPlugin = this.container.getPlugin('poster');
 
       customPosterPlugin.hidePlayButton();
     } catch (error) {

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

@@ -12,7 +12,7 @@ export enum VolumeFadeEvents {
 }
 
 /**
- * Applies fade effect to the player's volume change.
+ * `PLUGIN` that applies fade effect to the player's volume change.
  * @beta
  */
 export class VolumeFade extends UICorePlugin {

package/src/testUtils.ts

@@ -82,7 +82,10 @@ export class _MockPlayback extends Events {
   }
 }
 
-export function createMockCore(options: Record<string, unknown> = {}, container: any = createMockContainer()) {
+export function createMockCore(
+  options: Record<string, unknown> = {},
+  container: any = createMockContainer(),
+) {
   const el = document.createElement('div')
   const emitter = new Events()
   return Object.assign(emitter, {
@@ -90,10 +93,14 @@ export function createMockCore(options: Record<string, unknown> = {}, container:
     $el: $(el),
     activePlayback: container.playback,
     activeContainer: container,
+    i18n: {
+      t: vi.fn().mockImplementation((key: string) => key),
+    },
     options: {
       ...options,
     },
     configure: vi.fn(),
+    getPlaybackType: vi.fn(),
     getPlugin: vi.fn(),
     load: vi.fn(),
     trigger: emitter.emit,
@@ -165,20 +172,37 @@ export function createMockPlayback(name = 'mock') {
 
 export function createMockContainer(playback: any = createMockPlayback()) {
   const el = document.createElement('div')
-  return Object.assign(new Events(), {
-    $el: $(el),
+  const emitter = new Events()
+  return Object.assign(emitter, {
     el,
-    getPlugin: vi.fn(),
     playback,
+    $el: $(el),
+    getDuration: vi.fn().mockReturnValue(0),
+    getPlugin: vi.fn(),
+    isPlaying: vi.fn().mockReturnValue(false),
+    play: vi.fn(),
+    seek: vi.fn(),
+    trigger: emitter.emit,
   })
 }
 
 export function createMockMediaControl(core: any) {
   const mediaControl = new UICorePlugin(core)
+  mediaControl.$el.html(
+    `<div class="media-control-left-panel" data-media-control></div>
+    <div class="media-control-right-panel" data-media-control></div>
+    <div class="media-control-center-panel" data-media-control></div>`,
+  )
   const elements = {
     gear: $(document.createElement('div')),
   }
   // @ts-ignore
   mediaControl.getElement = vi.fn().mockImplementation((name) => elements[name])
+  // @ts-ignore
+  mediaControl.getLeftPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-left-panel'))
+  // @ts-ignore
+  mediaControl.getRightPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-right-panel'))
+  // @ts-ignore
+  mediaControl.getCenterPanel = vi.fn().mockImplementation(() => mediaControl.$el.find('.media-control-center-panel'))
   return mediaControl
 }

package/src/types.ts

@@ -1,10 +1,12 @@
+import { $, Container, Core } from "@clappr/core";
+
 /**
  * Describes a media source with its MIME type and URL.
  *
  * @remarks
  * When the MIME type is provided, it helps the player determine the appropriate playback engine.
  * If omitted, the player will attempt to detect the type from the source URL extension.
- * @beta
+ * @public
  */
 export interface PlayerMediaSourceDesc {
   /**
@@ -21,57 +23,62 @@ export interface PlayerMediaSourceDesc {
 
 /**
  * A media source to fetch the media data from
- * @beta
+ * @public
  */
 export type PlayerMediaSource = string | PlayerMediaSourceDesc
 
 /**
  * Debug output category selector
- * @beta
+ * @public
  */
 export type PlayerDebugTag = 'all' | 'clappr' | 'dash' | 'hls' | 'none'
 
 /**
  * @remarks `true` is equivalent to `'all'`, `false` is equivalent to `'none'`
- * @beta
+ * @public
  */
 export type PlayerDebugSettings = PlayerDebugTag | boolean
 
 /**
- * Type of a stream playback
- * @beta
+ * Type of a stream
+ * @public
  */
 export type PlaybackType = 'live' | 'vod'
 
 /**
- * Media delivery protocol
- * @beta
+ * Preferred streaming media delivery protocol
+ * @public
  */
-export type MediaTransport = 'dash' | 'hls'
+export type TransportPreference = 'dash' | 'hls'
 
 /**
- * Preferred media delivery protocol
- * @beta
- */
-export type TransportPreference = MediaTransport
-
-/**
- * @beta
+ * @public
  * @see {@link https://clappr.github.io/classes/UIContainerPlugin.html},
  * {@link https://clappr.github.io/classes/ContainerPlugin.html}
  */
 export type PlayerPlugin = {
-  new (...args: any[]): unknown
   name: string
 }
 
+/**
+ * @public
+ */
 export type PlayerPluginConstructor = CorePluginConstructor | ContainerPluginConstructor
-export type CorePluginConstructor = ((core: unknown) => PlayerPlugin) & {
-  type: 'core'
+
+/**
+ * @public
+ */
+export type CorePluginConstructor = {
+  new (core: Core): PlayerPlugin
+  type: string // 'core', but it's a nuisance to type it in the plugins definition
 }
 
-export type ContainerPluginConstructor = ((container: unknown) => PlayerPlugin) & {
-  type: 'container'
+/**
+ * @public
+ */
+export type ContainerPluginConstructor = {
+  new (container: Container): PlayerPlugin
+  type: string // 'container', but it's a nuisance to type it in the plugins definition
 }
 
 /**
@@ -113,7 +120,7 @@ export type ContainerPluginConstructor = ((container: unknown) => PlayerPlugin)
  *   },
  * }
  * ```
- * @beta
+ * @public
  */
 export interface PlayerConfig extends Record<string, unknown> {
   /**
@@ -181,18 +188,18 @@ export interface PlayerConfig extends Record<string, unknown> {
 /**
  * An ISO 639-1 language code.
  * @example `pt`
- * @beta
+ * @public
  */
 export type LangTag = string
 
 /**
- * @beta
+ * @public
  */
 export type TranslationKey = string
 
 /**
  * A plain JS object that must conform to the DASH.js settings schema.
- * @beta
+ * @public
  * {@link https://cdn.dashjs.org/latest/jsdoc/module-Settings.html | DASH.js settings}
  */
 export type DashSettings = Record<string, unknown>
@@ -219,7 +226,7 @@ export type DashSettings = Record<string, unknown>
  * }
  * ```
  *
- * @beta
+ * @public
  */
 export type TranslationSettings = Partial<
   Record<LangTag, Record<TranslationKey, string>>
@@ -227,7 +234,7 @@ export type TranslationSettings = Partial<
 
 /**
  * Dimensions of the player container DOM element.
- * @beta
+ * @public
  */
 export type ContainerSize = {
   width: number
@@ -236,7 +243,7 @@ export type ContainerSize = {
 
 /**
  * A top-level event on the player object
- * @beta
+ * @public
  */
 export enum PlayerEvent {
   /**
@@ -289,3 +296,9 @@ export enum PlayerEvent {
    */
   VolumeUpdate = 'volumeupdate',
 }
+
+/**
+ * {@link https://zeptojs.com/#$() | Zepto query result}
+ * @beta
+ */
+export type ZeptoResult = ReturnType<typeof $>;

package/src/utils/types.ts

@@ -1,11 +1,3 @@
-import { $ } from "@clappr/core";
-
-/**
- * {@link https://zeptojs.com/#$() | Zepto query result}
- * @beta
- */
-export type ZeptoResult = ReturnType<typeof $>;
-
 /**
  * @internal
  */