shaka-player/ui/chapter_selection.js

/*! @license
 * Shaka Player
 * Copyright 2016 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */


goog.provide('shaka.ui.ChapterSelection');

goog.require('shaka.ui.Controls');
goog.require('shaka.ui.Enums');
goog.require('shaka.ui.Locales');
goog.require('shaka.ui.Localization');
goog.require('shaka.ui.OverflowMenu');
goog.require('shaka.ui.SettingsMenu');
goog.require('shaka.ui.Utils');
goog.require('shaka.util.Dom');
goog.requireType('shaka.ui.Controls');

/**
 * @extends {shaka.ui.SettingsMenu}
 * @final
 * @export
 */
shaka.ui.ChapterSelection = class extends shaka.ui.SettingsMenu {
  /**
   * @param {!HTMLElement} parent
   * @param {!shaka.ui.Controls} controls
   */
  constructor(parent, controls) {
    super(parent, controls, shaka.ui.Enums.MaterialDesignIcons.CHAPTER);

    this.button.classList.add('shaka-chapter-button');
    this.menu.classList.add('shaka-chapters');
    this.button.classList.add('shaka-tooltip-status');

    /** @type {!Array<shaka.extern.Chapter>} */
    this.chapters_ = [];

    this.chaptersLanguage_ = 'und';

    this.eventManager.listen(
        this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
          this.updateLocalizedStrings_();
          this.updateChapters_();
        });

    this.eventManager.listen(
        this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
          this.updateLocalizedStrings_();
          this.updateChapters_();
        });

    this.eventManager.listen(this.player, 'unloading', () => {
      this.deletePreviousChapters_();
      this.chaptersLanguage_ = 'und';
      this.chapters_ = [];
    });

    this.eventManager.listen(this.player, 'trackschanged', () => {
      this.updateChapters_();
    });

    // Set up all the strings in the user's preferred language.
    this.updateLocalizedStrings_();

    this.updateChapters_();
  }

  /**
   * @private
   */
  updateLocalizedStrings_() {
    const LocIds = shaka.ui.Locales.Ids;

    this.backButton.ariaLabel = this.localization.resolve(LocIds.BACK);
    this.button.ariaLabel = this.localization.resolve(LocIds.CHAPTERS);
    this.nameSpan.textContent = this.localization.resolve(LocIds.CHAPTERS);
    this.backSpan.textContent = this.localization.resolve(LocIds.CHAPTERS);
  }

  /**
   * @private
   */
  deletePreviousChapters_() {
    // 1. Save the back to menu button
    const backButton = shaka.ui.Utils.getFirstDescendantWithClassName(
        this.menu, 'shaka-back-to-overflow-button');

    // 2. Remove everything
    shaka.util.Dom.removeAllChildren(this.menu);

    // 3. Add the backTo Menu button back
    this.menu.appendChild(backButton);

    // 4. Hidden button
    shaka.ui.Utils.setDisplay(this.button, false);
  }

  /**
   * @private
   */
  updateChapters_() {
    /**
     * Does a value compare on chapters.
     * @param {shaka.extern.Chapter} a
     * @param {shaka.extern.Chapter} b
     * @return {boolean}
     */
    const chaptersEqual = (a, b) => {
      return (!a && !b) || (a.id === b.id && a.title === b.title &&
          a.startTime === b.startTime && a.endTime === b.endTime);
    };

    let nextLanguage = 'und';
    /** @type {!Array<shaka.extern.Chapter>} */
    let nextChapters = [];

    const currentLocales = this.localization.getCurrentLocales();
    for (const locale of Array.from(currentLocales)) {
      nextLanguage = locale;
      nextChapters = this.player.getChapters(nextLanguage);
      if (nextChapters.length) {
        break;
      }
    }
    if (!nextChapters.length) {
      nextLanguage = 'und';
      nextChapters = this.player.getChapters(nextLanguage);
    }

    const languageChanged = nextLanguage !== this.chaptersLanguage_;
    const chaptersChanged = this.chapters_.length !== nextChapters.length ||
      !this.chapters_.some((c, idx) => {
        const n = nextChapters.at(idx);
        return chaptersEqual(c, n) ||
          nextChapters.some((n) => chaptersEqual(c, n));
      });

    this.chaptersLanguage_ = nextLanguage;
    this.chapters_ = nextChapters;
    if (!nextChapters.length) {
      this.deletePreviousChapters_();
    } else if (languageChanged || chaptersChanged) {
      for (const chapter of this.chapters_) {
        const button = shaka.util.Dom.createButton();
        const span = shaka.util.Dom.createHTMLElement('span');
        span.classList.add('shaka-chapter');
        span.textContent = chapter.title;
        button.appendChild(span);

        this.eventManager.listen(button, 'click', () => {
          this.video.currentTime = chapter.startTime;
        });

        this.menu.appendChild(button);
      }
      shaka.ui.Utils.setDisplay(this.button, true);
      shaka.ui.Utils.focusOnTheChosenItem(this.menu);
    }
  }
};

/**
 * @implements {shaka.extern.IUIElement.Factory}
 * @final
 */
shaka.ui.ChapterSelection.Factory = class {
  /** @override */
  create(rootElement, controls) {
    return new shaka.ui.ChapterSelection(rootElement, controls);
  }
};

shaka.ui.OverflowMenu.registerElement(
    'chapter', new shaka.ui.ChapterSelection.Factory());

shaka.ui.Controls.registerElement(
    'chapter', new shaka.ui.ChapterSelection.Factory());