Source: ui/controls.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.Controls');
  9. goog.provide('shaka.ui.ControlsPanel');
  11. goog.require('goog.asserts');
  12. goog.require('shaka.Deprecate');
  13. goog.require('shaka.ads.AdManager');
  14. goog.require('shaka.cast.CastProxy');
  15. goog.require('shaka.log');
  16. goog.require('shaka.ui.AdCounter');
  17. goog.require('shaka.ui.AdPosition');
  18. goog.require('shaka.ui.BigPlayButton');
  19. goog.require('shaka.ui.ContextMenu');
  20. goog.require('shaka.ui.Locales');
  21. goog.require('shaka.ui.Localization');
  22. goog.require('shaka.ui.SeekBar');
  23. goog.require('shaka.ui.Utils');
  24. goog.require('shaka.util.Dom');
  25. goog.require('shaka.util.EventManager');
  26. goog.require('shaka.util.FakeEvent');
  27. goog.require('shaka.util.FakeEventTarget');
  28. goog.require('shaka.util.IDestroyable');
  29. goog.require('shaka.util.Timer');
  31. goog.requireType('shaka.Player');
  34. /**
  35.  * A container for custom video controls.
  36.  * @implements {shaka.util.IDestroyable}
  37.  * @export
  38.  */
  39. shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
  40.   /**
  41.    * @param {!shaka.Player} player
  42.    * @param {!HTMLElement} videoContainer
  43.    * @param {!HTMLMediaElement} video
  44.    * @param {shaka.extern.UIConfiguration} config
  45.    */
  46.   constructor(player, videoContainer, video, config) {
  47.     super();
  49.     /** @private {boolean} */
  50.     this.enabled_ = true;
  52.     /** @private {shaka.extern.UIConfiguration} */
  53.     this.config_ = config;
  55.     /** @private {shaka.cast.CastProxy} */
  56.     this.castProxy_ = new shaka.cast.CastProxy(
  57.         video, player, this.config_.castReceiverAppId);
  59.     /** @private {boolean} */
  60.     this.castAllowed_ = true;
  62.     /** @private {HTMLMediaElement} */
  63.     this.video_ = this.castProxy_.getVideo();
  65.     /** @private {HTMLMediaElement} */
  66.     this.localVideo_ = video;
  68.     /** @private {shaka.Player} */
  69.     this.player_ = this.castProxy_.getPlayer();
  71.     /** @private {shaka.Player} */
  72.     this.localPlayer_ = player;
  74.     /** @private {!HTMLElement} */
  75.     this.videoContainer_ = videoContainer;
  77.     /** @private {shaka.extern.IAdManager} */
  78.     this.adManager_ = this.player_.getAdManager();
  80.     /** @private {?shaka.extern.IAd} */
  81.     this.ad_ = null;
  83.     /** @private {?shaka.extern.IUISeekBar} */
  84.     this.seekBar_ = null;
  86.     /** @private {boolean} */
  87.     this.isSeeking_ = false;
  89.     /** @private {!Array.<!HTMLElement>} */
  90.     this.menus_ = [];
  92.     /**
  93.      * Individual controls which, when hovered or tab-focused, will force the
  94.      * controls to be shown.
  95.      * @private {!Array.<!Element>}
  96.      */
  97.     this.showOnHoverControls_ = [];
  99.     /** @private {boolean} */
  100.     this.recentMouseMovement_ = false;
  102.     /**
  103.      * This timer is used to detect when the user has stopped moving the mouse
  104.      * and we should fade out the ui.
  105.      *
  106.      * @private {shaka.util.Timer}
  107.      */
  108.     this.mouseStillTimer_ = new shaka.util.Timer(() => {
  109.       this.onMouseStill_();
  110.     });
  112.     /**
  113.      * This timer is used to delay the fading of the UI.
  114.      *
  115.      * @private {shaka.util.Timer}
  116.      */
  117.     this.fadeControlsTimer_ = new shaka.util.Timer(() => {
  118.       this.controlsContainer_.removeAttribute('shown');
  120.       // If there's an overflow menu open, keep it this way for a couple of
  121.       // seconds in case a user immediately initiates another mouse move to
  122.       // interact with the menus. If that didn't happen, go ahead and hide
  123.       // the menus.
  124.       this.hideSettingsMenusTimer_.tickAfter(/* seconds= */ 2);
  125.     });
  127.     /**
  128.      * This timer will be used to hide all settings menus. When the timer ticks
  129.      * it will force all controls to invisible.
  130.      *
  131.      * Rather than calling the callback directly, |Controls| will always call it
  132.      * through the timer to avoid conflicts.
  133.      *
  134.      * @private {shaka.util.Timer}
  135.      */
  136.     this.hideSettingsMenusTimer_ = new shaka.util.Timer(() => {
  137.       for (const menu of this.menus_) {
  138.         shaka.ui.Utils.setDisplay(menu, /* visible= */ false);
  139.       }
  140.     });
  142.     /**
  143.      * This timer is used to regularly update the time and seek range elements
  144.      * so that we are communicating the current state as accurately as possibly.
  145.      *
  146.      * Unlike the other timers, this timer does not "own" the callback because
  147.      * this timer is acting like a heartbeat.
  148.      *
  149.      * @private {shaka.util.Timer}
  150.      */
  151.     this.timeAndSeekRangeTimer_ = new shaka.util.Timer(() => {
  152.       // Suppress timer-based updates if the controls are hidden.
  153.       if (this.isOpaque()) {
  154.         this.updateTimeAndSeekRange_();
  155.       }
  156.     });
  158.     /** @private {?number} */
  159.     this.lastTouchEventTime_ = null;
  161.     /** @private {!Array.<!shaka.extern.IUIElement>} */
  162.     this.elements_ = [];
  164.     /** @private {shaka.ui.Localization} */
  165.     this.localization_ = shaka.ui.Controls.createLocalization_();
  167.     /** @private {shaka.util.EventManager} */
  168.     this.eventManager_ = new shaka.util.EventManager();
  170.     // Configure and create the layout of the controls
  171.     this.configure(this.config_);
  172.     this.addEventListeners_();
  174.     /**
  175.      * The pressed keys set is used to record which keys are currently pressed
  176.      * down, so we can know what keys are pressed at the same time.
  177.      * Used by the focusInsideOverflowMenu_() function.
  178.      * @private {!Set.<string>}
  179.      */
  180.     this.pressedKeys_ = new Set();
  182.     // We might've missed a caststatuschanged event from the proxy between
  183.     // the controls creation and initializing. Run onCastStatusChange_()
  184.     // to ensure we have the casting state right.
  185.     this.onCastStatusChange_();
  187.     // Start this timer after we are finished initializing everything,
  188.     this.timeAndSeekRangeTimer_.tickEvery(/* seconds= */ 0.125);
  190.     this.eventManager_.listen(this.localization_,
  191.         shaka.ui.Localization.LOCALE_CHANGED, (e) => {
  192.           const locale = e['locales'][0];
  193.           this.adManager_.setLocale(locale);
  194.         });
  195.   }
  197.   /**
  198.    * @override
  199.    * @export
  200.    */
  201.   async destroy() {
  202.     if (document.pictureInPictureElement == this.localVideo_) {
  203.       await document.exitPictureInPicture();
  204.     }
  206.     if (this.eventManager_) {
  207.       this.eventManager_.release();
  208.       this.eventManager_ = null;
  209.     }
  211.     if (this.mouseStillTimer_) {
  212.       this.mouseStillTimer_.stop();
  213.       this.mouseStillTimer_ = null;
  214.     }
  216.     if (this.fadeControlsTimer_) {
  217.       this.fadeControlsTimer_.stop();
  218.       this.fadeControlsTimer_ = null;
  219.     }
  221.     if (this.hideSettingsMenusTimer_) {
  222.       this.hideSettingsMenusTimer_.stop();
  223.       this.hideSettingsMenusTimer_ = null;
  224.     }
  226.     if (this.timeAndSeekRangeTimer_) {
  227.       this.timeAndSeekRangeTimer_.stop();
  228.       this.timeAndSeekRangeTimer_ = null;
  229.     }
  231.     // Important!  Release all child elements before destroying the cast proxy
  232.     // or player.  This makes sure those destructions will not trigger event
  233.     // listeners in the UI which would then invoke the cast proxy or player.
  234.     this.releaseChildElements_();
  236.     if (this.controlsContainer_) {
  237.       this.videoContainer_.removeChild(this.controlsContainer_);
  238.       this.controlsContainer_ = null;
  239.     }
  241.     if (this.castProxy_) {
  242.       await this.castProxy_.destroy();
  243.       this.castProxy_ = null;
  244.     }
  246.     if (this.localPlayer_) {
  247.       await this.localPlayer_.destroy();
  248.       this.localPlayer_ = null;
  249.     }
  250.     this.player_ = null;
  252.     this.localVideo_ = null;
  253.     this.video_ = null;
  255.     this.localization_ = null;
  256.     this.pressedKeys_.clear();
  258.     // FakeEventTarget implements IReleasable
  259.     super.release();
  260.   }
  263.   /** @private */
  264.   releaseChildElements_() {
  265.     for (const element of this.elements_) {
  266.       element.release();
  267.     }
  269.     this.elements_ = [];
  270.   }
  272.   /**
  273.    * @param {string} name
  274.    * @param {!shaka.extern.IUIElement.Factory} factory
  275.    * @export
  276.    */
  277.   static registerElement(name, factory) {
  278.     shaka.ui.ControlsPanel.elementNamesToFactories_.set(name, factory);
  279.   }
  281.   /**
  282.    * @param {!shaka.extern.IUISeekBar.Factory} factory
  283.    * @export
  284.    */
  285.   static registerSeekBar(factory) {
  286.     shaka.ui.ControlsPanel.seekBarFactory_ = factory;
  287.   }
  289.   /**
  290.    * This allows the application to inhibit casting.
  291.    *
  292.    * @param {boolean} allow
  293.    * @export
  294.    */
  295.   allowCast(allow) {
  296.     this.castAllowed_ = allow;
  297.     this.onCastStatusChange_();
  298.   }
  300.   /**
  301.    * Used by the application to notify the controls that a load operation is
  302.    * complete.  This allows the controls to recalculate play/paused state, which
  303.    * is important for platforms like Android where autoplay is disabled.
  304.    * @export
  305.    */
  306.   loadComplete() {
  307.     // If we are on Android or if autoplay is false, video.paused should be
  308.     // true. Otherwise, video.paused is false and the content is autoplaying.
  309.     this.onPlayStateChange_();
  310.   }
  312.   /**
  313.    * @param {!shaka.extern.UIConfiguration} config
  314.    * @export
  315.    */
  316.   configure(config) {
  317.     this.config_ = config;
  319.     this.castProxy_.changeReceiverId(config.castReceiverAppId);
  321.     // Deconstruct the old layout if applicable
  322.     if (this.seekBar_) {
  323.       this.seekBar_ = null;
  324.     }
  326.     if (this.playButton_) {
  327.       this.playButton_ = null;
  328.     }
  330.     if (this.contextMenu_) {
  331.       this.contextMenu_ = null;
  332.     }
  334.     if (this.controlsContainer_) {
  335.       shaka.util.Dom.removeAllChildren(this.controlsContainer_);
  336.       this.releaseChildElements_();
  337.     } else {
  338.       this.addControlsContainer_();
  339.       // The client-side ad container is only created once, and is never
  340.       // re-created or uprooted in the DOM, even when the DOM is re-created,
  341.       // since that seemingly breaks the IMA SDK.
  342.       this.addClientAdContainer_();
  343.     }
  345.     // Create the new layout
  346.     this.createDOM_();
  348.     // Init the play state
  349.     this.onPlayStateChange_();
  351.     // Elements that should not propagate clicks (controls panel, menus)
  352.     const noPropagationElements = this.videoContainer_.getElementsByClassName(
  353.         'shaka-no-propagation');
  354.     for (const element of noPropagationElements) {
  355.       const cb = (event) => event.stopPropagation();
  356.       this.eventManager_.listen(element, 'click', cb);
  357.       this.eventManager_.listen(element, 'dblclick', cb);
  358.     }
  359.   }
  361.   /**
  362.    * Enable or disable the custom controls. Enabling disables native
  363.    * browser controls.
  364.    *
  365.    * @param {boolean} enabled
  366.    * @export
  367.    */
  368.   setEnabledShakaControls(enabled) {
  369.     this.enabled_ = enabled;
  370.     if (enabled) {
  371.       this.videoContainer_.setAttribute('shaka-controls', 'true');
  373.       // If we're hiding native controls, make sure the video element itself is
  374.       // not tab-navigable.  Our custom controls will still be tab-navigable.
  375.       this.localVideo_.tabIndex = -1;
  376.       this.localVideo_.controls = false;
  377.     } else {
  378.       this.videoContainer_.removeAttribute('shaka-controls');
  379.     }
  381.     // The effects of play state changes are inhibited while showing native
  382.     // browser controls.  Recalculate that state now.
  383.     this.onPlayStateChange_();
  384.   }
  386.   /**
  387.    * Enable or disable native browser controls. Enabling disables shaka
  388.    * controls.
  389.    *
  390.    * @param {boolean} enabled
  391.    * @export
  392.    */
  393.   setEnabledNativeControls(enabled) {
  394.     // If we enable the native controls, the element must be tab-navigable.
  395.     // If we disable the native controls, we want to make sure that the video
  396.     // element itself is not tab-navigable, so that the element is skipped over
  397.     // when tabbing through the page.
  398.     this.localVideo_.controls = enabled;
  399.     this.localVideo_.tabIndex = enabled ? 0 : -1;
  401.     if (enabled) {
  402.       this.setEnabledShakaControls(false);
  403.     }
  404.   }
  406.   /**
  407.    * @export
  408.    * @return {?shaka.extern.IAd}
  409.    */
  410.   getAd() {
  411.     return this.ad_;
  412.   }
  414.   /**
  415.    * @export
  416.    * @return {shaka.cast.CastProxy}
  417.    */
  418.   getCastProxy() {
  419.     return this.castProxy_;
  420.   }
  422.   /**
  423.    * @return {shaka.ui.Localization}
  424.    * @export
  425.    */
  426.   getLocalization() {
  427.     return this.localization_;
  428.   }
  430.   /**
  431.    * @return {!HTMLElement}
  432.    * @export
  433.    */
  434.   getVideoContainer() {
  435.     return this.videoContainer_;
  436.   }
  438.   /**
  439.    * @return {HTMLMediaElement}
  440.    * @export
  441.    */
  442.   getVideo() {
  443.     return this.video_;
  444.   }
  446.   /**
  447.    * @return {HTMLMediaElement}
  448.    * @export
  449.    */
  450.   getLocalVideo() {
  451.     return this.localVideo_;
  452.   }
  454.   /**
  455.    * @return {shaka.Player}
  456.    * @export
  457.    */
  458.   getPlayer() {
  459.     return this.player_;
  460.   }
  462.   /**
  463.    * @return {shaka.Player}
  464.    * @export
  465.    */
  466.   getLocalPlayer() {
  467.     return this.localPlayer_;
  468.   }
  470.   /**
  471.    * @return {!HTMLElement}
  472.    * @export
  473.    */
  474.   getControlsContainer() {
  475.     goog.asserts.assert(
  476.         this.controlsContainer_, 'No controls container after destruction!');
  477.     return this.controlsContainer_;
  478.   }
  480.   /**
  481.    * @return {!HTMLElement}
  482.    * @export
  483.    */
  484.   getServerSideAdContainer() {
  485.     return this.daiAdContainer_;
  486.   }
  488.   /**
  489.    * @return {!HTMLElement}
  490.    * @export
  491.    */
  492.   getClientSideAdContainer() {
  493.     return this.clientAdContainer_;
  494.   }
  496.   /**
  497.    * @return {!shaka.extern.UIConfiguration}
  498.    * @export
  499.    */
  500.   getConfig() {
  501.     return this.config_;
  502.   }
  504.   /**
  505.    * @return {boolean}
  506.    * @export
  507.    */
  508.   isSeeking() {
  509.     return this.isSeeking_;
  510.   }
  513.   /**
  514.    * @param {boolean} seeking
  515.    * @export
  516.    */
  517.   setSeeking(seeking) {
  518.     this.isSeeking_ = seeking;
  519.   }
  521.   /**
  522.    * @return {boolean}
  523.    * @export
  524.    */
  525.   isCastAllowed() {
  526.     return this.castAllowed_;
  527.   }
  529.   /**
  530.    * @return {number}
  531.    * @export
  532.    */
  533.   getDisplayTime() {
  534.     return this.seekBar_ ? this.seekBar_.getValue() : this.video_.currentTime;
  535.   }
  537.   /**
  538.    * @param {?number} time
  539.    * @export
  540.    */
  541.   setLastTouchEventTime(time) {
  542.     this.lastTouchEventTime_ = time;
  543.   }
  545.   /**
  546.    * @return {boolean}
  547.    * @export
  548.    */
  549.   anySettingsMenusAreOpen() {
  550.     return this.menus_.some(
  551.         (menu) => !menu.classList.contains('shaka-hidden'));
  552.   }
  554.   /** @export */
  555.   hideSettingsMenus() {
  556.     this.hideSettingsMenusTimer_.tickNow();
  557.   }
  559.   /** @export */
  560.   async toggleFullScreen() {
  561.     if (document.fullscreenElement) {
  562.       if (screen.orientation) {
  563.         screen.orientation.unlock();
  564.       }
  565.       await document.exitFullscreen();
  566.     } else {
  567.       // If we are in PiP mode, leave PiP mode first.
  568.       try {
  569.         if (document.pictureInPictureElement) {
  570.           await document.exitPictureInPicture();
  571.         }
  572.         await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
  573.         if (this.config_.forceLandscapeOnFullscreen && screen.orientation) {
  574.           try {
  575.             // Locking to 'landscape' should let it be either
  576.             // 'landscape-primary' or 'landscape-secondary' as appropriate.
  577.             await screen.orientation.lock('landscape');
  578.           } catch (error) {
  579.             // If screen.orientation.lock does not work on a device, it will
  580.             // be rejected with an error. Suppress that error.
  581.           }
  582.         }
  583.       } catch (error) {
  584.         this.dispatchEvent(new shaka.util.FakeEvent(
  585.             'error', (new Map()).set('detail', error)));
  586.       }
  587.     }
  588.   }
  590.   /** @export */
  591.   showAdUI() {
  592.     shaka.ui.Utils.setDisplay(this.adPanel_, true);
  593.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, true);
  594.     this.controlsContainer_.setAttribute('ad-active', 'true');
  595.   }
  597.   /** @export */
  598.   hideAdUI() {
  599.     shaka.ui.Utils.setDisplay(this.adPanel_, false);
  600.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
  601.     this.controlsContainer_.removeAttribute('ad-active');
  602.   }
  604.   /**
  605.    * Play or pause the current presentation.
  606.    */
  607.   playPausePresentation() {
  608.     if (!this.enabled_) {
  609.       return;
  610.     }
  612.     if (!this.video_.duration) {
  613.       // Can't play yet.  Ignore.
  614.       return;
  615.     }
  617.     this.player_.cancelTrickPlay();
  619.     if (this.presentationIsPaused()) {
  620.       this.video_.play();
  621.     } else {
  622.       this.video_.pause();
  623.     }
  624.   }
  626.   /**
  627.    * Play or pause the current ad.
  628.    */
  629.   playPauseAd() {
  630.     if (this.ad_ && this.ad_.isPaused()) {
  631.       this.ad_.play();
  632.     } else if (this.ad_) {
  633.       this.ad_.pause();
  634.     }
  635.   }
  638.   /**
  639.    * Return true if the presentation is paused.
  640.    *
  641.    * @return {boolean}
  642.    */
  643.   presentationIsPaused() {
  644.     // The video element is in a paused state while seeking, but we don't count
  645.     // that.
  646.     return this.video_.paused && !this.isSeeking();
  647.   }
  650.   /** @private */
  651.   createDOM_() {
  652.     this.videoContainer_.classList.add('shaka-video-container');
  653.     this.localVideo_.classList.add('shaka-video');
  655.     this.addScrimContainer_();
  657.     if (this.config_.addBigPlayButton) {
  658.       this.addPlayButton_();
  659.     }
  661.     if (this.config_.customContextMenu) {
  662.       this.addContextMenu_();
  663.     }
  665.     if (!this.spinnerContainer_) {
  666.       this.addBufferingSpinner_();
  667.     }
  669.     this.addDaiAdContainer_();
  671.     this.addControlsButtonPanel_();
  673.     this.menus_ = Array.from(
  674.         this.videoContainer_.getElementsByClassName('shaka-settings-menu'));
  675.     this.menus_.push(...Array.from(
  676.         this.videoContainer_.getElementsByClassName('shaka-overflow-menu')));
  678.     this.addSeekBar_();
  680.     this.showOnHoverControls_ = Array.from(
  681.         this.videoContainer_.getElementsByClassName(
  682.             'shaka-show-controls-on-mouse-over'));
  683.   }
  685.   /** @private */
  686.   addControlsContainer_() {
  687.     /** @private {HTMLElement} */
  688.     this.controlsContainer_ = shaka.util.Dom.createHTMLElement('div');
  689.     this.controlsContainer_.classList.add('shaka-controls-container');
  690.     this.videoContainer_.appendChild(this.controlsContainer_);
  692.     // Use our controls by default, without anyone calling
  693.     // setEnabledShakaControls:
  694.     this.videoContainer_.setAttribute('shaka-controls', 'true');
  696.     this.eventManager_.listen(this.controlsContainer_, 'touchstart', (e) => {
  697.       this.onContainerTouch_(e);
  698.     }, {passive: false});
  700.     this.eventManager_.listen(this.controlsContainer_, 'click', () => {
  701.       this.onContainerClick_();
  702.     });
  704.     this.eventManager_.listen(this.controlsContainer_, 'dblclick', () => {
  705.       if (this.config_.doubleClickForFullscreen && document.fullscreenEnabled) {
  706.         this.toggleFullScreen();
  707.       }
  708.     });
  709.   }
  711.   /** @private */
  712.   addPlayButton_() {
  713.     const playButtonContainer = shaka.util.Dom.createHTMLElement('div');
  714.     playButtonContainer.classList.add('shaka-play-button-container');
  715.     this.controlsContainer_.appendChild(playButtonContainer);
  717.     /** @private {shaka.ui.BigPlayButton} */
  718.     this.playButton_ =
  719.         new shaka.ui.BigPlayButton(playButtonContainer, this);
  720.     this.elements_.push(this.playButton_);
  721.   }
  723.   /** @private */
  724.   addContextMenu_() {
  725.     /** @private {shaka.ui.ContextMenu} */
  726.     this.contextMenu_ =
  727.         new shaka.ui.ContextMenu(this.controlsButtonPanel_, this);
  728.     this.elements_.push(this.contextMenu_);
  729.   }
  731.   /** @private */
  732.   addScrimContainer_() {
  733.     // This is the container that gets styled by CSS to have the
  734.     // black gradient scrim at the end of the controls.
  735.     const scrimContainer = shaka.util.Dom.createHTMLElement('div');
  736.     scrimContainer.classList.add('shaka-scrim-container');
  737.     this.controlsContainer_.appendChild(scrimContainer);
  738.   }
  740.   /** @private */
  741.   addAdControls_() {
  742.     /** @private {!HTMLElement} */
  743.     this.adPanel_ = shaka.util.Dom.createHTMLElement('div');
  744.     this.adPanel_.classList.add('shaka-ad-controls');
  745.     const showAdPanel = this.ad_ != null && this.ad_.isLinear();
  746.     shaka.ui.Utils.setDisplay(this.adPanel_, showAdPanel);
  747.     this.bottomControls_.appendChild(this.adPanel_);
  749.     const adPosition = new shaka.ui.AdPosition(this.adPanel_, this);
  750.     this.elements_.push(adPosition);
  752.     const adCounter = new shaka.ui.AdCounter(this.adPanel_, this);
  753.     this.elements_.push(adCounter);
  754.   }
  756.   /** @private */
  757.   addBufferingSpinner_() {
  758.     /** @private {!HTMLElement} */
  759.     this.spinnerContainer_ = shaka.util.Dom.createHTMLElement('div');
  760.     this.spinnerContainer_.classList.add('shaka-spinner-container');
  761.     this.videoContainer_.appendChild(this.spinnerContainer_);
  763.     const spinner = shaka.util.Dom.createHTMLElement('div');
  764.     spinner.classList.add('shaka-spinner');
  765.     this.spinnerContainer_.appendChild(spinner);
  767.     // Svg elements have to be created with the svg xml namespace.
  768.     const xmlns = 'http://www.w3.org/2000/svg';
  770.     const svg =
  771.       /** @type {!HTMLElement} */(document.createElementNS(xmlns, 'svg'));
  772.     svg.classList.add('shaka-spinner-svg');
  773.     svg.setAttribute('viewBox', '0 0 30 30');
  774.     spinner.appendChild(svg);
  776.     // These coordinates are relative to the SVG viewBox above.  This is
  777.     // distinct from the actual display size in the page, since the "S" is for
  778.     // "Scalable." The radius of 14.5 is so that the edges of the 1-px-wide
  779.     // stroke will touch the edges of the viewBox.
  780.     const spinnerCircle = document.createElementNS(xmlns, 'circle');
  781.     spinnerCircle.classList.add('shaka-spinner-path');
  782.     spinnerCircle.setAttribute('cx', '15');
  783.     spinnerCircle.setAttribute('cy', '15');
  784.     spinnerCircle.setAttribute('r', '14.5');
  785.     spinnerCircle.setAttribute('fill', 'none');
  786.     spinnerCircle.setAttribute('stroke-width', '1');
  787.     spinnerCircle.setAttribute('stroke-miterlimit', '10');
  788.     svg.appendChild(spinnerCircle);
  789.   }
  791.   /** @private */
  792.   addControlsButtonPanel_() {
  793.     /** @private {!HTMLElement} */
  794.     this.bottomControls_ = shaka.util.Dom.createHTMLElement('div');
  795.     this.bottomControls_.classList.add('shaka-bottom-controls');
  796.     this.bottomControls_.classList.add('shaka-no-propagation');
  797.     this.controlsContainer_.appendChild(this.bottomControls_);
  799.     // Overflow menus are supposed to hide once you click elsewhere
  800.     // on the page. The click event listener on window ensures that.
  801.     // However, clicks on the bottom controls don't propagate to the container,
  802.     // so we have to explicitly hide the menus onclick here.
  803.     this.eventManager_.listen(this.bottomControls_, 'click', (e) => {
  804.       // We explicitly deny this measure when clicking on buttons that
  805.       // open submenus in the control panel.
  806.       if (!e.target['closest']('.shaka-overflow-button')) {
  807.         this.hideSettingsMenus();
  808.       }
  809.     });
  811.     this.addAdControls_();
  813.     /** @private {!HTMLElement} */
  814.     this.controlsButtonPanel_ = shaka.util.Dom.createHTMLElement('div');
  815.     this.controlsButtonPanel_.classList.add('shaka-controls-button-panel');
  816.     this.controlsButtonPanel_.classList.add(
  817.         'shaka-show-controls-on-mouse-over');
  818.     if (this.config_.enableTooltips) {
  819.       this.controlsButtonPanel_.classList.add('shaka-tooltips-on');
  820.     }
  821.     this.bottomControls_.appendChild(this.controlsButtonPanel_);
  823.     // Create the elements specified by controlPanelElements
  824.     for (const name of this.config_.controlPanelElements) {
  825.       if (shaka.ui.ControlsPanel.elementNamesToFactories_.get(name)) {
  826.         const factory =
  827.             shaka.ui.ControlsPanel.elementNamesToFactories_.get(name);
  828.         const element = factory.create(this.controlsButtonPanel_, this);
  830.         if (typeof element.release != 'function') {
  831.           shaka.Deprecate.deprecateFeature(4,
  832.               'shaka.extern.IUIElement',
  833.               'Please update UI elements to have a release() method.');
  835.           // This cast works around compiler strictness about the IUIElement
  836.           // type being "@struct" (as ES6 classes are by default).
  837.           const moddableElement = /** @type {Object} */(element);
  838.           moddableElement['release'] = () => {
  839.             if (moddableElement['destroy']) {
  840.               moddableElement['destroy']();
  841.             }
  842.           };
  843.         }
  845.         this.elements_.push(element);
  846.       } else {
  847.         shaka.log.alwaysWarn('Unrecognized control panel element requested:',
  848.             name);
  849.       }
  850.     }
  851.   }
  854.   /**
  855.    * Adds a container for server side ad UI with IMA SDK.
  856.    *
  857.    * @private
  858.    */
  859.   addDaiAdContainer_() {
  860.     /** @private {!HTMLElement} */
  861.     this.daiAdContainer_ = shaka.util.Dom.createHTMLElement('div');
  862.     this.daiAdContainer_.classList.add('shaka-server-side-ad-container');
  863.     this.controlsContainer_.appendChild(this.daiAdContainer_);
  864.   }
  867.   /**
  868.    * Adds a seekbar depending on the configuration.
  869.    * By default an instance of shaka.ui.SeekBar is created
  870.    * This behaviour can be overriden by providing a SeekBar factory using the
  871.    * registerSeekBarFactory function.
  872.    *
  873.    * @private
  874.    */
  875.   addSeekBar_() {
  876.     if (this.config_.addSeekBar) {
  877.       this.seekBar_ = shaka.ui.ControlsPanel.seekBarFactory_.create(
  878.           this.bottomControls_, this);
  879.       this.elements_.push(this.seekBar_);
  880.     } else {
  881.       // Settings menus need to be positioned lower if the seekbar is absent.
  882.       for (const menu of this.menus_) {
  883.         menu.classList.add('shaka-low-position');
  884.       }
  885.     }
  886.   }
  889.   /**
  890.    * Adds a container for client side ad UI with IMA SDK.
  891.    *
  892.    * @private
  893.    */
  894.   addClientAdContainer_() {
  895.     /** @private {!HTMLElement} */
  896.     this.clientAdContainer_ = shaka.util.Dom.createHTMLElement('div');
  897.     this.clientAdContainer_.classList.add('shaka-client-side-ad-container');
  898.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
  899.     this.eventManager_.listen(this.clientAdContainer_, 'click', () => {
  900.       this.onContainerClick_();
  901.     });
  902.     this.videoContainer_.appendChild(this.clientAdContainer_);
  903.   }
  905.   /**
  906.    * Adds static event listeners.  This should only add event listeners to
  907.    * things that don't change (e.g. Player).  Dynamic elements (e.g. controls)
  908.    * should have their event listeners added when they are created.
  909.    *
  910.    * @private
  911.    */
  912.   addEventListeners_() {
  913.     this.eventManager_.listen(this.player_, 'buffering', () => {
  914.       this.onBufferingStateChange_();
  915.     });
  916.     // Set the initial state, as well.
  917.     this.onBufferingStateChange_();
  919.     // Listen for key down events to detect tab and enable outline
  920.     // for focused elements.
  921.     this.eventManager_.listen(window, 'keydown', (e) => {
  922.       this.onWindowKeyDown_(/** @type {!KeyboardEvent} */(e));
  923.     });
  925.     // Listen for click events to dismiss the settings menus.
  926.     this.eventManager_.listen(window, 'click', () => this.hideSettingsMenus());
  928.     // Avoid having multiple submenus open at the same time.
  929.     this.eventManager_.listen(
  930.         this, 'submenuopen', () => {
  931.           this.hideSettingsMenus();
  932.         });
  934.     this.eventManager_.listen(this.video_, 'play', () => {
  935.       this.onPlayStateChange_();
  936.     });
  938.     this.eventManager_.listen(this.video_, 'pause', () => {
  939.       this.onPlayStateChange_();
  940.     });
  942.     this.eventManager_.listen(this.videoContainer_, 'mousemove', (e) => {
  943.       this.onMouseMove_(e);
  944.     });
  946.     this.eventManager_.listen(this.videoContainer_, 'touchmove', (e) => {
  947.       this.onMouseMove_(e);
  948.     }, {passive: true});
  950.     this.eventManager_.listen(this.videoContainer_, 'touchend', (e) => {
  951.       this.onMouseMove_(e);
  952.     }, {passive: true});
  954.     this.eventManager_.listen(this.videoContainer_, 'mouseleave', () => {
  955.       this.onMouseLeave_();
  956.     });
  958.     this.eventManager_.listen(this.castProxy_, 'caststatuschanged', () => {
  959.       this.onCastStatusChange_();
  960.     });
  962.     this.eventManager_.listen(this.videoContainer_, 'keydown', (e) => {
  963.       this.onControlsKeyDown_(/** @type {!KeyboardEvent} */(e));
  964.     });
  966.     this.eventManager_.listen(this.videoContainer_, 'keyup', (e) => {
  967.       this.onControlsKeyUp_(/** @type {!KeyboardEvent} */(e));
  968.     });
  970.     this.eventManager_.listen(
  971.         this.adManager_, shaka.ads.AdManager.AD_STARTED, (e) => {
  972.           this.ad_ = (/** @type {!Object} */ (e))['ad'];
  973.           this.showAdUI();
  974.         });
  976.     this.eventManager_.listen(
  977.         this.adManager_, shaka.ads.AdManager.AD_STOPPED, () => {
  978.           this.ad_ = null;
  979.           this.hideAdUI();
  980.         });
  982.     if (screen.orientation) {
  983.       this.eventManager_.listen(screen.orientation, 'change', async () => {
  984.         await this.onScreenRotation_();
  985.       });
  986.     }
  988.     this.eventManager_.listen(document, 'fullscreenchange', () => {
  989.       if (this.ad_) {
  990.         this.ad_.resize(
  991.             this.localVideo_.offsetWidth, this.localVideo_.offsetHeight);
  992.       }
  993.     });
  994.   }
  997.   /**
  998.    * When a mobile device is rotated to landscape layout, and the video is
  999.    * loaded, make the demo app go into fullscreen.
  1000.    * Similarly, exit fullscreen when the device is rotated to portrait layout.
  1001.    * @private
  1002.    */
  1003.   async onScreenRotation_() {
  1004.     if (!this.video_ ||
  1005.         this.video_.readyState == 0 ||
  1006.         this.castProxy_.isCasting() ||
  1007.         !this.config_.enableFullscreenOnRotation ||
  1008.         !document.fullscreenEnabled) {
  1009.       return;
  1010.     }
  1012.     if (screen.orientation.type.includes('landscape') &&
  1013.         !document.fullscreenElement) {
  1014.       await this.videoContainer_.requestFullscreen({navigationUI: 'hide'});
  1015.     } else if (screen.orientation.type.includes('portrait') &&
  1016.         document.fullscreenElement) {
  1017.       await document.exitFullscreen();
  1018.     }
  1019.   }
  1022.   /**
  1023.    * Hiding the cursor when the mouse stops moving seems to be the only
  1024.    * decent UX in fullscreen mode.  Since we can't use pure CSS for that,
  1025.    * we use events both in and out of fullscreen mode.
  1026.    * Showing the control bar when a key is pressed, and hiding it after some
  1027.    * time.
  1028.    * @param {!Event} event
  1029.    * @private
  1030.    */
  1031.   onMouseMove_(event) {
  1032.     // Disable blue outline for focused elements for mouse navigation.
  1033.     if (event.type == 'mousemove') {
  1034.       this.controlsContainer_.classList.remove('shaka-keyboard-navigation');
  1035.       this.computeOpacity();
  1036.     }
  1037.     if (event.type == 'touchstart' || event.type == 'touchmove' ||
  1038.         event.type == 'touchend' || event.type == 'keyup') {
  1039.       this.lastTouchEventTime_ = Date.now();
  1040.     } else if (this.lastTouchEventTime_ + 1000 < Date.now()) {
  1041.       // It has been a while since the last touch event, this is probably a real
  1042.       // mouse moving, so treat it like a mouse.
  1043.       this.lastTouchEventTime_ = null;
  1044.     }
  1046.     // When there is a touch, we can get a 'mousemove' event after touch events.
  1047.     // This should be treated as part of the touch, which has already been
  1048.     // handled.
  1049.     if (this.lastTouchEventTime_ && event.type == 'mousemove') {
  1050.       return;
  1051.     }
  1053.     // Use the cursor specified in the CSS file.
  1054.     this.videoContainer_.style.cursor = '';
  1056.     this.recentMouseMovement_ = true;
  1058.     // Make sure we are not about to hide the settings menus and then force them
  1059.     // open.
  1060.     this.hideSettingsMenusTimer_.stop();
  1062.     if (!this.isOpaque()) {
  1063.       // Only update the time and seek range on mouse movement if it's the very
  1064.       // first movement and we're about to show the controls.  Otherwise, the
  1065.       // seek bar will be updated much more rapidly during mouse movement.  Do
  1066.       // this right before making it visible.
  1067.       this.updateTimeAndSeekRange_();
  1068.       this.computeOpacity();
  1069.     }
  1071.     // Hide the cursor when the mouse stops moving.
  1072.     // Only applies while the cursor is over the video container.
  1073.     this.mouseStillTimer_.stop();
  1075.     // Only start a timeout on 'touchend' or for 'mousemove' with no touch
  1076.     // events.
  1077.     if (event.type == 'touchend' ||
  1078.         event.type == 'keyup'|| !this.lastTouchEventTime_) {
  1079.       this.mouseStillTimer_.tickAfter(/* seconds= */ 3);
  1080.     }
  1081.   }
  1083.   /** @private */
  1084.   onMouseLeave_() {
  1085.     // We sometimes get 'mouseout' events with touches.  Since we can never
  1086.     // leave the video element when touching, ignore.
  1087.     if (this.lastTouchEventTime_) {
  1088.       return;
  1089.     }
  1091.     // Stop the timer and invoke the callback now to hide the controls.  If we
  1092.     // don't, the opacity style we set in onMouseMove_ will continue to override
  1093.     // the opacity in CSS and force the controls to stay visible.
  1094.     this.mouseStillTimer_.tickNow();
  1095.   }
  1097.   /**
  1098.    * This callback is for when we are pretty sure that the mouse has stopped
  1099.    * moving (aka the mouse is still). This method should only be called via
  1100.    * |mouseStillTimer_|. If this behaviour needs to be invoked directly, use
  1101.    * |mouseStillTimer_.tickNow()|.
  1102.    *
  1103.    * @private
  1104.    */
  1105.   onMouseStill_() {
  1106.     // Hide the cursor.
  1107.     this.videoContainer_.style.cursor = 'none';
  1108.     this.recentMouseMovement_ = false;
  1109.     this.computeOpacity();
  1110.   }
  1112.   /**
  1113.    * @return {boolean} true if any relevant elements are hovered.
  1114.    * @private
  1115.    */
  1116.   isHovered_() {
  1117.     if (!window.matchMedia('hover: hover').matches) {
  1118.       // This is primarily a touch-screen device, so the :hover query below
  1119.       // doesn't make sense.  In spite of this, the :hover query on an element
  1120.       // can still return true on such a device after a touch ends.
  1121.       // See https://bit.ly/34dBORX for details.
  1122.       return false;
  1123.     }
  1125.     return this.showOnHoverControls_.some((element) => {
  1126.       return element.matches(':hover');
  1127.     });
  1128.   }
  1130.   /**
  1131.    * Recompute whether the controls should be shown or hidden.
  1132.    */
  1133.   computeOpacity() {
  1134.     const adIsPaused = this.ad_ ? this.ad_.isPaused() : false;
  1135.     const videoIsPaused = this.video_.paused && !this.isSeeking_;
  1136.     const keyboardNavigationMode = this.controlsContainer_.classList.contains(
  1137.         'shaka-keyboard-navigation');
  1139.     // Keep showing the controls if the ad or video is paused, there has been
  1140.     // recent mouse movement, we're in keyboard navigation, or one of a special
  1141.     // class of elements is hovered.
  1142.     if (adIsPaused ||
  1143.         ((!this.ad_ || !this.ad_.isLinear()) && videoIsPaused) ||
  1144.         this.recentMouseMovement_ ||
  1145.         keyboardNavigationMode ||
  1146.         this.isHovered_()) {
  1147.       // Make sure the state is up-to-date before showing it.
  1148.       this.updateTimeAndSeekRange_();
  1150.       this.controlsContainer_.setAttribute('shown', 'true');
  1151.       this.fadeControlsTimer_.stop();
  1152.     } else {
  1153.       this.fadeControlsTimer_.tickAfter(/* seconds= */ this.config_.fadeDelay);
  1154.     }
  1155.   }
  1157.   /**
  1158.    * @param {!Event} event
  1159.    * @private
  1160.    */
  1161.   onContainerTouch_(event) {
  1162.     if (!this.video_.duration) {
  1163.       // Can't play yet.  Ignore.
  1164.       return;
  1165.     }
  1167.     if (this.isOpaque()) {
  1168.       this.lastTouchEventTime_ = Date.now();
  1169.       // The controls are showing.
  1170.       // Let this event continue and become a click.
  1171.     } else {
  1172.       // The controls are hidden, so show them.
  1173.       this.onMouseMove_(event);
  1174.       // Stop this event from becoming a click event.
  1175.       event.cancelable && event.preventDefault();
  1176.     }
  1177.   }
  1179.   /** @private */
  1180.   onContainerClick_() {
  1181.     if (!this.enabled_) {
  1182.       return;
  1183.     }
  1185.     if (this.anySettingsMenusAreOpen()) {
  1186.       this.hideSettingsMenusTimer_.tickNow();
  1187.     } else if (this.config_.singleClickForPlayAndPause) {
  1188.       this.onPlayPauseClick_();
  1189.     }
  1190.   }
  1192.   /** @private */
  1193.   onPlayPauseClick_() {
  1194.     if (this.ad_ && this.ad_.isLinear()) {
  1195.       this.playPauseAd();
  1196.     } else {
  1197.       this.playPausePresentation();
  1198.     }
  1199.   }
  1201.   /** @private */
  1202.   onCastStatusChange_() {
  1203.     const isCasting = this.castProxy_.isCasting();
  1204.     this.dispatchEvent(new shaka.util.FakeEvent(
  1205.         'caststatuschanged', (new Map()).set('newStatus', isCasting)));
  1207.     if (isCasting) {
  1208.       this.controlsContainer_.setAttribute('casting', 'true');
  1209.     } else {
  1210.       this.controlsContainer_.removeAttribute('casting');
  1211.     }
  1212.   }
  1214.   /** @private */
  1215.   onPlayStateChange_() {
  1216.     this.computeOpacity();
  1217.   }
  1219.   /**
  1220.    * Support controls with keyboard inputs.
  1221.    * @param {!KeyboardEvent} event
  1222.    * @private
  1223.    */
  1224.   onControlsKeyDown_(event) {
  1225.     const activeElement = document.activeElement;
  1226.     const isVolumeBar = activeElement && activeElement.classList ?
  1227.         activeElement.classList.contains('shaka-volume-bar') : false;
  1228.     const isSeekBar = activeElement && activeElement.classList &&
  1229.         activeElement.classList.contains('shaka-seek-bar');
  1230.     // Show the control panel if it is on focus or any button is pressed.
  1231.     if (this.controlsContainer_.contains(activeElement)) {
  1232.       this.onMouseMove_(event);
  1233.     }
  1235.     if (!this.config_.enableKeyboardPlaybackControls) {
  1236.       return;
  1237.     }
  1239.     switch (event.key) {
  1240.       case 'ArrowLeft':
  1241.         // If it's not focused on the volume bar, move the seek time backward
  1242.         // for 5 sec. Otherwise, the volume will be adjusted automatically.
  1243.         if (this.seekBar_ && !isVolumeBar) {
  1244.           event.preventDefault();
  1245.           this.seek_(this.seekBar_.getValue() - 5);
  1246.         }
  1247.         break;
  1248.       case 'ArrowRight':
  1249.         // If it's not focused on the volume bar, move the seek time forward
  1250.         // for 5 sec. Otherwise, the volume will be adjusted automatically.
  1251.         if (this.seekBar_ && !isVolumeBar) {
  1252.           event.preventDefault();
  1253.           this.seek_(this.seekBar_.getValue() + 5);
  1254.         }
  1255.         break;
  1256.       // Jump to the beginning of the video's seek range.
  1257.       case 'Home':
  1258.         if (this.seekBar_) {
  1259.           this.seek_(this.player_.seekRange().start);
  1260.         }
  1261.         break;
  1262.       // Jump to the end of the video's seek range.
  1263.       case 'End':
  1264.         if (this.seekBar_) {
  1265.           this.seek_(this.player_.seekRange().end);
  1266.         }
  1267.         break;
  1268.       // Pause or play by pressing space on the seek bar.
  1269.       case ' ':
  1270.         if (isSeekBar) {
  1271.           this.onPlayPauseClick_();
  1272.         }
  1273.         break;
  1274.     }
  1275.   }
  1277.   /**
  1278.    * Support controls with keyboard inputs.
  1279.    * @param {!KeyboardEvent} event
  1280.    * @private
  1281.    */
  1282.   onControlsKeyUp_(event) {
  1283.     // When the key is released, remove it from the pressed keys set.
  1284.     this.pressedKeys_.delete(event.key);
  1285.   }
  1287.   /**
  1288.    * Called both as an event listener and directly by the controls to initialize
  1289.    * the buffering state.
  1290.    * @private
  1291.    */
  1292.   onBufferingStateChange_() {
  1293.     if (!this.enabled_) {
  1294.       return;
  1295.     }
  1297.     shaka.ui.Utils.setDisplay(
  1298.         this.spinnerContainer_, this.player_.isBuffering());
  1299.   }
  1301.   /**
  1302.    * @return {boolean}
  1303.    * @export
  1304.    */
  1305.   isOpaque() {
  1306.     if (!this.enabled_) {
  1307.       return false;
  1308.     }
  1310.     return this.controlsContainer_.getAttribute('shown') != null ||
  1311.         this.controlsContainer_.getAttribute('casting') != null;
  1312.   }
  1314.   /**
  1315.    * Update the video's current time based on the keyboard operations.
  1316.    *
  1317.    * @param {number} currentTime
  1318.    * @private
  1319.    */
  1320.   seek_(currentTime) {
  1321.     goog.asserts.assert(
  1322.         this.seekBar_, 'Caller of seek_ must check for seekBar_ first!');
  1324.     this.seekBar_.changeTo(currentTime);
  1326.     if (this.isOpaque()) {
  1327.       // Only update the time and seek range if it's visible.
  1328.       this.updateTimeAndSeekRange_();
  1329.     }
  1330.   }
  1332.   /**
  1333.    * Called when the seek range or current time need to be updated.
  1334.    * @private
  1335.    */
  1336.   updateTimeAndSeekRange_() {
  1337.     if (this.seekBar_) {
  1338.       this.seekBar_.setValue(this.video_.currentTime);
  1339.       this.seekBar_.update();
  1341.       if (this.seekBar_.isShowing()) {
  1342.         for (const menu of this.menus_) {
  1343.           menu.classList.remove('shaka-low-position');
  1344.         }
  1345.       } else {
  1346.         for (const menu of this.menus_) {
  1347.           menu.classList.add('shaka-low-position');
  1348.         }
  1349.       }
  1350.     }
  1352.     this.dispatchEvent(new shaka.util.FakeEvent('timeandseekrangeupdated'));
  1353.   }
  1355.   /**
  1356.    * Add behaviors for keyboard navigation.
  1357.    * 1. Add blue outline for focused elements.
  1358.    * 2. Allow exiting overflow settings menus by pressing Esc key.
  1359.    * 3. When navigating on overflow settings menu by pressing Tab
  1360.    *    key or Shift+Tab keys keep the focus inside overflow menu.
  1361.    *
  1362.    * @param {!KeyboardEvent} event
  1363.    * @private
  1364.    */
  1365.   onWindowKeyDown_(event) {
  1366.     // Add the key to the pressed keys set when it's pressed.
  1367.     this.pressedKeys_.add(event.key);
  1369.     const anySettingsMenusAreOpen = this.anySettingsMenusAreOpen();
  1371.     if (event.key == 'Tab') {
  1372.       // Enable blue outline for focused elements for keyboard
  1373.       // navigation.
  1374.       this.controlsContainer_.classList.add('shaka-keyboard-navigation');
  1375.       this.computeOpacity();
  1376.       this.eventManager_.listen(window, 'mousedown', () => this.onMouseDown_());
  1377.     }
  1379.     // If escape key was pressed, close any open settings menus.
  1380.     if (event.key == 'Escape') {
  1381.       this.hideSettingsMenusTimer_.tickNow();
  1382.     }
  1384.     if (anySettingsMenusAreOpen && this.pressedKeys_.has('Tab')) {
  1385.       // If Tab key or Shift+Tab keys are pressed when navigating through
  1386.       // an overflow settings menu, keep the focus to loop inside the
  1387.       // overflow menu.
  1388.       this.keepFocusInMenu_(event);
  1389.     }
  1390.   }
  1392.   /**
  1393.    * When the user is using keyboard to navigate inside the overflow settings
  1394.    * menu (pressing Tab key to go forward, or pressing Shift + Tab keys to go
  1395.    * backward), make sure it's focused only on the elements of the overflow
  1396.    * panel.
  1397.    *
  1398.    * This is called by onWindowKeyDown_() function, when there's a settings
  1399.    * overflow menu open, and the Tab key / Shift+Tab keys are pressed.
  1400.    *
  1401.    * @param {!Event} event
  1402.    * @private
  1403.    */
  1404.   keepFocusInMenu_(event) {
  1405.     const openSettingsMenus = this.menus_.filter(
  1406.         (menu) => !menu.classList.contains('shaka-hidden'));
  1407.     if (!openSettingsMenus.length) {
  1408.       // For example, this occurs when you hit escape to close the menu.
  1409.       return;
  1410.     }
  1412.     const settingsMenu = openSettingsMenus[0];
  1413.     if (settingsMenu.childNodes.length) {
  1414.       // Get the first and the last displaying child element from the overflow
  1415.       // menu.
  1416.       let firstShownChild = settingsMenu.firstElementChild;
  1417.       while (firstShownChild &&
  1418.              firstShownChild.classList.contains('shaka-hidden')) {
  1419.         firstShownChild = firstShownChild.nextElementSibling;
  1420.       }
  1422.       let lastShownChild = settingsMenu.lastElementChild;
  1423.       while (lastShownChild &&
  1424.              lastShownChild.classList.contains('shaka-hidden')) {
  1425.         lastShownChild = lastShownChild.previousElementSibling;
  1426.       }
  1428.       const activeElement = document.activeElement;
  1429.       // When only Tab key is pressed, navigate to the next elememnt.
  1430.       // If it's currently focused on the last shown child element of the
  1431.       // overflow menu, let the focus move to the first child element of the
  1432.       // menu.
  1433.       // When Tab + Shift keys are pressed at the same time, navigate to the
  1434.       // previous element. If it's currently focused on the first shown child
  1435.       // element of the overflow menu, let the focus move to the last child
  1436.       // element of the menu.
  1437.       if (this.pressedKeys_.has('Shift')) {
  1438.         if (activeElement == firstShownChild) {
  1439.           event.preventDefault();
  1440.           lastShownChild.focus();
  1441.         }
  1442.       } else {
  1443.         if (activeElement == lastShownChild) {
  1444.           event.preventDefault();
  1445.           firstShownChild.focus();
  1446.         }
  1447.       }
  1448.     }
  1449.   }
  1451.   /**
  1452.    * For keyboard navigation, we use blue borders to highlight the active
  1453.    * element. If we detect that a mouse is being used, remove the blue border
  1454.    * from the active element.
  1455.    * @private
  1456.    */
  1457.   onMouseDown_() {
  1458.     this.eventManager_.unlisten(window, 'mousedown');
  1459.   }
  1461.   /**
  1462.    * Create a localization instance already pre-loaded with all the locales that
  1463.    * we support.
  1464.    *
  1465.    * @return {!shaka.ui.Localization}
  1466.    * @private
  1467.    */
  1468.   static createLocalization_() {
  1469.     /** @type {string} */
  1470.     const fallbackLocale = 'en';
  1472.     /** @type {!shaka.ui.Localization} */
  1473.     const localization = new shaka.ui.Localization(fallbackLocale);
  1474.     shaka.ui.Locales.addTo(localization);
  1475.     localization.changeLocale(navigator.languages || []);
  1477.     return localization;
  1478.   }
  1479. };
  1482. /**
  1483.  * @event shaka.ui.Controls#CastStatusChangedEvent
  1484.  * @description Fired upon receiving a 'caststatuschanged' event from
  1485.  *    the cast proxy.
  1486.  * @property {string} type
  1487.  *   'caststatuschanged'
  1488.  * @property {boolean} newStatus
  1489.  *  The new status of the application. True for 'is casting' and
  1490.  *  false otherwise.
  1491.  * @exportDoc
  1492.  */
  1495. /**
  1496.  * @event shaka.ui.Controls#SubMenuOpenEvent
  1497.  * @description Fired when one of the overflow submenus is opened
  1498.  *    (e. g. language/resolution/subtitle selection).
  1499.  * @property {string} type
  1500.  *   'submenuopen'
  1501.  * @exportDoc
  1502.  */
  1505. /**
  1506.  * @event shaka.ui.Controls#CaptionSelectionUpdatedEvent
  1507.  * @description Fired when the captions/subtitles menu has finished updating.
  1508.  * @property {string} type
  1509.  *   'captionselectionupdated'
  1510.  * @exportDoc
  1511.  */
  1514. /**
  1515.  * @event shaka.ui.Controls#ResolutionSelectionUpdatedEvent
  1516.  * @description Fired when the resolution menu has finished updating.
  1517.  * @property {string} type
  1518.  *   'resolutionselectionupdated'
  1519.  * @exportDoc
  1520.  */
  1523. /**
  1524.  * @event shaka.ui.Controls#LanguageSelectionUpdatedEvent
  1525.  * @description Fired when the audio language menu has finished updating.
  1526.  * @property {string} type
  1527.  *   'languageselectionupdated'
  1528.  * @exportDoc
  1529.  */
  1532. /**
  1533.  * @event shaka.ui.Controls#ErrorEvent
  1534.  * @description Fired when something went wrong with the controls.
  1535.  * @property {string} type
  1536.  *   'error'
  1537.  * @property {!shaka.util.Error} detail
  1538.  *   An object which contains details on the error.  The error's 'category'
  1539.  *   and 'code' properties will identify the specific error that occurred.
  1540.  *   In an uncompiled build, you can also use the 'message' and 'stack'
  1541.  *   properties to debug.
  1542.  * @exportDoc
  1543.  */
  1546. /**
  1547.  * @event shaka.ui.Controls#TimeAndSeekRangeUpdatedEvent
  1548.  * @description Fired when the time and seek range elements have finished
  1549.  *    updating.
  1550.  * @property {string} type
  1551.  *   'timeandseekrangeupdated'
  1552.  * @exportDoc
  1553.  */
  1556. /**
  1557.  * @event shaka.ui.Controls#UIUpdatedEvent
  1558.  * @description Fired after a call to ui.configure() once the UI has finished
  1559.  *    updating.
  1560.  * @property {string} type
  1561.  *   'uiupdated'
  1562.  * @exportDoc
  1563.  */
  1565. /** @private {!Map.<string, !shaka.extern.IUIElement.Factory>} */
  1566. shaka.ui.ControlsPanel.elementNamesToFactories_ = new Map();
  1568. /** @private {?shaka.extern.IUISeekBar.Factory} */
  1569. shaka.ui.ControlsPanel.seekBarFactory_ = new shaka.ui.SeekBar.Factory();