@gcorevideo/player 2.20.1 → 2.20.4

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

@@ -1,224 +1,287 @@
-import { Events, UICorePlugin, template } from '@clappr/core';
+import { Events, UICorePlugin, template } from '@clappr/core'
 import {
   AudioTrackLoadedData,
   AudioTrackSwitchedData,
   AudioTracksUpdatedData,
   Events as HlsEvents,
-} from 'hls.js';
+} from 'hls.js'
 
-import { CLAPPR_VERSION } from '../../build.js';
+import { CLAPPR_VERSION } from '../../build.js'
 
-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 '../../utils/types.js';
+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 '../../utils/types.js'
+import assert from 'assert'
 
-const VERSION: string = '0.0.1';
+const VERSION: string = '0.0.1'
 
 // const T = 'plugins.audio_selector';
 
-const AUTO = 0;
+const AUTO = 0
 
 type AudioTrackW3C = {
-  enabled: boolean;
-  id: string;
+  enabled: boolean
+  id: string
   kind: string
-  label: string;
+  label: string
 }
 
 type AudioTrackItem = {
-  id: number;
-  label: string;
+  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>;
+  length: number
+  addEventListener(
+    type: 'change' | 'addtrack' | 'removetrack',
+    listener: EventListenerOrEventListenerObject,
+  ): void
+  getTrackById(id: string): AudioTrackW3C | null
+  [Symbol.iterator](): IterableIterator<AudioTrackW3C>
 }
 
 /**
+ * Adds an audio track selector to the media control UI.
  * @beta
  */
 export class AudioSelector extends UICorePlugin {
-  private selectedTrackId: number | undefined;
+  // TODO
 
-  private currentTrack: AudioTrackItem | null = null;
+  private selectedTrackId: number | undefined
 
-  private tracks: AudioTrackItem[] = [];
+  private currentTrack: AudioTrackItem | null = null
 
+  private tracks: AudioTrackItem[] = []
+
+  /**
+   * @internal
+   */
   get name() {
-    return 'media_control_audio_selector';
+    return 'audio_selector'
   }
 
+  /**
+   * @internal
+   */
   get supportedVersion() {
-    return { min: CLAPPR_VERSION };
+    return { min: CLAPPR_VERSION }
   }
 
+  /**
+   * @internal
+   */
   static get version() {
-    return VERSION;
+    return VERSION
   }
 
-  get template() {
-    return template(pluginHtml);
-  }
+  private static readonly template = template(pluginHtml)
 
+  /**
+   * @internal
+   */
   override get attributes() {
     return {
-      'class': this.name,
-      'data-track-selector': ''
-    };
+      class: this.name,
+      'data-track-selector': '',
+    }
   }
 
+  /**
+   * @internal
+   */
   override get events() {
     return {
       'click [data-track-selector-select]': 'onTrackSelect',
-      'click [data-track-selector-button]': 'onShowLevelSelectMenu'
-    };
+      'click [data-track-selector-button]': 'onShowLevelSelectMenu',
+    }
   }
 
+  /**
+   * @internal
+   */
   override bindEvents() {
-    this.listenTo(this.core, Events.CORE_READY, this.bindPlaybackEvents);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectTrackMenu);
+    this.listenTo(this.core, Events.CORE_READY, this.bindPlaybackEvents)
+    // TODO CORE_ACTIVE_CONTAINER_CHANGED
+    this.listenTo(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_CONTAINERCHANGED,
+      this.reload,
+    )
+    this.listenTo(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_RENDERED,
+      this.render,
+    )
+    this.listenTo(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_HIDE,
+      this.hideSelectTrackMenu,
+    )
   }
 
-  unBindEvents() {
+  private unBindEvents() {
     // @ts-ignore
-    this.stopListening(this.core, Events.CORE_READY);
+    this.stopListening(this.core, Events.CORE_READY)
     // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
+    this.stopListening(
+      this.core.mediaControl,
+      Events.MEDIACONTROL_CONTAINERCHANGED,
+    )
     // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED)
     // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE)
   }
 
   private bindPlaybackEvents() {
     // this.currentTrack = {};
     // this.removeAuto = false;
-    this.selectedTrackId = undefined;
-    const currentPlayback = this.core.activePlayback;
+    this.selectedTrackId = undefined
+    const currentPlayback = this.core.activePlayback
 
-    this.listenTo(currentPlayback, Events.PLAYBACK_STOP, this.onStop);
-    this.setupAudioTrackListeners();
+    this.listenTo(currentPlayback, Events.PLAYBACK_STOP, this.onStop)
+    this.setupAudioTrackListeners()
   }
 
   private setupAudioTrackListeners() {
-    const currentPlayback = this.core.activePlayback;
+    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));
+      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 mediaElement = currentPlayback.$el.get(0)
         // const { audioTracks } = currentPlayback.$el.get(0);
