@gcorevideo/player 2.20.22 → 2.21.1

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

@@ -1,10 +1,7 @@
 import { Events, UICorePlugin, template } from '@clappr/core'
-import {
-  AudioTrackLoadedData,
-  AudioTrackSwitchedData,
-  AudioTracksUpdatedData,
-  Events as HlsEvents,
-} from 'hls.js'
+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'
 
@@ -12,48 +9,25 @@ import pluginHtml from '../../../assets/audio-selector/track-selector.ejs'
 import '../../../assets/audio-selector/style.scss'
 import audioArrow from '../../../assets/icons/old/quality-arrow.svg'
 import { ZeptoResult } from '../../types.js'
-import assert from 'assert'
 
 const VERSION: string = '0.0.1'
 
-// const T = 'plugins.audio_selector';
-
-const AUTO = 0
-
-type AudioTrackW3C = {
-  enabled: boolean
-  id: string
-  kind: string
-  label: string
-}
-
-type AudioTrackItem = {
-  id: number
-  label: string
-}
-
-type AudioTrackList = {
-  length: number
-  addEventListener(
-    type: 'change' | 'addtrack' | 'removetrack',
-    listener: EventListenerOrEventListenerObject,
-  ): void
-  getTrackById(id: string): AudioTrackW3C | null
-  [Symbol.iterator](): IterableIterator<AudioTrackW3C>
-}
+const T = 'plugins.audio_selector'
 
 /**
- * `PLUGIN` that adds an audio track selector to the media control UI.
+ * `PLUGIN` that makes possible to switch audio tracks via the media control UI.
  * @beta
+ * @remarks
+ * The plugin is activated when there are multiple audio tracks available.
+ * The plugin adds a button showing the current audio track and a dropdown to switch to another audio track.
+ * Depends on:
+ *
+ * - {@link MediaControl}
  */
 export class AudioSelector extends UICorePlugin {
-  // TODO
-
-  private selectedTrackId: number | undefined
+  private currentTrack: AudioTrack | null = null
 
-  private currentTrack: AudioTrackItem | null = null
-
-  private tracks: AudioTrackItem[] = []
+  private tracks: AudioTrack[] = []
 
   /**
    * @internal
@@ -83,7 +57,7 @@ export class AudioSelector extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: this.name,
+      class: 'media-control-audio-tracks',
       'data-track-selector': '',
     }
   }
@@ -102,148 +76,73 @@ export class AudioSelector extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_READY, this.bindPlaybackEvents)
-    // TODO CORE_ACTIVE_CONTAINER_CHANGED
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady)
     this.listenTo(
-      this.core.mediaControl,
-      Events.MEDIACONTROL_CONTAINERCHANGED,
-      this.reload,
-    )
-    this.listenTo(
-      this.core.mediaControl,
-      Events.MEDIACONTROL_RENDERED,
-      this.render,
+      this.core,
+      Events.CORE_ACTIVE_CONTAINER_CHANGED,
+      this.onActiveContainerChanged,
     )
+  }
+
+  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(
-      this.core.mediaControl,
+      mediaControl,
       Events.MEDIACONTROL_HIDE,
       this.hideSelectTrackMenu,
     )
   }
 
-  private unBindEvents() {
-    // @ts-ignore
-    this.stopListening(this.core, Events.CORE_READY)
-    // @ts-ignore
-    this.stopListening(
-      this.core.mediaControl,
-      Events.MEDIACONTROL_CONTAINERCHANGED,
-    )
-    // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED)
-    // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE)
-  }
-
   private bindPlaybackEvents() {
-    // this.currentTrack = {};
-    // this.removeAuto = false;
-    this.selectedTrackId = undefined
-    const currentPlayback = this.core.activePlayback
-
-    this.listenTo(currentPlayback, Events.PLAYBACK_STOP, this.onStop)
+    trace(`${T} bindPlaybackEvents`)
+    this.currentTrack = null
+    this.listenTo(this.core.activePlayback, Events.PLAYBACK_STOP, this.onStop)
     this.setupAudioTrackListeners()
   }
 
   private setupAudioTrackListeners() {
-    const currentPlayback = this.core.activePlayback
-
-    // TODO no-crutch:currentPlayback._hls
-    if (currentPlayback._hls) {
-      // TODO AUDIO_TRACKS_UPDATED
-      // currentPlayback._hls.on('hlsAudioTracksUpdated', (e, data) => {
-      currentPlayback._hls.on(
-        HlsEvents.AUDIO_TRACKS_UPDATED,
-        (e: HlsEvents.AUDIO_TRACKS_UPDATED, data: AudioTracksUpdatedData) => {
-          // let id = -1;
-          // for (const audioTrack of data.audioTracks) {
-          //   if (audioTrack.default) {
-          //     id = audioTrack.id;
-          //     this.currentTrack = audioTrack;
-          //   }
-          // }
-          const defaultTrack = data.audioTracks.find((track) => track.default)
-          if (defaultTrack) {
-            this.currentTrack = {
-              id: defaultTrack.id,
-              label: defaultTrack.name,
-            }
-          }
-          this.fillTracks(
-            data.audioTracks.map((p) => ({
-              id: p.id,
-              label: p.name,
-            })),
-            defaultTrack?.id,
-          )
-        },
-      )
-      currentPlayback._hls.on(
-        HlsEvents.AUDIO_TRACK_SWITCHING,
-        this.startTrackSwitch.bind(this),
-      )
-      currentPlayback._hls.on(
-        HlsEvents.AUDIO_TRACK_SWITCHED,
-        this.updateCurrentTrack.bind(this),
-      )
-      currentPlayback._hls.on(
-        HlsEvents.AUDIO_TRACK_LOADED,
-        this.updateCurrentTrack.bind(this),
-      )
-    } else {
-      this.listenToOnce(currentPlayback, Events.PLAYBACK_PLAY, () => {
-        const mediaElement = currentPlayback.$el.get(0)
-        // const { audioTracks } = currentPlayback.$el.get(0);
-        const audioTracks: AudioTrackList = mediaElement.audioTracks
-
-        if (audioTracks && audioTracks.length) {
-          let index = 0
-          const trackItems: AudioTrackItem[] = []
-          for (const audioTrack of audioTracks) {
-            if (audioTrack.enabled) {
-              const t = {
-                id: index,
-                label: audioTrack.label,
-              }
-              this.currentTrack = t
-              trackItems.push(t)
-              index++
-            }
-          }
-
-          audioTracks.addEventListener('change', () =>
-            this.updateCurrentTrackW3C(),
-          )
-
-          this.fillTracks(trackItems, trackItems[0].id)
-        }
-      })
-    }
+    this.listenTo(
+      this.core.activePlayback,
+      Events.PLAYBACK_AUDIO_AVAILABLE,
+      (tracks: AudioTrack[]) => {
+        trace(`${T} on PLAYBACK_AUDIO_AVAILABLE`, { audioTracks: tracks })
+        this.currentTrack =
+          tracks.find((track) => track.kind === 'main') ?? null
+        this.fillTracks(tracks)
+      },
+    )
+
+    this.listenTo(
+      this.core.activePlayback,
+      Events.PLAYBACK_AUDIO_CHANGED,
+      (track: AudioTrack) => {
+        trace(`${T} PLAYBACK_AUDIO_CHANGED`, { audioTrack: track })
+        this.currentTrack = track
+        this.highlightCurrentTrack()
+        this.buttonElement().removeClass('changing')
+        this.updateText()
+      },
+    )
   }
 
-  private onStop() {}
+  private onStop() {
+    trace(`${T} onStop`)
+  }
 
-  private reload() {
-    this.unBindEvents()
-    this.bindEvents()
+  private onActiveContainerChanged() {
+    trace(`${T} onActiveContainerChanged`)
     this.bindPlaybackEvents()
   }
 
   private shouldRender() {
-    if (!this.core.activeContainer) {
-      return false
-    }
-
-    const currentPlayback = this.core.activePlayback
-
-    if (!currentPlayback) {
+    if (!this.core.activePlayback) {
       return false
     }
 
-    const { audioTracks } =
-      currentPlayback.activePlayback._hls || currentPlayback.$el.get(0)
-
-    this.tracks = audioTracks
+    this.tracks = this.core.activePlayback.audioTracks
 
     // Only care if we have at least 2 to choose from
     return this.tracks && this.tracks.length > 1
@@ -258,76 +157,41 @@ export class AudioSelector extends UICorePlugin {
     }
 
     const mediaControl = this.core.getPlugin('media_control')
-    assert(mediaControl, 'media_control plugin is required')
     this.$el.html(
       AudioSelector.template({ tracks: this.tracks, title: this.getTitle() }),
     )
+    this.$('.audio-arrow').append(audioArrow)
+    mediaControl.putElement('audioTracksSelector', this.$el)
 
-    const ats = mediaControl.getElement('audioTracksSelector')
-    if (!(ats && ats.length > 0)) {
-      return this
-    }
-    ats.append(this.el)
-
+    this.updateText()
     this.highlightCurrentTrack()
 
-    const aa = ats.find('audioArrow')
-    if (aa.length > 0) {
-      aa.append(audioArrow)
-    }
-
     return this
   }
 
-  private fillTracks(tracks: AudioTrackItem[], selected = AUTO) {
-    if (this.selectedTrackId === undefined) {
-      this.selectedTrackId = selected
-    }
-    // this.tracks = levels.audioTracks;
-    // for (let i = 0; i < this.tracks.length; i++) {
-    //   if (this.tracks[i].name && !this.tracks[i].label) {
-    //     this.tracks[i].label = this.tracks[i].name;
-    //   }
-    // }
+  private fillTracks(tracks: AudioTrack[]) {
     this.tracks = tracks
-
-    // Player.player.trigger('tracks', this.tracks);
-    // this.core.trigger('tracks', this.tracks);
     this.render()
   }
 
-  private findTrackBy(id: number) {
+  private findTrackBy(id: string) {
     return this.tracks.find((track) => track.id === id)
   }
 
   private onTrackSelect(event: MouseEvent) {
-    // this.selectedTrackId = parseInt(event.target.dataset.levelSelectorSelect, 10)
     const id = (event.target as HTMLElement)?.dataset?.trackSelectorSelect
     if (id) {
-      this.setIndexTrack(Number(id))
+      this.selectAudioTrack(id)
     }
     this.toggleContextMenu()
     event.stopPropagation()
     return false
   }
 
-  private setIndexTrack(index: number) {
-    this.selectedTrackId = index
-    if (this.core.activePlayback._hls) {
-      if (
-        this.core.activePlayback._hls.audioTrack.id === this.selectedTrackId
-      ) {
-        return
-      }
-      this.core.activePlayback._hls.audioTrack = this.selectedTrackId
-    } else {
-      const { audioTracks } = this.core.activePlayback.$el.get(0)
-
-      for (const track of audioTracks) {
-        track.enabled = track.id === this.selectedTrackId
-      }
-    }
-    this.updateText(this.selectedTrackId)
+  private selectAudioTrack(id: string) {
+    this.startTrackSwitch()
+    this.core.activePlayback.switchAudioTrack(id)
+    this.updateText()
   }
 
   private onShowLevelSelectMenu() {
@@ -335,112 +199,54 @@ export class AudioSelector extends UICorePlugin {
   }
 
   private hideSelectTrackMenu() {
-    ;(this.$('.audio_selector ul') as ZeptoResult).hide()
+    ;(this.$('ul') as ZeptoResult).hide()
   }
 
   private toggleContextMenu() {
-    ;(this.$('.audio_selector ul') as ZeptoResult).toggle()
+    ;(this.$('ul') as ZeptoResult).toggle()
   }
 
   private buttonElement(): ZeptoResult {
-    return this.$('.audio_selector button')
+    return this.$('button')
   }
 
   private buttonElementText(): ZeptoResult {
-    return this.$('.audio_selector button .audio-text')
+    return this.$('button .audio-text')
   }
 
-  private trackElement(id?: number): ZeptoResult {
+  private trackElement(id?: string): ZeptoResult {
     return (
       this.$(
-        '.audio_selector ul a' +
+        'ul a' +
           (id !== undefined ? '[data-track-selector-select="' + id + '"]' : ''),
       ) as ZeptoResult
     ).parent()
   }
 
   private getTitle(): string {
-    if (!this.tracks) {
-      return ''
-    }
-
-    const selectedTrackId = this.selectedTrackId || 0
-
-    const selectedTrack = this.tracks[selectedTrackId]
-
-    return selectedTrack?.label || ''
+    return this.currentTrack?.label || ''
   }
 
-  startTrackSwitch() {
+  private startTrackSwitch() {
     this.buttonElement().addClass('changing')
   }
 
-  private updateText(trackId: number | undefined) {
-    if (trackId === undefined) {
+  private updateText() {
+    if (!this.currentTrack) {
       return
     }
-
-    const track = this.findTrackBy(trackId)
-
-    if (track) {
-      this.buttonElementText().text(track.label)
-    }
+    this.buttonElementText().text(this.currentTrack.label)
   }
 
-  updateCurrentTrack(
-    e: HlsEvents.AUDIO_TRACK_SWITCHED,
-    info: AudioTrackSwitchedData | AudioTrackLoadedData,
-  ) {
-    // if (!info) {
-    //   const { audioTracks } = this.core.activePlayback.$el.get(0);
-
-    //   for (const track of audioTracks) {
-    //     if (track.enabled) {
-    //       info = track;
-    //     }
-    //   }
-    // }
-    // if (!info) {
-    //   return;
-    // }
-
-    // const track = this.findTrackBy(info.id);
-
-    // this.currentTrack = track ? track : null;
-    // this.selectedTrackId = track?.id;
-    // this.highlightCurrentTrack();
-    // this.buttonElement().removeClass('changing');
-    this.setCurrentTrack(info.id)
-  }
-
-  private updateCurrentTrackW3C() {
-    const { audioTracks } = this.core.activePlayback.$el.get(0)
-    const index = audioTracks.findIndex((track: AudioTrackW3C) => track.enabled)
-    if (index >= 0) {
-      this.setCurrentTrack(index)
-    }
-  }
-
-  private setCurrentTrack(index: number) {
-    const track = this.findTrackBy(index)
-
-    this.currentTrack = track ?? null
-    this.selectedTrackId = index
-    this.highlightCurrentTrack()
-    this.buttonElement().removeClass('changing')
-  }
-
-  highlightCurrentTrack() {
+  private highlightCurrentTrack() {
     this.trackElement().removeClass('current')
     this.trackElement().find('a').removeClass('gcore-skin-active')
 
     if (this.currentTrack) {
-      const currentTrackElement = this.trackElement(this.currentTrack.id)
-
-      currentTrackElement.addClass('current')
-      currentTrackElement.find('a').addClass('gcore-skin-active')
+      this.trackElement(this.currentTrack.id)
+        .addClass('current')
+        .find('a')
+        .addClass('gcore-skin-active')
     }
-
-    this.updateText(this.selectedTrackId)
   }
 }

package/src/plugins/bottom-gear/BottomGear.ts

@@ -63,8 +63,7 @@ export class BottomGear extends UICorePlugin {
    */
   override get attributes() {
     return {
-      'class': this.name,
-      'data-track-selector': ''
+      'class': 'media-control-gear',
     };
   }
 
@@ -81,12 +80,8 @@ export class BottomGear extends UICorePlugin {
    * @internal
    */
   override bindEvents() {
-    const mediaControl = this.core.getPlugin('media_control');
-    assert(mediaControl, 'media_control plugin is required');
-
+    this.listenTo(this.core, ClapprEvents.CORE_READY, this.onCoreReady)
     this.listenTo(this.core, ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
-    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
   }
 
   /**
@@ -94,7 +89,7 @@ export class BottomGear extends UICorePlugin {
    * @returns Zepto result of the element
    */
   getElement(name: GearItemElement): ZeptoResult | null {
-    return this.core.getPlugin('media_control')?.getElement('gear')?.find(`.gear-options-list [data-${name}]`);
+    return this.$el.find(`.gear-options-list [data-${name}]`);
   }
 
   /**
@@ -126,7 +121,6 @@ export class BottomGear extends UICorePlugin {
    */
   override render() {
     const mediaControl = this.core.getPlugin('media_control');
-    assert(mediaControl, 'media_control plugin is required');
 
     // TODO use options.mediaControl.gear.items
     const items: GearItemElement[] = [
@@ -137,7 +131,7 @@ export class BottomGear extends UICorePlugin {
     const icon = this.isHd ? gearHdIcon : gearIcon;
     this.$el.html(BottomGear.template({ icon, items }));
 
-    mediaControl.getElement('gear')?.html(this.el);
+    mediaControl.putElement('gear', this.$el);
     mediaControl.trigger(MediaControlEvents.MEDIACONTROL_GEAR_RENDERED);
     return this;
   }
@@ -159,4 +153,11 @@ export class BottomGear extends UICorePlugin {
   private hide() {
     this.$el.find('.gear-wrapper').hide();
   }
+
+  private onCoreReady() {
+    const mediaControl = this.core.getPlugin('media_control');
+    assert(mediaControl, 'media_control plugin is required');
+    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_RENDERED, this.render);
+    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.hide); // TODO mediacontrol show as well
+  }
 }

package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts

@@ -26,9 +26,7 @@ describe('BottomGear', () => {
     expect(bottomGear.el.innerHTML).toMatchSnapshot()
   })
   it('should attach to media control', () => {
-    const gearElement = mediaControl.getElement('gear')
-    expect(gearElement[0].innerHTML).not.toEqual('')
-    expect(gearElement[0].innerHTML).toMatchSnapshot()
+    expect(mediaControl.putElement).toHaveBeenCalledWith('gear', bottomGear.$el)
   })
   it('should emit event', () => {
     expect(onGearRendered).toHaveBeenCalled()

package/src/plugins/bottom-gear/__tests__/__snapshots__/BottomGear.test.ts.snap

@@ -1,41 +1,18 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BottomGear > should attach to media control 1`] = `
-"<div class="bottom_gear" data-track-selector=""><div class="media-control-gear" data-="">
-    <button type="button" class="button-gear gplayer-lite-btn gcore-skin-button-color" data-gear-button="-1">
-        <span class="gear-icon">/assets/icons/new/gear.svg</span>
-    </button>
-    <div class="gear-wrapper gcore-skin-bg-color">
-        <ul class="gear-options-list">
-            
-                <li data-quality=""></li>
-            
-                <li data-rate=""></li>
-            
-                <li data-nerd=""></li>
-            
-        </ul>
-    </div>
-</div>
-</div>"
-`;
-
 exports[`BottomGear > should render 1`] = `
-"<div class="media-control-gear" data-="">
-    <button type="button" class="button-gear gplayer-lite-btn gcore-skin-button-color" data-gear-button="-1">
-        <span class="gear-icon">/assets/icons/new/gear.svg</span>
-    </button>
-    <div class="gear-wrapper gcore-skin-bg-color">
-        <ul class="gear-options-list">
-            
-                <li data-quality=""></li>
-            
-                <li data-rate=""></li>
-            
-                <li data-nerd=""></li>
-            
-        </ul>
-    </div>
-</div>
-"
+"<button type="button" class="button-gear media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon" data-gear-button="-1">
+    /assets/icons/new/gear.svg
+</button>
+<div class="gear-wrapper gcore-skin-bg-color">
+    <ul class="gear-options-list">
+        
+            <li data-quality=""></li>
+        
+            <li data-rate=""></li>
+        
+            <li data-nerd=""></li>
+        
+    </ul>
+</div>"
 `;

package/src/plugins/level-selector/LevelSelector.ts

@@ -106,7 +106,7 @@ export class LevelSelector extends UICorePlugin {
    */
   override get attributes() {
     return {
-      class: this.name,
+      class: 'level-selector',
       'data-level-selector': '',
     }
   }