@gcorevideo/player 2.30.1 → 2.30.2

package/dist/index.embed.js

@@ -51401,7 +51401,7 @@ function insertStyle(css) {
 
 insertStyle("@import \"https://fonts.googleapis.com/css?family=Roboto\";\n:root {\n  --theme-background-color: rgb(0 0 0 / 70%);\n  --theme-text-color: rgb(255 255 255 / 100%);\n  --theme-foreground-color: rgb(201 201 201 / 100%);\n  --theme-hover-color: rgb(255 255 255 / 100%);\n}\n\n.gcore-skin-bg-color {\n  background-color: var(--theme-background-color) !important;\n}\n\n.gcore-skin-text-color {\n  color: var(--theme-text-color) !important;\n}\n\n.gcore-skin-text-color svg {\n  fill: var(--theme-text-color) !important;\n}\n\n.gcore-skin-text-color svg path {\n  fill: var(--theme-text-color) !important;\n}\n\n.gcore-skin-border-textarea-color {\n  border-color: var(--theme-text-color) !important;\n}\n\n.gcore-skin-button-color {\n  color: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg {\n  fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg path {\n  fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg path.icon-hover {\n  fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color[data-fullscreen] svg {\n  stroke: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color[data-fullscreen] svg path {\n  stroke: var(--theme-foreground-color) !important;\n}\n\n.gcore-skin-main-color {\n  background-color: var(--theme-foreground-color);\n}\n\n.gcore-skin-border-color {\n  border-color: var(--theme-foreground-color) !important;\n}\n\n.gcore-skin-button-color:hover {\n  color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-color:hover svg {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-color:hover svg path {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-border-color:hover {\n  border-color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-with-bg-color:hover svg path.icon-hover {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active {\n  color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active svg {\n  fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active svg path {\n  fill: var(--theme-hover-color) !important;\n}\n\n* {\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  user-select: none;\n}\n\n.player-poster {\n  background-size: contain !important;\n}\n\n.spinner-three-bounce > .gcore-skin-main-color {\n  box-shadow: 4px 4px 9px 1px rgba(36, 61, 81, 0.51);\n}\n\n.gplayer-lite-btn {\n  cursor: pointer;\n  border: none;\n  margin: 0;\n  padding: 0;\n  width: auto;\n  overflow: visible;\n  background: transparent;\n  /* inherit font & color from ancestor */\n  color: inherit;\n  font: inherit;\n  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n  line-height: normal;\n  /* Corrects font smoothing for webkit */\n  -webkit-font-smoothing: inherit;\n  -moz-osx-font-smoothing: inherit;\n  /* Corrects inability to style clickable `input` types in iOS */\n  appearance: none;\n  /* Remove excess padding and border in Firefox 4+ */\n}\n.gplayer-lite-btn::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}");
 
-const pluginHtml$4 = "<button class='gcore-skin-button-color media-control-dd' id=\"gplayer-audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class=\"media-control-dd__text\" id=\"gplayer-audiotracks-button-text\"><%= title %></span>\n    <span class=\"media-control-dd__arrow\"><%= icon %></span>\n</button>\n<ul class=\"gcore-skin-bg-color menu media-control-dd__popup\" id=\"gplayer-audiotracks-menu\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class=\"gcore-skin-text-color\" data-item=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$4 = "<button class='gcore-skin-button-color media-control-dd' id=\"gplayer-audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class=\"media-control-dd__text\" id=\"gplayer-audiotracks-button-text\"><%= title %></span>\n    <span class=\"media-control-dd__arrow\"><%= icon %></span>\n</button>\n<ul class=\"gcore-skin-bg-color menu media-control-dd__popup\" id=\"gplayer-audiotracks-menu\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class=\"gcore-skin-text-color\" data-item=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n                <%= track.label || track.language %>\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";
 
@@ -53055,7 +53055,6 @@ function mergeElements(a, b) {
 }
 
 const VERSION$6 = '2.22.4';
-// const T = 'plugins.audiotracks'
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @public
@@ -53070,6 +53069,7 @@ class AudioTracks extends UICorePlugin {
     currentTrack = null;
     open = false;
     tracks = [];
+    autoUpdateTimerId = null;
     /**
      * @internal
      */
@@ -53130,19 +53130,18 @@ class AudioTracks extends UICorePlugin {
     onActiveContainerChanged() {
         this.currentTrack = null;
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_AVAILABLE, (tracks) => {
+            const currentTrackId = this.core.activeContainer.currentAudioTrack?.id ??
+                this.core.activePlayback?.currentAudioTrack?.id;
             this.currentTrack =
-                tracks.find((track) => track.kind === 'main') ?? null; // TODO test
+                tracks.find((track) => track.id === currentTrackId) ??
+                    tracks.find((track) => track.kind === 'main') ??
+                    tracks[0] ??
+                    null;
             this.tracks = tracks;
             this.render();
             this.mount();
         });
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
-            this.currentTrack = track;
-            this.highlightCurrentTrack();
-            this.buttonElement().removeClass('changing');
-            this.updateText();
-        });
-        // TODO test
+        this.bindContainerAudioChanged();
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
             this.hideMenu();
         });
