@gcorevideo/player 2.20.3 → 2.20.5

package/src/internal.types.ts

@@ -2,22 +2,29 @@ import type {
   CorePlugin,
   ContainerPlugin,
   Playback as ClapprPlayback,
-} from "@clappr/core";
+} from '@clappr/core'
 
-import { ContainerSize, PlaybackType, PlayerDebugTag, PlayerMediaSource } from "./types";
-import { PlaybackError } from "./playback.types.js";
+import {
+  ContainerSize,
+  PlaybackType,
+  PlayerDebugTag,
+  PlayerMediaSource,
+  type CorePluginConstructor,
+  type ContainerPluginConstructor,
+} from './types'
+import { PlaybackError } from './playback.types.js'
 
 type ExternalTrack = {
-  kind?: "subtitles" | "captions";
-  src: string;
-  label: string;
-  lang: string;
+  kind?: 'subtitles' | 'captions'
+  src: string
+  label: string
+  lang: string
 }
 
 type MediacontrolStyles = {
   // TODO
-  seekbar?: string;
-  buttons?: string;
+  seekbar?: string
+  buttons?: string
 }
 
 /**
@@ -25,11 +32,11 @@ type MediacontrolStyles = {
  * @beta
  */
 type HlsjsConfig = {
-  debug?: boolean;
-  startLevel?: number;
-} & Record<string, unknown>;
+  debug?: boolean
+  startLevel?: number
+} & Record<string, unknown>
 
-type ShakaConfig = Record<string, unknown>;
+type ShakaConfig = Record<string, unknown>
 
 /**
  * @see {@link https://github.com/clappr/clappr-core?tab=readme-ov-file#playback-configuration | the Clappr playback settings}
@@ -37,25 +44,25 @@ type ShakaConfig = Record<string, unknown>;
  */
 export interface CorePlaybackConfig {
   // audioOnly: boolean;
-  disableContextMenu?: boolean;
-  controls?: boolean;
-  crossOrigin?: 'anonymous' | 'use-credentials';
+  disableContextMenu?: boolean
+  controls?: boolean
+  crossOrigin?: 'anonymous' | 'use-credentials'
   // enableAutomaticABR?: boolean;
-  externalTracks?: ExternalTrack[];
-  hlsjsConfig?: HlsjsConfig;
+  externalTracks?: ExternalTrack[]
+  hlsjsConfig?: HlsjsConfig
   // initialBandwidthEstimate?: number;
   // maxBufferLength?: number;
   // maxBackBufferLength?: number;
   // minBufferLength?: number;
-  minimumDvrSize?: number; // TODO ?
+  minimumDvrSize?: number // TODO ?
   // maxAdaptiveBitrate?: number;
   // maxAdaptiveVideoDimensions?: unknown; // TODO
-  mute?: boolean;
-  playInline: boolean;
-  preload?: 'metadata' | 'auto' | 'none';
+  mute?: boolean
+  playInline: boolean
+  preload?: 'metadata' | 'auto' | 'none'
   // preferredAudioLanguage?: string;
-  recycleVideo?: boolean;
-  shakaConfiguration?: ShakaConfig;
+  recycleVideo?: boolean
+  shakaConfiguration?: ShakaConfig
 }
 
 /**
@@ -63,34 +70,34 @@ export interface CorePlaybackConfig {
  */
 export type CorePlayerEvents = {
   // TODO event arguments types
-  onReady?: () => void;
-  onResize?: (data: ContainerSize) => void;
-  onPlay?: (metadata: unknown) => void;
-  onPause?: (metadata: unknown) => void;
-  onStop?: (metadata: unknown) => void;
-  onEnded?: () => void;
-  onSeek?: (currentTime: number) => void;
-  onError?: (err: PlaybackError) => void;
-  onTimeUpdate?: (timeProgress: { current: number; total: number }) => void;
-  onVolumeUpdate?: (value: number) => void;
-  onSubtitleAvailable?: () => void;
+  onReady?: () => void
+  onResize?: (data: ContainerSize) => void
+  onPlay?: (metadata: unknown) => void
+  onPause?: (metadata: unknown) => void
+  onStop?: (metadata: unknown) => void
+  onEnded?: () => void
+  onSeek?: (currentTime: number) => void
+  onError?: (err: PlaybackError) => void
+  onTimeUpdate?: (timeProgress: { current: number; total: number }) => void
+  onVolumeUpdate?: (value: number) => void
+  onSubtitleAvailable?: () => void
 }
 
 /**
  * @internal
  */
