@gcorevideo/player 2.22.21 → 2.22.23

package/docs/api/player.extendedevents.md

@@ -0,0 +1,45 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [ExtendedEvents](./player.extendedevents.md)
+
+## ExtendedEvents enum
+
+**Signature:**
+
+```typescript
+export declare enum ExtendedEvents 
+```
+
+## Enumeration Members
+
+<table><thead><tr><th>
+
+Member
+
+
+</th><th>
+
+Value
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+MEDIACONTROL\_VOLUME
+
+
+</td><td>
+
+`"mediacontrol:volume"`
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>

package/docs/api/player.md

@@ -358,7 +358,7 @@ Description
 
 </td><td>
 
-**_(BETA)_** `PLUGIN` that applies fade effect to the player's volume change.
+**_(BETA)_** `PLUGIN` that mutes the sound and fades it in when the mouse is over the player.
 
 
 </td></tr>
@@ -409,6 +409,15 @@ Description
 **_(BETA)_**
 
 
+</td></tr>
+<tr><td>
+
+[ExtendedEvents](./player.extendedevents.md)
+
+
+</td><td>
+
+
 </td></tr>
 <tr><td>
 
@@ -1116,6 +1125,17 @@ Localization strings for the player UI.
 Preferred streaming media delivery protocol
 
 
+</td></tr>
+<tr><td>
+
+[VolumeFadeSettings](./player.volumefadesettings.md)
+
+
+</td><td>
+
+**_(BETA)_**
+
+
 </td></tr>
 <tr><td>
 

package/docs/api/player.volumefade._constructor_.md

@@ -0,0 +1,50 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [VolumeFade](./player.volumefade.md) &gt; [(constructor)](./player.volumefade._constructor_.md)
+
+## VolumeFade.(constructor)
+
+> 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.
+> 
+
+Constructs a new instance of the `VolumeFade` class
+
+**Signature:**
+
+```typescript
+constructor(core: Core);
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+core
+
+
+</td><td>
+
+Core
+
+
+</td><td>
+
+
+</td></tr>
+</tbody></table>

package/docs/api/player.volumefade.md

@@ -7,7 +7,7 @@
 > 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.
 > 
 
-`PLUGIN` that applies fade effect to the player's volume change.
+`PLUGIN` that mutes the sound and fades it in when the mouse is over the player.
 
 **Signature:**
 
@@ -16,3 +16,42 @@ export declare class VolumeFade extends UICorePlugin
 ```
 **Extends:** UICorePlugin
 
+## Remarks
+
+When the user moves the mouse over and away from the player, the sound is unmuted and unmuted with a fade effect.
+
+Depends on [MediaControl](./player.mediacontrol.md) plugin. Configuration options - [VolumeFadeSettings](./player.volumefadesettings.md)
+
+## Constructors
+
+<table><thead><tr><th>
+
+Constructor
+
+
+</th><th>
+
+Modifiers
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[(constructor)(core)](./player.volumefade._constructor_.md)
+
+
+</td><td>
+
+
+</td><td>
+
+**_(BETA)_** Constructs a new instance of the `VolumeFade` class
+
+
+</td></tr>
+</tbody></table>

package/docs/api/player.volumefadesettings.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@gcorevideo/player](./player.md) &gt; [VolumeFadeSettings](./player.volumefadesettings.md)
+
+## VolumeFadeSettings 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.
+> 
+
+
+**Signature:**
+
+```typescript
+export type VolumeFadeSettings = {
+    level?: number;
+    duration?: number;
+};
+```

package/lib/index.plugins.d.ts

@@ -1,6 +1,6 @@
 import '../assets/style/main.scss';
