@gcorevideo/player 2.30.1 → 2.30.3

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/media-control/MediaControl.ts

@@ -189,6 +189,9 @@ export class MediaControl extends UICorePlugin {
 
   private persistConfig: boolean
 
+  // Volume before muting, used to restore the volume when unmuting
+  private prevVolume = 0
+
   private renderTimerId: ReturnType<typeof setTimeout> | null = null
 
   private rendered = false
@@ -855,7 +858,13 @@ export class MediaControl extends UICorePlugin {
   }
 
   private toggleMute() {
-    this.setVolume(this.muted ? 100 : 0)
+    const nextVolume = this.muted ? (this.prevVolume === 0 ? 100 : this.prevVolume) : 0
+    if (this.muted) {
+
+    } else {
+      this.prevVolume = this.volume
+    }
+    this.setVolume(nextVolume)
   }
 
   /**