@gcorevideo/player 2.30.0 → 2.30.2

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/lib/plugins/subtitles/ClosedCaptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,+BAA+B,CAAA;AAmBtC;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC3B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,kBAAkB,CAAa;IAEvC,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;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,eAAe,CAAyB;IAEhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAE3D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,CAAC,qBAAqB;IAO7B;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,kBAAkB;IAiD1B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,aAAa;IAuCrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,iBAAiB;IAqBzB;;OAEG;IACH,IAAI;IAcJ;;OAEG;IACH,IAAI;IAgBJ,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IAmCf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;IAOb,OAAO,KAAK,kBAAkB,GAO7B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,QAEvB;IAED,OAAO,KAAK,aAAa,QAMxB;IAED,OAAO,CAAC,SAAS,CAA+C;CACjE"}
+{"version":3,"file":"ClosedCaptions.d.ts","sourceRoot":"","sources":["../../../src/plugins/subtitles/ClosedCaptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,YAAY,EAAwB,MAAM,cAAc,CAAA;AAOzE,OAAO,+BAA+B,CAAA;AAgBtC;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;CAC3B,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,cAAe,SAAQ,YAAY;IAC9C,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,IAAI,CAAQ;IAEpB,OAAO,CAAC,kBAAkB,CAAa;IAEvC,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,MAAM,CAAsB;IAEpC,OAAO,CAAC,KAAK,CAA2B;IAExC;;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,eAAe,CAAyB;IAEhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAuB;IAE3D;;OAEG;IACH,IAAa,UAAU;;MAItB;IAED;;OAEG;IACH,IAAa,MAAM;;;MAKlB;IAED,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,CAAC,qBAAqB;IAO7B;;OAEG;IACM,UAAU;IAWnB,OAAO,CAAC,WAAW;IAuBnB,OAAO,CAAC,kBAAkB;IAiD1B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,aAAa;IAuCrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,iBAAiB;IAqBzB;;OAEG;IACH,IAAI;IAcJ;;OAEG;IACH,IAAI;IAgBJ,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;IAUlB;;OAEG;IACM,MAAM;IAmCf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;IAOb,OAAO,KAAK,kBAAkB,GAO7B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,QAEvB;IAED,OAAO,KAAK,aAAa,QAMxB;IAED,OAAO,CAAC,SAAS,CAA+C;CACjE"}

package/lib/plugins/subtitles/ClosedCaptions.js

@@ -331,8 +331,6 @@ export class ClosedCaptions extends UICorePlugin {
         // event.target does not exist for some reason in tests
         const id = Number((event.target ?? event.currentTarget).dataset?.item ??
             '-1');
-        // TODO review, make configurable, and emit event in addition
-        // localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead?
         this.userSelectedItemId = id;
         this.selectItem(this.findById(id));
         this.hideMenu();

package/package.json

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

package/src/playback/hls-playback/HlsPlayback.ts

@@ -35,6 +35,7 @@ import { BasePlayback } from '../BasePlayback.js'
 import { CLAPPR_VERSION } from '../../build.js'
 import { AudioTrack } from '@clappr/core/types/base/playback/playback.js'
 import { VTTCueInfo } from '../types.js'
+import { RangesList } from './RangesList.js'
 
 const { now } = Utils
 
@@ -70,8 +71,6 @@ type CustomListener = {
 }
 
 export default class HlsPlayback extends BasePlayback {
-  private _ccTracksUpdated = false
-
   private _currentFragment: Fragment | null = null
 
   private _currentLevel: number | null = null
@@ -120,7 +119,9 @@ export default class HlsPlayback extends BasePlayback {
 
   oncueexit: ((e: { id: string }) => void) | null = null
 
-  private cues: VTTCueInfo[] = [] // TODO check the list size and use BST if needed
+  private cues: RangesList<VTTCueInfo> | null = null
+
+  private cuesByTrack: Record<number, RangesList<VTTCueInfo>> = {}
 
   private currentCueId: string | null = null
 
@@ -310,7 +311,7 @@ export default class HlsPlayback extends BasePlayback {
     // added/removed every 5.
     this._extrapolatedWindowNumSegments =
       !this.options.playback ||
-        typeof this.options.playback.extrapolatedWindowNumSegments === 'undefined'
+      typeof this.options.playback.extrapolatedWindowNumSegments === 'undefined'
         ? 2
         : this.options.playback.extrapolatedWindowNumSegments
 
@@ -362,7 +363,6 @@ export default class HlsPlayback extends BasePlayback {
     }
     this._manifestParsed = false
     // this._ccIsSetup = false
-    this._ccTracksUpdated = false
     this._setInitialState()
     this._hls.destroy()
     this._hls = null
@@ -436,9 +436,7 @@ export default class HlsPlayback extends BasePlayback {
       (evt: HlsEvents.LEVEL_SWITCHED, data: { level: number }) =>
         this._onLevelSwitched(evt, data),
     )
-    this._hls.on(HlsEvents.ERROR, (evt, data) =>
-      this._onHLSJSError(evt, data),
-    )
+    this._hls.on(HlsEvents.ERROR, (evt, data) => this._onHLSJSError(evt, data))
     this._hls.on(HlsEvents.AUDIO_TRACKS_UPDATED, (evt, data) =>
       this._onAudioTracksUpdated(evt, data),
     )
@@ -447,12 +445,20 @@ export default class HlsPlayback extends BasePlayback {
     )
     this._hls.on(HlsEvents.CUES_PARSED, (evt, data) => {
       data.cues?.forEach((cue: any) => {
-        this.cues.push({
+        if (!this.cues) {
+          const trackId = this._hls!.subtitleTrack
+          if (!this.cuesByTrack[trackId]) {
+            this.cuesByTrack[trackId] = new RangesList<VTTCueInfo>()
+          }
+          this.cues = this.cuesByTrack[trackId]
+        }
+        const cueInfo = {
           id: cue.id,
           start: cue.startTime,
           end: cue.endTime,
           text: cue.text,
-        } as VTTCueInfo)
+        } as VTTCueInfo
+        this.cues.insert(cue.startTime, cue.endTime, cueInfo)
       })
     })
     this.bindCustomListeners()
@@ -514,7 +520,7 @@ export default class HlsPlayback extends BasePlayback {
   }
 
   // this playback manages the src on the video element itself
-  protected override _setupSrc(srcUrl: string) { } // eslint-disable-line no-unused-vars
+  protected override _setupSrc(srcUrl: string) {} // eslint-disable-line no-unused-vars
 
   private _startTimeUpdateTimer() {
     if (this._timeUpdateTimer) {
@@ -579,7 +585,7 @@ export default class HlsPlayback extends BasePlayback {
     // assume live if time within 3 seconds of end of stream
     this.dvrEnabled && this._updateDvr(time < this.getDuration() - 3)
     time += this._startTime
-      ; (this.el as HTMLMediaElement).currentTime = time
+    ;(this.el as HTMLMediaElement).currentTime = time
 
     this.triggerCues()
   }
@@ -719,7 +725,7 @@ export default class HlsPlayback extends BasePlayback {
   }
 
   private reload() {
-    this.cues = []
+    this.cues = null
     this.currentCueId = null
     this._hls?.startLoad(-1)
   }
@@ -777,12 +783,12 @@ export default class HlsPlayback extends BasePlayback {
           start: Math.max(
             0,
             (this.el as HTMLMediaElement).buffered.start(i) -
-            this._playableRegionStartTime,
+              this._playableRegionStartTime,
           ),
           end: Math.max(
             0,
             (this.el as HTMLMediaElement).buffered.end(i) -
-            this._playableRegionStartTime,
+              this._playableRegionStartTime,
           ),
         },
       ]
@@ -804,9 +810,7 @@ export default class HlsPlayback extends BasePlayback {
 
   private triggerCues() {
     const currentTime = this.getCurrentTime()
-    // const cues = Object.values(this.cues)
-    // TODO build a search tree
-    const cue = this.cues.find((cue: VTTCueInfo) => currentTime >= cue.start && currentTime <= cue.end)
+    const cue = this.cues?.find(currentTime)
     if (cue) {
       this.currentCueId = cue.id
       this.oncueenter?.(cue)
@@ -836,7 +840,7 @@ export default class HlsPlayback extends BasePlayback {
     if (!this._hls) {
       return
     }
-    ; (this.el as HTMLMediaElement).pause()
+    ;(this.el as HTMLMediaElement).pause()
     if (this.dvrEnabled) {
       this._updateDvr(true)
     }
@@ -853,6 +857,8 @@ export default class HlsPlayback extends BasePlayback {
   destroy() {
     this._stopTimeUpdateTimer()
     this._destroyHLSInstance()
+    this.cues = null
+    this.cuesByTrack = {}
     return super.destroy()
   }
 
@@ -865,14 +871,6 @@ export default class HlsPlayback extends BasePlayback {
       data.details.live ? Playback.LIVE : Playback.VOD
     ) as PlaybackType
     this._onLevelUpdated(evt, data)
-    // Live stream subtitle tracks detection hack (may not immediately available)
-    // if (
-    //   this._ccTracksUpdated &&
-    //   this._playbackType === Playback.LIVE &&
-    //   this.hasClosedCaptionsTracks
-    // ) {
-    //   this._onSubtitleLoaded()
-    // }
     if (prevPlaybackType !== this._playbackType) {
       this._updateSettings()
     }
@@ -952,7 +950,7 @@ export default class HlsPlayback extends BasePlayback {
               Math.max(
                 fragments[0].start,
                 previousPlayableRegionStartTime +
-                this._extrapolatedWindowDuration,
+                  this._extrapolatedWindowDuration,
               ) * 1000,
           }
         }
@@ -1139,7 +1137,10 @@ export default class HlsPlayback extends BasePlayback {
       return
     }
     this._hls!.subtitleTrack = id
-    this.cues = []
+    if (!this.cuesByTrack[id]) {
+      this.cuesByTrack[id] = new RangesList<VTTCueInfo>()
+    }
+    this.cues = this.cuesByTrack[id]
   }
 
   /**
@@ -1150,15 +1151,17 @@ export default class HlsPlayback extends BasePlayback {
   }
 
   getTextTracks() {
-    return this._hls?.subtitleTracks.map((t: MediaPlaylist) => ({
-      id: t.id,
-      name: t.name,
-      track: {
+    return (
+      this._hls?.subtitleTracks.map((t: MediaPlaylist) => ({
         id: t.id,
-        label: t.name,
-        language: t.lang,
-      },
-    })) || []
+        name: t.name,
+        track: {
+          id: t.id,
+          label: t.name,
+          language: t.lang,
+        },
+      })) || []
+    )
   }
 }
 

package/src/playback/hls-playback/RangesList.ts

@@ -0,0 +1,45 @@
+
+export class RangesList<T> {
+  // TODO write an efficient implementation
+  private items: Array<[number, number, T]> = [];
+
+  insert(start: number, end: number, value: T) {
+    const index = this.findIndex((start + end) / 2);
+    this.items.splice(index, 0, [start, end, value]);
+  }
+
+  find(position: number): T | null {
+    const index = this.findIndex(position);
+    const item = this.items[index];
+    if (!item || item[0] > position || item[1] < position) {
+      return null;
+    }
+    return item[2];
+  }
+
+  private findIndex(position: number): number {
+    let low = 0;
+    let high = this.items.length;
+    let index = 0;
+    while (low < high) {
+      index = low + Math.floor((high - low) / 2);
+      const item = this.items[index];
+      if (item[0] > position) {
+        if (index === low) {
+          return index
+        }
+        high = index;
+        continue;
+      }
+      if (item[1] <= position) {
+        if (index === high - 1) {
+          return index + 1
+        }
+        low = index + 1;
+        continue;
+      }
+      break;
+    }
+    return index;
+  }
+}

package/src/playback/hls-playback/__tests__/RangesList.test.ts

@@ -0,0 +1,60 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { RangesList } from '../RangesList'
+
+describe('RangesList', () => {
+  let rs: RangesList<number>
+  beforeEach(() => {
+    rs = new RangesList()
+
+  })
+  describe("sequential order", () => {
+    beforeEach(() => {
+      rs.insert(0, 0.5, 1)
+      rs.insert(0.5, 1, 2)
+      rs.insert(1, 2.5, 3)
+      rs.insert(2.5, 3, 4)
+      rs.insert(4, 10, 5)
+      rs.insert(10, 11, 6)
+    })
+    it.each([
+      [-1, null],
+      [0, 1],
+      [0.25, 1],
+      [0.5, 2],
+      [1, 3],
+      [2.5, 4],
+      [4, 5],
+      [10, 6],
+      [11, null],
+      [-100, null],
+      [1020, null],
+    ])('%s -> %s', (pos, expVal) => {
+      expect(rs.find(pos)).toBe(expVal)
+    })
+  })
+  describe("arbitrary order", () => {
+    beforeEach(() => {
+      rs.insert(10, 11, 6)
+      rs.insert(2.5, 3, 4)
+      rs.insert(1, 2.5, 3)
+      rs.insert(0.5, 1, 2)
+      rs.insert(4, 10, 5)
+      rs.insert(0, 0.5, 1)
+    })
+    it.each([
+      [-1, null],
+      [0, 1],
+      [0.25, 1],
+      [0.5, 2],
+      [1, 3],
+      [2.5, 4],
+      [4, 5],
+      [10, 6],
+      [11, null],
+      [-100, null],
+      [1020, null],
+    ])('%s -> %s', (pos, expVal) => {
+      expect(rs.find(pos)).toBe(expVal)
+    })
+  })
+})

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())
 }

package/src/plugins/audio-selector/__tests__/__snapshots__/AudioTracks.test.ts.snap

@@ -2,13 +2,13 @@
 
 exports[`AudioTracks > when audio tracks are available > should render menu 1`] = `
 "<button class="gcore-skin-button-color media-control-dd" id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="false">
-    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"></span>
+    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text">English</span>
     <span class="media-control-dd__arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
 <ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu" style="display: none;">
     
-        <li class="">
-            <a href="#" class="gcore-skin-text-color" data-item="1" role="menuitemradio" aria-checked="false">
+        <li class="current">
+            <a href="#" class="gcore-skin-text-color gcore-skin-active" data-item="1" role="menuitemradio" aria-checked="true">
                 English
             </a>
         </li>
@@ -25,13 +25,13 @@ exports[`AudioTracks > when audio tracks are available > should render menu 1`]
 
 exports[`AudioTracks > when audio tracks are available > when button is clicked > should show menu 1`] = `
 "<button class="gcore-skin-button-color media-control-dd" id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="true">
-    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"></span>
+    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text">English</span>
     <span class="media-control-dd__arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
 <ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu">
     
-        <li class="">
-            <a href="#" class="gcore-skin-text-color" data-item="1" role="menuitemradio" aria-checked="false">
+        <li class="current">
+            <a href="#" class="gcore-skin-text-color gcore-skin-active" data-item="1" role="menuitemradio" aria-checked="true">
                 English
             </a>
         </li>
@@ -48,13 +48,13 @@ exports[`AudioTracks > when audio tracks are available > when button is clicked
 
 exports[`AudioTracks > when audio tracks are available > when button is clicked > when audio track is selected > should hide the menu 1`] = `
 "<button class="gcore-skin-button-color media-control-dd changing" id="gplayer-audiotracks-button" aria-haspopup="menu" aria-expanded="false">
-    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text"></span>
+    <span class="media-control-dd__text" id="gplayer-audiotracks-button-text">English</span>
     <span class="media-control-dd__arrow">/assets/icons/old/quality-arrow.svg</span>
 </button>
 <ul class="gcore-skin-bg-color menu media-control-dd__popup" id="gplayer-audiotracks-menu" role="menu" style="display: none;">
     
-        <li class="">
-            <a href="#" class="gcore-skin-text-color" data-item="1" role="menuitemradio" aria-checked="false">
+        <li class="current">
+            <a href="#" class="gcore-skin-text-color gcore-skin-active" data-item="1" role="menuitemradio" aria-checked="true">
                 English
             </a>
         </li>

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -19,9 +19,6 @@ import { VTTCueInfo } from '../../playback/types.js'
 
 const VERSION: string = '2.19.14'
 
-// TODO review
-// const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected'
-
 // const T = 'plugins.cc'
 
 /**
@@ -441,8 +438,6 @@ export class ClosedCaptions extends UICorePlugin {
       '-1',
     )
 
-    // TODO review, make configurable, and emit event in addition
-    // localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead?
     this.userSelectedItemId = id
     this.selectItem(this.findById(id))
     this.hideMenu()