-export type PlaybackPluginFactory = typeof ClapprPlayback;
+export type PlaybackPluginFactory = typeof ClapprPlayback
 
 /**
  * For the plugin development
  * @internal
  */
 export type CorePluginOptions = {
-  core?: CorePlugin[];
-  container?: ContainerPlugin[];
-  playback?: PlaybackPluginFactory[];
-  loadExternalPluginsFirst?: boolean;
-  loadExternalPlaybacksFirst?: boolean;
+  core?: CorePluginConstructor[]
+  container?: ContainerPluginConstructor[]
+  playback?: PlaybackPluginFactory[]
+  loadExternalPluginsFirst?: boolean
+  loadExternalPlaybacksFirst?: boolean
 }
 
 /**
@@ -98,41 +105,41 @@ export type CorePluginOptions = {
  * @internal
  */
 export type CoreOptions = {
-  actualLiveTime?: boolean;
-  actualLiveServerTime?: string;
-  allowUserInteraction?: boolean;
-  autoPlay?: boolean;
-  autoSeekFromUrl?: boolean;
-  chromeless?: boolean;
-  debug?: PlayerDebugTag | boolean;
-  disableCanAutoPlay?: boolean; // custom, for reconfiguration
-  disableKeyboardShortcuts?: boolean;
-  disableVideoTagContextMenu?: boolean;
-  events?: CorePlayerEvents;
-  exitFullscreenOnEnd?: boolean;
-  gaAccount?: string;
-  gaTrackerName?: string;
-  height?: number;
-  hideMediaControl?: boolean;
-  hideVolumeBar?: boolean;
-  language?: string;
-  loop?: boolean;
-  maxBufferLength?: number;
-  mediacontrol?: MediacontrolStyles;
-  mimeType?: string;
-  mute?: boolean;
-  persistConfig?: boolean;
-  preload?: "auto" | "metadata" | "none";
-  parentId?: string;
-  parent?: HTMLElement;
-  playback?: CorePlaybackConfig;
-  playbackNotSupportedMessage?: string;
-  playbackType?: PlaybackType;
-  plugins?: CorePluginOptions | CorePlugin[];
-  poster?: string;
-  source?: string;
-  sources?: PlayerMediaSource[];
-  watermark?: string;
-  watermarkLink?: string;
-  width?: number;
-}
+  actualLiveTime?: boolean
+  actualLiveServerTime?: string
+  allowUserInteraction?: boolean
+  autoPlay?: boolean
+  autoSeekFromUrl?: boolean
+  chromeless?: boolean
+  debug?: PlayerDebugTag | boolean
+  disableCanAutoPlay?: boolean // custom, for reconfiguration
+  disableKeyboardShortcuts?: boolean
+  disableVideoTagContextMenu?: boolean
+  events?: CorePlayerEvents
+  exitFullscreenOnEnd?: boolean
+  gaAccount?: string
+  gaTrackerName?: string
+  height?: number
+  hideMediaControl?: boolean
+  hideVolumeBar?: boolean
+  language?: string
+  loop?: boolean
+  maxBufferLength?: number
+  mediacontrol?: MediacontrolStyles
+  mimeType?: string
+  mute?: boolean
+  persistConfig?: boolean
+  preload?: 'auto' | 'metadata' | 'none'
+  parentId?: string
+  parent?: HTMLElement
+  playback?: CorePlaybackConfig
+  playbackNotSupportedMessage?: string
+  playbackType?: PlaybackType
+  plugins?: CorePluginOptions | CorePlugin[]
+  poster?: string
+  source?: string
+  sources?: PlayerMediaSource[]
+  watermark?: string
+  watermarkLink?: string
+  width?: number
+}

package/src/playback/BasePlayback.ts

@@ -0,0 +1,41 @@
+import { ErrorOptions, Events, HTML5Video, PlayerError } from '@clappr/core'
+
+import { PlaybackErrorCode } from '../playback.types.js'
+
+/**
+ * This class adds common behaviors to all playback modules.
+ * @internal
+ * TODO use custom HTML5Video playback with this layer applied
+ */
+export class BasePlayback extends HTML5Video {
+  createError(errorData: any, options?: ErrorOptions) {
+    const i18n =
+      this.i18n ||
+        // @ts-ignore
+        (this.core && this.core.i18n) ||
+        // @ts-ignore
+        (this.container && this.container.i18n)
+
+    if (
+      i18n &&
+      !errorData.UI &&
+      errorData.code === PlaybackErrorCode.MediaSourceUnavailable
+    ) {
+      const defaultUI = {
+        title: i18n.t('no_broadcast'),
+        message: '',
+      }
+      errorData.UI = defaultUI
+    }
+
+    if (errorData.level === PlayerError.Levels.FATAL) {
+      this.trigger(Events.PLAYBACK_MEDIACONTROL_DISABLE)
+    }
+    return super.createError(errorData, options)
+  }
+
+  override _onProgress() {
+    super._onProgress()
+    this.trigger(Events.PLAYBACK_MEDIACONTROL_ENABLE)
+  }
+}

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

