Source: ui/overflow_menu.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.OverflowMenu');
  10. goog.require('goog.asserts');
  11. goog.require('shaka.ads.Utils');
  12. goog.require('shaka.log');
  13. goog.require('shaka.ui.Controls');
  14. goog.require('shaka.ui.Element');
  15. goog.require('shaka.ui.Enums');
  16. goog.require('shaka.ui.Locales');
  17. goog.require('shaka.ui.Localization');
  18. goog.require('shaka.ui.Utils');
  19. goog.require('shaka.util.Dom');
  20. goog.require('shaka.util.Iterables');
  23. /**
  24.  * @extends {shaka.ui.Element}
  25.  * @final
  26.  * @export
  27.  */
  28. shaka.ui.OverflowMenu = class extends shaka.ui.Element {
  29.   /**
  30.    * @param {!HTMLElement} parent
  31.    * @param {!shaka.ui.Controls} controls
  32.    */
  33.   constructor(parent, controls) {
  34.     super(parent, controls);
  36.     /** @private {!shaka.extern.UIConfiguration} */
  37.     this.config_ = this.controls.getConfig();
  39.     /** @private {HTMLElement} */
  40.     this.controlsContainer_ = this.controls.getControlsContainer();
  42.     /** @private {!Array<shaka.extern.IUIElement>} */
  43.     this.children_ = [];
  45.     this.addOverflowMenuButton_();
  47.     this.addOverflowMenu_();
  49.     this.createChildren_();
  51.     this.eventManager.listen(
  52.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  53.           this.updateAriaLabel_();
  54.         });
  56.     this.eventManager.listen(
  57.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  58.           this.updateAriaLabel_();
  59.         });
  61.     this.eventManager.listen(
  62.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  63.           if (this.ad && this.ad.isLinear()) {
  64.             shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
  65.           }
  66.         });
  68.     this.eventManager.listen(
  69.         this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
  70.           shaka.ui.Utils.setDisplay(this.overflowMenuButton_, true);
  71.         });
  74.     this.eventManager.listen(
  75.         this.controls, 'submenuopen', () => {
  76.         // Hide the main overflow menu if one of the sub menus has
  77.         // been opened.
  78.           shaka.ui.Utils.setDisplay(this.overflowMenu_, false);
  79.         });
  82.     this.eventManager.listen(
  83.         this.overflowMenu_, 'touchstart', (event) => {
  84.           this.controls.setLastTouchEventTime(Date.now());
  85.           event.stopPropagation();
  86.         });
  88.     this.eventManager.listen(this.overflowMenuButton_, 'click', () => {
  89.       if (!this.controls.isOpaque()) {
  90.         return;
  91.       }
  92.       this.onOverflowMenuButtonClick_();
  93.     });
  95.     this.updateAriaLabel_();
  97.     if (this.ad && this.ad.isLinear()) {
  98.       // There was already an ad.
  99.       shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
  100.     }
  101.   }
  103.   /** @override */
  104.   release() {
  105.     this.controlsContainer_ = null;
  107.     for (const element of this.children_) {
  108.       element.release();
  109.     }
  111.     this.children_ = [];
  112.     super.release();
  113.   }
  115.   /**
  116.    * @param {string} name
  117.    * @param {!shaka.extern.IUIElement.Factory} factory
  118.    * @export
  119.    */
  120.   static registerElement(name, factory) {
  121.     shaka.ui.OverflowMenu.elementNamesToFactories_.set(name, factory);
  122.   }
  125.   /**
  126.    * @private
  127.    */
  128.   addOverflowMenu_() {
  129.     /** @private {!HTMLElement} */
  130.     this.overflowMenu_ = shaka.util.Dom.createHTMLElement('div');
  131.     this.overflowMenu_.classList.add('shaka-overflow-menu');
  132.     this.overflowMenu_.classList.add('shaka-no-propagation');
  133.     this.overflowMenu_.classList.add('shaka-show-controls-on-mouse-over');
  134.     this.overflowMenu_.classList.add('shaka-hidden');
  135.     this.controlsContainer_.appendChild(this.overflowMenu_);
  136.   }
  139.   /**
  140.    * @private
  141.    */
  142.   addOverflowMenuButton_() {
  143.     /** @private {!HTMLButtonElement} */
  144.     this.overflowMenuButton_ = shaka.util.Dom.createButton();
  145.     this.overflowMenuButton_.classList.add('shaka-overflow-menu-button');
  146.     this.overflowMenuButton_.classList.add('shaka-no-propagation');
  147.     this.overflowMenuButton_.classList.add('material-icons-round');
  148.     this.overflowMenuButton_.classList.add('shaka-tooltip');
  149.     this.overflowMenuButton_.textContent =
  150.       shaka.ui.Enums.MaterialDesignIcons.OPEN_OVERFLOW;
  151.     this.parent.appendChild(this.overflowMenuButton_);
  152.   }
  155.   /**
  156.    * @private
  157.    */
  158.   createChildren_() {
  159.     for (const name of this.config_.overflowMenuButtons) {
  160.       if (shaka.ui.OverflowMenu.elementNamesToFactories_.get(name)) {
  161.         const factory =
  162.             shaka.ui.OverflowMenu.elementNamesToFactories_.get(name);
  163.         goog.asserts.assert(this.controls, 'Controls should not be null!');
  164.         this.children_.push(factory.create(this.overflowMenu_, this.controls));
  165.       } else {
  166.         shaka.log.alwaysWarn('Unrecognized overflow menu element requested:',
  167.             name);
  168.       }
  169.     }
  170.   }
  173.   /** @private */
  174.   onOverflowMenuButtonClick_() {
  175.     if (this.controls.anySettingsMenusAreOpen()) {
  176.       this.controls.hideSettingsMenus();
  177.     } else {
  178.       shaka.ui.Utils.setDisplay(this.overflowMenu_, true);
  179.       this.controls.computeOpacity();
  181.       // If overflow menu has currently visible buttons, focus on the
  182.       // first one, when the menu opens.
  183.       const isDisplayed =
  184.           (element) => element.classList.contains('shaka-hidden') == false;
  186.       const Iterables = shaka.util.Iterables;
  187.       if (Iterables.some(this.overflowMenu_.childNodes, isDisplayed)) {
  188.         // Focus on the first visible child of the overflow menu
  189.         const visibleElements =
  190.           Iterables.filter(this.overflowMenu_.childNodes, isDisplayed);
  191.         /** @type {!HTMLElement} */ (visibleElements[0]).focus();
  192.       }
  193.     }
  194.   }
  197.   /**
  198.    * @private
  199.    */
  200.   updateAriaLabel_() {
  201.     const LocIds = shaka.ui.Locales.Ids;
  202.     this.overflowMenuButton_.ariaLabel =
  203.         this.localization.resolve(LocIds.MORE_SETTINGS);
  204.   }
  205. };
  208. /**
  209.  * @implements {shaka.extern.IUIElement.Factory}
  210.  * @final
  211.  */
  212. shaka.ui.OverflowMenu.Factory = class {
  213.   /** @override */
  214.   create(rootElement, controls) {
  215.     return new shaka.ui.OverflowMenu(rootElement, controls);
  216.   }
  217. };
  219. shaka.ui.Controls.registerElement(
  220.     'overflow_menu', new shaka.ui.OverflowMenu.Factory());
  223. /** @private {!Map<string, !shaka.extern.IUIElement.Factory>} */
  224. shaka.ui.OverflowMenu.elementNamesToFactories_ = new Map();