@gcorevideo/player 2.20.4 → 2.20.6

package/lib/plugins/source-controller/SourceController.js

@@ -1,5 +1,5 @@
 import { Events as ClapprEvents, CorePlugin, } from '@clappr/core';
-import { PlaybackErrorCode, } from '../../playback.types.js';
+import { PlaybackErrorCode } from '../../playback.types.js';
 import { trace } from '@gcorevideo/utils';
 import { SpinnerEvents } from '../spinner-three-bounce/SpinnerThreeBounce.js';
 import { CLAPPR_VERSION } from '../../build.js';
@@ -100,10 +100,15 @@ export class SourceController extends CorePlugin {
      */
     bindEvents() {
         super.bindEvents();
-        this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, () => this.onReady());
+        this.listenTo(this.core, ClapprEvents.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
-    onReady() {
-        trace(`${T} onReady`, {
+    onCoreReady() {
+        trace(`${T} onCoreReady`);
+        this.core.getPlugin('error_screen')?.disable(); //  TODO test
+    }
+    onActiveContainerChanged() {
+        trace(`${T} onActiveContainerChanged`, {
             retrying: this.active,
             currentSource: this.sourcesList[this.currentSourceIndex],
         });
@@ -119,7 +124,7 @@ export class SourceController extends CorePlugin {
         this.bindContainerEventListeners();
         if (this.active) {
             this.core.activeContainer?.getPlugin('poster_custom')?.disable();
-            spinner?.show();
+            spinner?.show(0);
         }
     }
     bindContainerEventListeners() {
@@ -136,7 +141,7 @@ export class SourceController extends CorePlugin {
             switch (error.code) {
                 case PlaybackErrorCode.MediaSourceUnavailable:
                     this.core.activeContainer?.getPlugin('poster_custom')?.disable();
-                    this.retryPlayback();
+                    setTimeout(() => this.retryPlayback(), 0);
                     break;
                 // TODO handle other errors
                 default:
@@ -166,6 +171,7 @@ export class SourceController extends CorePlugin {
             currentSource: this.sourcesList[this.currentSourceIndex],
         });
         this.active = true;
+        this.core.activeContainer?.getPlugin('spinner')?.show(0);
         this.getNextMediaSource().then((nextSource) => {
             trace(`${T} retryPlayback syncing...`, {
                 nextSource,

package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts

@@ -34,6 +34,7 @@ export declare class SpinnerThreeBounce extends UIContainerPlugin {
         'data-spinner': string;
         class: string;
     };
+    private hideTimeout;
     private showTimeout;
     private template;
     private hasFatalError;
@@ -47,7 +48,7 @@ export declare class SpinnerThreeBounce extends UIContainerPlugin {
     /**
      * Shows the spinner
      */
-    show(): void;
+    show(delay?: number): void;
     /**
      * Hides the spinner
      */

package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerThreeBounce.d.ts","sourceRoot":"","sources":["../../../src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAA0B,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAK9F,OAAO,mDAAmD,CAAC;AAM3D;;GAEG;AACH,oBAAY,aAAa;IACvB;;;OAGG;IACH,IAAI,yBAAyB;CAC9B;AAED;;;;;GAKG;AACH,qBAAa,kBAAmB,SAAQ,iBAAiB;IACvD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED,OAAO,CAAC,WAAW,CAAwB;IAE3C,OAAO,CAAC,QAAQ,CAAyB;IAEzC,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,YAAY,CAAQ;gBAEhB,SAAS,EAAE,SAAS;IAWhC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,OAAO;IAef;;OAEG;IACH,IAAI;IAIJ;;OAEG;IACH,IAAI;IAQJ;;OAEG;IACM,MAAM;CAmBhB"}
+{"version":3,"file":"SpinnerThreeBounce.d.ts","sourceRoot":"","sources":["../../../src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAA0B,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAK9F,OAAO,mDAAmD,CAAC;AAM3D;;GAEG;AACH,oBAAY,aAAa;IACvB;;;OAGG;IACH,IAAI,yBAAyB;CAC9B;AAED;;;;;GAKG;AACH,qBAAa,kBAAmB,SAAQ,iBAAiB;IACvD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,IAAa,UAAU;;;MAKtB;IAED,OAAO,CAAC,WAAW,CAAwB;IAE3C,OAAO,CAAC,WAAW,CAAwB;IAE3C,OAAO,CAAC,QAAQ,CAAyB;IAEzC,OAAO,CAAC,aAAa,CAAQ;IAE7B,OAAO,CAAC,YAAY,CAAQ;gBAEhB,SAAS,EAAE,SAAS;IAWhC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,OAAO;IAef;;OAEG;IACH,IAAI,CAAC,KAAK,SAAM;IAchB;;OAEG;IACH,IAAI;IAaJ;;OAEG;IACM,MAAM;CAmBhB"}

package/lib/plugins/spinner-three-bounce/SpinnerThreeBounce.js

@@ -47,6 +47,7 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
             'class': 'spinner-three-bounce'
         };
     }
+    hideTimeout = null;
     showTimeout = null;
     template = template(spinnerHTML);
     hasFatalError = false;
@@ -102,8 +103,18 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
     /**
      * Shows the spinner
      */
-    show() {
-        this.showTimeout = setTimeout(() => this.$el.show(), 300);
+    show(delay = 300) {
+        trace(`${T} show`);
+        if (this.showTimeout === null) {
+            if (this.hideTimeout !== null) {
+                clearTimeout(this.hideTimeout);
+                this.hideTimeout = null;
+            }
+            this.showTimeout = setTimeout(() => {
+                this.showTimeout = null;
+                this.$el.show();
+            }, delay);
+        }
     }
     /**
      * Hides the spinner
@@ -113,7 +124,12 @@ export class SpinnerThreeBounce extends UIContainerPlugin {
             clearTimeout(this.showTimeout);
             this.showTimeout = null;
         }
-        this.$el.hide();
+        this.hideTimeout = setTimeout(() => {
+            this.hideTimeout = null;
+            if (this.showTimeout === null) {
+                this.$el.hide();
+            }
+        }, 0);
     }
     /**
      * @internal

package/lib/testUtils.d.ts

@@ -1,8 +1,10 @@
-import EventLite from 'event-lite';
+import Events from 'eventemitter3';
 /**
  * @internal
+ * @deprecated
+ * TODO use createMockPlayback() instead
  */
-export declare class _MockPlayback extends EventLite {
+export declare class _MockPlayback extends Events {
     protected options: any;
     readonly i18n: any;
     protected playerError?: any | undefined;
@@ -31,4 +33,66 @@ export declare class _MockPlayback extends EventLite {
     onResize(): boolean;
     trigger(event: string, ...args: any[]): void;
 }
+export declare function createMockCore(options?: Record<string, unknown>, container?: any): Events<string | symbol, any> & {
+    el: HTMLDivElement;
+    $el: {
+        0: HTMLDivElement;
+        append: import("vitest").Mock<(...args: any[]) => any>;
+    };
+    activePlayback: any;
+    activeContainer: any;
+    options: {
+        [x: string]: unknown;
+    };
+    configure: import("vitest").Mock<(...args: any[]) => any>;
+    getPlugin: import("vitest").Mock<(...args: any[]) => any>;
+    load: import("vitest").Mock<(...args: any[]) => any>;
+};
+export declare function createMockPlugin(): Events<string | symbol, any> & {
+    enable: import("vitest").Mock<(...args: any[]) => any>;
+    disable: import("vitest").Mock<(...args: any[]) => any>;
+};
+export declare function createSpinnerPlugin(): Events<string | symbol, any> & {
+    enable: import("vitest").Mock<(...args: any[]) => any>;
+    disable: import("vitest").Mock<(...args: any[]) => any>;
+} & {
+    show: import("vitest").Mock<(...args: any[]) => any>;
+    hide: import("vitest").Mock<(...args: any[]) => any>;
+};
+export declare function createMockPlayback(name?: string): Events<string | symbol, any> & {
+    name: string;
+    currentLevel: number;
+    levels: never[];
+    consent(): void;
+    play(): void;
+    pause(): void;
+    stop(): void;
+    destroy(): void;
+    seek(): void;
+    seekPercentage(): void;
+    getDuration(): 100;
+    enterPiP(): void;
+    exitPiP(): void;
+    getPlaybackType(): "live";
+    getStartTimeOffset(): 0;
+    getCurrentTime(): 0;
+    isHighDefinitionInUse(): false;
+    mute(): void;
+    unmute(): void;
+    volume(): void;
+    configure(): void;
+    attemptAutoPlay(): true;
+    canAutoPlay(): true;
+    onResize(): true;
+    trigger(event: string, ...args: any[]): void;
+};
+export declare function createMockContainer(playback?: any): Events<string | symbol, any> & {
+    $el: {
+        html: import("vitest").Mock<(...args: any[]) => any>;
+        0: HTMLDivElement;
+    };
+    el: HTMLDivElement;
+    getPlugin: import("vitest").Mock<(...args: any[]) => any>;
+    playback: any;
+};
 //# sourceMappingURL=testUtils.d.ts.map

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAA;AAElC;;GAEG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAExC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,eAAe,CAAA;AAElC;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,MAAM;IAErC,SAAS,CAAC,OAAO,EAAE,GAAG;IACtB,QAAQ,CAAC,IAAI,EAAE,GAAG;IAClB,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG;gBAFjB,OAAO,EAAE,GAAG,EACb,IAAI,EAAE,GAAG,EACR,WAAW,CAAC,EAAE,GAAG,YAAA;IAK7B,IAAI,IAAI,WAEP;IAED,OAAO;IAEP,IAAI;IAEJ,KAAK;IAEL,IAAI;IAEJ,OAAO;IAEP,IAAI;IAEJ,cAAc;IAEd,WAAW;IAIX,QAAQ;IAER,OAAO;IAEP,eAAe;IAIf,kBAAkB;IAIlB,cAAc;IAId,qBAAqB;IAIrB,IAAI;IAEJ,MAAM;IAEN,MAAM;IAEN,SAAS;IAET,eAAe;IAIf,WAAW;IAIX,QAAQ;IAIR,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE;CAGtC;AAED,wBAAgB,cAAc,CAAC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAAE,SAAS,GAAE,GAA2B;;;;;;;;;;;;;;EAiB3G;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;mBA2C7B,MAAM,WAAW,GAAG,EAAE;EAIxC;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;EAWvE"}

package/lib/testUtils.js

@@ -1,8 +1,11 @@
-import EventLite from 'event-lite';
+import Events from 'eventemitter3';
+import { vi } from 'vitest';
 /**
  * @internal
+ * @deprecated
+ * TODO use createMockPlayback() instead
  */
-export class _MockPlayback extends EventLite {
+export class _MockPlayback extends Events {
     options;
     i18n;
     playerError;
@@ -56,3 +59,93 @@ export class _MockPlayback extends EventLite {
         this.emit(event, ...args);
     }
 }
+export function createMockCore(options = {}, container = createMockContainer()) {
+    const el = document.createElement('div');
+    return Object.assign(new Events(), {
+        el,
+        $el: {
+            [0]: el,
+            append: vi.fn(),
+        },
+        activePlayback: container.playback,
+        activeContainer: container,
+        options: {
+            ...options,
+        },
+        configure: vi.fn(),
+        getPlugin: vi.fn(),
+        load: vi.fn(),
+    });
+}
+export function createMockPlugin() {
+    return Object.assign(new Events(), {
+        enable: vi.fn(),
+        disable: vi.fn(),
+    });
+}
+export function createSpinnerPlugin() {
+    return Object.assign(createMockPlugin(), {
+        show: vi.fn(),
+        hide: vi.fn(),
+    });
+}
+export function createMockPlayback(name = 'mock') {
+    const emitter = new Events();
+    return Object.assign(emitter, {
+        name,
+        currentLevel: -1,
+        levels: [],
+        consent() { },
+        play() { },
+        pause() { },
+        stop() { },
+        destroy() { },
+        seek() { },
+        seekPercentage() { },
+        getDuration() {
+            return 100;
+        },
+        enterPiP() { },
+        exitPiP() { },
+        getPlaybackType() {
+            return 'live';
+        },
+        getStartTimeOffset() {
+            return 0;
+        },
+        getCurrentTime() {
+            return 0;
+        },
+        isHighDefinitionInUse() {
+            return false;
+        },
+        mute() { },
+        unmute() { },
+        volume() { },
+        configure() { },
+        attemptAutoPlay() {
+            return true;
+        },
+        canAutoPlay() {
+            return true;
+        },
+        onResize() {
+            return true;
+        },
+        trigger(event, ...args) {
+            emitter.emit(event, ...args);
+        },
+    });
+}
+export function createMockContainer(playback = createMockPlayback()) {
+    const el = document.createElement('div');
+    return Object.assign(new Events(), {
+        $el: {
+            html: vi.fn(),
+            [0]: el,
+        },
+        el,
+        getPlugin: vi.fn(),
+        playback,
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.20.4",
+  "version": "2.20.6",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
@@ -42,6 +42,7 @@
     "@types/node": "^22.10.1",
     "@types/sinonjs__fake-timers": "^8.1.5",
     "assert": "^2.1.0",
+    "eventemitter3": "^5.0.1",
     "jsdom": "^26.0.0",
     "nodemon": "^3.1.9",
     "rollup": "^4.27.4",
@@ -57,7 +58,6 @@
     "@gcorevideo/utils": "^0.0.1",
     "@sentry/types": "^8.47.0",
     "dashjs": "^4.7.4",
-    "event-lite": "^1.0.0",
     "hls.js": "^1.5.17",
     "human-format": "^1.2.1",
     "mousetrap": "^1.6.5",

package/src/Player.ts

@@ -8,7 +8,7 @@ import {
 } from '@clappr/core'
 import { reportError, trace } from '@gcorevideo/utils'
 import assert from 'assert'
-import EventLite from 'event-lite'
+import EventEmitter from 'eventemitter3'
 
 import type {
   CorePlayerEvents,
@@ -84,7 +84,7 @@ type PluginOptions = Record<string, unknown>
 export class Player {
   private config: PlayerConfig = DEFAULT_OPTIONS
 
-  private emitter = new EventLite()
+  private emitter = new EventEmitter()
 
   private player: PlayerClappr | null = null
 

package/src/__tests__/Player.test.ts

@@ -1,3 +1,4 @@
+import Events from 'eventemitter3'
 import {
   afterEach,
   beforeEach,
@@ -9,8 +10,6 @@ import {
 } from 'vitest'
 import { LogTracer, setTracer } from '@gcorevideo/utils'
 import { Loader, Player as PlayerClappr } from '@clappr/core'
-import EventLite from 'event-lite'
-
 import { Player } from '../Player'
 import { CorePluginConstructor, TransportPreference } from '../types'
 import { canPlayDash, canPlayHls } from '../playback'
@@ -18,7 +17,7 @@ import { isDashSource, isHlsSource } from '../utils/mediaSources'
 
 function createMockClapprPlayer(): MockedObject<typeof PlayerClappr> {
   return {
-    core: Object.assign(new EventLite(), {
+    core: Object.assign(new Events(), {
       activeContainer: null,
       activePlayback: null,
       load: vi.fn(),

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 _onPlaying() {
+    super._onPlaying()
+    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(() => {
@@ -525,7 +521,7 @@ export default class DashPlayback extends HTML5Video {
     )
   }
 
-  _onProgress() {
+  override _onProgress() {
     if (!this._dash) {
       return
     }
@@ -558,7 +554,6 @@ export default class DashPlayback extends HTML5Video {
     if (!this._dash) {
       return
     }
-
     super.pause()
     if (this.dvrEnabled) {
       this._updateDvr(true)

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
@@ -763,7 +763,7 @@ export default class HlsPlayback extends HTML5Video {
     this.trigger(Events.PLAYBACK_TIMEUPDATE, update, this.name)
   }
 
-  _onDurationChange() {
+  override _onDurationChange() {
     const duration = this.getDuration()
 
     if (this._lastDuration === duration) {
@@ -773,7 +773,7 @@ export default class HlsPlayback extends HTML5Video {
     super._onDurationChange() // will call _onTimeUpdate
   }
 
-  _onProgress() {
+  override _onProgress() {
     if (!(this.el as HTMLMediaElement).buffered.length) {
       return
     }
@@ -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.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

@@ -98,7 +98,7 @@ export class ContextMenu extends UIContainerPlugin {
       this._url = this.options.contextMenu.url
     }
     this.render()
-    this.bindEvents()
+    $('body').on('click', this.hideOnBodyClick)
   }
 
   /**
@@ -111,7 +111,6 @@ export class ContextMenu extends UIContainerPlugin {
       this.toggleContextMenu,
     )
     this.listenTo(this.container, Events.CONTAINER_CLICK, this.hide)
-    $('body').on('click', this.hideOnBodyClick)
   }
 
   /**