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 {HTMLElement } */
  43.     this.videoContainer_ = this.controls.getVideoContainer();
  45.     /** @private {!Array<shaka.extern.IUIElement>} */
  46.     this.children_ = [];
  48.     this.addOverflowMenuButton_();
  50.     this.addOverflowMenu_();
  52.     this.createChildren_();
  54.     this.eventManager.listen(
  55.         this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
  56.           this.updateAriaLabel_();
  57.         });
  59.     this.eventManager.listen(
  60.         this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
  61.           this.updateAriaLabel_();
  62.         });
  64.     this.eventManager.listen(
  65.         this.adManager, shaka.ads.Utils.AD_STARTED, () => {
  66.           if (this.ad && this.ad.isLinear()) {
  67.             shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
  68.           }
  69.         });
  71.     this.eventManager.listen(
  72.         this.adManager, shaka.ads.Utils.AD_STOPPED, () => {
  73.           shaka.ui.Utils.setDisplay(this.overflowMenuButton_, true);
  74.         });
  77.     this.eventManager.listen(
  78.         this.controls, 'submenuopen', () => {
  79.         // Hide the main overflow menu if one of the sub menus has
  80.         // been opened.
  81.           shaka.ui.Utils.setDisplay(this.overflowMenu_, false);
  82.         });
  85.     this.eventManager.listen(
  86.         this.overflowMenu_, 'touchstart', (event) => {
  87.           this.controls.setLastTouchEventTime(Date.now());
  88.           event.stopPropagation();
  89.         });
  91.     this.eventManager.listen(this.overflowMenuButton_, 'click', () => {
  92.       if (!this.controls.isOpaque()) {
  93.         return;
  94.       }
  95.       this.onOverflowMenuButtonClick_();
  96.     });
  98.     this.updateAriaLabel_();
  100.     if (this.ad && this.ad.isLinear()) {
  101.       // There was already an ad.
  102.       shaka.ui.Utils.setDisplay(this.overflowMenuButton_, false);
  103.     }
  105.     /** @private {ResizeObserver} */
  106.     this.resizeObserver_ = null;
  108.     const resize = () => this.computeMaxHeight_();
  110.     // Use ResizeObserver if available, fallback to window resize event
  111.     if (window.ResizeObserver) {
  112.       this.resizeObserver_ = new ResizeObserver(resize);
  113.       this.resizeObserver_.observe(this.controls.getVideoContainer());
  114.     } else {
  115.       // Fallback for older browsers
  116.       this.eventManager.listen(window, 'resize', resize);
  117.     }
  118.   }
  120.   /** @override */
  121.   release() {
  122.     this.controlsContainer_ = null;
  124.     for (const element of this.children_) {
  125.       element.release();
  126.     }
  128.     this.children_ = [];
  130.     if (this.resizeObserver_) {
  131.       this.resizeObserver_.disconnect();
  132.       this.resizeObserver_ = null;
  133.     }
  134.     super.release();
  135.   }
  137.   /**
  138.    * @param {string} name
  139.    * @param {!shaka.extern.IUIElement.Factory} factory
  140.    * @export
  141.    */
  142.   static registerElement(name, factory) {
  143.     shaka.ui.OverflowMenu.elementNamesToFactories_.set(name, factory);
  144.   }
  147.   /**
  148.    * @private
  149.    */
  150.   addOverflowMenu_() {
  151.     /** @private {!HTMLElement} */
  152.     this.overflowMenu_ = shaka.util.Dom.createHTMLElement('div');
  153.     this.overflowMenu_.classList.add('shaka-overflow-menu');
  154.     this.overflowMenu_.classList.add('shaka-no-propagation');
  155.     this.overflowMenu_.classList.add('shaka-show-controls-on-mouse-over');
  156.     this.overflowMenu_.classList.add('shaka-hidden');
  157.     this.controlsContainer_.appendChild(this.overflowMenu_);
  158.   }
  161.   /**
  162.    * @private
  163.    */
  164.   addOverflowMenuButton_() {
  165.     /** @private {!HTMLButtonElement} */
  166.     this.overflowMenuButton_ = shaka.util.Dom.createButton();
  167.     this.overflowMenuButton_.classList.add('shaka-overflow-menu-button');
  168.     this.overflowMenuButton_.classList.add('shaka-no-propagation');
  169.     this.overflowMenuButton_.classList.add('material-icons-round');
  170.     this.overflowMenuButton_.classList.add('shaka-tooltip');
  171.     this.overflowMenuButton_.textContent =
  172.       shaka.ui.Enums.MaterialDesignIcons.OPEN_OVERFLOW;
  173.     const markEl = shaka.util.Dom.createHTMLElement('span');
  174.     markEl.classList.add('shaka-overflow-quality-mark');
  175.     markEl.style.display = 'none';
  176.     this.overflowMenuButton_.appendChild(markEl);
  177.     this.parent.appendChild(this.overflowMenuButton_);
  178.   }
  181.   /**
  182.    * @private
  183.    */
  184.   createChildren_() {
  185.     for (const name of this.config_.overflowMenuButtons) {
  186.       if (shaka.ui.OverflowMenu.elementNamesToFactories_.get(name)) {
  187.         const factory =
  188.             shaka.ui.OverflowMenu.elementNamesToFactories_.get(name);
  189.         goog.asserts.assert(this.controls, 'Controls should not be null!');
  190.         this.children_.push(factory.create(this.overflowMenu_, this.controls));
  191.       } else {
  192.         shaka.log.alwaysWarn('Unrecognized overflow menu element requested:',
  193.             name);
  194.       }
  195.     }
  196.   }
  199.   /** @private */
  200.   onOverflowMenuButtonClick_() {
  201.     if (this.controls.anySettingsMenusAreOpen()) {
  202.       this.controls.hideSettingsMenus();
  203.     } else {
  204.       shaka.ui.Utils.setDisplay(this.overflowMenu_, true);
  205.       this.controls.computeOpacity();
  207.       // If overflow menu has currently visible buttons, focus on the
  208.       // first one, when the menu opens.
  209.       const isDisplayed =
  210.           (element) => element.classList.contains('shaka-hidden') == false;
  212.       const Iterables = shaka.util.Iterables;
  213.       if (Iterables.some(this.overflowMenu_.childNodes, isDisplayed)) {
  214.         // Focus on the first visible child of the overflow menu
  215.         const visibleElements =
  216.           Iterables.filter(this.overflowMenu_.childNodes, isDisplayed);
  217.         /** @type {!HTMLElement} */ (visibleElements[0]).focus();
  218.       }
  219.       this.computeMaxHeight_();
  220.     }
  221.   }
  224.   /**
  225.    * @private
  226.    */
  227.   updateAriaLabel_() {
  228.     const LocIds = shaka.ui.Locales.Ids;
  229.     this.overflowMenuButton_.ariaLabel =
  230.         this.localization.resolve(LocIds.MORE_SETTINGS);
  231.   }
  234.   /**
  235.    * @private
  236.    */
  237.   computeMaxHeight_() {
  238.     const rectMenu = this.overflowMenu_.getBoundingClientRect();
  239.     const styleMenu = window.getComputedStyle(this.overflowMenu_);
  240.     const paddingTop = parseFloat(styleMenu.paddingTop);
  241.     const paddingBottom = parseFloat(styleMenu.paddingBottom);
  242.     const rectContainer = this.videoContainer_.getBoundingClientRect();
  243.     const heightIntersection =
  244.         rectMenu.bottom - rectContainer.top - paddingTop - paddingBottom;
  246.     this.overflowMenu_.style.maxHeight = heightIntersection + 'px';
  247.   }
  248. };
  251. /**
  252.  * @implements {shaka.extern.IUIElement.Factory}
  253.  * @final
  254.  */
  255. shaka.ui.OverflowMenu.Factory = class {
  256.   /** @override */
  257.   create(rootElement, controls) {
  258.     return new shaka.ui.OverflowMenu(rootElement, controls);
  259.   }
  260. };
  262. shaka.ui.Controls.registerElement(
  263.     'overflow_menu', new shaka.ui.OverflowMenu.Factory());
  266. /** @private {!Map<string, !shaka.extern.IUIElement.Factory>} */
  267. shaka.ui.OverflowMenu.elementNamesToFactories_ = new Map();