@gcorevideo/player 2.22.18 → 2.22.21

package/lib/plugins/dvr-controls/DvrControls.js

@@ -3,8 +3,7 @@ import assert from 'assert';
 import { CLAPPR_VERSION } from '../../build.js';
 import dvrHTML from '../../../assets/dvr-controls/index.ejs';
 import '../../../assets/dvr-controls/dvr_controls.scss';
-import { trace } from '@gcorevideo/utils';
-const T = 'plugins.dvr_controls';
+// const T = 'plugins.dvr_controls'
 /**
  * `PLUGIN` that adds the DVR controls to the media control UI
  *
@@ -53,19 +52,17 @@ export class DvrControls extends UICorePlugin {
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.bindContainerEvents);
+        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onCoreReady() {
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-        // MediaControl has been rendered
-        this.render();
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.mount);
     }
-    bindContainerEvents() {
-        trace(`${T} bindContainerEvents`);
-        this.listenToOnce(this.core.activeContainer, Events.CONTAINER_TIMEUPDATE, this.render);
+    onActiveContainerChanged() {
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_LOADEDMETADATA, this.onMetadataLoaded);
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.onDvrStateChanged);
     }
     click() {
         const container = this.core.activeContainer;
@@ -74,30 +71,45 @@ export class DvrControls extends UICorePlugin {
         }
         container.seek(container.getDuration());
     }
-    shouldRender() {
-        return this.core.getPlaybackType() === Playback.LIVE;
-    }
     /**
      * @internal
      */
     render() {
-        trace(`${T} render`, {
-            dvrEnabled: this.core.activePlayback?.dvrEnabled,
-            playbackType: this.core.getPlaybackType(),
-        });
-        const mediaControl = this.core.getPlugin('media_control');
-        if (!mediaControl) {
-            return this;
-        }
-        if (!this.shouldRender()) {
-            return this;
-        }
-        mediaControl.toggleElement('duration', false);
-        mediaControl.toggleElement('position', false);
         this.$el.html(DvrControls.template({
             i18n: this.core.i18n,
         }));
-        mediaControl.putElement('dvr', this.$el);
         return this;
     }
+    onMediacontrolRendered() {
+        this.render();
+    }
+    onMetadataLoaded() {
+        this.mount();
+        this.toggleState(this.core.activeContainer.isDvrInUse());
+    }
+    mount() {
+        // TODO move mount point management logic to MediaControl
+        if (this.core.getPlaybackType() !== Playback.LIVE) {
+            return;
+        }
+        const mediaControl = this.core.getPlugin('media_control');
+        assert(mediaControl, 'media_control plugin is required');
+        // TODO -> to MediaControl
+        mediaControl.toggleElement('duration', false);
+        mediaControl.toggleElement('position', false);
+        mediaControl.mount('dvr', this.$el);
+    }
+    onDvrStateChanged(dvrInUse) {
+        this.toggleState(dvrInUse);
+    }
+    toggleState(dvrInUse) {
+        if (dvrInUse) {
+            this.$el.find('#media-control-back-to-live').show();
+            this.$el.find('#media-control-live').hide();
+        }
+        else {
+            this.$el.find('#media-control-back-to-live').hide();
+            this.$el.find('#media-control-live').show();
+        }
+    }
 }

package/lib/plugins/media-control/MediaControl.d.ts

@@ -32,6 +32,9 @@ export type MediaControlSettings = {
     default: MediaControlLayerElement[];
     seekEnabled: boolean;
 };
+export declare enum ExtendedEvents {
+    MEDIACONTROL_VOLUME = "mediacontrol:volume"
+}
 /**
  * `PLUGIN` that provides basic playback controls UI and a foundation for developing custom UI.
  * @beta
@@ -232,7 +235,6 @@ export declare class MediaControl extends UICorePlugin {
      * Get a media control element DOM node
      * @param name - The name of the media control element
      * @returns The DOM node to render to or extend
-     * @deprecated  Use {@link MediaControl.putElement} instead
      * @remarks
      * Use this method to render custom media control UI in a plugin
      * @example
@@ -247,11 +249,16 @@ export declare class MediaControl extends UICorePlugin {
      * ```
      */
     mount(name: MediaControlElement, element: ZeptoResult): void;
