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