-        const audioTracks: AudioTrackList = mediaElement.audioTracks;
+        const audioTracks: AudioTrackList = mediaElement.audioTracks
 
         if (audioTracks && audioTracks.length) {
-          let index = 0;
-          const trackItems: AudioTrackItem[] = [];
+          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++;
+              }
+              this.currentTrack = t
+              trackItems.push(t)
+              index++
             }
           }
 
-          audioTracks.addEventListener('change', () => this.updateCurrentTrackW3C());
+          audioTracks.addEventListener('change', () =>
+            this.updateCurrentTrackW3C(),
+          )
 
-          this.fillTracks(trackItems, trackItems[0].id);
+          this.fillTracks(trackItems, trackItems[0].id)
         }
-      });
+      })
     }
   }
 
-  private onStop() { }
+  private onStop() {}
 
-  reload() {
-    this.unBindEvents();
-    this.bindEvents();
-    this.bindPlaybackEvents();
+  private reload() {
+    this.unBindEvents()
+    this.bindEvents()
+    this.bindPlaybackEvents()
   }
 
   private shouldRender() {
     if (!this.core.activeContainer) {
-      return false;
+      return false
     }
 
-    const currentPlayback = this.core.activePlayback;
+    const currentPlayback = this.core.activePlayback
 
     if (!currentPlayback) {
-      return false;
+      return false
     }
 
-    const { audioTracks } = (currentPlayback.activePlayback._hls || currentPlayback.$el.get(0));
+    const { audioTracks } =
+      currentPlayback.activePlayback._hls || currentPlayback.$el.get(0)
 
-    this.tracks = audioTracks;
+    this.tracks = audioTracks
 
     // Only care if we have at least 2 to choose from
-    return this.tracks && this.tracks.length > 1;
+    return this.tracks && this.tracks.length > 1
   }
 
+  /**
+   * @internal
+   */
   override render() {
-    if (this.shouldRender()) {
-      this.$el.html(this.template({ 'tracks': this.tracks, 'title': this.getTitle() }));
+    if (!this.shouldRender()) {
+      return this
+    }
 
-      if (
-        Object.prototype.hasOwnProperty.call(this.core.mediaControl, '$audioTracksSelector') &&
-        this.core.mediaControl.$audioTracksSelector.length > 0
-      ) {
-        this.core.mediaControl.$audioTracksSelector.append(this.el);
-      }
+    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.highlightCurrentTrack();
+    const ats = mediaControl.getElement('audioTracksSelector')
+    if (!(ats && ats.length > 0)) {
+      return this
     }
+    ats.append(this.el)
 
-    if (
-      Object.prototype.hasOwnProperty.call(this.core.mediaControl, '$audioTracksSelector') &&
-      this.core.mediaControl.$audioTracksSelector.find('span.audio-arrow').length > 0
-    ) {
-      this.core.mediaControl.$audioTracksSelector.find('span.audio-arrow').append(audioArrow);
+    this.highlightCurrentTrack()
+
+    const aa = ats.find('audioArrow')
+    if (aa.length > 0) {
+      aa.append(audioArrow)
     }
 
-    return this;
+    return this
   }
 
   private fillTracks(tracks: AudioTrackItem[], selected = AUTO) {
     if (this.selectedTrackId === undefined) {
-      this.selectedTrackId = selected;
+      this.selectedTrackId = selected
     }
     // this.tracks = levels.audioTracks;
     // for (let i = 0; i < this.tracks.length; i++) {
@@ -226,98 +289,108 @@ export class AudioSelector extends UICorePlugin {
     //     this.tracks[i].label = this.tracks[i].name;
     //   }
     // }
-    this.tracks = tracks;
+    this.tracks = tracks
 
     // Player.player.trigger('tracks', this.tracks);
     // this.core.trigger('tracks', this.tracks);
-    this.render();
+    this.render()
   }
 
   private findTrackBy(id: number) {
-    return this.tracks.find((track) => track.id === id);
+    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;
+    const id = (event.target as HTMLElement)?.dataset?.trackSelectorSelect
     if (id) {
-      this.setIndexTrack(Number(id));
+      this.setIndexTrack(Number(id))
     }
-    this.toggleContextMenu();
-    event.stopPropagation();
-    return false;
+    this.toggleContextMenu()
+    event.stopPropagation()
+    return false
   }
 
   private setIndexTrack(index: number) {
-    this.selectedTrackId = index;
+    this.selectedTrackId = index
     if (this.core.activePlayback._hls) {
-      if (this.core.activePlayback._hls.audioTrack.id === this.selectedTrackId) {
-        return;
+      if (
+        this.core.activePlayback._hls.audioTrack.id === this.selectedTrackId
+      ) {
+        return
       }
-      this.core.activePlayback._hls.audioTrack = this.selectedTrackId;
+      this.core.activePlayback._hls.audioTrack = this.selectedTrackId
     } else {
-      const { audioTracks } = this.core.activePlayback.$el.get(0);
+      const { audioTracks } = this.core.activePlayback.$el.get(0)
 
       for (const track of audioTracks) {
-        track.enabled = track.id === this.selectedTrackId;
+        track.enabled = track.id === this.selectedTrackId
       }
     }
-    this.updateText(this.selectedTrackId);
+    this.updateText(this.selectedTrackId)
   }
 
-  onShowLevelSelectMenu() {
-    this.toggleContextMenu();
+  private onShowLevelSelectMenu() {
+    this.toggleContextMenu()
   }
 
-  hideSelectTrackMenu() {
-    (this.$('.audio_selector ul') as ZeptoResult).hide();
+  private hideSelectTrackMenu() {
+    ;(this.$('.audio_selector ul') as ZeptoResult).hide()
   }
 
-  toggleContextMenu() {
-    (this.$('.audio_selector ul') as ZeptoResult).toggle();
+  private toggleContextMenu() {
+    ;(this.$('.audio_selector ul') as ZeptoResult).toggle()
   }
 
   private buttonElement(): ZeptoResult {
-    return this.$('.audio_selector button');
+    return this.$('.audio_selector button')
   }
 
   private buttonElementText(): ZeptoResult {
-    return this.$('.audio_selector button .audio-text');
+    return this.$('.audio_selector button .audio-text')
   }
 
   private trackElement(id?: number): ZeptoResult {
-    return (this.$('.audio_selector ul a' + (id !== undefined ? '[data-track-selector-select="' + id + '"]' : '')) as ZeptoResult).parent();
+    return (
+      this.$(
+        '.audio_selector ul a' +
+          (id !== undefined ? '[data-track-selector-select="' + id + '"]' : ''),
+      ) as ZeptoResult
+    ).parent()
   }
 
   private getTitle(): string {
     if (!this.tracks) {
-      return '';
+      return ''
     }
 
-    const selectedTrackId = this.selectedTrackId || 0;
+    const selectedTrackId = this.selectedTrackId || 0
 
-    const selectedTrack = this.tracks[selectedTrackId];
+    const selectedTrack = this.tracks[selectedTrackId]
 
-    return selectedTrack?.label || '';
+    return selectedTrack?.label || ''
   }
 
   startTrackSwitch() {
-    this.buttonElement().addClass('changing');
+    this.buttonElement().addClass('changing')
   }
 
   private updateText(trackId: number | undefined) {
     if (trackId === undefined) {
-      return;
+      return
     }
 
-    const track = this.findTrackBy(trackId);
+    const track = this.findTrackBy(trackId)
 
     if (track) {
-      this.buttonElementText().text(track.label);
+      this.buttonElementText().text(track.label)
     }
   }
 
-  updateCurrentTrack(e: HlsEvents.AUDIO_TRACK_SWITCHED, info: AudioTrackSwitchedData | AudioTrackLoadedData) {
+  updateCurrentTrack(
+    e: HlsEvents.AUDIO_TRACK_SWITCHED,
+    info: AudioTrackSwitchedData | AudioTrackLoadedData,
+  ) {
     // if (!info) {
     //   const { audioTracks } = this.core.activePlayback.$el.get(0);
 
@@ -337,37 +410,37 @@ export class AudioSelector extends UICorePlugin {
     // this.selectedTrackId = track?.id;
     // this.highlightCurrentTrack();
     // this.buttonElement().removeClass('changing');
-    this.setCurrentTrack(info.id);
+    this.setCurrentTrack(info.id)
   }
 
   private updateCurrentTrackW3C() {
-    const { audioTracks } = this.core.activePlayback.$el.get(0);
-    const index = audioTracks.findIndex((track: AudioTrackW3C) => track.enabled);
+    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);
+    const track = this.findTrackBy(index)
 
-    this.currentTrack = track ?? null;
-    this.selectedTrackId = index;
-    this.highlightCurrentTrack();
-    this.buttonElement().removeClass('changing');
+    this.currentTrack = track ?? null
+    this.selectedTrackId = index
+    this.highlightCurrentTrack()
+    this.buttonElement().removeClass('changing')
   }
 
   highlightCurrentTrack() {
-    this.trackElement().removeClass('current');
-    this.trackElement().find('a').removeClass('gcore-skin-active');
+    this.trackElement().removeClass('current')
+    this.trackElement().find('a').removeClass('gcore-skin-active')
 
     if (this.currentTrack) {
-      const currentTrackElement = this.trackElement(this.currentTrack.id);
+      const currentTrackElement = this.trackElement(this.currentTrack.id)
 
-      currentTrackElement.addClass('current');
-      currentTrackElement.find('a').addClass('gcore-skin-active');
+      currentTrackElement.addClass('current')
+      currentTrackElement.find('a').addClass('gcore-skin-active')
     }
 
-    this.updateText(this.selectedTrackId);
+    this.updateText(this.selectedTrackId)
   }
 }