subtitle-toggle-button.js

import {ToggleButton} from 'bitmovin-player/bitmovinplayer-ui';

export default class SubtitleToggleButton extends ToggleButton {
   constructor(config) {
      super(config);
      this.config = this.mergeConfig(config, {
         cssClass: 'ui-subtitle-toggle-button',
         text: 'UT',
         hidden: true,
      }, this.config);

   }

   configure(player, uimanager) {
      super.configure(player, uimanager);

      this.player = player;
      this.uimanager = uimanager;

      this.bindPlayerEvents();
      this.refreshVisibility();
      this.onClick.subscribe(() => {
         const currentSubtitle = this.player.subtitles.list().filter((subtitle) => subtitle.enabled).pop();
         if (currentSubtitle) {
            this.player.subtitles.disable(currentSubtitle.id);
            this.off();
         } else {
            const subtitleId = this.player.subtitles.list()[0].id;
            this.player.subtitles.enable(subtitleId, true);
            this.on();
         }
      })

   }
   refreshVisibility() {
      if (!this.player.subtitles || this.player.subtitles.list().length <= 0) {
         this.hide();
      } else {
         this.show();
      }
   }
   bindPlayerEvents() {
      this.player.on(this.player.exports.PlayerEvent.SubtitleAdded, this.refreshVisibility.bind(this));
      //this.player.on(this.player.exports.PlayerEvent.SubtitleEnabled, this.selectCurrentSubtitle);
      //this.player.on(this.player.exports.PlayerEvent.SubtitleDisabled, this.selectCurrentSubtitle);
      this.player.on(this.player.exports.PlayerEvent.SubtitleRemoved, this.refreshVisibility.bind(this));
      // Update subtitles when source goes away
      this.player.on(this.player.exports.PlayerEvent.SourceUnloaded, this.refreshVisibility.bind(this));
      // Update subtitles when the period within a source changes
      this.player.on(this.player.exports.PlayerEvent.PeriodSwitched, this.refreshVisibility.bind(this));
      this.uimanager.getConfig().events.onUpdated.subscribe(this.refreshVisibility.bind(this));
    }
}