@@ -53150,6 +53149,21 @@ class AudioTracks extends UICorePlugin {
             this.clickaway(null);
         });
     }
+    bindContainerAudioChanged() {
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
+            this.setCurrentTrack(track);
+        });
+    }
+    setCurrentTrack(track) {
+        if (this.autoUpdateTimerId) {
+            clearTimeout(this.autoUpdateTimerId);
+            this.autoUpdateTimerId = null;
+        }
+        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
@@ -53182,7 +53196,7 @@ class AudioTracks extends UICorePlugin {
     selectAudioTrack(id) {
         this.startTrackSwitching();
         this.core.activeContainer.switchAudioTrack(id);
-        this.updateText();
+        this.autoUpdateSelected(id);
     }
     hideMenu() {
         this.open = false;
@@ -53233,7 +53247,7 @@ class AudioTracks extends UICorePlugin {
         if (!this.currentTrack) {
             return;
         }
-        this.buttonElementText().text(this.currentTrack.label);
+        this.buttonElementText().text(this.getTitle());
     }
     highlightCurrentTrack() {
         this.trackElement().removeClass('current');
@@ -53254,6 +53268,15 @@ class AudioTracks extends UICorePlugin {
             this.core.getPlugin('media_control')?.slot('audiotracks', this.$el);
         }
     }
+    autoUpdateSelected(id) {
+        if (this.autoUpdateTimerId) {
+            clearTimeout(this.autoUpdateTimerId);
+        }
+        this.autoUpdateTimerId = setTimeout(() => {
+            const track = this.tracks.find(t => t.id === id) ?? null;
+            this.setCurrentTrack(track);
+        }, 500);
+    }
     clickaway = mediaControlClickaway(() => this.hideMenu());
 }
 

package/dist/index.js

@@ -12922,7 +12922,7 @@ var PlaybackEvents;
 // https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
 const AUTO$1 = -1;
 const { now: now$2 } = Utils;
-const T$f = 'playback.dash';
+const T$g = 'playback.dash';
 class DashPlayback extends BasePlayback {
     _levels = [];
     _currentLevel = AUTO$1;
@@ -13199,7 +13199,7 @@ class DashPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onPlaybackError = (event) => {
-        trace(`${T$f} _onPlaybackError`, { type: event.type, code: event.error.code, message: event.error.message });
+        trace(`${T$g} _onPlaybackError`, { type: event.type, code: event.error.code, message: event.error.message });
     };
     _onDASHJSSError = (event) => {
         this._stopTimeUpdateTimer();
@@ -50141,7 +50141,7 @@ const { now } = Utils;
 const AUTO = -1;
 const DEFAULT_RECOVER_ATTEMPTS = 16;
 Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
-const T$e = 'playback.hls';
+const T$f = 'playback.hls';
 class HlsPlayback extends BasePlayback {
     _currentFragment = null;
     _currentLevel = null;
@@ -50473,7 +50473,7 @@ class HlsPlayback extends BasePlayback {
         }
         else {
             Log.error('hlsjs: failed to recover', { evt, data });
-            trace(`${T$e} _recover failed to recover`, {
+            trace(`${T$f} _recover failed to recover`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50560,7 +50560,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
     }
     _onHLSJSError(evt, data) {
-        trace(`${T$e} _onHLSJSError`, {
+        trace(`${T$f} _onHLSJSError`, {
             fatal: data.fatal,
             type: data.type,
             details: data.details,
@@ -50608,7 +50608,7 @@ class HlsPlayback extends BasePlayback {
                                     evt,
                                     data,
                                 });
-                                trace(`${T$e} _onHLSJSError trying to recover from network error`, {
+                                trace(`${T$f} _onHLSJSError trying to recover from network error`, {
                                     details: data.details,
                                 });
                                 error.level = PlayerError.Levels.WARN;
@@ -50621,7 +50621,7 @@ class HlsPlayback extends BasePlayback {
                             evt,
                             data,
                         });
-                        trace(`${T$e} _onHLSJSError trying to recover from media error`, {
+                        trace(`${T$f} _onHLSJSError trying to recover from media error`, {
                             details: data.details,
                         });
                         error.level = PlayerError.Levels.WARN;
@@ -50651,7 +50651,7 @@ class HlsPlayback extends BasePlayback {
                 return;
             }
             Log.warn('hlsjs: non-fatal error occurred', { evt, data });
-            trace(`${T$e} _onHLSJSError non-fatal error occurred`, {
+            trace(`${T$f} _onHLSJSError non-fatal error occurred`, {
                 type: data.type,
                 details: data.details,
             });
@@ -50984,7 +50984,7 @@ class HlsPlayback extends BasePlayback {
         this.trigger(Events$1.PLAYBACK_AUDIO_AVAILABLE, data.audioTracks.map(toClapprTrack));
     }
     _onAudioTrackSwitched(_, data) {
-        trace(`${T$e} onAudioTrackSwitched`);
+        trace(`${T$f} onAudioTrackSwitched`);
         // @ts-ignore
         const track = this._hls.audioTracks[data.id];
         this.trigger(Events$1.PLAYBACK_AUDIO_CHANGED, toClapprTrack(track));
@@ -51032,7 +51032,7 @@ function toClapprTrack(t) {
     };
 }
 
-const T$d = 'playback.html5_video';
+const T$e = 'playback.html5_video';
 const STALL_TIMEOUT = 15000;
 class HTML5Video extends BasePlayback {
     stallTimerId = null;
@@ -51133,7 +51133,7 @@ class HTML5Video extends BasePlayback {
     switchAudioTrack(id) {
         const tracks = this.el.audioTracks;
         const supported = !!tracks;
-        trace(`${T$d} switchAudioTrack`, {
+        trace(`${T$e} switchAudioTrack`, {
             supported,
         });
         if (supported) {
@@ -51152,7 +51152,7 @@ function registerPlaybacks() {
     Loader.registerPlayback(DashPlayback);
 }
 
-const T$c = 'gplayer';
+const T$d = 'gplayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
     debug: 'none',
@@ -51499,7 +51499,7 @@ class Player {
         }
     }
     triggerAutoPlay() {
-        trace(`${T$c} triggerAutoPlay`);
+        trace(`${T$d} triggerAutoPlay`);
         setTimeout(() => {
             this.player?.play({
                 autoPlay: true,
@@ -51517,7 +51517,7 @@ class Player {
     // TODO test
     events = {
         onReady: () => {
-            trace(`${T$c} onReady`, {
+            trace(`${T$d} onReady`, {
                 ready: this.ready,
             });
             if (this.ready) {
@@ -51551,7 +51551,7 @@ class Player {
     buildCoreOptions(rootNode) {
         const sources = this.buildMediaSourcesList();
         const source = sources[0];
-        trace(`${T$c} buildCoreOptions`, {
+        trace(`${T$d} buildCoreOptions`, {
             source,
             sources,
         });
@@ -51628,7 +51628,7 @@ class Player {
     }
 }
 
-var version$1 = "2.30.1";
+var version$1 = "2.30.2";
 
 var packages = {
 	"node_modules/@clappr/core": {
@@ -51652,7 +51652,7 @@ function version() {
     };
 }
 
-const pluginHtml$6 = "<button class='gcore-skin-button-color media-control-dd' id=\"gplayer-audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class=\"media-control-dd__text\" id=\"gplayer-audiotracks-button-text\"><%= title %></span>\n    <span class=\"media-control-dd__arrow\"><%= icon %></span>\n</button>\n<ul class=\"gcore-skin-bg-color menu media-control-dd__popup\" id=\"gplayer-audiotracks-menu\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class=\"gcore-skin-text-color\" data-item=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n                <%= track.label %>\n            </a>\n        </li>\n    <% }; %>\n</ul>\n";
+const pluginHtml$6 = "<button class='gcore-skin-button-color media-control-dd' id=\"gplayer-audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n    <span class=\"media-control-dd__text\" id=\"gplayer-audiotracks-button-text\"><%= title %></span>\n    <span class=\"media-control-dd__arrow\"><%= icon %></span>\n</button>\n<ul class=\"gcore-skin-bg-color menu media-control-dd__popup\" id=\"gplayer-audiotracks-menu\" role=\"menu\">\n    <% for (const track of tracks) { %>\n        <li>\n            <a href=\"#\" class=\"gcore-skin-text-color\" data-item=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n                <%= track.label || track.language %>\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";
 
@@ -52061,7 +52061,7 @@ const INITIAL_SETTINGS = {
     default: [],
     seekEnabled: false,
 };
-const T$b = 'plugins.media_control';
+const T$c = 'plugins.media_control';
 /**
  * Extended events for the {@link MediaControl} plugin
  * @public
@@ -52354,7 +52354,7 @@ class MediaControl extends UICorePlugin {
      * Reenables the plugin disabled earlier with the {@link MediaControl.disable} method
      */
     enable() {
-        trace(`${T$b} enable`, {
+        trace(`${T$c} enable`, {
             chromeless: this.options.chromeless,
             userDisabled: this.userDisabled,
         });
@@ -52511,7 +52511,7 @@ class MediaControl extends UICorePlugin {
         this.$el.removeClass('w370');
         this.$el.removeClass('w270');
         this.verticalVolume = false;
-        trace(`${T$b} playerResize`, {
+        trace(`${T$c} playerResize`, {
             size,
             width: this.container.$el.width(),
             height: this.container.$el.height(),
@@ -53309,7 +53309,7 @@ function mergeElements(a, b) {
 }
 
 const VERSION$7 = '2.22.4';
-// const T = 'plugins.audiotracks'
+const T$b = 'plugins.audiotracks';
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @public
@@ -53324,6 +53324,7 @@ class AudioTracks extends UICorePlugin {
     currentTrack = null;
     open = false;
     tracks = [];
+    autoUpdateTimerId = null;
     /**
      * @internal
      */
@@ -53384,19 +53385,21 @@ class AudioTracks extends UICorePlugin {
     onActiveContainerChanged() {
         this.currentTrack = null;
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_AVAILABLE, (tracks) => {
+            trace(`${T$b} on Events.CONTAINER_AUDIO_AVAILABLE`, {
+                tracks,
+            });
+            const currentTrackId = this.core.activeContainer.currentAudioTrack?.id ??
+                this.core.activePlayback?.currentAudioTrack?.id;
             this.currentTrack =
-                tracks.find((track) => track.kind === 'main') ?? null; // TODO test
+                tracks.find((track) => track.id === currentTrackId) ??
+                    tracks.find((track) => track.kind === 'main') ??
+                    tracks[0] ??
+                    null;
             this.tracks = tracks;
             this.render();
             this.mount();
         });
-        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
-            this.currentTrack = track;
-            this.highlightCurrentTrack();
-            this.buttonElement().removeClass('changing');
-            this.updateText();
-        });
-        // TODO test
+        this.bindContainerAudioChanged();
         this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
             this.hideMenu();
         });
@@ -53404,6 +53407,24 @@ class AudioTracks extends UICorePlugin {
             this.clickaway(null);
         });
     }
+    bindContainerAudioChanged() {
+        this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
+            trace(`${T$b} on Events.CONTAINER_AUDIO_CHANGED`, {
+                track,
+            });
+            this.setCurrentTrack(track);
+        });
+    }
+    setCurrentTrack(track) {
+        if (this.autoUpdateTimerId) {
+            clearTimeout(this.autoUpdateTimerId);
+            this.autoUpdateTimerId = null;
+        }
+        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
@@ -53436,7 +53457,7 @@ class AudioTracks extends UICorePlugin {
     selectAudioTrack(id) {
         this.startTrackSwitching();
         this.core.activeContainer.switchAudioTrack(id);
-        this.updateText();
+        this.autoUpdateSelected(id);
     }
     hideMenu() {
         this.open = false;
@@ -53487,7 +53508,7 @@ class AudioTracks extends UICorePlugin {
         if (!this.currentTrack) {
             return;
         }
-        this.buttonElementText().text(this.currentTrack.label);
+        this.buttonElementText().text(this.getTitle());
     }
     highlightCurrentTrack() {
         this.trackElement().removeClass('current');
@@ -53508,6 +53529,15 @@ class AudioTracks extends UICorePlugin {
             this.core.getPlugin('media_control')?.slot('audiotracks', this.$el);
         }
     }
+    autoUpdateSelected(id) {
+        if (this.autoUpdateTimerId) {
+            clearTimeout(this.autoUpdateTimerId);
+        }
+        this.autoUpdateTimerId = setTimeout(() => {
+            const track = this.tracks.find(t => t.id === id) ?? null;
+            this.setCurrentTrack(track);
+        }, 500);
+    }
     clickaway = mediaControlClickaway(() => this.hideMenu());
 }
 

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

@@ -13,6 +13,7 @@ export declare class AudioTracks extends UICorePlugin {
     private currentTrack;
     private open;
     private tracks;
+    private autoUpdateTimerId;
     /**
      * @internal
      */
@@ -47,6 +48,8 @@ export declare class AudioTracks extends UICorePlugin {
     bindEvents(): void;
     private onCoreReady;
     private onActiveContainerChanged;
+    private bindContainerAudioChanged;
+    private setCurrentTrack;
     private shouldRender;
     /**
      * @internal
@@ -65,6 +68,7 @@ export declare class AudioTracks extends UICorePlugin {
     private updateText;
     private highlightCurrentTrack;
     private mount;
+    private autoUpdateSelected;
     private clickaway;
 }
 //# sourceMappingURL=AudioTracks.d.ts.map

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

@@ -1 +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;AAiB7D;;;;;;;;;GASG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,IAAI,CAAQ;IAEpB,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;IAoBnB,OAAO,CAAC,wBAAwB;IAgChC,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACM,MAAM;IAgBf,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,cAAc;IAKtB,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;IAgB7B,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,SAAS,CAA+C;CACjE"}
+{"version":3,"file":"AudioTracks.d.ts","sourceRoot":"","sources":["../../../src/plugins/audio-selector/AudioTracks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAY,MAAM,cAAc,CAAA;AAiB7D;;;;;;;;;GASG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,MAAM,CAAmB;IAEjC,OAAO,CAAC,iBAAiB,CAA6C;IAEtE;;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;IAoBnB,OAAO,CAAC,wBAAwB;IA+BhC,OAAO,CAAC,yBAAyB;IAajC,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,YAAY;IAMpB;;OAEG;IACM,MAAM;IAgBf,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAkBlB,OAAO,CAAC,cAAc;IAKtB,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;IAgB7B,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,SAAS,CAA+C;CACjE"}

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

@@ -1,13 +1,13 @@
 import { Events, UICorePlugin, template } from '@clappr/core';
 import assert from 'assert';
-// import { trace } from '@gcorevideo/utils'
+import { trace } from '@gcorevideo/utils';
 import { CLAPPR_VERSION } from '../../build.js';
 import pluginHtml from '../../../assets/audio-tracks/template.ejs';
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg';
 import { ExtendedEvents } from '../media-control/MediaControl.js';
 import { mediaControlClickaway } from '../../utils/clickaway.js';
 const VERSION = '2.22.4';
-// const T = 'plugins.audiotracks'
+const T = 'plugins.audiotracks';
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @public
@@ -22,6 +22,7 @@ export class AudioTracks extends UICorePlugin {
     currentTrack = null;
     open = false;
     tracks = [];
+    autoUpdateTimerId = null;
     /**
      * @internal
      */
@@ -82,19 +83,21 @@ export class AudioTracks extends UICorePlugin {
     onActiveContainerChanged() {
         this.currentTrack = null;
         this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_AVAILABLE, (tracks) => {
+            trace(`${T} on Events.CONTAINER_AUDIO_AVAILABLE`, {
+                tracks,
+            });
+            const currentTrackId = this.core.activeContainer.currentAudioTrack?.id ??
+                this.core.activePlayback?.currentAudioTrack?.id;
             this.currentTrack =
-                tracks.find((track) => track.kind === 'main') ?? null; // TODO test
+                tracks.find((track) => track.id === currentTrackId) ??
+                    tracks.find((track) => track.kind === 'main') ??
+                    tracks[0] ??
+                    null;
             this.tracks = tracks;
             this.render();
             this.mount();
         });
-        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_CHANGED, (track) => {
-            this.currentTrack = track;
-            this.highlightCurrentTrack();
-            this.buttonElement().removeClass('changing');
-            this.updateText();
-        });
-        // TODO test
+        this.bindContainerAudioChanged();
         this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
             this.hideMenu();
         });
@@ -102,6 +105,24 @@ export class AudioTracks extends UICorePlugin {
             this.clickaway(null);
         });
     }
+    bindContainerAudioChanged() {
+        this.listenTo(this.core.activeContainer, Events.CONTAINER_AUDIO_CHANGED, (track) => {
+            trace(`${T} on Events.CONTAINER_AUDIO_CHANGED`, {
+                track,
+            });
+            this.setCurrentTrack(track);
+        });
+    }
+    setCurrentTrack(track) {
+        if (this.autoUpdateTimerId) {
+            clearTimeout(this.autoUpdateTimerId);
+            this.autoUpdateTimerId = null;
+        }
+        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
@@ -134,7 +155,7 @@ export class AudioTracks extends UICorePlugin {
     selectAudioTrack(id) {
         this.startTrackSwitching();
         this.core.activeContainer.switchAudioTrack(id);
-        this.updateText();
+        this.autoUpdateSelected(id);
     }
     hideMenu() {
         this.open = false;
@@ -185,7 +206,7 @@ export class AudioTracks extends UICorePlugin {
         if (!this.currentTrack) {
             return;
         }
-        this.buttonElementText().text(this.currentTrack.label);
+        this.buttonElementText().text(this.getTitle());
     }
     highlightCurrentTrack() {
         this.trackElement().removeClass('current');
@@ -206,5 +227,14 @@ export class AudioTracks extends UICorePlugin {
             this.core.getPlugin('media_control')?.slot('audiotracks', this.$el);
         }
     }
+    autoUpdateSelected(id) {
+        if (this.autoUpdateTimerId) {
+            clearTimeout(this.autoUpdateTimerId);
+        }
+        this.autoUpdateTimerId = setTimeout(() => {
+            const track = this.tracks.find(t => t.id === id) ?? null;
+            this.setCurrentTrack(track);
+        }, 500);
+    }
     clickaway = mediaControlClickaway(() => this.hideMenu());
 }

package/package.json

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

package/src/plugins/audio-selector/AudioTracks.ts

@@ -1,7 +1,7 @@
 import { Events, UICorePlugin, template } from '@clappr/core'
 import { AudioTrack } from '@clappr/core/types/base/playback/playback.js'
 import assert from 'assert'
-// import { trace } from '@gcorevideo/utils'
+import { trace } from '@gcorevideo/utils'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
@@ -13,7 +13,7 @@ import { mediaControlClickaway } from '../../utils/clickaway.js'
 
 const VERSION: string = '2.22.4'
 
-// const T = 'plugins.audiotracks'
+const T = 'plugins.audiotracks'
 
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
@@ -32,6 +32,8 @@ export class AudioTracks extends UICorePlugin {
 
   private tracks: AudioTrack[] = []
 
+  private autoUpdateTimerId: ReturnType<typeof setTimeout> | null = null
+
   /**
    * @internal
    */
@@ -112,24 +114,23 @@ export class AudioTracks extends UICorePlugin {
       this.core.activeContainer,
       Events.CONTAINER_AUDIO_AVAILABLE,
       (tracks: AudioTrack[]) => {
+        trace(`${T} on Events.CONTAINER_AUDIO_AVAILABLE`, {
+          tracks,
+        })
+        const currentTrackId =
+          this.core.activeContainer.currentAudioTrack?.id ??
+          this.core.activePlayback?.currentAudioTrack?.id
         this.currentTrack =
-          tracks.find((track) => track.kind === 'main') ?? null // TODO test
+          tracks.find((track) => track.id === currentTrackId) ??
+          tracks.find((track) => track.kind === 'main') ??
+          tracks[0] ??
+          null
         this.tracks = tracks
         this.render()
         this.mount()
       },
     )
-    this.listenTo(
-      this.core.activeContainer,
-      Events.CONTAINER_AUDIO_CHANGED,
-      (track: AudioTrack) => {
-        this.currentTrack = track
-        this.highlightCurrentTrack()
-        this.buttonElement().removeClass('changing')
-        this.updateText()
-      },
-    )
-    // TODO test
+    this.bindContainerAudioChanged()
     this.listenTo(this.core.activeContainer, Events.CONTAINER_CLICK, () => {
       this.hideMenu()
     })
@@ -138,6 +139,30 @@ export class AudioTracks extends UICorePlugin {
     })
   }
 
+  private bindContainerAudioChanged() {
+    this.listenTo(
+      this.core.activeContainer,
+      Events.CONTAINER_AUDIO_CHANGED,
+      (track: AudioTrack) => {
+        trace(`${T} on Events.CONTAINER_AUDIO_CHANGED`, {
+          track,
+        })
+        this.setCurrentTrack(track)
+      }
+    )
+  }
+
+  private setCurrentTrack(track: AudioTrack | null) {
+    if (this.autoUpdateTimerId) {
+      clearTimeout(this.autoUpdateTimerId)
+      this.autoUpdateTimerId = null
+    }
+    this.currentTrack = track
+    this.highlightCurrentTrack()
+    this.buttonElement().removeClass('changing')
+    this.updateText()
+  }
+
   private 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
@@ -176,7 +201,7 @@ export class AudioTracks extends UICorePlugin {
   private selectAudioTrack(id: string) {
     this.startTrackSwitching()
     this.core.activeContainer.switchAudioTrack(id)
-    this.updateText()
+    this.autoUpdateSelected(id)
   }
 
   private hideMenu() {
@@ -241,7 +266,7 @@ export class AudioTracks extends UICorePlugin {
     if (!this.currentTrack) {
       return
     }
-    this.buttonElementText().text(this.currentTrack.label)
+    this.buttonElementText().text(this.getTitle())
   }
 
   private highlightCurrentTrack() {
@@ -266,5 +291,15 @@ export class AudioTracks extends UICorePlugin {
     }
   }
 
+  private autoUpdateSelected(id: string) {
+    if (this.autoUpdateTimerId) {
+      clearTimeout(this.autoUpdateTimerId)
+    }
+    this.autoUpdateTimerId = setTimeout(() => {
+      const track = this.tracks.find(t => t.id === id) ?? null
+      this.setCurrentTrack(track)
+    }, 500)
+  }
+
   private clickaway = mediaControlClickaway(() => this.hideMenu())
 }