+    /**
+     * @deprecated  Use {@link MediaControl.mount} instead
+     * @param name
+     * @param element
+     */
     putElement(name: MediaControlElement, element: ZeptoResult): void;
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
-     * @param show - Whether to show or hide the element
+     * @param show - Visibility state
      */
     toggleElement(area: MediaControlElement, show: boolean): void;
     private getRightPanel;

package/lib/plugins/media-control/MediaControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MediaControl.d.ts","sourceRoot":"","sources":["../../../src/plugins/media-control/MediaControl.ts"],"names":[],"mappings":"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"}

package/lib/plugins/media-control/MediaControl.js

@@ -20,14 +20,21 @@ import volumeMaxIcon from '../../../assets/icons/new/volume-max.svg';
 import volumeOffIcon from '../../../assets/icons/new/volume-off.svg';
 import fullscreenOffIcon from '../../../assets/icons/new/fullscreen-off.svg';
 import fullscreenOnIcon from '../../../assets/icons/new/fullscreen-on.svg';
+const MANAGED_ELEMENTS = [
+    'dvr',
+    'duration',
+    'fullscreen',
+    'hd-indicator',
+    'position',
+    'seekbar',
+    'volume',
+];
 const DEFAULT_SETTINGS = {
     default: [],
     left: ['dvr'],
     right: [
         'audiotracks',
         'cc',
-        // 'dvr',
-        // 'duration',
         'fullscreen',
         'gear',
         'multicamera',
@@ -46,11 +53,15 @@ const T = 'plugins.media_control';
 const LEFT_ORDER = [
     'playpause',
     'playstop',
-    'dvr',
     'volume',
     'position',
     'duration',
+    'dvr',
 ];
+export var ExtendedEvents;
+(function (ExtendedEvents) {
+    ExtendedEvents["MEDIACONTROL_VOLUME"] = "mediacontrol:volume";
+})(ExtendedEvents || (ExtendedEvents = {}));
 const { Config, Fullscreen, formatTime, extend, removeArrayItem } = Utils;
 function orderByOrderPattern(arr, order) {
     const arrWithoutDuplicates = [...new Set(arr)];
@@ -531,14 +542,15 @@ export class MediaControl extends UICorePlugin {
         // if the container is not ready etc
         this.intendedVolume = value;
         this.persistConfig && !isInitialVolume && Config.persist('volume', value);
-        // TODO
         const setWhenContainerReady = () => {
             if (this.core.activeContainer && this.core.activeContainer.isReady) {
                 this.core.activeContainer.setVolume(value);
+                this.trigger(ExtendedEvents.MEDIACONTROL_VOLUME, value);
             }
             else {
                 this.listenToOnce(this.core.activeContainer, Events.CONTAINER_READY, () => {
                     this.core.activeContainer.setVolume(value);
+                    this.trigger(ExtendedEvents.MEDIACONTROL_VOLUME, value);
                 });
             }
         };
@@ -696,8 +708,7 @@ export class MediaControl extends UICorePlugin {
             }
             this.$el.show();
             this.trigger(Events.MEDIACONTROL_SHOW, this.name);
-            this.container &&
-                this.container.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name);
+            this.core.activeContainer?.trigger(Events.CONTAINER_MEDIACONTROL_SHOW, this.name);
             this.$el.removeClass('media-control-hide');
             this.hideId = setTimeout(() => this.hide(), timeout);
             if (event) {
@@ -751,7 +762,7 @@ export class MediaControl extends UICorePlugin {
             right: [],
         }, this.core.activeContainer.settings);
         trace(`${T} updateSettings`, { newSettings });
-        newSettings.left.push('clips'); // TODO
+        newSettings.left.push('clips'); // TODO settings
         // TODO make order controlled via CSS
         newSettings.left = orderByOrderPattern([...newSettings.left, 'volume', 'clips'], LEFT_ORDER);
         if (this.core.activePlayback.getPlaybackType() === Playback.LIVE &&
@@ -814,7 +825,6 @@ export class MediaControl extends UICorePlugin {
      * Get a media control element DOM node
      * @param name - The name of the media control element
      * @returns The DOM node to render to or extend
-     * @deprecated  Use {@link MediaControl.putElement} instead
      * @remarks
      * Use this method to render custom media control UI in a plugin
      * @example
@@ -830,7 +840,7 @@ export class MediaControl extends UICorePlugin {
      */
     mount(name, element) {
         const panel = this.getElementLocation(name);
-        trace(`${T} putElement`, { name, panel: !!panel });
+        trace(`${T} mount`, { name, panel: !!panel });
         if (panel) {
             const current = panel.find(`[data-${name}]`);
             element.attr(`data-${name}`, '');
@@ -847,13 +857,18 @@ export class MediaControl extends UICorePlugin {
             return;
         }
     }
+    /**
+     * @deprecated  Use {@link MediaControl.mount} instead
+     * @param name
+     * @param element
+     */
     putElement(name, element) {
         this.mount(name, element);
     }
     /**
      * Toggle the visibility of a media control element
      * @param name - The name of the media control element
-     * @param show - Whether to show or hide the element
+     * @param show - Visibility state
      */
     toggleElement(area, show) {
         this.$el.find(`[data-${area}]`).toggle(show);
@@ -1069,6 +1084,7 @@ export class MediaControl extends UICorePlugin {
                 width: this.options.width,
                 height: this.options.height,
             });
+            // TODO check out
             this.hideVolumeBar(0);
         }, 0);
         this.parseColors();

package/lib/plugins/picture-in-picture/PictureInPicture.js

@@ -80,7 +80,7 @@ export class PictureInPicture extends UICorePlugin {
         this.$el.html(PictureInPicture.buttonTemplate({ pipIcon }));
         const mediaControl = this.core.getPlugin('media_control');
         if (mediaControl) {
-            mediaControl.putElement('pip', this.$el);
+            mediaControl.mount('pip', this.$el);
         }
         return this;
     }

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -248,7 +248,7 @@ export class ClosedCaptions extends UICorePlugin {
         this.$line = $(ClosedCaptions.templateString());
         this.resizeFont();
         this.core.activeContainer.$el.append(this.$line);
-        mediaControl.putElement('cc', this.$el);
+        mediaControl.mount('cc', this.$el);
         this.updateSelection();
         this.renderIcon();
         return this;

package/lib/plugins/vast-ads/VastAds.js

@@ -440,7 +440,7 @@ export class VastAds extends UICorePlugin {
         // Attempt to get poster plugin. (May interfere with media control)
         this._posterPlugin = this._container?.getPlugin('poster');
         // Attempt to get click-to-pause plugin. (May interfere with advert click handling)
-        this._clickToPausePlugin = this._container?.getPlugin('click_to_pause_custom');
+        this._clickToPausePlugin = this._container?.getPlugin('click_to_pause');
         assert(this.playback, 'playback is not defined');
         this._contentElement = this.playback.el;
         if (this._pluginIsReady) {

package/lib/plugins/vast-ads/rollmanager.js

@@ -56,7 +56,7 @@ export default class RollManager extends Events {
         this._playback = this.core.activePlayback;
         this._contentElement = this._playback.el;
         this._posterPlugin = this._container.getPlugin('poster');
-        this._clickToPausePlugin = this._container.getPlugin('click_to_pause_custom');
+        this._clickToPausePlugin = this._container.getPlugin('click_to_pause');
         this._adContainer = _adContainer;
         this._events = {};
         this._pr = Math.floor(Math.random() * 1000000);

package/lib/plugins/volume-fade/VolumeFade.d.ts

@@ -1,4 +1,4 @@
-import { UICorePlugin } from '@clappr/core';
+import { UICorePlugin, Core } from '@clappr/core';
 /**
  * Events emitted by the VolumeFade plugin.
  * @beta
@@ -6,30 +6,45 @@ import { UICorePlugin } from '@clappr/core';
 export declare enum VolumeFadeEvents {
     FADE = "core:volume:fade"
 }
+/**
+ * @beta
+ */
+export type VolumeFadeSettings = {
+    /**
+     * Initial active volume level, effective until volume is changed via media control
+     */
+    level?: number;
+    /**
+     * Fade duration, ms
+     */
+    duration?: number;
+};
 /**
  * `PLUGIN` that applies fade effect to the player's volume change.
  * @beta
+ *
+ * @remarks
+ * Depends on {@link MediaControl} plugin.
+ * Configuration options - {@link VolumeFadeSettings}
  */
 export declare class VolumeFade extends UICorePlugin {
-    private _aboveBorderVolume;
-    private container;
-    private delay;
-    private interval;
+    private activeVolume;
+    private duration;
+    private timerId;
     /**
      * @internal
      */
     get name(): string;
+    constructor(core: Core);
     /**
      * @internal
      */
     bindEvents(): void;
-    private unBindEvents;
-    private _onUserChangeVolume;
-    private _onVolumeConfig;
     private onCoreReady;
+    private onVolumeChange;
     private onEnter;
-    private numberTo;
-    private clearCurrentInterval;
     private onLeave;
+    private fade;
+    private stopFade;
 }
 //# sourceMappingURL=VolumeFade.d.ts.map

package/lib/plugins/volume-fade/VolumeFade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeFade.d.ts","sourceRoot":"","sources":["../../../src/plugins/volume-fade/VolumeFade.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAiC,MAAM,cAAc,CAAC;AAK3E;;;GAGG;AACH,oBAAY,gBAAgB;IAC1B,IAAI,qBAAqB;CAC1B;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAO,CAAC,SAAS,CAA0B;IAE3C,OAAO,CAAC,KAAK,CAAK;IAElB,OAAO,CAAC,QAAQ,CAAwB;IAExC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,WAAW;IAwBnB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IA0BhB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,OAAO;CAGhB"}
+{"version":3,"file":"VolumeFade.d.ts","sourceRoot":"","sources":["../../../src/plugins/volume-fade/VolumeFade.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAsB,IAAI,EAAE,MAAM,cAAc,CAAA;AAMrE;;;GAGG;AACH,oBAAY,gBAAgB;IAC1B,IAAI,qBAAqB;CAC1B;AAMD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;GAOG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,YAAY,CAAI;IAExB,OAAO,CAAC,QAAQ,CAAI;IAEpB,OAAO,CAAC,OAAO,CAAuB;IAEtC;;OAEG;IACH,IAAI,IAAI,WAEP;gBAEW,IAAI,EAAE,IAAI;IAOtB;;OAEG;IACM,UAAU;IAInB,OAAO,CAAC,WAAW;IA6BnB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,IAAI;IAqBZ,OAAO,CAAC,QAAQ;CAOjB"}

package/lib/plugins/volume-fade/VolumeFade.js

@@ -1,5 +1,6 @@
 import { UICorePlugin, Events, Browser, $ } from '@clappr/core';
-import { reportError } from '@gcorevideo/utils';
+import { reportError, trace } from '@gcorevideo/utils';
+import { ExtendedEvents } from '../media-control/MediaControl.js';
 /**
  * Events emitted by the VolumeFade plugin.
  * @beta
@@ -8,98 +9,99 @@ export var VolumeFadeEvents;
 (function (VolumeFadeEvents) {
     VolumeFadeEvents["FADE"] = "core:volume:fade";
 })(VolumeFadeEvents || (VolumeFadeEvents = {}));
+const T = 'plugins.volume_fade';
+const DEFAULT_DURATION = 600;
 /**
  * `PLUGIN` that applies fade effect to the player's volume change.
  * @beta
+ *
+ * @remarks
+ * Depends on {@link MediaControl} plugin.
+ * Configuration options - {@link VolumeFadeSettings}
  */
 export class VolumeFade extends UICorePlugin {
-    _aboveBorderVolume = 0;
-    container = null;
-    delay = 0;
-    interval = null;
+    activeVolume = 0;
+    duration = 0;
+    timerId = null;
     /**
      * @internal
      */
     get name() {
         return 'volume_fade';
     }
+    constructor(core) {
+        super(core);
+        if (typeof this.options.volumeFade?.level === 'number') {
+            this.activeVolume = this.options.volumeFade.level;
+        }
+    }
     /**
      * @internal
      */
     bindEvents() {
-        // TODO on container changed
         this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
-        if (this.core.mediaControl) {
-            this.listenTo(this.core.mediaControl, 'mediacontrol:volume:user', this._onUserChangeVolume);
-        }
-        // this.listenTo(this.core, 'core:volume:config', this._onVolumeConfig);
-    }
-    unBindEvents() {
-        this.core.$el.off('mouseleave.volume');
-        this.core.$el.off('mouseenter.volume');
-    }
-    _onUserChangeVolume(volume) {
-        this._aboveBorderVolume = volume;
-    }
-    _onVolumeConfig(value) {
-        this._aboveBorderVolume = value;
-        this.container?.setVolume(0);
     }
     onCoreReady() {
-        this.unBindEvents();
-        this.container = this.core.activeContainer;
-        if (this.core && this.core.$el) {
-            // TODO find out why options.playerElement instead of this.core.$el or this.container.$el
-            $(this.options.playerElement).on('mouseenter.volume', () => {
-                this.onEnter();
-            });
-            $(this.options.playerElement).on('mouseleave.volume', () => {
-                this.onLeave();
-            });
-        }
-        if (!this._aboveBorderVolume) {
-            this._aboveBorderVolume = this.container?.volume && !isNaN(this.container.volume) ? this.container.volume : 80;
-        }
-        if (this.options.mute || Browser.isMobile) {
+        const mediaControl = this.core.getPlugin('media_control');
+        if (Browser.isMobile) {
             this.destroy();
             return;
         }
-        this.delay = this.options.volumeFade && this.options.volumeFade.delay || 600;
-        this.container?.setVolume(0);
+        if (mediaControl) {
+            this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_VOLUME, this.onVolumeChange);
+        }
+        $(this.core.$el).on('mouseenter', () => this.onEnter());
+        $(this.core.$el).on('mouseleave', () => this.onLeave());
+        if (!this.activeVolume) {
+            this.activeVolume =
+                this.core.activeContainer?.volume &&
+                    !isNaN(this.core.activeContainer.volume)
+                    ? this.core.activeContainer.volume
+                    : 80;
+        }
+        this.duration = this.options.volumeFade?.duration || DEFAULT_DURATION;
+        // TODO check if mute must be respected
+        this.core.activeContainer?.setVolume(this.activeVolume);
+        this.core.activePlayback.volume(0);
+    }
+    onVolumeChange(volume) {
+        trace(`${T} onVolumeChange`, { volume });
+        this.activeVolume = volume;
     }
     onEnter() {
-        this.numberTo(this.delay);
+        trace(`${T} onEnter`);
+        this.fade(this.duration, 1);
+    }
+    onLeave() {
+        trace(`${T} onLeave`);
+        this.fade(this.duration, 0);
     }
-    numberTo(duration, contra = 0) {
-        this.clearCurrentInterval();
+    fade(duration, to) {
+        this.stopFade();
         const start = new Date().getTime();
-        this.interval = setInterval(() => {
-            let now = (new Date().getTime()) - start;
-            if (now > duration) {
-                now = duration;
-            }
-            const progress = Math.abs(contra - now / duration);
+        const from = 1 - to;
+        this.timerId = setInterval(() => {
+            const delta = new Date().getTime() - start;
+            const progress = Math.min(1, delta / duration);
+            const normVol = progress * to + (1 - progress) * from;
+            const volume = normVol * this.activeVolume;
+            this.core.activePlayback.volume(volume);
             try {
-                this.container?.setVolume(progress * this._aboveBorderVolume);
-                this.core.trigger(VolumeFadeEvents.FADE, progress * this._aboveBorderVolume);
+                this.core.trigger(VolumeFadeEvents.FADE, volume);
             }
             catch (error) {
-                // LogManager.exception(error);
                 reportError(error);
-                this.clearCurrentInterval();
             }
-            if (progress >= 1 || progress <= 0) {
-                this.clearCurrentInterval();
+            if (progress >= 1) {
+                this.stopFade();
             }
         }, 10);
     }
-    clearCurrentInterval() {
-        if (this.interval !== null) {
-            clearInterval(this.interval);
-            this.interval = null;
+    stopFade() {
+        trace(`${T} stopFade`);
+        if (this.timerId !== null) {
+            clearInterval(this.timerId);
+            this.timerId = null;
         }
     }
-    onLeave() {
-        this.numberTo(this.delay, 1);
-    }
 }

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,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,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EAAE,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;EAmB9G;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAc/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAY7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,YAAY,EAAE,MAAM,cAAc,CAAA;AACxD,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,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;EAoBrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAc/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -75,7 +75,7 @@ export function createMockCore(options = {}, container = createMockContainer(opt
             ...options,
         },
         configure: vi.fn(),
-        getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+        getPlaybackType: vi.fn(),
         getPlugin: vi.fn(),
         load: vi.fn(),
         trigger: emitter.emit,
@@ -112,7 +112,7 @@ export function createMockPlayback(name = 'mock') {
         getDuration: vi.fn().mockImplementation(() => 100),
         enterPiP: vi.fn(),
         exitPiP: vi.fn(),
-        getPlaybackType: vi.fn().mockImplementation(() => Playback.LIVE),
+        getPlaybackType: vi.fn(),
         getStartTimeOffset: vi.fn().mockImplementation(() => 0),
         getCurrentTime: vi.fn().mockImplementation(() => 0),
         isHighDefinitionInUse: vi.fn().mockImplementation(() => false),
@@ -138,7 +138,7 @@ export function createMockContainer(options = {}, playback = createMockPlayback(
         $el: $(el),
         getDuration: vi.fn().mockReturnValue(0),
         getPlugin: vi.fn(),
-        getPlaybackType: vi.fn().mockReturnValue(Playback.LIVE),
+        getPlaybackType: vi.fn(),
         isDvrInUse: vi.fn().mockReturnValue(false),
         isDvrEnabled: vi.fn().mockReturnValue(false),
         isPlaying: vi.fn().mockReturnValue(false),
@@ -169,7 +169,10 @@ export function createMockBottomGear(core) {
         if (existing.length) {
             return existing;
         }
-        return $('<li></li>').attr(`data-${name}`, '').append($el).appendTo(plugin.$el);
+        return $('<li></li>')
+            .attr(`data-${name}`, '')
+            .append($el)
+            .appendTo(plugin.$el);
     });
     plugin.refresh = vi.fn();
     return plugin;

package/lib/types.d.ts

@@ -145,7 +145,7 @@ export interface PlayerConfig extends Record<string, unknown> {
     mute?: boolean;
     /**
      * Stream type.
-     * @remark
+     * @remarks
      * Should only be set if known in advance, as it should not change once determined.
      * Otherwise it might cause inconsistencies in the UI plugins behavior, for instance, glitches with rendering of the DVR controls or seek bar.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.18",
+  "version": "2.22.21",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
@@ -17,7 +17,7 @@
     "format": "prettier --write src/",
     "lint": "oxlint -c ../../.oxlintrc.json --tsconfig=./tsconfig.json --fix --ignore-path=../../.gitignore src",
     "ship": "npm run build && npm run build:bundle && npm publish --access public",
-    "test": "NODE_OPTIONS='--trace-deprecation' vitest"
+    "test": "NODE_OPTIONS='--trace-deprecation' vitest --dom"
   },
   "repository": {
     "type": "git",
@@ -43,7 +43,7 @@
     "@types/sinonjs__fake-timers": "^8.1.5",
     "assert": "^2.1.0",
     "eventemitter3": "^5.0.1",
-    "jsdom": "^26.0.0",
+    "happy-dom": "^17.4.4",
     "nodemon": "^3.1.9",
     "rollup": "^4.27.4",
     "rollup-plugin-polyfill-node": "^0.13.0",

package/src/playback/__tests__/HTML5Video.test.ts

@@ -33,10 +33,10 @@ describe('HTML5Video', () => {
         }
         const html5Video = new HTML5Video({}, i18n, playerError)
         html5Video.load('https://example.com/video.mp4')
-        ;(html5Video.el as any).error = {
+        vi.spyOn(html5Video.el as HTMLVideoElement, 'error', 'get').mockReturnValue({
           code: MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
           message: 'Media source not supported',
-        }
+        } as any)
         html5Video.el.dispatchEvent(new Event('error', { bubbles: true }))
         expect(playerError.createError).toHaveBeenCalledWith(expect.objectContaining({
           code: PlaybackErrorCode.MediaSourceUnavailable,