@gcorevideo/player 2.22.2 → 2.22.4

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

@@ -1,6 +1,5 @@
 import { Events, UICorePlugin, template } from '@clappr/core'
 import { AudioTrack } from '@clappr/core/types/base/playback/playback.js'
-import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
 import { CLAPPR_VERSION } from '../../build.js'
@@ -11,9 +10,9 @@ import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
 import { MediaControl } from '../media-control/MediaControl.js'
 
-const VERSION: string = '0.0.1'
+const VERSION: string = '2.22.4'
 
-const T = 'plugins.audio_selector'
+// const T = 'plugins.audiotracks'
 
 /**
  * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
@@ -25,7 +24,7 @@ const T = 'plugins.audio_selector'
  *
  * - {@link MediaControl}
  */
-export class AudioSelector extends UICorePlugin {
+export class AudioTracks extends UICorePlugin {
   private currentTrack: AudioTrack | null = null
 
   private tracks: AudioTrack[] = []
@@ -34,7 +33,7 @@ export class AudioSelector extends UICorePlugin {
    * @internal
    */
   get name() {
-    return 'audio_selector'
+    return 'audio_selector' // TODO rename to audiotracks
   }
 
   /**
@@ -59,7 +58,6 @@ export class AudioSelector extends UICorePlugin {
   override get attributes() {
     return {
       class: 'media-control-audiotracks',
-
     }
   }
 
@@ -69,7 +67,7 @@ export class AudioSelector extends UICorePlugin {
   override get events() {
     return {
       'click [data-audiotracks-select]': 'onTrackSelect',
-      'click [data-audiotracks-button]': 'onShowLevelSelectMenu',
+      'click #audiotracks-button': 'toggleContextMenu',
     }
   }
 
@@ -77,7 +75,7 @@ export class AudioSelector extends UICorePlugin {
    * @internal
    */
   override 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,
@@ -86,41 +84,30 @@ export class AudioSelector extends UICorePlugin {
   }
 
   private 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)
   }
 
-  private bindPlaybackEvents() {
-    trace(`${T} bindPlaybackEvents`)
+  private onActiveContainerChanged() {
     this.currentTrack = null
-    this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop)
-    this.setupAudioTrackListeners()
-  }
-
-  private setupAudioTrackListeners() {
     this.listenTo(
-      this.core.activePlayback,
-      Events.PLAYBACK_AUDIO_AVAILABLE,
+      this.core.activeContainer,
+      Events.CONTAINER_AUDIO_AVAILABLE,
       (tracks: AudioTrack[]) => {
-        trace(`${T} on PLAYBACK_AUDIO_AVAILABLE`, { audioTracks: 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,
+      this.core.activeContainer,
+      Events.CONTAINER_AUDIO_CHANGED,
       (track: AudioTrack) => {
-        trace(`${T} PLAYBACK_AUDIO_CHANGED`, { audioTrack: track })
         this.currentTrack = track
         this.highlightCurrentTrack()
         this.buttonElement().removeClass('changing')
@@ -129,24 +116,10 @@ export class AudioSelector extends UICorePlugin {
     )
   }
 
-  private onStop() {
-    trace(`${T} onStop`)
-  }
-
-  private onActiveContainerChanged() {
-    trace(`${T} onActiveContainerChanged`)
-    this.bindPlaybackEvents()
-  }
-
   private 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
   }
 
   /**
@@ -159,52 +132,40 @@ export class AudioSelector extends UICorePlugin {
 
     const mediaControl = this.core.getPlugin('media_control') as MediaControl
     this.$el.html(
-      AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }),
+      AudioTracks.template({
+        tracks: this.tracks,
+        title: this.getTitle(),
+        icon: audioArrow,
+      }),
     )
-    this.$('.audio-arrow').append(audioArrow)
-    mediaControl.putElement('audiotracks', this.el)
-
     this.updateText()
     this.highlightCurrentTrack()
 
     return this
   }
 
-  private fillTracks(tracks: AudioTrack[]) {
-    this.tracks = tracks
-    this.render()
-  }
-
-  private findTrackBy(id: string) {
-    return this.tracks.find((track) => track.id === id)
-  }
-
   private onTrackSelect(event: MouseEvent) {
     const id = (event.target as HTMLElement)?.dataset?.audiotracksSelect
     if (id) {
       this.selectAudioTrack(id)
     }
-    this.toggleContextMenu()
+    this.hideMenu()
     event.stopPropagation()
     return false
   }
 
   private selectAudioTrack(id: string) {
     this.startTrackSwitch()
-    this.core.activePlayback.switchAudioTrack(id)
+    this.core.activeContainer.switchAudioTrack(id)
     this.updateText()
   }
 
-  private onShowLevelSelectMenu() {
-    this.toggleContextMenu()
-  }
-
-  private hideSelectTrackMenu() {
-    ;(this.$('ul') as ZeptoResult).hide()
+  private hideMenu() {
+    this.$el.find('#audiotracks-select').addClass('hidden')
   }
 
   private toggleContextMenu() {
-    ;(this.$('ul') as ZeptoResult).toggle()
+    this.$el.find('#audiotracks-select').toggleClass('hidden')
   }
 
   private buttonElement(): ZeptoResult {
@@ -218,14 +179,17 @@ export class AudioSelector extends UICorePlugin {
   private trackElement(id?: string): ZeptoResult {
     return (
       this.$(
-        'ul a' +
-          (id !== undefined ? '[data-audiotracks-select="' + id + '"]' : ''),
+        '#audiotracks-select a' +
+          (id !== undefined ? `[data-audiotracks-select="${id}"]` : ''),
       ) as ZeptoResult
     ).parent()
   }
 
   private getTitle(): string {
-    return this.currentTrack?.label || ''
+    if (!this.currentTrack) {
+      return ''
+    }
+    return this.currentTrack.label || this.currentTrack.language
   }
 
   private startTrackSwitch() {

package/src/plugins/audio-selector/__tests__/AudioSelector.test.ts

@@ -0,0 +1,176 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { Events } from '@clappr/core'
+
+import { AudioTracks } from '../AudioSelector'
+
+import { createMockCore, createMockMediaControl } from '../../../testUtils'
+// import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+
+// Logger.enable('*')
+// setTracer(new LogTracer('AudioSelector.test'))
+
+const TRACKS = [
+  { id: '1', label: 'English', language: 'en', track: {} },
+  { id: '2', label: 'Spanish', language: 'es', track: {} },
+]
+
+describe('AudioSelector', () => {
+  let core: any
+  let mediaControl: any
+  let audioSelector: AudioTracks
+  beforeEach(() => {
+    core = createMockCore()
+    mediaControl = createMockMediaControl(core)
+    core.getPlugin = vi.fn().mockImplementation((name: string) => {
+      if (name === 'media_control') return mediaControl
+      return null
+    })
+    audioSelector = new AudioTracks(core)
+    core.emit(Events.CORE_READY)
+    core.emit(Events.CORE_ACTIVE_CONTAINER_CHANGED, core.activeContainer)
+  })
+  describe('before media control is rendererd', () => {
+    beforeEach(() => {
+      emitTracksAvailable(core, TRACKS)
+    })
+    it('should not attach to the media control', () => {
+      expect(mediaControl.putElement).not.toHaveBeenCalledWith(
+        'audiotracks',
+        expect.anything(),
+      )
+    })
+  })
+  describe('when media control is rendered', () => {
+    beforeEach(() => {
+      mediaControl.trigger(Events.MEDIACONTROL_RENDERED)
+    })
+    it('should attach to the media control', () => {
+      expect(mediaControl.putElement).toHaveBeenCalledWith(
+        'audiotracks',
+        audioSelector.$el,
+      )
+    })
+  })
+  describe('when audio tracks are available', () => {
+    beforeEach(() => {
+      emitTracksAvailable(core, TRACKS)
+    })
+    it('should render the button', () => {
+      expect(audioSelector.$el.find('#audiotracks-button').length).toBe(1)
+    })
+    it('should render the menu hidden', () => {
+      expect(audioSelector.el.innerHTML).toMatchSnapshot()
+      expect(
+        audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
+      ).toBe(true)
+      const trackItems = audioSelector.$el.find('#audiotracks-select li')
+      expect(trackItems.length).toBe(2)
+      expect(trackItems.eq(0).text().trim()).toBe('English')
+      expect(trackItems.eq(1).text().trim()).toBe('Spanish')
+    })
+    describe('when the button is clicked', () => {
+      beforeEach(() => {
+        audioSelector.$el.find('#audiotracks-button').click()
+      })
+      it('should show the menu', () => {
+        expect(audioSelector.$el.html()).toMatchSnapshot()
+        expect(
+          audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
+        ).toBe(false)
+      })
+      describe('when an audio track is selected', () => {
+        beforeEach(() => {
+          audioSelector.$el
+            .find('#audiotracks-select [data-audiotracks-select="2"]')
+            .click()
+        })
+        it('should switch to the selected audio track', () => {
+          expect(core.activeContainer.switchAudioTrack).toHaveBeenCalledWith(
+            '2',
+          )
+        })
+        it('should hide the menu', () => {
+          expect(audioSelector.$el.html()).toMatchSnapshot()
+          expect(
+            audioSelector.$el.find('#audiotracks-select').hasClass('hidden'),
+          ).toBe(true)
+        })
+        it('should add changing class to the button', () => {
+          expect(
+            audioSelector.$el.find('#audiotracks-button').hasClass('changing'),
+          ).toBe(true)
+        })
+        describe('when current audio track changes', () => {
+          beforeEach(() => {
+            core.activePlayback.currentAudioTrack =
+              core.activePlayback.audioTracks[1]
+            core.activePlayback.emit(
+              Events.PLAYBACK_AUDIO_CHANGED,
+              core.activePlayback.currentAudioTrack,
+            )
+            core.activeContainer.emit(
+              Events.CONTAINER_AUDIO_CHANGED,
+              core.activePlayback.currentAudioTrack,
+            )
+          })
+          it('should update button class', () => {
+            expect(
+              audioSelector.$el
+                .find('#audiotracks-button')
+                .hasClass('changing'),
+            ).toBe(false)
+          })
+          it('should update button label', () => {
+            expect(
+              audioSelector.$el
+                .find('#audiotracks-button')
+                .text()
+                .replace(/\/assets.*\.svg/g, '')
+                .trim(),
+            ).toBe('Spanish')
+          })
+          it('should highlight the selected menu item', () => {
+            const selectedItem = audioSelector.$el.find(
+              '#audiotracks-select .current',
+            )
+            expect(selectedItem.text().trim()).toBe('Spanish')
+            expect(
+              selectedItem
+                .find('a[data-audiotracks-select]')
+                .hasClass('gcore-skin-active'),
+            ).toBe(true)
+          })
+          it('should unhighlight any previously highlighted menu item', () => {
+            expect(
+              audioSelector.$el.find('#audiotracks-select li.current').length,
+            ).toBe(1)
+            expect(
+              audioSelector.$el.find(
+                '#audiotracks-select a.gcore-skin-active[data-audiotracks-select]',
+              ).length,
+            ).toBe(1)
+          })
+        })
+      })
+    })
+  })
+  describe('when audio tracks are not available', () => {
+    it('should not render the button', () => {
+      expect(audioSelector.$el.find('#audiotracks-button').length).toBe(0)
+      expect(audioSelector.$el.find('#audiotracks-select').length).toBe(0)
+    })
+  })
+})
+
+function emitTracksAvailable(core: any, tracks: any[]) {
+  core.activePlayback.audioTracks = tracks
+  core.activePlayback.currentAudioTrack = tracks[0]
+  core.activePlayback.emit(
+    Events.PLAYBACK_AUDIO_AVAILABLE,
+    core.activePlayback.audioTracks,
+  )
+  core.activeContainer.emit(
+    Events.CONTAINER_AUDIO_AVAILABLE,
+    core.activePlayback.audioTracks,
+  )
+}

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

@@ -0,0 +1,67 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AudioSelector > when audio tracks are available > should render the menu hidden 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`AudioSelector > when audio tracks are available > when the button is clicked > should show the menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color" id="audiotracks-button">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu" id="audiotracks-select">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;
+
+exports[`AudioSelector > when audio tracks are available > when the button is clicked > when an audio track is selected > should hide the menu 1`] = `
+"<button data-audiotracks-button="" class="gcore-skin-button-color changing" id="audiotracks-button">
+    <span class="audio-text"></span> <span class="audio-arrow">/assets/icons/old/quality-arrow.svg</span>
+</button>
+<ul class="gcore-skin-bg-color menu hidden" id="audiotracks-select">
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="1">
+                English
+            </a>
+        </li>
+    
+        <li class="">
+            <a href="#" class="gcore-skin-text-color" data-audiotracks-select="2">
+                Spanish
+            </a>
+        </li>
+    
+</ul>
+"
+`;

package/src/plugins/spinner-three-bounce/SpinnerThreeBounce.ts

@@ -36,6 +36,7 @@ export enum SpinnerEvents {
  * `PLUGIN` that shows a pending operation indicator when playback is buffering or in a similar state.
  * @public
  * @remarks
+ * It is aliased as `Spinner` for convenience.
  * Events emitted - {@link SpinnerEvents}
  * Other plugins can use {@link SpinnerThreeBounce.show | show} and {@link SpinnerThreeBounce.hide | hide} methods to
  * implement custom pending/progress indication scenarios.

package/src/testUtils.ts

@@ -152,6 +152,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,
   })
 }
@@ -171,6 +172,7 @@ export function createMockContainer(playback: any = createMockPlayback()) {
     isPlaying: vi.fn().mockReturnValue(false),
     play: vi.fn(),
     seek: vi.fn(),
+    switchAudioTrack: vi.fn(),
     trigger: emitter.emit,
   })
 }

package/temp/player.api.json

@@ -7791,7 +7791,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@gcorevideo/player!SourceController:class",
-          "docComment": "/**\n * `PLUGIN` that is responsible for managing the automatic failover between media sources.\n *\n * @remarks\n *\n * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details on how sources ordering and selection works. Below is a simplified diagram:\n * ```markdown\n * sources_list:\n *       - a.mpd  |    +--------------------+\n *       - b.m3u8 |--->|         init       |\n *       - ...    |    |--------------------|\n *                     | current_source = 0 |\n *                     +--------------------+\n *                            |\n *                            |  source = a.mpd\n *                            |  playback = dash.js\n *                            v\n *                      +------------------+\n *                  +-->|   load source    |\n *                  |   +---------|--------+\n *                  |             v\n *                  |   +------------------+\n *                  |   |       play       |\n *                  |   +---------|--------+\n *                  |             |\n *                  |             v\n *                  |   +-----------------------+\n *                  |   |  on playback_error    |\n *                  |   |-----------------------|\n *                  |   | current_source =      |\n *                  |   |  (current_source + 1) |\n *                  |   |  % len sources_list   |\n *                  |   |                       |\n *                  |   | delay 1..3s           |\n *                  |   +---------------|-------+\n *                  |                   |\n *                  |   source=b.m3u8   |\n *                  |   playback=hls.js |\n *                  +-------------------+\n *\n * ```\n *\n * This plugin does not expose any public methods apart from required by the Clappr plugin interface. It is supposed to work autonomously.\n *\n * @example\n * ```ts\n * import { SourceController } from '@gcorevideo/player'\n *\n * Player.registerPlugin(SourceController)\n * ```\n *\n * @public\n */\n",
+          "docComment": "/**\n * `PLUGIN` that is managing the automatic failover between media sources.\n *\n * @remarks\n *\n * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details on how sources ordering and selection works. Below is a simplified diagram:\n * ```markdown\n * sources_list:\n *       - a.mpd  |    +--------------------+\n *       - b.m3u8 |--->|         init       |\n *       - ...    |    |--------------------|\n *                     | current_source = 0 |\n *                     +--------------------+\n *                            |\n *                            |  source = a.mpd\n *                            |  playback = dash.js\n *                            v\n *                      +------------------+\n *                  +-->|   load source    |\n *                  |   +---------|--------+\n *                  |             v\n *                  |   +------------------+\n *                  |   |       play       |\n *                  |   +---------|--------+\n *                  |             |\n *                  |             v\n *                  |   +-----------------------+\n *                  |   |  on playback_error    |\n *                  |   |-----------------------|\n *                  |   | current_source =      |\n *                  |   |  (current_source + 1) |\n *                  |   |  % len sources_list   |\n *                  |   |                       |\n *                  |   | delay 1..3s           |\n *                  |   +---------------|-------+\n *                  |                   |\n *                  |   source=b.m3u8   |\n *                  |   playback=hls.js |\n *                  +-------------------+\n *\n * ```\n *\n * This plugin does not expose any public methods apart from required by the Clappr plugin interface. It is supposed to work autonomously.\n *\n * @example\n * ```ts\n * import { SourceController } from '@gcorevideo/player'\n *\n * Player.registerPlugin(SourceController)\n * ```\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -7894,7 +7894,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@gcorevideo/player!SpinnerThreeBounce:class",
-          "docComment": "/**\n * `PLUGIN` that shows a pending operation indicator when playback is buffering or in a similar state.\n *\n * @remarks\n *\n * Events emitted- {@link SpinnerEvents} Other plugins can use {@link SpinnerThreeBounce.show | show} and {@link SpinnerThreeBounce.hide | hide} methods to implement custom pending/progress indication scenarios.\n *\n * @public\n */\n",
+          "docComment": "/**\n * `PLUGIN` that shows a pending operation indicator when playback is buffering or in a similar state.\n *\n * @remarks\n *\n * It is aliased as `Spinner` for convenience. Events emitted - {@link SpinnerEvents} Other plugins can use {@link SpinnerThreeBounce.show | show} and {@link SpinnerThreeBounce.hide | hide} methods to implement custom pending/progress indication scenarios.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",