@gcorevideo/player 2.18.3 → 2.19.0

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

@@ -0,0 +1,370 @@
+import { Events, UICorePlugin, template } from '@clappr/core';
+import {
+  AudioTrackLoadedData,
+  AudioTrackSwitchedData,
+  AudioTracksUpdatedData,
+  Events as HlsEvents,
+} from 'hls.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 '../types';
+
+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>;
+}
+
+export class AudioSelector extends UICorePlugin {
+  private selectedTrackId: number | undefined;
+
+  private currentTrack: AudioTrackItem | null = null;
+
+  private tracks: AudioTrackItem[] = [];
+
+  get name() {
+    return 'audio_selector';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  static get version() {
+    return VERSION;
+  }
+
+  get template() {
+    return template(pluginHtml);
+  }
+
+  override get attributes() {
+    return {
+      'class': this.name,
+      'data-track-selector': ''
+    };
+  }
+
+  override get events() {
+    return {
+      'click [data-track-selector-select]': 'onTrackSelect',
+      'click [data-track-selector-button]': 'onShowLevelSelectMenu'
+    };
+  }
+
+  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);
+  }
+
+  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);
+    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);
+        }
+      });
+    }
+  }
+
+  private onStop() { }
+
+  reload() {
+    this.unBindEvents();
+    this.bindEvents();
+    this.bindPlaybackEvents();
+  }
+
+  private shouldRender() {
+    if (!this.core.activeContainer) {
+      return false;
+    }
+
+    const currentPlayback = this.core.activePlayback;
+
+    if (!currentPlayback) {
+      return false;
+    }
+
+    const { audioTracks } = (currentPlayback.activePlayback._hls || currentPlayback.$el.get(0));
+
+    this.tracks = audioTracks;
+
+    // Only care if we have at least 2 to choose from
+    return this.tracks && this.tracks.length > 1;
+  }
+
+  override render() {
+    if (this.shouldRender()) {
+      this.$el.html(this.template({ 'tracks': this.tracks, 'title': this.getTitle() }));
+
+      if (
+        Object.prototype.hasOwnProperty.call(this.core.mediaControl, '$audioTracksSelector') &&
+        this.core.mediaControl.$audioTracksSelector.length > 0
+      ) {
+        this.core.mediaControl.$audioTracksSelector.append(this.el);
+      }
+
+      this.highlightCurrentTrack();
+    }
+
+    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);
+    }
+
+    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;
+    //   }
+    // }
+    this.tracks = tracks;
+
+    // Player.player.trigger('tracks', this.tracks);
+    // this.core.trigger('tracks', this.tracks);
+    this.render();
+  }
+
+  private findTrackBy(id: number) {
+    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.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);
+  }
+
+  onShowLevelSelectMenu() {
+    this.toggleContextMenu();
+  }
+
+  hideSelectTrackMenu() {
+    (this.$('.audio_selector ul') as ZeptoResult).hide();
+  }
+
+  toggleContextMenu() {
+    (this.$('.audio_selector ul') as ZeptoResult).toggle();
+  }
+
+  private buttonElement(): ZeptoResult {
+    return this.$('.audio_selector button');
+  }
+
+  private buttonElementText(): ZeptoResult {
+    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();
+  }
+
+  private getTitle(): string {
+    if (!this.tracks) {
+      return '';
+    }
+
+    const selectedTrackId = this.selectedTrackId || 0;
+
+    const selectedTrack = this.tracks[selectedTrackId];
+
+    return selectedTrack?.label || '';
+  }
+
+  startTrackSwitch() {
+    this.buttonElement().addClass('changing');
+  }
+
+  private updateText(trackId: number | undefined) {
+    if (trackId === undefined) {
+      return;
+    }
+
+    const track = this.findTrackBy(trackId);
+
+    if (track) {
+      this.buttonElementText().text(track.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() {
+    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.updateText(this.selectedTrackId);
+  }
+}

package/src/plugins/big-mute-button/BigMuteButton.ts

@@ -0,0 +1,187 @@
+import { Events, template, UICorePlugin, Utils } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
+
+import { CLAPPR_VERSION } from '../build.js';
+import { ZeptoResult } from "../types.js";
+
+import volumeMuteIcon from '../../../assets/icons/new/volume-off.svg';
+import pluginHtml from '../../../assets/big-mute-button/big-mute-button.ejs';
+import '../../../assets/big-mute-button/big-mute-button.scss';
+
+const T = "plugins.big_mute_button";
+
+export class BigMuteButton extends UICorePlugin {
+  private isBigMuteButtonHidden = false;
+
+  private _adIsPlaying = false;
+
+  private $bigMuteBtnContainer: ZeptoResult | null = null;
+
+  private $bigMuteButton: ZeptoResult | null = null;
+
+  get name() {
+    return 'big_mute_button';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  get template() {
+    return template(pluginHtml);
+  }
+
+  override get events() {
+    return {
+      'click .big-mute-icon': 'handleBigMuteBtnClick',
+      'click .big-mute-icon-wrapper': 'destroyBigMuteBtn',
+    };
+  }
+
+  override bindEvents() {
+    super.bindEvents();
+    this.listenTo(this.core, Events.CORE_READY, this.onCoreReady);
+    this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
+    this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
+    trace(`${T} bindEvents`, {
+      mediacontrol: !!this.core.mediaControl,
+    });
+    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.mediaControlRendered);
+  }
+
+  unBindEvents() {
+    // @ts-ignore
+    this.stopListening(this.core, Events.CORE_READY);
+    this.stopListening(this.core, 'core:advertisement:start', this.onStartAd);
+    this.stopListening(this.core, 'core:advertisement:finish', this.onFinishAd);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.mediaControlRendered);
+
+    const container = this.core.activeContainer;
+
+    if (container) {
+      this.stopListening(container.playback, Events.PLAYBACK_PLAY, this.render);
+    }
+  }
+
+  private onCoreReady() {
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_VOLUME, this.onContainerVolume);
+    this.listenTo(this.core.activeContainer, Events.CONTAINER_READY, this.onContainerStart);
+    this.listenTo(this.core.activePlayback, Events.PLAYBACK_ENDED, this.onPlaybackEnded);
+  }
+
+  private onContainerVolume(value: number) {
+    if (value !== 0) {
+      this.destroyBigMuteBtn();
+    }
+  }
+
+  private onContainerStart() {
+    if (this.isBigMuteButtonHidden) {
+      this.showBigMuteBtn();
+    }
+  }
+
+  private onPlaybackEnded() {
+    this.hideBigMuteBtn();
+  }
+
+  private mediaControlRendered() {
+    const container = this.core.activeContainer;
+
+    trace(`${T} mediaControlRendered`, {
+      container: !!container,
+    });
+
+    if (container) {
+      this.listenTo(container.playback, Events.PLAYBACK_PLAY, () => {
+        trace(`${T} PLAYBACK_PLAY`);
+        this.render();
+      });
+    }
+  }
+
+  private onStartAd() {
+    this._adIsPlaying = true;
+    if (this.$bigMuteBtnContainer) {
+      this.$bigMuteBtnContainer.addClass('hide');
+    }
+  }
+
+  private onFinishAd() {
+    this._adIsPlaying = false;
+    if (this.$bigMuteBtnContainer) {
+      this.$bigMuteBtnContainer.removeClass('hide');
+    }
+  }
+
+  private shouldRender() {
+    const container = this.core.activeContainer;
+
+    if (!container) {
+      return false;
+    }
+
+    const { autoPlay, wasMuted } = this.options;
+    const volume = container.volume;
+
+    trace(`${T} shouldRender`, {
+      autoPlay,
+      wasMuted,
+      volume,
+    });
+
+    return autoPlay && !wasMuted && volume === 0;
+  }
+
+  override render() {
+    if (this.shouldRender()) {
+      trace(`${T} render`, {
+        el: !!this.$el,
+      });
+      this.$el.html(this.template());
+
+      this.$bigMuteBtnContainer = this.$el.find('.big-mute-icon-wrapper[data-big-mute]');
+      this._adIsPlaying && this.$bigMuteBtnContainer.addClass('hide');
+
+      this.$bigMuteButton = this.$bigMuteBtnContainer.find('.big-mute-icon');
+      this.$bigMuteButton.append(volumeMuteIcon);
+
+      const container = this.core.activeContainer;
+
+      container.$el.append(this.$el.get(0));
+    }
+
+    return this;
+  }
+
+  private hideBigMuteBtn() {
+    this.isBigMuteButtonHidden = true;
+    this.$bigMuteBtnContainer?.addClass('hide');
+  }
+
+  private showBigMuteBtn() {
+    this.isBigMuteButtonHidden = false;
+    if (this.$bigMuteBtnContainer) {
+      this.$bigMuteBtnContainer.removeClass('hide');
+    }
+  }
+
+  private destroyBigMuteBtn(e?: MouseEvent) {
+    this.hideBigMuteBtn();
+
+    if (e && e.stopPropagation) {
+      e.stopPropagation();
+    }
+
+    this.destroy();
+  }
+
+  private handleBigMuteBtnClick(e: MouseEvent) {
+    const localVolume = Utils.Config.restore('volume');
+    const volume = !isNaN(localVolume) ? localVolume : 100;
+
+    this.core.mediaControl.setVolume(volume === 0 ? 100 : volume);
+
+    this.destroyBigMuteBtn(e);
+  }
+}

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

