@gcorevideo/player 2.22.3 → 2.22.4

package/dist/plugins/index.js

@@ -8858,14 +8858,6 @@ Loader.registerPlayback(HTMLImg);
 Loader.registerPlayback(HTML5Audio);
 Loader.registerPlayback(HTML5Video);
 
-/**
- * @public
- * @param msg
- * @param data
- */
-function trace(msg, data = {}) {
-}
-
 const global$1 = (typeof global !== "undefined" ? global :
   typeof self !== "undefined" ? self :
   typeof window !== "undefined" ? window : {});
@@ -9775,11 +9767,12 @@ function ifError(err) {
 // export const CLAPPR_VERSION: string = process.env.CLAPPR_VERSION || '0.11.3';
 const CLAPPR_VERSION = '0.11.3';
 
-const pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"></span>\n</button>\n<ul class='gcore-skin-bg-color' id=\"audiotracks-select\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$7 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\">\n    <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' id=\"audiotracks-select\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
 
 const audioArrow = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"9px\" height=\"6px\" viewBox=\"0 0 9 6\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n     xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n  <title>quality-arrow</title>\n  <desc>Created with Sketch.</desc>\n  <defs></defs>\n  <g id=\"quality-arrow\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n    <path\n      d=\"M5.07079194,5.78553848 C4.91457318,5.94277844 4.70551573,6.00941824 4.50028717,5.99893557 C4.2950586,6.00941824 4.08676693,5.94277844 3.92978239,5.78553848 L0.221118462,1.2997069 C-0.0737061539,1.00469478 -0.0737061539,0.526236029 0.221118462,0.231972666 C0.515177299,-0.0630394586 1.23500883,0.00734414472 1.64852907,0.00734414472 L7.77475484,0.00734414472 C8.21201421,0.00734414472 8.48539703,-0.0630394586 8.77945587,0.231972666 C9.07351471,0.526236029 9.07351471,1.00469478 8.77945587,1.2997069 L5.07079194,5.78553848 Z\"\n      fill=\"#FFFFFE\"></path>\n  </g>\n</svg>\n";
 
-const VERSION$6 = '0.0.1';
+const VERSION$6 = '2.22.4';
+// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -9790,14 +9783,14 @@ const VERSION$6 = '0.0.1';
  *
  * - {@link MediaControl}
  */
-class AudioSelector extends UICorePlugin {
+class AudioTracks extends UICorePlugin {
     currentTrack = null;
     tracks = [];
     /**
      * @internal
      */
     get name() {
-        return 'audio_selector';
+        return 'audio_selector'; // TODO rename to audiotracks
     }
     /**
      * @internal
@@ -9826,52 +9819,43 @@ class AudioSelector extends UICorePlugin {
     get events() {
         return {
             'click [data-audiotracks-select]': 'onTrackSelect',
-            'click [data-audiotracks-button]': 'onShowLevelSelectMenu',
+            'click #audiotracks-button': 'toggleContextMenu',
         };
     }
     /**
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+        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);
-        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectTrackMenu);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
+            mediaControl.putElement('audiotracks', this.$el);
+        });
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
     }
-    bindPlaybackEvents() {
+    onActiveContainerChanged() {
         this.currentTrack = null;
-        this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
-        this.setupAudioTrackListeners();
-    }
-    setupAudioTrackListeners() {
-        this.listenTo(this.core.activePlayback, Events.PLAYBACK_AUDIO_AVAILABLE, (tracks) => {
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_AVAILABLE, (tracks) => {
             this.currentTrack =
-                tracks.find((track) => track.kind === 'main') ?? null;
-            this.fillTracks(tracks);
+                tracks.find((track) => track.kind === 'main') ?? null; // TODO test
+            this.tracks = tracks;
+            this.render();
         });
-        this.listenTo(this.core.activePlayback, Events.PLAYBACK_AUDIO_CHANGED, (track) => {
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_CHANGED, (track) => {
             this.currentTrack = track;
             this.highlightCurrentTrack();
             this.buttonElement().removeClass('changing');
             this.updateText();
         });
     }
-    onStop() {
-    }
-    onActiveContainerChanged() {
-        this.bindPlaybackEvents();
-    }
     shouldRender() {
-        if (!this.core.activePlayback) {
-            return false;
-        }
-        this.tracks = this.core.activePlayback.audioTracks;
+        // 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 && this.tracks.length > 1;
+        return this.tracks?.length > 1;
     }
     /**
      * @internal
@@ -9880,43 +9864,35 @@ class AudioSelector extends UICorePlugin {
         if (!this.shouldRender()) {
             return this;
         }
-        const mediaControl = this.core.getPlugin('media_control');
-        this.$el.html(AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }));
-        this.$('.audio-arrow').append(audioArrow);
-        mediaControl.putElement('audiotracks', this.el);
+        this.core.getPlugin('media_control');
+        this.$el.html(AudioTracks.template({
+            tracks: this.tracks,
+            title: this.getTitle(),
+            icon: audioArrow,
+        }));
         this.updateText();
         this.highlightCurrentTrack();
         return this;
     }
-    fillTracks(tracks) {
-        this.tracks = tracks;
-        this.render();
-    }
-    findTrackBy(id) {
-        return this.tracks.find((track) => track.id === id);
-    }
     onTrackSelect(event) {
         const id = event.target?.dataset?.audiotracksSelect;
         if (id) {
             this.selectAudioTrack(id);
         }
-        this.toggleContextMenu();
+        this.hideMenu();
         event.stopPropagation();
         return false;
     }
     selectAudioTrack(id) {
         this.startTrackSwitch();
-        this.core.activePlayback.switchAudioTrack(id);
+        this.core.activeContainer.switchAudioTrack(id);
         this.updateText();
     }
-    onShowLevelSelectMenu() {
-        this.toggleContextMenu();
-    }
-    hideSelectTrackMenu() {
-        this.$('ul').hide();
+    hideMenu() {
+        this.$el.find('#audiotracks-select').addClass('hidden');
     }
     toggleContextMenu() {
-        this.$('ul').toggle();
+        this.$el.find('#audiotracks-select').toggleClass('hidden');
     }
     buttonElement() {
         return this.$('button');
@@ -9925,11 +9901,14 @@ class AudioSelector extends UICorePlugin {
         return this.$('button .audio-text');
     }
     trackElement(id) {
-        return this.$('ul a' +
-            (id !== undefined ? '[data-audiotracks-select="' + id + '"]' : '')).parent();
+        return this.$('#audiotracks-select a' +
+            (id !== undefined ? `[data-audiotracks-select="${id}"]` : '')).parent();
     }
     getTitle() {
-        return this.currentTrack?.label || '';
+        if (!this.currentTrack) {
+            return '';
+        }
+        return this.currentTrack.label || this.currentTrack.language;
     }
     startTrackSwitch() {
         this.buttonElement().addClass('changing');
@@ -9952,6 +9931,14 @@ class AudioSelector extends UICorePlugin {
     }
 }
 
+/**
+ * @public
+ * @param msg
+ * @param data
+ */
+function trace(msg, data = {}) {
+}
+
 const volumeOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    d=\"M5.50025 8.00025C4.67125 8.00025 4.00025 8.67225 4.00025 9.50025V14.5003C4.00025 15.3283 4.67125 16.0003 5.50025 16.0003H7.24824C7.65024 16.0003 8.03627 16.1613 8.31727 16.4483L12.5443 20.7413C12.7083 20.9073 12.9262 20.9963 13.1492 20.9963C13.2572 20.9963 13.3672 20.9763 13.4722 20.9333C13.7932 20.8013 14.0003 20.4923 14.0003 20.1462V16.3283C14.0003 16.1963 13.9473 16.0683 13.8543 15.9753L6.02528 8.14625C5.93228 8.05325 5.80425 8.00025 5.67225 8.00025H5.50025ZM14.0003 3.85426C14.0003 3.50826 13.7932 3.19927 13.4722 3.06727C13.1502 2.93627 12.7873 3.01226 12.5443 3.25926L9.33827 6.51527C9.14627 6.71127 9.14626 7.02625 9.34126 7.22025L13.5733 11.4522C13.7313 11.6102 14.0003 11.4982 14.0003 11.2752V3.85426ZM20.8543 20.8543C20.7563 20.9513 20.6283 21.0003 20.5003 21.0003C20.3723 21.0003 20.2442 20.9513 20.1462 20.8543L3.14625 3.85426C2.95125 3.65826 2.95125 3.34225 3.14625 3.14625C3.34225 2.95125 3.65826 2.95125 3.85426 3.14625L20.8543 20.1462C21.0493 20.3422 21.0493 20.6583 20.8543 20.8543Z\"\n    fill=\"#C9C9C9\"/>\n</svg>\n";
 
 const pluginHtml$6 = "<div class=\"big-mute-icon-wrapper\" data-big-mute>\n    <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon></div>\n</div>\n";
@@ -13358,7 +13345,7 @@ class ClipsPlugin extends UICorePlugin {
 
 const templateHtml$1 = "<ul class=\"context-menu-list\">\n    <% if(options) { %>\n        <% for (var i = 0; i < options.length; i++) { %>\n        <li class=\"context-menu-list-item <%= options[i].class %>\"\n            data-<%= options[i].name %>><%= options[i].label %></li>\n        <% } %>\n    <% } %>\n</ul>\n";
 
-var version$1 = "2.22.3";
+var version$1 = "2.22.4";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -18704,4 +18691,4 @@ class VolumeFade extends UICorePlugin {
     }
 }
 
-export { AudioSelector, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, LevelSelector, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };
+export { AudioTracks as AudioSelector, AudioTracks, BigMuteButton, BottomGear, ClapprNerdStats, ClapprStats, ClickToPause, ClipsPlugin, ClosedCaptions, ContextMenu, DvrControls, ErrorScreen, Favicon, GearEvents, GoogleAnalytics, LevelSelector, Logo, MediaControl, MultiCamera, PictureInPicture, PlaybackRate, Poster, SeekTime, Share, SkipTime, SourceController, SpinnerThreeBounce as Spinner, SpinnerEvents, SpinnerThreeBounce, ClosedCaptions as Subtitles, Telemetry, TelemetryEvent, Thumbnails, VolumeFade, VolumeFadeEvents };

package/lib/index.plugins.d.ts

@@ -1,5 +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/big-mute-button/BigMuteButton.js";
 export * from "./plugins/bottom-gear/BottomGear.js";
 export * from "./plugins/clappr-nerd-stats/ClapprNerdStats.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,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qCAAqC,CAAC;AACpD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uCAAuC,CAAC;AACtD,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,2CAA2C,CAAC;AAC1D,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,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,2CAA2C,CAAC;AAC1D,OAAO,EAAE,WAAW,IAAI,aAAa,EAAE,MAAM,2CAA2C,CAAC;AACzF,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qCAAqC,CAAC;AACpD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uCAAuC,CAAC;AACtD,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,2CAA2C,CAAC;AAC1D,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,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,5 +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/big-mute-button/BigMuteButton.js";
 export * from "./plugins/bottom-gear/BottomGear.js";
 export * from "./plugins/clappr-nerd-stats/ClapprNerdStats.js";

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

@@ -10,7 +10,7 @@ import '../../../assets/audio-selector/style.scss';
  *
  * - {@link MediaControl}
  */
-export declare class AudioSelector extends UICorePlugin {
+export declare class AudioTracks extends UICorePlugin {
     private currentTrack;
     private tracks;
     /**
@@ -39,28 +39,22 @@ export declare class AudioSelector extends UICorePlugin {
      */
     get events(): {
         'click [data-audiotracks-select]': string;
-        'click [data-audiotracks-button]': string;
+        'click #audiotracks-button': string;
     };
     /**
      * @internal
      */
     bindEvents(): void;
     private onCoreReady;
-    private bindPlaybackEvents;
-    private setupAudioTrackListeners;
-    private onStop;
     private onActiveContainerChanged;
     private shouldRender;
     /**
      * @internal
      */
     render(): this;
-    private fillTracks;
-    private findTrackBy;
     private onTrackSelect;
     private selectAudioTrack;
-    private onShowLevelSelectMenu;
-    private hideSelectTrackMenu;
+    private hideMenu;
     private toggleContextMenu;
     private buttonElement;
     private buttonElementText;

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

@@ -1 +1 @@
-{"version":3,"file":"AudioSelector.d.ts","sourceRoot":"","sources":["../../../src/plugins/audio-selector/AudioSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAY,MAAM,cAAc,CAAA;AAQ7D,OAAO,2CAA2C,CAAA;AASlD;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,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;;MAKtB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED;;OAEG;IACM,UAAU;IASnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,wBAAwB;IAyBhC,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,YAAY;IAWpB;;OAEG;IACM,MAAM;IAkBf,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,qBAAqB;CAW9B"}
+{"version":3,"file":"AudioSelector.d.ts","sourceRoot":"","sources":["../../../src/plugins/audio-selector/AudioSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAY,MAAM,cAAc,CAAA;AAO7D,OAAO,2CAA2C,CAAA;AASlD;;;;;;;;;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;IASnB,OAAO,CAAC,wBAAwB;IAwBhC,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACM,MAAM;IAmBf,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,qBAAqB;CAW9B"}

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

@@ -1,12 +1,11 @@
 import { Events, UICorePlugin, template } from '@clappr/core';
-import { trace } from '@gcorevideo/utils';
 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';
-const VERSION = '0.0.1';
-const T = 'plugins.audio_selector';
+const VERSION = '2.22.4';
+// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
@@ -17,14 +16,14 @@ const T = 'plugins.audio_selector';
  *
  * - {@link MediaControl}
  */
-export class AudioSelector extends UICorePlugin {
+export class AudioTracks extends UICorePlugin {
     currentTrack = null;
     tracks = [];
     /**
      * @internal
      */
     get name() {
-        return 'audio_selector';
+        return 'audio_selector'; // TODO rename to audiotracks
     }
     /**
      * @internal
@@ -53,58 +52,43 @@ export class AudioSelector extends UICorePlugin {
     get events() {
         return {
             'click [data-audiotracks-select]': 'onTrackSelect',
-            'click [data-audiotracks-button]': 'onShowLevelSelectMenu',
+            'click #audiotracks-button': 'toggleContextMenu',
         };
     }
     /**
      * @internal
      */
     bindEvents() {
-        this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+        this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
     }
     onCoreReady() {
-        trace(`${T} onCoreReady`);
         const mediaControl = this.core.getPlugin('media_control');
         assert(mediaControl, 'media_control plugin is required');
-        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectTrackMenu);
+        this.listenTo(mediaControl, Events.MEDIACONTROL_RENDERED, () => {
+            mediaControl.putElement('audiotracks', this.$el);
+        });
+        this.listenTo(mediaControl, Events.MEDIACONTROL_HIDE, this.hideMenu);
     }
-    bindPlaybackEvents() {
-        trace(`${T} bindPlaybackEvents`);
+    onActiveContainerChanged() {
         this.currentTrack = null;
-        this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop);
-        this.setupAudioTrackListeners();
-    }
-    setupAudioTrackListeners() {
-        this.listenTo(this.core.activePlayback, Events.PLAYBACK_AUDIO_AVAILABLE, (tracks) => {
-            trace(`${T} on PLAYBACK_AUDIO_AVAILABLE`, { audioTracks: tracks });
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_AVAILABLE, (tracks) => {
             this.currentTrack =
-                tracks.find((track) => track.kind === 'main') ?? null;
-            this.fillTracks(tracks);
+                tracks.find((track) => track.kind === 'main') ?? null; // TODO test
+            this.tracks = tracks;
+            this.render();
         });
-        this.listenTo(this.core.activePlayback, Events.PLAYBACK_AUDIO_CHANGED, (track) => {
-            trace(`${T} PLAYBACK_AUDIO_CHANGED`, { audioTrack: track });
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_CHANGED, (track) => {
             this.currentTrack = track;
             this.highlightCurrentTrack();
             this.buttonElement().removeClass('changing');
             this.updateText();
         });
     }
-    onStop() {
-        trace(`${T} onStop`);
-    }
-    onActiveContainerChanged() {
-        trace(`${T} onActiveContainerChanged`);
-        this.bindPlaybackEvents();
-    }
     shouldRender() {
-        if (!this.core.activePlayback) {
-            return false;
-        }
-        this.tracks = this.core.activePlayback.audioTracks;
+        // 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 && this.tracks.length > 1;
+        return this.tracks?.length > 1;
     }
     /**
      * @internal
@@ -114,44 +98,34 @@ export class AudioSelector extends UICorePlugin {
             return this;
         }
         const mediaControl = this.core.getPlugin('media_control');
-        this.$el.html(AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }));
-        this.$('.audio-arrow').append(audioArrow);
-        mediaControl.putElement('audiotracks', this.el);
+        this.$el.html(AudioTracks.template({
+            tracks: this.tracks,
+            title: this.getTitle(),
+            icon: audioArrow,
+        }));
         this.updateText();
         this.highlightCurrentTrack();
         return this;
     }
-    fillTracks(tracks) {
-        this.tracks = tracks;
-        this.render();
-    }
-    findTrackBy(id) {
-        return this.tracks.find((track) => track.id === id);
-    }
     onTrackSelect(event) {
         const id = event.target?.dataset?.audiotracksSelect;
         if (id) {
             this.selectAudioTrack(id);
         }
-        this.toggleContextMenu();
+        this.hideMenu();
         event.stopPropagation();
         return false;
     }
     selectAudioTrack(id) {
         this.startTrackSwitch();
-        this.core.activePlayback.switchAudioTrack(id);
+        this.core.activeContainer.switchAudioTrack(id);
         this.updateText();
     }
-    onShowLevelSelectMenu() {
-        this.toggleContextMenu();
-    }
-    hideSelectTrackMenu() {
-        ;
-        this.$('ul').hide();
+    hideMenu() {
+        this.$el.find('#audiotracks-select').addClass('hidden');
     }
     toggleContextMenu() {
-        ;
-        this.$('ul').toggle();
+        this.$el.find('#audiotracks-select').toggleClass('hidden');
     }
     buttonElement() {
         return this.$('button');
@@ -160,11 +134,14 @@ export class AudioSelector extends UICorePlugin {
         return this.$('button .audio-text');
     }
     trackElement(id) {
-        return this.$('ul a' +
-            (id !== undefined ? '[data-audiotracks-select="' + id + '"]' : '')).parent();
+        return this.$('#audiotracks-select a' +
+            (id !== undefined ? `[data-audiotracks-select="${id}"]` : '')).parent();
     }
     getTitle() {
-        return this.currentTrack?.label || '';
+        if (!this.currentTrack) {
+            return '';
+        }
+        return this.currentTrack.label || this.currentTrack.language;
     }
     startTrackSwitch() {
         this.buttonElement().addClass('changing');

package/lib/testUtils.d.ts

@@ -91,6 +91,7 @@ export declare function createMockPlayback(name?: string): Events<string | symbo
     canAutoPlay: import("vitest").Mock<(...args: any[]) => any>;
     onResize: import("vitest").Mock<(...args: any[]) => any>;
     setPlaybackRate: import("vitest").Mock<(...args: any[]) => any>;
+    switchAudioTrack: import("vitest").Mock<(...args: any[]) => any>;
     trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
 export declare function createMockContainer(playback?: any): Events<string | symbol, any> & {
@@ -105,6 +106,7 @@ export declare function createMockContainer(playback?: any): Events<string | sym
     isPlaying: import("vitest").Mock<(...args: any[]) => any>;
     play: import("vitest").Mock<(...args: any[]) => any>;
     seek: import("vitest").Mock<(...args: any[]) => any>;
+    switchAudioTrack: import("vitest").Mock<(...args: any[]) => any>;
     trigger: <T extends string | symbol>(event: T, ...args: any[]) => boolean;
 };
 export declare function createMockMediaControl(core: any): UICorePlugin;

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,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;EAiBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/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,GAA2B;;;;;;;;;;;;;;;;EAqBvC;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC/C;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;EAkBvE;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAY7C"}

package/lib/testUtils.js

@@ -124,6 +124,7 @@ export function createMockPlayback(name = 'mock') {
         canAutoPlay: vi.fn().mockImplementation(() => true),
         onResize: vi.fn().mockImplementation(() => true),
         setPlaybackRate: vi.fn(),
+        switchAudioTrack: vi.fn(),
         trigger: emitter.emit,
     });
 }
@@ -142,6 +143,7 @@ export function createMockContainer(playback = createMockPlayback()) {
         isPlaying: vi.fn().mockReturnValue(false),
         play: vi.fn(),
         seek: vi.fn(),
+        switchAudioTrack: vi.fn(),
         trigger: emitter.emit,
     });
 }

package/package.json

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

package/src/index.plugins.ts

@@ -1,6 +1,7 @@
 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/big-mute-button/BigMuteButton.js";
 export * from "./plugins/bottom-gear/BottomGear.js";
 export * from "./plugins/clappr-nerd-stats/ClapprNerdStats.js";