-export * from "./plugins/audio-selector/AudioSelector.js";
-export { AudioTracks as AudioSelector } from "./plugins/audio-selector/AudioSelector.js";
+export * from "./plugins/audio-selector/AudioTracks.js";
+export { AudioTracks as AudioSelector } from "./plugins/audio-selector/AudioTracks.js";
 export * from "./plugins/big-mute-button/BigMuteButton.js";
 export * from "./plugins/bottom-gear/BottomGear.js";
 export * from "./plugins/clappr-stats/ClapprStats.js";

package/lib/index.plugins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.plugins.d.ts","sourceRoot":"","sources":["../src/index.plugins.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAC;AACzF,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,0CAA0C,CAAC;AACzD,OAAO,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,0CAA0C,CAAC;AACxF,cAAc,0CAA0C,CAAC;AACzD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAE7C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,yCAAyC,CAAC;AACxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,kDAAkD,CAAC;AACjE,cAAc,yCAAyC,CAAC;AACxD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,aAAa,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC3F,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,sDAAsD,CAAC;AACrE,OAAO,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,sDAAsD,CAAC;AACrG,cAAc,iDAAiD,CAAC;AAChE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAC;AACpF,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC"}
+{"version":3,"file":"index.plugins.d.ts","sourceRoot":"","sources":["../src/index.plugins.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,yCAAyC,CAAC;AACvF,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,0CAA0C,CAAC;AACzD,OAAO,EAAE,SAAS,IAAI,eAAe,EAAE,MAAM,0CAA0C,CAAC;AACxF,cAAc,0CAA0C,CAAC;AACzD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC;AAE7C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,yCAAyC,CAAC;AACxD,cAAc,uCAAuC,CAAC;AACtD,cAAc,kDAAkD,CAAC;AACjE,cAAc,yCAAyC,CAAC;AACxD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,aAAa,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC3F,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,sDAAsD,CAAC;AACrE,OAAO,EAAE,kBAAkB,IAAI,OAAO,EAAE,MAAM,sDAAsD,CAAC;AACrG,cAAc,iDAAiD,CAAC;AAChE,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAC;AACpF,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,qCAAqC,CAAC"}

package/lib/index.plugins.js

@@ -1,6 +1,6 @@
 import '../assets/style/main.scss';
-export * from "./plugins/audio-selector/AudioSelector.js";
-export { AudioTracks as AudioSelector } from "./plugins/audio-selector/AudioSelector.js";
+export * from "./plugins/audio-selector/AudioTracks.js";
+export { AudioTracks as AudioSelector } from "./plugins/audio-selector/AudioTracks.js";
 export * from "./plugins/big-mute-button/BigMuteButton.js";
 export * from "./plugins/bottom-gear/BottomGear.js";
 export * from "./plugins/clappr-stats/ClapprStats.js";

package/lib/plugins/audio-selector/AudioTracks.d.ts

@@ -0,0 +1,67 @@
+import { UICorePlugin } from '@clappr/core';
+import '../../../assets/audio-selector/style.scss';
+/**
+ * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
+ * @beta
+ * @remarks
+ * The plugin is activated when there are multiple audio tracks available.
+ * The plugin adds a button showing the current audio track and a dropdown to switch to another audio track.
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ */
+export declare class AudioTracks extends UICorePlugin {
+    private currentTrack;
+    private tracks;
+    /**
+     * @internal
+     */
+    get name(): string;
+    /**
+     * @internal
+     */
+    get supportedVersion(): {
+        min: string;
+    };
+    /**
+     * @internal
+     */
+    static get version(): string;
+    private static readonly template;
+    /**
+     * @internal
+     */
+    get attributes(): {
+        class: string;
+    };
+    /**
+     * @internal
+     */
+    get events(): {
+        'click [data-audiotracks-select]': string;
+        'click #audiotracks-button': string;
+    };
+    /**
+     * @internal
+     */
+    bindEvents(): void;
+    private onCoreReady;
+    private onActiveContainerChanged;
+    private shouldRender;
+    /**
+     * @internal
+     */
+    render(): this;
+    private onTrackSelect;
+    private selectAudioTrack;
+    private hideMenu;
+    private toggleContextMenu;
+    private buttonElement;
+    private buttonElementText;
+    private trackElement;
+    private getTitle;
+    private startTrackSwitching;
+    private updateText;
+    private highlightCurrentTrack;
+}
+//# sourceMappingURL=AudioTracks.d.ts.map

package/lib/plugins/audio-selector/AudioTracks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioTracks.d.ts","sourceRoot":"","sources":["../../../src/plugins/audio-selector/AudioTracks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAY,MAAM,cAAc,CAAA;AAO7D,OAAO,2CAA2C,CAAA;AAUlD;;;;;;;;;GASG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,MAAM,CAAmB;IAEjC;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,wBAAwB;IAwBhC,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACM,MAAM;IAmBf,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,qBAAqB;CAe9B"}

package/lib/plugins/audio-selector/AudioTracks.js

@@ -0,0 +1,176 @@
+import { Events, UICorePlugin, template } from '@clappr/core';
+import assert from 'assert';
+import { CLAPPR_VERSION } from '../../build.js';
+import pluginHtml from '../../../assets/audio-selector/track-selector.ejs';
+import '../../../assets/audio-selector/style.scss';
+import audioArrow from '../../../assets/icons/old/quality-arrow.svg';
+import { ExtendedEvents } from '../media-control/MediaControl.js';
+import { trace } from '@gcorevideo/utils';
+const VERSION = '2.22.4';
+const T = 'plugins.audiotracks';
+/**
+ * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
+ * @beta
+ * @remarks
+ * The plugin is activated when there are multiple audio tracks available.
+ * The plugin adds a button showing the current audio track and a dropdown to switch to another audio track.
+ * Depends on:
+ *
+ * - {@link MediaControl}
+ */
+export class AudioTracks extends UICorePlugin {
+    currentTrack = null;
+    tracks = [];
+    /**
+     * @internal
+     */
+    get name() {
+        return 'audio_selector'; // TODO rename to audiotracks
+    }
+    /**
+     * @internal
+     */
+    get supportedVersion() {
+        return { min: CLAPPR_VERSION };
+    }
+    /**
+     * @internal
+     */
+    static get version() {
+        return VERSION;
+    }
+    static template = template(pluginHtml);
+    /**
+     * @internal
+     */
+    get attributes() {
+        return {
+            class: 'media-control-audiotracks',
+        };
+    }
+    /**
+     * @internal
+     */
+    get events() {
+        return {
+            'click [data-audiotracks-select]': 'onTrackSelect',
+            'click #audiotracks-button': 'toggleContextMenu',
+        };
+    }
+    /**
+     * @internal
+     */
+    bindEvents() {
+        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, () => {
+            mediaControl.mount('audiotracks', this.$el);
+        });
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hideMenu);
+    }
+    onActiveContainerChanged() {
+        this.currentTrack = null;
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_AVAILABLE, (tracks) => {
+            this.currentTrack =
+                tracks.find((track) => track.kind === 'main') ?? null; // TODO test
+            this.tracks = tracks;
+            this.render();
+        });
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_CHANGED, (track) => {
+            this.currentTrack = track;
+            this.highlightCurrentTrack();
+            this.buttonElement().removeClass('changing');
+            this.updateText();
+        });
+    }
+    shouldRender() {
+        // Render is called from the parent class constructor so tracks aren't available
+        // Only care if we have at least 2 to choose from
+        return this.tracks?.length > 1;
+    }
+    /**
+     * @internal
+     */
+    render() {
+        if (!this.shouldRender()) {
+            return this;
+        }
+        this.$el.html(AudioTracks.template({
+            tracks: this.tracks,
+            title: this.getTitle(),
+            icon: audioArrow,
+            current: this.currentTrack?.id,
+        }));
+        this.updateText();
+        this.highlightCurrentTrack();
+        return this;
+    }
+    onTrackSelect(event) {
+        const id = event.currentTarget?.dataset?.audiotracksSelect;
+        if (id) {
+            this.selectAudioTrack(id);
+        }
+        this.hideMenu();
+        event.stopPropagation();
+        return false;
+    }
+    selectAudioTrack(id) {
+        this.startTrackSwitching();
+        this.core.activeContainer.switchAudioTrack(id);
+        this.updateText();
+    }
+    hideMenu() {
+        trace(`${T} hideMenu`);
+        this.$el.find('#audiotracks-select').addClass('hidden');
+    }
+    toggleContextMenu() {
+        this.core.getPlugin('media_control').trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE);
+        this.$el.find('#audiotracks-select').toggleClass('hidden'); // TODO use plain CSS display: none
+        const open = !this.$el.find('#audiotracks-select').hasClass('hidden'); // TODO hold state
+        this.$el.find('#audiotracks-button').attr('aria-expanded', open);
+    }
+    buttonElement() {
+        return this.$('button');
+    }
+    buttonElementText() {
+        return this.$('button .audio-text');
+    }
+    trackElement(id) {
+        return this.$('#audiotracks-select a' +
+            (id !== undefined ? `[data-audiotracks-select="${id}"]` : '')).parent();
+    }
+    getTitle() {
+        if (!this.currentTrack) {
+            return '';
+        }
+        return this.currentTrack.label || this.currentTrack.language;
+    }
+    startTrackSwitching() {
+        this.buttonElement().addClass('changing');
+    }
+    updateText() {
+        if (!this.currentTrack) {
+            return;
+        }
+        this.buttonElementText().text(this.currentTrack.label);
+    }
+    highlightCurrentTrack() {
+        this.trackElement().removeClass('current');
+        this.trackElement()
+            .find('a')
+            .removeClass('gcore-skin-active')
+            .attr('aria-checked', 'false');
+        if (this.currentTrack) {
+            this.trackElement(this.currentTrack.id)
+                .addClass('current')
+                .find('a')
+                .addClass('gcore-skin-active')
+                .attr('aria-checked', 'true');
+        }
+    }
+}