@@ -0,0 +1,122 @@
+import { UICorePlugin, template, Events } from '@clappr/core';
+import { trace } from '@gcorevideo/utils';
+
+import { CLAPPR_VERSION } from '../build.js';
+
+import pluginHtml from '../../../assets/bottom-gear/bottomgear.ejs';
+import '../../../assets/bottom-gear/gear.scss';
+import '../../../assets/bottom-gear/gear-sub-menu.scss';
+import gearIcon from '../../../assets/icons/new/gear.svg';
+import gearHdIcon from '../../../assets/icons/new/gear-hd.svg';
+
+const VERSION = '0.0.1';
+
+export class BottomGear extends UICorePlugin {
+  private isHd = false;
+
+  get name() {
+    return 'gear';
+  }
+
+  get supportedVersion() {
+    return { min: CLAPPR_VERSION };
+  }
+
+  static get version() {
+    return VERSION;
+  }
+
+  get template() {
+    return template(pluginHtml);
+  }
+
+  override get attributes() {
+    return {
+      'class': this.name,
+      'data-track-selector': ''
+    };
+  }
+
+  override get events() {
+    return {
+      'click .button-gear': 'toggleGearMenu',
+    };
+  }
+
+  get container() {
+    return this.core && this.core.activeContainer;
+  }
+
+  override bindEvents() {
+    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
+    this.listenTo(this.core, 'gear:refresh', this.refresh);
+    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.hide);
+    this.bindContainerEvents();
+  }
+
+  unBindEvents() {
+    this.stopListening(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.onActiveContainerChanged);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.reload);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hide);
+  }
+
+  private onActiveContainerChanged() {
+    this.bindEvents();
+    this.bindContainerEvents();
+  }
+
+  private bindContainerEvents() {
+    if (!this.container) {
+      return;
+    }
+    this.listenTo(this.container, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate);
+  }
+
+  reload() {
+    this.unBindEvents();
+    this.bindEvents();
+  }
+
+  private highDefinitionUpdate(isHd: boolean) {
+    trace(`${this.name} highDefinitionUpdate`, { isHd });
+    this.isHd = isHd;
+    if (isHd) {
+      this.$el.find('.gear-icon').html(gearHdIcon);
+    } else {
+      this.$el.find('.gear-icon').html(gearIcon);
+    }
+  }
+
+  override render() {
+    const items = [
+      'quality',
+      'rate',
+      'nerd',
+    ];
+
+    const icon = this.isHd ? gearHdIcon : gearIcon;
+
+    this.$el.html(this.template({ icon, items }));
+
+    this.core.mediaControl.$bottomGear?.html(this.el);
+    this.core.trigger('gear:rendered');
+
+    return this;
+  }
+
+  refresh() {
+    this.render();
+    this.$el.find('.gear-wrapper').show();
+  }
+
+  toggleGearMenu() {
+    this.$el.find('.gear-wrapper').toggle();
+  }
+
+  hide() {
+    this.$el.find('.gear-wrapper').hide();
+  }
+}

package/src/plugins/build.ts

@@ -0,0 +1 @@
+export const CLAPPR_VERSION: string = '0.11.3';