@gcorevideo/player 2.22.20 → 2.22.21

package/dist/plugins/index.js

@@ -14476,6 +14476,10 @@ const LEFT_ORDER = [
     'duration',
     'dvr',
 ];
+var ExtendedEvents;
+(function (ExtendedEvents) {
+    ExtendedEvents["MEDIACONTROL_VOLUME"] = "mediacontrol:volume";
+})(ExtendedEvents || (ExtendedEvents = {}));
 const { Config, Fullscreen, formatTime: formatTime$1, extend, removeArrayItem } = Utils;
 function orderByOrderPattern(arr, order) {
     const arrWithoutDuplicates = [...new Set(arr)];
@@ -14953,14 +14957,15 @@ 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);
                 });
             }
         };
@@ -16636,7 +16641,7 @@ class Poster extends UIContainerPlugin {
     }
 }
 
-const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' aria-haspopup=\"menu\">\n    <span class=\"gear-option_icon<%= isHd ? '' : ' hidden' %>\"><%= hdIcon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('quality') %></span>\n    <span class='gear-option_value'><%= currentText %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n</button>\n";
+const buttonHtml = "<button class='gplayer-lite-btn gcore-skin-text-color gear-option' aria-haspopup=\"menu\" id=\"quality-levels\">\n    <span class=\"gear-option_icon<%= isHd ? '' : ' hidden' %>\"><%= hdIcon %></span>\n    <span class=\"gear-option_label\"><%= i18n.t('quality') %></span>\n    <span class='gear-option_value'><%= currentText %></span>\n    <span class=\"gear-option_arrow-right-icon\"><%= arrowRightIcon %></span>\n</button>\n";
 
 const listHtml = "<button class=\"gplayer-lite-btn go-back gcore-skin-text-color\" id=\"level-selector-back-button\">\n    <span class=\"arrow-left-icon\"><%= arrowLeftIcon %></span>\n    <%= i18n.t('quality') %>\n</button>\n<ul class=\"gear-sub-menu quality-levels\" id=\"level-selector-menu\" role=\"menu\">\n    <% if (!removeAuto) { %>\n        <li>\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color\"\n                data-id=\"-1\"\n                id=\"level_selector_auto\"\n               aria-checked=\"<%= current === -1 %>\"\n               role=\"menuitemradio\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= i18n.t('auto') %>\n            </a>\n        </li>\n    <% } %>\n    <% for (const item of levels.slice().reverse()) {\n        var disabled = maxLevel >= 0 && item.level > maxLevel\n        var checked = item.level === current\n    %>\n        <li class=\"<%= disabled ? ' disabled' : ''%><%=checked ? ' current' : ''%>\">\n            <a href=\"#\"\n                class=\"gear-sub-menu_btn gcore-skin-text-color<%= checked ? ' gcore-skin-active' : '' %>\"\n                data-id=\"<%= item.level %>\"\n                aria-disabled=\"<%= disabled %>\"\n                aria-checked=\"<%= checked %>\"\n                role=\"menuitemradio\"\n                id=\"level_selector_<%= item.width > item.height ? item.height : item.width %>\"\n            >\n                <span class=\"check-icon\"><%= checkIcon %></span>\n                <%= labels[item.level] %>\n            </a>\n        </li>\n    <% } %>\n</ul>\n";
 
@@ -18769,98 +18774,95 @@ var VolumeFadeEvents;
 (function (VolumeFadeEvents) {
     VolumeFadeEvents["FADE"] = "core:volume:fade";
 })(VolumeFadeEvents || (VolumeFadeEvents = {}));
+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}
  */
 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) {
+        this.activeVolume = volume;
     }
     onEnter() {
-        this.numberTo(this.delay);
+        this.fade(this.duration, 1);
     }
-    numberTo(duration, contra = 0) {
-        this.clearCurrentInterval();
+    onLeave() {
+        this.fade(this.duration, 0);
+    }
+    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) {
-                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() {
+        if (this.timerId !== null) {
+            clearInterval(this.timerId);
+            this.timerId = null;
         }
     }
-    onLeave() {
-        this.numberTo(this.delay, 1);
-    }
 }
 
-export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, NerdStats as ClapprNerdStats, ClapprStats, ClapprStatsChronograph, ClapprStatsCounter, ClapprStatsEvents, ClickToPause, Clips, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, Logo, MediaControl, MultiCamera, NerdStats, PictureInPicture, PlaybackRate, Poster, QualityLevels, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };
+export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, NerdStats as ClapprNerdStats, ClapprStats, ClapprStatsChronograph, ClapprStatsCounter, ClapprStatsEvents, ClickToPause, Clips, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, ExtendedEvents, Favicon, GearEvents, GoogleAnalytics, QualityLevels as LevelSelector, Logo, MediaControl, MultiCamera, NerdStats, PictureInPicture, PlaybackRate, Poster, QualityLevels, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };

package/docs/api/{player.bitratetrackrecord.md → player.clapprstatsbitratetrack.md}

@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [BitrateTrackRecord](./player.bitratetrackrecord.md)
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [ClapprStatsBitrateTrack](./player.clapprstatsbitratetrack.md)
 