package/lib/plugins/bottom-gear/BottomGear.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAOhF,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAM5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAQ;IAEpB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,sBAAsB;CAK/B"}
+{"version":3,"file":"BottomGear.d.ts","sourceRoot":"","sources":["../../../src/plugins/bottom-gear/BottomGear.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuC,MAAM,cAAc,CAAA;AAOhF,OAAO,uCAAuC,CAAA;AAC9C,OAAO,gDAAgD,CAAA;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;GAGG;AACH,oBAAY,UAAU;IACpB;;OAEG;IACH,QAAQ,aAAa;CACtB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC1C,OAAO,CAAC,IAAI,CAAQ;IAEpB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED;;OAEG;IACM,UAAU;IASnB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,WAAW;IAyB1D,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACM,MAAM;IAqBf;;;;OAIG;IACH,OAAO;IAKP,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,IAAI;IAKZ,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,sBAAsB;CAK/B"}

package/lib/plugins/bottom-gear/BottomGear.js

@@ -7,6 +7,7 @@ import '../../../assets/bottom-gear/gear.scss';
 import '../../../assets/bottom-gear/gear-sub-menu.scss';
 import gearIcon from '../../../assets/icons/new/gear.svg';
 import gearHdIcon from '../../../assets/icons/new/gear-hd.svg';
+import { ExtendedEvents } from '../media-control/MediaControl.js';
 const VERSION = '2.19.12';
 const T = 'plugins.bottom_gear';
 /**
@@ -222,9 +223,13 @@ export class BottomGear extends UICorePlugin {
         this.$el.find('#gear-options').show();
     }
     toggleGearMenu() {
+        this.core
+            .getPlugin('media_control')
+            .trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE);
         this.$el.find('#gear-options-wrapper').toggle();
     }
     hide() {
+        trace(`${T} hide`);
         this.$el.find('#gear-options-wrapper').hide();
     }
     onCoreReady() {
@@ -233,6 +238,7 @@ export class BottomGear extends UICorePlugin {
         assert(mediaControl, 'media_control plugin is required');
         this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.onMediaControlRendered);
         this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide);
+        this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.hide);
     }
     onMediaControlRendered() {
         trace(`${T} onMediaControlRendered`);

package/lib/plugins/clappr-nerd-stats/NerdStats.d.ts

@@ -10,7 +10,7 @@ import '../../../assets/clappr-nerd-stats/clappr-nerd-stats.scss';
  * - {@link BottomGear} - where the button is attached
  *
  * - {@link ClapprStats} - to get the metrics from
-*
+ *
  * The plugin is rendered as an item in the gear menu.
  *
  * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
@@ -72,6 +72,7 @@ export declare class NerdStats extends UICorePlugin {
     private updateResolution;
     private estimateQuality;
     private updateMetrics;
+    private updateCustomMetrics;
     private updateEstimatedQuality;
     private setStatsBoxSize;
     /**

package/lib/plugins/clappr-nerd-stats/NerdStats.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NerdStats.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/NerdStats.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGZ,IAAI,EAGL,MAAM,cAAc,CAAA;AAuBrB,OAAO,0DAA0D,CAAA;AAiCjE;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,gBAAgB,CAIvB;IAED,OAAO,CAAC,OAAO,CAAwB;IAEvC,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,YAAY,CAAc;IAElC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED,OAAO,CAAC,OAAO;IAKf,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,sBAAsB,GAEjC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,YAAY,GAEvB;gBAEW,IAAI,EAAE,IAAI;IAgBtB;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,wBAAwB;IAiChC;;OAEG;IACM,OAAO;IAKhB,OAAO,CAAC,MAAM,CAMb;IAED,OAAO,CAAC,IAAI;IAgBZ,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,eAAe;IA8BvB,OAAO,CAAC,aAAa;IAmFrB,OAAO,CAAC,sBAAsB;IAU9B,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACM,MAAM;IAcf,OAAO,CAAC,MAAM;IAiBd,OAAO,CAAC,qBAAqB;IAY7B,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,kBAAkB;CAU3B"}
+{"version":3,"file":"NerdStats.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/NerdStats.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGZ,IAAI,EAGL,MAAM,cAAc,CAAA;AAuBrB,OAAO,0DAA0D,CAAA;AAiCjE;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAO,CAAC,SAAS,CAAyB;IAE1C,OAAO,CAAC,gBAAgB,CAIvB;IAED,OAAO,CAAC,OAAO,CAAwB;IAEvC,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,YAAY,CAAc;IAElC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAuB;IAE7D;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAuB;IAEvD;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;;MAMlB;IAED,OAAO,CAAC,OAAO;IAKf,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,sBAAsB,GAEjC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,YAAY,GAEvB;gBAEW,IAAI,EAAE,IAAI;IAgBtB;;OAEG;IACM,UAAU;IAUnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,wBAAwB;IAiChC;;OAEG;IACM,OAAO;IAKhB,OAAO,CAAC,MAAM,CAMb;IAED,OAAO,CAAC,IAAI;IAgBZ,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,eAAe;IA8BvB,OAAO,CAAC,aAAa;IAmFrB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACM,MAAM;IAcf,OAAO,CAAC,MAAM;IAiBd,OAAO,CAAC,qBAAqB;IAa7B,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,kBAAkB;CAU3B"}

package/lib/plugins/clappr-nerd-stats/NerdStats.js

@@ -30,7 +30,7 @@ const T = 'plugins.nerd_stats';
  * - {@link BottomGear} - where the button is attached
  *
  * - {@link ClapprStats} - to get the metrics from
-*
+ *
  * The plugin is rendered as an item in the gear menu.
  *
  * When clicked, it shows an overlay window with the information about the network speed, latency, etc,
@@ -226,7 +226,10 @@ export class NerdStats extends UICorePlugin {
     updateMetrics(metrics) {
         trace(`${T} updateMetrics`, { custom: this.speedtestMetrics });
         Object.assign(this.metrics, metrics);
-        this.updateEstimatedQuality();
+        this.metrics.custom = {
+            ...this.speedtestMetrics,
+        };
+        this.updateCustomMetrics();
         this.$el
             .find('#nerd-stats-current-time')
             .text(Formatter.formatTime(this.metrics.extra.currentTime));
@@ -288,11 +291,22 @@ export class NerdStats extends UICorePlugin {
             .text(Formatter.formatFps(this.metrics.counters.fps));
         this.setStatsBoxSize();
         drawSpeedTestResults();
-        drawSummary(this.speedtestMetrics, this.$el.find('#nerd-stats-quality-vod'), this.$el.find('#nerd-stats-quality-live'));
+        this.updateEstimatedQuality();
         if (!this.open) {
             this.hide();
         }
     }
+    updateCustomMetrics() {
+        this.$el
+            .find('#nerd-stats-dl-text')
+            .text(this.metrics.custom.connectionSpeed.toFixed(2));
+        this.$el
+            .find('#nerd-stats-ping-text')
+            .text(this.metrics.custom.ping.toFixed(2));
+        this.$el
+            .find('#nerd-stats-jitter-text')
+            .text(this.metrics.custom.jitter.toFixed(2));
+    }
     updateEstimatedQuality() {
         this.estimateQuality();
         this.$el
@@ -301,6 +315,7 @@ export class NerdStats extends UICorePlugin {
         this.$el
             .find('#nerd-stats-quality-live-text')
             .html(this.metrics.custom.liveQuality);
+        drawSummary(this.speedtestMetrics, this.$el.find('#nerd-stats-quality-vod'), this.$el.find('#nerd-stats-quality-live'));
     }
     setStatsBoxSize() {
         if (this.playerWidth >= this.statsBoxWidthThreshold) {
@@ -345,6 +360,7 @@ export class NerdStats extends UICorePlugin {
         this.speedtestMetrics.ping = 0;
         this.speedtestMetrics.jitter = 0;
         if (clapprStats) {
+            clapprStats.clearMetrics();
             this.updateMetrics(clapprStats.exportMetrics());
         }
     }

package/lib/plugins/clappr-nerd-stats/speedtest/index.js

@@ -30,7 +30,7 @@ const getColor = (speedValue) => {
     }
 };
 export function drawSpeedTestResults() {
-    const canvas = document.getElementById('speedTestCanvas');
+    const canvas = document.getElementById('nerd-stats-speed-test-canvas');
     if (!canvas) {
         return;
     }

package/lib/plugins/clappr-nerd-stats/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAUpD,eAAO,MAAM,kBAAkB,eAAgB,MAAM,KAAG,MAYvD,CAAA;AAED,eAAO,MAAM,cAAc,cAAe,MAAM,KAAG,MAYlD,CAAA;AAED,eAAO,MAAM,mBAAmB,YAAa,MAAM,KAAG,MAerD,CAAA;AAED,eAAO,MAAM,WAAW,kBACP,gBAAgB,gBACjB,WAAW,iBACV,WAAW,SAe3B,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/plugins/clappr-nerd-stats/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAUpD,eAAO,MAAM,kBAAkB,eAAgB,MAAM,KAAG,MAiBvD,CAAA;AAED,eAAO,MAAM,cAAc,cAAe,MAAM,KAAG,MAiBlD,CAAA;AAED,eAAO,MAAM,mBAAmB,YAAa,MAAM,KAAG,MAerD,CAAA;AAED,eAAO,MAAM,WAAW,kBACP,gBAAgB,gBACjB,WAAW,iBACV,WAAW,SAY3B,CAAA"}