@@ -2,15 +2,7 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import {
-  Events,
-  HTML5Video,
-  Log,
-  Playback,
-  PlayerError,
-  Utils,
-  $,
-} from '@clappr/core'
+import { Events, Log, Playback, PlayerError, Utils, $ } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 import DASHJS, {
@@ -32,6 +24,7 @@ import {
   TimeValue,
 } from '../../playback.types.js'
 import { isDashSource } from '../../utils/mediaSources.js'
+import { BasePlayback } from '../BasePlayback.js'
 
 const AUTO = -1
 
@@ -53,7 +46,7 @@ type LocalTimeCorrelation = {
 const T = 'playback.dash'
 
 // @ts-expect-error
-export default class DashPlayback extends HTML5Video {
+export default class DashPlayback extends BasePlayback {
   _levels: QualityLevel[] | null = null
 
   _currentLevel: number | null = null
@@ -470,11 +463,14 @@ export default class DashPlayback extends HTML5Video {
     error: Pick<PlaybackError, 'code' | 'message' | 'description' | 'level'>,
   ) {
     trace(`${T} triggerError`, { error })
-    this.trigger(Events.PLAYBACK_ERROR, {
-      ...error,
-      origin: this.name,
-      scope: DashPlayback.type as PlayerComponentType,
-    })
+
+    // this triggers Events.ERROR to be handled by the UI
+    this.trigger(
+      Events.PLAYBACK_ERROR,
+      this.createError(error, {
+        useCodePrefix: false,
+      }),
+    )
     // only reset the dash player in 10ms async, so that the rest of the
     // calling function finishes
     setTimeout(() => {

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

@@ -1,10 +1,9 @@
 // Copyright 2014 Globo.com Player authors. All rights reserved.
 // Use of this source code is governed by a BSD-style
-// license that can be found in the LICENSE file.
+// license that can be found on https://github.com/clappr/hlsjs-playback/blob/main/LICENSE
 
 import {
   Events,
-  HTML5Video,
   Log,
   Playback,
   PlayerError,
@@ -37,10 +36,11 @@ import {
 import { PlaybackType } from '../../types.js'
 import { isHlsSource } from '../../utils/mediaSources.js'
 import { TimerId } from '../../utils/types.js'
+import { BasePlayback } from '../BasePlayback.js'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
-const { now, listContainsIgnoreCase } = Utils
+const { now } = Utils
 
 const AUTO = -1
 const DEFAULT_RECOVER_ATTEMPTS = 16
@@ -78,7 +78,7 @@ type CustomListener = {
 type ErrorInfo = Record<string, unknown>
 
 // @ts-expect-error
-export default class HlsPlayback extends HTML5Video {
+export default class HlsPlayback extends BasePlayback {
   private _ccIsSetup = false
 
   private _ccTracksUpdated = false
@@ -1104,7 +1104,9 @@ export default class HlsPlayback extends HTML5Video {
   }
 
   private triggerError(error: PlaybackError) {
-    this.trigger(Events.PLAYBACK_ERROR, error)
+    this.trigger(Events.PLAYBACK_ERROR, this.createError(error, {
+      useCodePrefix: false,
+    }))
     this.stop()
   }
 }

package/src/playback/utils.ts

@@ -0,0 +1,2 @@
+import { PlaybackErrorCode } from '../playback.types'
+

package/src/playback.types.ts

@@ -64,15 +64,15 @@ export enum PlaybackErrorCode {
   /**
    * An unknown or uncategorised error.
    */
-  Generic = 0,
+  Generic = 'GENERIC_ERROR',
   /**
    * The media source is not available. Typically a network error.
    */
-  MediaSourceUnavailable = 1,
+  MediaSourceUnavailable = 'MEDIA_SOURCE_UNAVAILABLE',
   /**
    * The media source is not accessible due to some protection policy.
    */
-  MediaSourceAccessDenied = 3,
+  MediaSourceAccessDenied = 'MEDIA_SOURCE_ACCESS_DENIED',
 }
 
 /**
@@ -120,4 +120,12 @@ export interface PlaybackError {
    * Component subsystem of the error origin
    */
   scope: PlayerComponentType
+
+  /**
+   * UI description of the error.
+   */
+  UI?: {
+    title: string
+    message: string
+  }
 }

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

@@ -19,6 +19,10 @@ type MenuOption = {
   name: string
 }
 
+/**
+ * The plugin adds a context menu to the player.
+ * @beta
+ */
 export interface ContextMenuPluginSettings {
   label?: string
   url?: string
@@ -94,7 +98,7 @@ export class ContextMenu extends UIContainerPlugin {
       this._url = this.options.contextMenu.url
     }
     this.render()
-    this.bindEvents()
+    $('body').on('click', this.hideOnBodyClick)
   }
 
   /**
@@ -107,7 +111,6 @@ export class ContextMenu extends UIContainerPlugin {
       this.toggleContextMenu,
     )
     this.listenTo(this.container, Events.CONTAINER_CLICK, this.hide)
-    $('body').on('click', this.hideOnBodyClick)
   }
 
   /**