-## BitrateTrackRecord type
+## ClapprStatsBitrateTrack type
 
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
@@ -11,7 +11,7 @@
 **Signature:**
 
 ```typescript
-export type BitrateTrackRecord = {
+export type ClapprStatsBitrateTrack = {
     start: number;
     end?: number;
     time?: number;

package/docs/api/player.clapprstatsmetrics.md

@@ -35,7 +35,7 @@ export type ClapprStatsMetrics = {
     extra: {
         playbackName: string;
         playbackType: string;
-        bitratesHistory: BitrateTrackRecord[];
+        bitratesHistory: ClapprStatsBitrateTrack[];
         bitrateWeightedMean: number;
         bitrateMostUsed: number;
         buffersize: number;
@@ -48,5 +48,5 @@ export type ClapprStatsMetrics = {
     };
 };
 ```
-**References:** [ClapprStatsCounter.Play](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Pause](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Error](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Buffering](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.DecodedFrames](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.DroppedFrames](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Fps](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.ChangeLevel](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Seek](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Fullscreen](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.DvrUsage](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsChronograph.Startup](./player.clapprstatschronograph.md)<!-- -->, [ClapprStatsChronograph.Watch](./player.clapprstatschronograph.md)<!-- -->, [ClapprStatsChronograph.Pause](./player.clapprstatschronograph.md)<!-- -->, [ClapprStatsChronograph.Buffering](./player.clapprstatschronograph.md)<!-- -->, [ClapprStatsChronograph.Session](./player.clapprstatschronograph.md)<!-- -->, [BitrateTrackRecord](./player.bitratetrackrecord.md)
+**References:** [ClapprStatsCounter.Play](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Pause](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Error](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Buffering](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.DecodedFrames](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.DroppedFrames](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Fps](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.ChangeLevel](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Seek](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.Fullscreen](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsCounter.DvrUsage](./player.clapprstatscounter.md)<!-- -->, [ClapprStatsChronograph.Startup](./player.clapprstatschronograph.md)<!-- -->, [ClapprStatsChronograph.Watch](./player.clapprstatschronograph.md)<!-- -->, [ClapprStatsChronograph.Pause](./player.clapprstatschronograph.md)<!-- -->, [ClapprStatsChronograph.Buffering](./player.clapprstatschronograph.md)<!-- -->, [ClapprStatsChronograph.Session](./player.clapprstatschronograph.md)<!-- -->, [ClapprStatsBitrateTrack](./player.clapprstatsbitratetrack.md)
 

package/docs/api/player.gearevents.md

@@ -45,7 +45,7 @@ RENDERED
 
 </td><td>
 
-**_(BETA)_** Use this event to accurately attach an item to the gear menu
+**_(BETA)_** Subscribe to this event to accurately attach an item to the gear menu
 
 
 </td></tr>

package/docs/api/player.md

@@ -688,7 +688,7 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-[BitrateTrackRecord](./player.bitratetrackrecord.md)
+[ClapprStatsBitrateTrack](./player.clapprstatsbitratetrack.md)
 
 
 </td><td>

package/docs/api/player.mediacontrol.mount.md

@@ -7,11 +7,6 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
-> Warning: This API is now obsolete.
-> 
-> Use [MediaControl.putElement()](./player.mediacontrol.putelement.md) instead
-> 
-
 Get a media control element DOM node
 
 **Signature:**

package/docs/api/player.mediacontrol.putelement.md

@@ -7,6 +7,11 @@
 > This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
+> Warning: This API is now obsolete.
+> 
+> Use [MediaControl.mount()](./player.mediacontrol.mount.md) instead
+> 
+
 **Signature:**
 
 ```typescript

package/docs/api/player.mediacontrol.toggleelement.md

@@ -59,7 +59,7 @@ boolean
 
 </td><td>
 
-Whether to show or hide the element
+Visibility state
 
 
 </td></tr>

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

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

@@ -58,6 +58,10 @@ const LEFT_ORDER = [
     '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)];
@@ -538,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);
                 });
             }
         };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.22.20",
+  "version": "2.22.21",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/plugins/level-selector/__tests__/__snapshots__/QualityLevels.test.ts.snap

@@ -154,7 +154,7 @@ exports[`QualityLevels > options.restrictResolution > given vertical video forma
 `;
 
 exports[`QualityLevels > options.restrictResolution > initially > should render the restricted quality level label 1`] = `
-"<button class="gplayer-lite-btn gcore-skin-text-color gear-option" aria-haspopup="menu">
+"<button class="gplayer-lite-btn gcore-skin-text-color gear-option" aria-haspopup="menu" id="quality-levels">
     <span class="gear-option_icon hidden">/assets/icons/new/hd.svg</span>
     <span class="gear-option_label">quality</span>
     <span class="gear-option_value">360p</span>

package/src/plugins/media-control/MediaControl.ts

@@ -136,6 +136,10 @@ const LEFT_ORDER = [
   'dvr',
 ]
 
+export enum ExtendedEvents {
+  MEDIACONTROL_VOLUME = 'mediacontrol:volume',
+}
+
 const { Config, Fullscreen, formatTime, extend, removeArrayItem } = Utils
 
 function orderByOrderPattern(arr: string[], order: string[]): string[] {
@@ -793,16 +797,17 @@ 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)
           },
         )
       }