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.ads.AdManager');
  13. goog.require('shaka.cast.CastProxy');
  14. goog.require('shaka.log');
  15. goog.require('shaka.ui.AdCounter');
  16. goog.require('shaka.ui.AdPosition');
  17. goog.require('shaka.ui.BigPlayButton');
  18. goog.require('shaka.ui.ContextMenu');
  19. goog.require('shaka.ui.HiddenFastForwardButton');
  20. goog.require('shaka.ui.HiddenRewindButton');
  21. goog.require('shaka.ui.Locales');
  22. goog.require('shaka.ui.Localization');
  23. goog.require('shaka.ui.SeekBar');
  24. goog.require('shaka.ui.Utils');
  25. goog.require('shaka.util.Dom');
  26. goog.require('shaka.util.EventManager');
  27. goog.require('shaka.util.FakeEvent');
  28. goog.require('shaka.util.FakeEventTarget');
  29. goog.require('shaka.util.IDestroyable');
  30. goog.require('shaka.util.Timer');
  32. goog.requireType('shaka.Player');
  35. /**
  36.  * A container for custom video controls.
  37.  * @implements {shaka.util.IDestroyable}
  38.  * @export
  39.  */
  40. shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
  41.   /**
  42.    * @param {!shaka.Player} player
  43.    * @param {!HTMLElement} videoContainer
  44.    * @param {!HTMLMediaElement} video
  45.    * @param {shaka.extern.UIConfiguration} config
  46.    */
  47.   constructor(player, videoContainer, video, config) {
  48.     super();
  50.     /** @private {boolean} */
  51.     this.enabled_ = true;
  53.     /** @private {shaka.extern.UIConfiguration} */
  54.     this.config_ = config;
  56.     /** @private {shaka.cast.CastProxy} */
  57.     this.castProxy_ = new shaka.cast.CastProxy(
  58.         video, player, this.config_.castReceiverAppId,
  59.         this.config_.castAndroidReceiverCompatible);
  61.     /** @private {boolean} */
  62.     this.castAllowed_ = true;
  64.     /** @private {HTMLMediaElement} */
  65.     this.video_ = this.castProxy_.getVideo();
  67.     /** @private {HTMLMediaElement} */
  68.     this.localVideo_ = video;
  70.     /** @private {shaka.Player} */
  71.     this.player_ = this.castProxy_.getPlayer();
  73.     /** @private {shaka.Player} */
  74.     this.localPlayer_ = player;
  76.     /** @private {!HTMLElement} */
  77.     this.videoContainer_ = videoContainer;
  79.     /** @private {shaka.extern.IAdManager} */
  80.     this.adManager_ = this.player_.getAdManager();
  82.     /** @private {?shaka.extern.IAd} */
  83.     this.ad_ = null;
  85.     /** @private {?shaka.extern.IUISeekBar} */
  86.     this.seekBar_ = null;
  88.     /** @private {boolean} */
  89.     this.isSeeking_ = false;
  91.     /** @private {!Array.<!HTMLElement>} */
  92.     this.menus_ = [];
  94.     /**
  95.      * Individual controls which, when hovered or tab-focused, will force the
  96.      * controls to be shown.
  97.      * @private {!Array.<!Element>}
  98.      */
  99.     this.showOnHoverControls_ = [];
  101.     /** @private {boolean} */
  102.     this.recentMouseMovement_ = false;
  104.     /**
  105.      * This timer is used to detect when the user has stopped moving the mouse
  106.      * and we should fade out the ui.
  107.      *
  108.      * @private {shaka.util.Timer}
  109.      */
  110.     this.mouseStillTimer_ = new shaka.util.Timer(() => {
  111.       this.onMouseStill_();
  112.     });
  114.     /**
  115.      * This timer is used to delay the fading of the UI.
  116.      *
  117.      * @private {shaka.util.Timer}
  118.      */
  119.     this.fadeControlsTimer_ = new shaka.util.Timer(() => {
  120.       this.controlsContainer_.removeAttribute('shown');
  122.       // If there's an overflow menu open, keep it this way for a couple of
  123.       // seconds in case a user immediately initiates another mouse move to
  124.       // interact with the menus. If that didn't happen, go ahead and hide
  125.       // the menus.
  126.       this.hideSettingsMenusTimer_.tickAfter(/* seconds= */ 2);
  127.     });
  129.     /**
  130.      * This timer will be used to hide all settings menus. When the timer ticks
  131.      * it will force all controls to invisible.
  132.      *
  133.      * Rather than calling the callback directly, |Controls| will always call it
  134.      * through the timer to avoid conflicts.
  135.      *
  136.      * @private {shaka.util.Timer}
  137.      */
  138.     this.hideSettingsMenusTimer_ = new shaka.util.Timer(() => {
  139.       for (const menu of this.menus_) {
  140.         shaka.ui.Utils.setDisplay(menu, /* visible= */ false);
  141.       }
  142.     });
  144.     /**
  145.      * This timer is used to regularly update the time and seek range elements
  146.      * so that we are communicating the current state as accurately as possibly.
  147.      *
  148.      * Unlike the other timers, this timer does not "own" the callback because
  149.      * this timer is acting like a heartbeat.
  150.      *
  151.      * @private {shaka.util.Timer}
  152.      */
  153.     this.timeAndSeekRangeTimer_ = new shaka.util.Timer(() => {
  154.       // Suppress timer-based updates if the controls are hidden.
  155.       if (this.isOpaque()) {
  156.         this.updateTimeAndSeekRange_();
  157.       }
  158.     });
  160.     /** @private {?number} */
  161.     this.lastTouchEventTime_ = null;
  163.     /** @private {!Array.<!shaka.extern.IUIElement>} */
  164.     this.elements_ = [];
  166.     /** @private {shaka.ui.Localization} */
  167.     this.localization_ = shaka.ui.Controls.createLocalization_();
  169.     /** @private {shaka.util.EventManager} */
  170.     this.eventManager_ = new shaka.util.EventManager();
  172.     // Configure and create the layout of the controls
  173.     this.configure(this.config_);
  174.     this.addEventListeners_();
  176.     /**
  177.      * The pressed keys set is used to record which keys are currently pressed
  178.      * down, so we can know what keys are pressed at the same time.
  179.      * Used by the focusInsideOverflowMenu_() function.
  180.      * @private {!Set.<string>}
  181.      */
  182.     this.pressedKeys_ = new Set();
  184.     // We might've missed a caststatuschanged event from the proxy between
  185.     // the controls creation and initializing. Run onCastStatusChange_()
  186.     // to ensure we have the casting state right.
  187.     this.onCastStatusChange_();
  189.     // Start this timer after we are finished initializing everything,
  190.     this.timeAndSeekRangeTimer_.tickEvery(/* seconds= */ 0.125);
  192.     this.eventManager_.listen(this.localization_,
  193.         shaka.ui.Localization.LOCALE_CHANGED, (e) => {
  194.           const locale = e['locales'][0];
  195.           this.adManager_.setLocale(locale);
  196.         });
  197.   }
  199.   /**
  200.    * @override
  201.    * @export
  202.    */
  203.   async destroy() {
  204.     if (document.pictureInPictureElement == this.localVideo_) {
  205.       await document.exitPictureInPicture();
  206.     }
  208.     if (this.eventManager_) {
  209.       this.eventManager_.release();
  210.       this.eventManager_ = null;
  211.     }
  213.     if (this.mouseStillTimer_) {
  214.       this.mouseStillTimer_.stop();
  215.       this.mouseStillTimer_ = null;
  216.     }
  218.     if (this.fadeControlsTimer_) {
  219.       this.fadeControlsTimer_.stop();
  220.       this.fadeControlsTimer_ = null;
  221.     }
  223.     if (this.hideSettingsMenusTimer_) {
  224.       this.hideSettingsMenusTimer_.stop();
  225.       this.hideSettingsMenusTimer_ = null;
  226.     }
  228.     if (this.timeAndSeekRangeTimer_) {
  229.       this.timeAndSeekRangeTimer_.stop();
  230.       this.timeAndSeekRangeTimer_ = null;
  231.     }
  233.     // Important!  Release all child elements before destroying the cast proxy
  234.     // or player.  This makes sure those destructions will not trigger event
  235.     // listeners in the UI which would then invoke the cast proxy or player.
  236.     this.releaseChildElements_();
  238.     if (this.controlsContainer_) {
  239.       this.videoContainer_.removeChild(this.controlsContainer_);
  240.       this.controlsContainer_ = null;
  241.     }
  243.     if (this.castProxy_) {
  244.       await this.castProxy_.destroy();
  245.       this.castProxy_ = null;
  246.     }
  248.     if (this.localPlayer_) {
  249.       await this.localPlayer_.destroy();
  250.       this.localPlayer_ = null;
  251.     }
  252.     this.player_ = null;
  254.     this.localVideo_ = null;
  255.     this.video_ = null;
  257.     this.localization_ = null;
  258.     this.pressedKeys_.clear();
  260.     // FakeEventTarget implements IReleasable
  261.     super.release();
  262.   }
  265.   /** @private */
  266.   releaseChildElements_() {
  267.     for (const element of this.elements_) {
  268.       element.release();
  269.     }
  271.     this.elements_ = [];
  272.   }
  274.   /**
  275.    * @param {string} name
  276.    * @param {!shaka.extern.IUIElement.Factory} factory
  277.    * @export
  278.    */
  279.   static registerElement(name, factory) {
  280.     shaka.ui.ControlsPanel.elementNamesToFactories_.set(name, factory);
  281.   }
  283.   /**
  284.    * @param {!shaka.extern.IUISeekBar.Factory} factory
  285.    * @export
  286.    */
  287.   static registerSeekBar(factory) {
  288.     shaka.ui.ControlsPanel.seekBarFactory_ = factory;
  289.   }
  291.   /**
  292.    * This allows the application to inhibit casting.
  293.    *
  294.    * @param {boolean} allow
  295.    * @export
  296.    */
  297.   allowCast(allow) {
  298.     this.castAllowed_ = allow;
  299.     this.onCastStatusChange_();
  300.   }
  302.   /**
  303.    * Used by the application to notify the controls that a load operation is
  304.    * complete.  This allows the controls to recalculate play/paused state, which
  305.    * is important for platforms like Android where autoplay is disabled.
  306.    * @export
  307.    */
  308.   loadComplete() {
  309.     // If we are on Android or if autoplay is false, video.paused should be
  310.     // true. Otherwise, video.paused is false and the content is autoplaying.
  311.     this.onPlayStateChange_();
  312.   }
  314.   /**
  315.    * @param {!shaka.extern.UIConfiguration} config
  316.    * @export
  317.    */
  318.   configure(config) {
  319.     this.config_ = config;
  321.     this.castProxy_.changeReceiverId(config.castReceiverAppId,
  322.         config.castAndroidReceiverCompatible);
  324.     // Deconstruct the old layout if applicable
  325.     if (this.seekBar_) {
  326.       this.seekBar_ = null;
  327.     }
  329.     if (this.playButton_) {
  330.       this.playButton_ = null;
  331.     }
  333.     if (this.contextMenu_) {
  334.       this.contextMenu_ = null;
  335.     }
  337.     if (this.controlsContainer_) {
  338.       shaka.util.Dom.removeAllChildren(this.controlsContainer_);
  339.       this.releaseChildElements_();
  340.     } else {
  341.       this.addControlsContainer_();
  342.       // The client-side ad container is only created once, and is never
  343.       // re-created or uprooted in the DOM, even when the DOM is re-created,
  344.       // since that seemingly breaks the IMA SDK.
  345.       this.addClientAdContainer_();
  346.     }
  348.     // Create the new layout
  349.     this.createDOM_();
  351.     // Init the play state
  352.     this.onPlayStateChange_();
  354.     // Elements that should not propagate clicks (controls panel, menus)
  355.     const noPropagationElements = this.videoContainer_.getElementsByClassName(
  356.         'shaka-no-propagation');
  357.     for (const element of noPropagationElements) {
  358.       const cb = (event) => event.stopPropagation();
  359.       this.eventManager_.listen(element, 'click', cb);
  360.       this.eventManager_.listen(element, 'dblclick', cb);
  361.     }
  362.   }
  364.   /**
  365.    * Enable or disable the custom controls. Enabling disables native
  366.    * browser controls.
  367.    *
  368.    * @param {boolean} enabled
  369.    * @export
  370.    */
  371.   setEnabledShakaControls(enabled) {
  372.     this.enabled_ = enabled;
  373.     if (enabled) {
  374.       this.videoContainer_.setAttribute('shaka-controls', 'true');
  376.       // If we're hiding native controls, make sure the video element itself is
  377.       // not tab-navigable.  Our custom controls will still be tab-navigable.
  378.       this.localVideo_.tabIndex = -1;
  379.       this.localVideo_.controls = false;
  380.     } else {
  381.       this.videoContainer_.removeAttribute('shaka-controls');
  382.     }
  384.     // The effects of play state changes are inhibited while showing native
  385.     // browser controls.  Recalculate that state now.
  386.     this.onPlayStateChange_();
  387.   }
  389.   /**
  390.    * Enable or disable native browser controls. Enabling disables shaka
  391.    * controls.
  392.    *
  393.    * @param {boolean} enabled
  394.    * @export
  395.    */
  396.   setEnabledNativeControls(enabled) {
  397.     // If we enable the native controls, the element must be tab-navigable.
  398.     // If we disable the native controls, we want to make sure that the video
  399.     // element itself is not tab-navigable, so that the element is skipped over
  400.     // when tabbing through the page.
  401.     this.localVideo_.controls = enabled;
  402.     this.localVideo_.tabIndex = enabled ? 0 : -1;
  404.     if (enabled) {
  405.       this.setEnabledShakaControls(false);
  406.     }
  407.   }
  409.   /**
  410.    * @export
  411.    * @return {?shaka.extern.IAd}
  412.    */
  413.   getAd() {
  414.     return this.ad_;
  415.   }
  417.   /**
  418.    * @export
  419.    * @return {shaka.cast.CastProxy}
  420.    */
  421.   getCastProxy() {
  422.     return this.castProxy_;
  423.   }
  425.   /**
  426.    * @return {shaka.ui.Localization}
  427.    * @export
  428.    */
  429.   getLocalization() {
  430.     return this.localization_;
  431.   }
  433.   /**
  434.    * @return {!HTMLElement}
  435.    * @export
  436.    */
  437.   getVideoContainer() {
  438.     return this.videoContainer_;
  439.   }
  441.   /**
  442.    * @return {HTMLMediaElement}
  443.    * @export
  444.    */
  445.   getVideo() {
  446.     return this.video_;
  447.   }
  449.   /**
  450.    * @return {HTMLMediaElement}
  451.    * @export
  452.    */
  453.   getLocalVideo() {
  454.     return this.localVideo_;
  455.   }
  457.   /**
  458.    * @return {shaka.Player}
  459.    * @export
  460.    */
  461.   getPlayer() {
  462.     return this.player_;
  463.   }
  465.   /**
  466.    * @return {shaka.Player}
  467.    * @export
  468.    */
  469.   getLocalPlayer() {
  470.     return this.localPlayer_;
  471.   }
  473.   /**
  474.    * @return {!HTMLElement}
  475.    * @export
  476.    */
  477.   getControlsContainer() {
  478.     goog.asserts.assert(
  479.         this.controlsContainer_, 'No controls container after destruction!');
  480.     return this.controlsContainer_;
  481.   }
  483.   /**
  484.    * @return {!HTMLElement}
  485.    * @export
  486.    */
  487.   getServerSideAdContainer() {
  488.     return this.daiAdContainer_;
  489.   }
  491.   /**
  492.    * @return {!HTMLElement}
  493.    * @export
  494.    */
  495.   getClientSideAdContainer() {
  496.     return this.clientAdContainer_;
  497.   }
  499.   /**
  500.    * @return {!shaka.extern.UIConfiguration}
  501.    * @export
  502.    */
  503.   getConfig() {
  504.     return this.config_;
  505.   }
  507.   /**
  508.    * @return {boolean}
  509.    * @export
  510.    */
  511.   isSeeking() {
  512.     return this.isSeeking_;
  513.   }
  516.   /**
  517.    * @param {boolean} seeking
  518.    * @export
  519.    */
  520.   setSeeking(seeking) {
  521.     this.isSeeking_ = seeking;
  522.   }
  524.   /**
  525.    * @return {boolean}
  526.    * @export
  527.    */
  528.   isCastAllowed() {
  529.     return this.castAllowed_;
  530.   }
  532.   /**
  533.    * @return {number}
  534.    * @export
  535.    */
  536.   getDisplayTime() {
  537.     return this.seekBar_ ? this.seekBar_.getValue() : this.video_.currentTime;
  538.   }
  540.   /**
  541.    * @param {?number} time
  542.    * @export
  543.    */
  544.   setLastTouchEventTime(time) {
  545.     this.lastTouchEventTime_ = time;
  546.   }
  548.   /**
  549.    * @return {boolean}
  550.    * @export
  551.    */
  552.   anySettingsMenusAreOpen() {
  553.     return this.menus_.some(
  554.         (menu) => !menu.classList.contains('shaka-hidden'));
  555.   }
  557.   /** @export */
  558.   hideSettingsMenus() {
  559.     this.hideSettingsMenusTimer_.tickNow();
  560.   }
  562.   /**
  563.    * @return {boolean}
  564.    * @export
  565.    */
  566.   isFullScreenSupported() {
  567.     if (document.fullscreenEnabled) {
  568.       return true;
  569.     }
  570.     const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  571.     if (video.webkitSupportsFullscreen) {
  572.       return true;
  573.     }
  574.     return false;
  575.   }
  577.   /**
  578.    * @return {boolean}
  579.    * @export
  580.    */
  581.   isFullScreenEnabled() {
  582.     if (document.fullscreenEnabled) {
  583.       return !!document.fullscreenElement;
  584.     }
  585.     const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  586.     if (video.webkitSupportsFullscreen) {
  587.       return video.webkitDisplayingFullscreen;
  588.     }
  589.     return false;
  590.   }
  592.   /** @private */
  593.   async enterFullScreen_() {
  594.     try {
  595.       if (document.fullscreenEnabled) {
  596.         if (document.pictureInPictureElement) {
  597.           await document.exitPictureInPicture();
  598.         }
  599.         const fullScreenElement = this.config_.fullScreenElement;
  600.         await fullScreenElement.requestFullscreen({navigationUI: 'hide'});
  602.         if (this.config_.forceLandscapeOnFullscreen && screen.orientation) {
  603.           // Locking to 'landscape' should let it be either
  604.           // 'landscape-primary' or 'landscape-secondary' as appropriate.
  605.           // We ignore errors from this specific call, since it creates noise
  606.           // on desktop otherwise.
  607.           try {
  608.             await screen.orientation.lock('landscape');
  609.           } catch (error) {}
  610.         }
  611.       } else {
  612.         const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  613.         if (video.webkitSupportsFullscreen) {
  614.           video.webkitEnterFullscreen();
  615.         }
  616.       }
  617.     } catch (error) {
  618.       // Entering fullscreen can fail without user interaction.
  619.       this.dispatchEvent(new shaka.util.FakeEvent(
  620.           'error', (new Map()).set('detail', error)));
  621.     }
  622.   }
  624.   /** @private */
  625.   async exitFullScreen_() {
  626.     if (document.fullscreenEnabled) {
  627.       if (screen.orientation) {
  628.         screen.orientation.unlock();
  629.       }
  630.       await document.exitFullscreen();
  631.     } else {
  632.       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  633.       if (video.webkitSupportsFullscreen) {
  634.         video.webkitExitFullscreen();
  635.       }
  636.     }
  637.   }
  639.   /** @export */
  640.   async toggleFullScreen() {
  641.     if (this.isFullScreenEnabled()) {
  642.       await this.exitFullScreen_();
  643.     } else {
  644.       await this.enterFullScreen_();
  645.     }
  646.   }
  648.   /**
  649.    * @return {boolean}
  650.    * @export
  651.    */
  652.   isPiPAllowed() {
  653.     if (this.castProxy_.isCasting()) {
  654.       return false;
  655.     }
  656.     if ('documentPictureInPicture' in window &&
  657.         this.config_.preferDocumentPictureInPicture) {
  658.       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  659.       return !video.disablePictureInPicture;
  660.     }
  661.     if (document.pictureInPictureEnabled) {
  662.       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  663.       return !video.disablePictureInPicture;
  664.     }
  665.     return false;
  666.   }
  668.   /**
  669.    * @return {boolean}
  670.    * @export
  671.    */
  672.   isPiPEnabled() {
  673.     if ('documentPictureInPicture' in window &&
  674.         this.config_.preferDocumentPictureInPicture) {
  675.       return !!window.documentPictureInPicture.window;
  676.     } else {
  677.       return !!document.pictureInPictureElement;
  678.     }
  679.   }
  681.   /** @export */
  682.   async togglePiP() {
  683.     try {
  684.       if ('documentPictureInPicture' in window &&
  685.         this.config_.preferDocumentPictureInPicture) {
  686.         await this.toggleDocumentPictureInPicture_();
  687.       } else if (!document.pictureInPictureElement) {
  688.         // If you were fullscreen, leave fullscreen first.
  689.         if (document.fullscreenElement) {
  690.           document.exitFullscreen();
  691.         }
  692.         const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  693.         await video.requestPictureInPicture();
  694.       } else {
  695.         await document.exitPictureInPicture();
  696.       }
  697.     } catch (error) {
  698.       this.dispatchEvent(new shaka.util.FakeEvent(
  699.           'error', (new Map()).set('detail', error)));
  700.     }
  701.   }
  703.   /**
  704.    * The Document Picture-in-Picture API makes it possible to open an
  705.    * always-on-top window that can be populated with arbitrary HTML content.
  706.    * https://developer.chrome.com/docs/web-platform/document-picture-in-picture
  707.    * @private
  708.    */
  709.   async toggleDocumentPictureInPicture_() {
  710.     // Close Picture-in-Picture window if any.
  711.     if (window.documentPictureInPicture.window) {
  712.       window.documentPictureInPicture.window.close();
  713.       return;
  714.     }
  716.     // Open a Picture-in-Picture window.
  717.     const pipPlayer = this.videoContainer_;
  718.     const rectPipPlayer = pipPlayer.getBoundingClientRect();
  719.     const pipWindow = await window.documentPictureInPicture.requestWindow({
  720.       width: rectPipPlayer.width,
  721.       height: rectPipPlayer.height,
  722.     });
  724.     // Copy style sheets to the Picture-in-Picture window.
  725.     this.copyStyleSheetsToWindow_(pipWindow);
  727.     // Add placeholder for the player.
  728.     const parentPlayer = pipPlayer.parentNode || document.body;
  729.     const placeholder = this.videoContainer_.cloneNode(true);
  730.     placeholder.style.visibility = 'hidden';
  731.     placeholder.style.height = getComputedStyle(pipPlayer).height;
  732.     parentPlayer.appendChild(placeholder);
  734.     // Make sure player fits in the Picture-in-Picture window.
  735.     const styles = document.createElement('style');
  736.     styles.append(`[data-shaka-player-container] {
  737.       width: 100% !important; max-height: 100%}`);
  738.     pipWindow.document.head.append(styles);
  740.     // Move player to the Picture-in-Picture window.
  741.     pipWindow.document.body.append(pipPlayer);
  743.     // Listen for the PiP closing event to move the player back.
  744.     this.eventManager_.listenOnce(pipWindow, 'pagehide', () => {
  745.       placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
  746.     });
  747.   }
  749.   /** @private */
  750.   copyStyleSheetsToWindow_(win) {
  751.     const styleSheets = /** @type {!Iterable<*>} */(document.styleSheets);
  752.     const allCSS = [...styleSheets]
  753.         .map((sheet) => {
  754.           try {
  755.             return [...sheet.cssRules].map((rule) => rule.cssText).join('');
  756.           } catch (e) {
  757.             const link = /** @type {!HTMLLinkElement} */(
  758.               document.createElement('link'));
  760.             link.rel = 'stylesheet';
  761.             link.type = sheet.type;
  762.             link.media = sheet.media;
  763.             link.href = sheet.href;
  764.             win.document.head.appendChild(link);
  765.           }
  766.           return '';
  767.         })
  768.         .filter(Boolean)
  769.         .join('\n');
  770.     const style = document.createElement('style');
  772.     style.textContent = allCSS;
  773.     win.document.head.appendChild(style);
  774.   }
  777.   /** @export */
  778.   showAdUI() {
  779.     shaka.ui.Utils.setDisplay(this.adPanel_, true);
  780.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, true);
  781.     this.controlsContainer_.setAttribute('ad-active', 'true');
  782.   }
  784.   /** @export */
  785.   hideAdUI() {
  786.     shaka.ui.Utils.setDisplay(this.adPanel_, false);
  787.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
  788.     this.controlsContainer_.removeAttribute('ad-active');
  789.   }
  791.   /**
  792.    * Play or pause the current presentation.
  793.    */
  794.   playPausePresentation() {
  795.     if (!this.enabled_) {
  796.       return;
  797.     }
  799.     if (!this.video_.duration) {
  800.       // Can't play yet.  Ignore.
  801.       return;
  802.     }
  804.     this.player_.cancelTrickPlay();
  806.     if (this.presentationIsPaused()) {
  807.       this.video_.play();
  808.     } else {
  809.       this.video_.pause();
  810.     }
  811.   }
  813.   /**
  814.    * Play or pause the current ad.
  815.    */
  816.   playPauseAd() {
  817.     if (this.ad_ && this.ad_.isPaused()) {
  818.       this.ad_.play();
  819.     } else if (this.ad_) {
  820.       this.ad_.pause();
  821.     }
  822.   }
  825.   /**
  826.    * Return true if the presentation is paused.
  827.    *
  828.    * @return {boolean}
  829.    */
  830.   presentationIsPaused() {
  831.     // The video element is in a paused state while seeking, but we don't count
  832.     // that.
  833.     return this.video_.paused && !this.isSeeking();
  834.   }
  837.   /** @private */
  838.   createDOM_() {
  839.     this.videoContainer_.classList.add('shaka-video-container');
  840.     this.localVideo_.classList.add('shaka-video');
  842.     this.addScrimContainer_();
  844.     if (this.config_.addBigPlayButton) {
  845.       this.addPlayButton_();
  846.     }
  848.     if (this.config_.customContextMenu) {
  849.       this.addContextMenu_();
  850.     }
  852.     if (!this.spinnerContainer_) {
  853.       this.addBufferingSpinner_();
  854.     }
  856.     if (this.config_.seekOnTaps) {
  857.       this.addFastForwardButtonOnControlsContainer_();
  858.       this.addRewindButtonOnControlsContainer_();
  859.     }
  861.     this.addDaiAdContainer_();
  863.     this.addControlsButtonPanel_();
  865.     this.menus_ = Array.from(
  866.         this.videoContainer_.getElementsByClassName('shaka-settings-menu'));
  867.     this.menus_.push(...Array.from(
  868.         this.videoContainer_.getElementsByClassName('shaka-overflow-menu')));
  870.     this.addSeekBar_();
  872.     this.showOnHoverControls_ = Array.from(
  873.         this.videoContainer_.getElementsByClassName(
  874.             'shaka-show-controls-on-mouse-over'));
  875.   }
  877.   /** @private */
  878.   addControlsContainer_() {
  879.     /** @private {HTMLElement} */
  880.     this.controlsContainer_ = shaka.util.Dom.createHTMLElement('div');
  881.     this.controlsContainer_.classList.add('shaka-controls-container');
  882.     this.videoContainer_.appendChild(this.controlsContainer_);
  884.     // Use our controls by default, without anyone calling
  885.     // setEnabledShakaControls:
  886.     this.videoContainer_.setAttribute('shaka-controls', 'true');
  888.     this.eventManager_.listen(this.controlsContainer_, 'touchstart', (e) => {
  889.       this.onContainerTouch_(e);
  890.     }, {passive: false});
  892.     this.eventManager_.listen(this.controlsContainer_, 'click', () => {
  893.       this.onContainerClick_();
  894.     });
  896.     this.eventManager_.listen(this.controlsContainer_, 'dblclick', () => {
  897.       if (this.config_.doubleClickForFullscreen &&
  898.           this.isFullScreenSupported()) {
  899.         this.toggleFullScreen();
  900.       }
  901.     });
  902.   }
  904.   /** @private */
  905.   addPlayButton_() {
  906.     const playButtonContainer = shaka.util.Dom.createHTMLElement('div');
  907.     playButtonContainer.classList.add('shaka-play-button-container');
  908.     this.controlsContainer_.appendChild(playButtonContainer);
  910.     /** @private {shaka.ui.BigPlayButton} */
  911.     this.playButton_ =
  912.         new shaka.ui.BigPlayButton(playButtonContainer, this);
  913.     this.elements_.push(this.playButton_);
  914.   }
  916.   /** @private */
  917.   addContextMenu_() {
  918.     /** @private {shaka.ui.ContextMenu} */
  919.     this.contextMenu_ =
  920.         new shaka.ui.ContextMenu(this.controlsButtonPanel_, this);
  921.     this.elements_.push(this.contextMenu_);
  922.   }
  924.   /** @private */
  925.   addScrimContainer_() {
  926.     // This is the container that gets styled by CSS to have the
  927.     // black gradient scrim at the end of the controls.
  928.     const scrimContainer = shaka.util.Dom.createHTMLElement('div');
  929.     scrimContainer.classList.add('shaka-scrim-container');
  930.     this.controlsContainer_.appendChild(scrimContainer);
  931.   }
  933.   /** @private */
  934.   addAdControls_() {
  935.     /** @private {!HTMLElement} */
  936.     this.adPanel_ = shaka.util.Dom.createHTMLElement('div');
  937.     this.adPanel_.classList.add('shaka-ad-controls');
  938.     const showAdPanel = this.ad_ != null && this.ad_.isLinear();
  939.     shaka.ui.Utils.setDisplay(this.adPanel_, showAdPanel);
  940.     this.bottomControls_.appendChild(this.adPanel_);
  942.     const adPosition = new shaka.ui.AdPosition(this.adPanel_, this);
  943.     this.elements_.push(adPosition);
  945.     const adCounter = new shaka.ui.AdCounter(this.adPanel_, this);
  946.     this.elements_.push(adCounter);
  947.   }
  949.   /** @private */
  950.   addBufferingSpinner_() {
  951.     /** @private {!HTMLElement} */
  952.     this.spinnerContainer_ = shaka.util.Dom.createHTMLElement('div');
  953.     this.spinnerContainer_.classList.add('shaka-spinner-container');
  954.     this.videoContainer_.appendChild(this.spinnerContainer_);
  956.     const spinner = shaka.util.Dom.createHTMLElement('div');
  957.     spinner.classList.add('shaka-spinner');
  958.     this.spinnerContainer_.appendChild(spinner);
  960.     // Svg elements have to be created with the svg xml namespace.
  961.     const xmlns = 'http://www.w3.org/2000/svg';
  963.     const svg =
  964.       /** @type {!HTMLElement} */(document.createElementNS(xmlns, 'svg'));
  965.     svg.classList.add('shaka-spinner-svg');
  966.     svg.setAttribute('viewBox', '0 0 30 30');
  967.     spinner.appendChild(svg);
  969.     // These coordinates are relative to the SVG viewBox above.  This is
  970.     // distinct from the actual display size in the page, since the "S" is for
  971.     // "Scalable." The radius of 14.5 is so that the edges of the 1-px-wide
  972.     // stroke will touch the edges of the viewBox.
  973.     const spinnerCircle = document.createElementNS(xmlns, 'circle');
  974.     spinnerCircle.classList.add('shaka-spinner-path');
  975.     spinnerCircle.setAttribute('cx', '15');
  976.     spinnerCircle.setAttribute('cy', '15');
  977.     spinnerCircle.setAttribute('r', '14.5');
  978.     spinnerCircle.setAttribute('fill', 'none');
  979.     spinnerCircle.setAttribute('stroke-width', '1');
  980.     spinnerCircle.setAttribute('stroke-miterlimit', '10');
  981.     svg.appendChild(spinnerCircle);
  982.   }
  984.   /**
  985.    * Add fast-forward button on Controls container for moving video some
  986.    * seconds ahead when the video is tapped more than once, video seeks ahead
  987.    * some seconds for every extra tap.
  988.    * @private
  989.    */
  990.   addFastForwardButtonOnControlsContainer_() {
  991.     const hiddenFastForwardContainer = shaka.util.Dom.createHTMLElement('div');
  992.     hiddenFastForwardContainer.classList.add(
  993.         'shaka-hidden-fast-forward-container');
  994.     this.controlsContainer_.appendChild(hiddenFastForwardContainer);
  996.     /** @private {shaka.ui.HiddenFastForwardButton} */
  997.     this.hiddenFastForwardButton_ =
  998.         new shaka.ui.HiddenFastForwardButton(hiddenFastForwardContainer, this);
  999.     this.elements_.push(this.hiddenFastForwardButton_);
  1000.   }
  1002.   /**
  1003.    * Add Rewind button on Controls container for moving video some seconds
  1004.    * behind when the video is tapped more than once, video seeks behind some
  1005.    * seconds for every extra tap.
  1006.    * @private
  1007.    */
  1008.   addRewindButtonOnControlsContainer_() {
  1009.     const hiddenRewindContainer = shaka.util.Dom.createHTMLElement('div');
  1010.     hiddenRewindContainer.classList.add(
  1011.         'shaka-hidden-rewind-container');
  1012.     this.controlsContainer_.appendChild(hiddenRewindContainer);
  1014.     /** @private {shaka.ui.HiddenRewindButton} */
  1015.     this.hiddenRewindButton_ =
  1016.         new shaka.ui.HiddenRewindButton(hiddenRewindContainer, this);
  1017.     this.elements_.push(this.hiddenRewindButton_);
  1018.   }
  1020.   /** @private */
  1021.   addControlsButtonPanel_() {
  1022.     /** @private {!HTMLElement} */
  1023.     this.bottomControls_ = shaka.util.Dom.createHTMLElement('div');
  1024.     this.bottomControls_.classList.add('shaka-bottom-controls');
  1025.     this.bottomControls_.classList.add('shaka-no-propagation');
  1026.     this.controlsContainer_.appendChild(this.bottomControls_);
  1028.     // Overflow menus are supposed to hide once you click elsewhere
  1029.     // on the page. The click event listener on window ensures that.
  1030.     // However, clicks on the bottom controls don't propagate to the container,
  1031.     // so we have to explicitly hide the menus onclick here.
  1032.     this.eventManager_.listen(this.bottomControls_, 'click', (e) => {
  1033.       // We explicitly deny this measure when clicking on buttons that
  1034.       // open submenus in the control panel.
  1035.       if (!e.target['closest']('.shaka-overflow-button')) {
  1036.         this.hideSettingsMenus();
  1037.       }
  1038.     });
  1040.     this.addAdControls_();
  1042.     /** @private {!HTMLElement} */
  1043.     this.controlsButtonPanel_ = shaka.util.Dom.createHTMLElement('div');
  1044.     this.controlsButtonPanel_.classList.add('shaka-controls-button-panel');
  1045.     this.controlsButtonPanel_.classList.add(
  1046.         'shaka-show-controls-on-mouse-over');
  1047.     if (this.config_.enableTooltips) {
  1048.       this.controlsButtonPanel_.classList.add('shaka-tooltips-on');
  1049.     }
  1050.     this.bottomControls_.appendChild(this.controlsButtonPanel_);
  1052.     // Create the elements specified by controlPanelElements
  1053.     for (const name of this.config_.controlPanelElements) {
  1054.       if (shaka.ui.ControlsPanel.elementNamesToFactories_.get(name)) {
  1055.         const factory =
  1056.             shaka.ui.ControlsPanel.elementNamesToFactories_.get(name);
  1057.         const element = factory.create(this.controlsButtonPanel_, this);
  1058.         this.elements_.push(element);
  1059.       } else {
  1060.         shaka.log.alwaysWarn('Unrecognized control panel element requested:',
  1061.             name);
  1062.       }
  1063.     }
  1064.   }
  1067.   /**
  1068.    * Adds a container for server side ad UI with IMA SDK.
  1069.    *
  1070.    * @private
  1071.    */
  1072.   addDaiAdContainer_() {
  1073.     /** @private {!HTMLElement} */
  1074.     this.daiAdContainer_ = shaka.util.Dom.createHTMLElement('div');
  1075.     this.daiAdContainer_.classList.add('shaka-server-side-ad-container');
  1076.     this.controlsContainer_.appendChild(this.daiAdContainer_);
  1077.   }
  1080.   /**
  1081.    * Adds a seekbar depending on the configuration.
  1082.    * By default an instance of shaka.ui.SeekBar is created
  1083.    * This behaviour can be overriden by providing a SeekBar factory using the
  1084.    * registerSeekBarFactory function.
  1085.    *
  1086.    * @private
  1087.    */
  1088.   addSeekBar_() {
  1089.     if (this.config_.addSeekBar) {
  1090.       this.seekBar_ = shaka.ui.ControlsPanel.seekBarFactory_.create(
  1091.           this.bottomControls_, this);
  1092.       this.elements_.push(this.seekBar_);
  1093.     } else {
  1094.       // Settings menus need to be positioned lower if the seekbar is absent.
  1095.       for (const menu of this.menus_) {
  1096.         menu.classList.add('shaka-low-position');
  1097.       }
  1098.     }
  1099.   }
  1102.   /**
  1103.    * Adds a container for client side ad UI with IMA SDK.
  1104.    *
  1105.    * @private
  1106.    */
  1107.   addClientAdContainer_() {
  1108.     /** @private {!HTMLElement} */
  1109.     this.clientAdContainer_ = shaka.util.Dom.createHTMLElement('div');
  1110.     this.clientAdContainer_.classList.add('shaka-client-side-ad-container');
  1111.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
  1112.     this.eventManager_.listen(this.clientAdContainer_, 'click', () => {
  1113.       this.onContainerClick_();
  1114.     });
  1115.     this.videoContainer_.appendChild(this.clientAdContainer_);
  1116.   }
  1118.   /**
  1119.    * Adds static event listeners.  This should only add event listeners to
  1120.    * things that don't change (e.g. Player).  Dynamic elements (e.g. controls)
  1121.    * should have their event listeners added when they are created.
  1122.    *
  1123.    * @private
  1124.    */
  1125.   addEventListeners_() {
  1126.     this.eventManager_.listen(this.player_, 'buffering', () => {
  1127.       this.onBufferingStateChange_();
  1128.     });
  1129.     // Set the initial state, as well.
  1130.     this.onBufferingStateChange_();
  1132.     // Listen for key down events to detect tab and enable outline
  1133.     // for focused elements.
  1134.     this.eventManager_.listen(window, 'keydown', (e) => {
  1135.       this.onWindowKeyDown_(/** @type {!KeyboardEvent} */(e));
  1136.     });
  1138.     // Listen for click events to dismiss the settings menus.
  1139.     this.eventManager_.listen(window, 'click', () => this.hideSettingsMenus());
  1141.     // Avoid having multiple submenus open at the same time.
  1142.     this.eventManager_.listen(
  1143.         this, 'submenuopen', () => {
  1144.           this.hideSettingsMenus();
  1145.         });
  1147.     this.eventManager_.listen(this.video_, 'play', () => {
  1148.       this.onPlayStateChange_();
  1149.     });
  1151.     this.eventManager_.listen(this.video_, 'pause', () => {
  1152.       this.onPlayStateChange_();
  1153.     });
  1155.     this.eventManager_.listen(this.videoContainer_, 'mousemove', (e) => {
  1156.       this.onMouseMove_(e);
  1157.     });
  1159.     this.eventManager_.listen(this.videoContainer_, 'touchmove', (e) => {
  1160.       this.onMouseMove_(e);
  1161.     }, {passive: true});
  1163.     this.eventManager_.listen(this.videoContainer_, 'touchend', (e) => {
  1164.       this.onMouseMove_(e);
  1165.     }, {passive: true});
  1167.     this.eventManager_.listen(this.videoContainer_, 'mouseleave', () => {
  1168.       this.onMouseLeave_();
  1169.     });
  1171.     this.eventManager_.listen(this.castProxy_, 'caststatuschanged', () => {
  1172.       this.onCastStatusChange_();
  1173.     });
  1175.     this.eventManager_.listen(this.videoContainer_, 'keydown', (e) => {
  1176.       this.onControlsKeyDown_(/** @type {!KeyboardEvent} */(e));
  1177.     });
  1179.     this.eventManager_.listen(this.videoContainer_, 'keyup', (e) => {
  1180.       this.onControlsKeyUp_(/** @type {!KeyboardEvent} */(e));
  1181.     });
  1183.     this.eventManager_.listen(
  1184.         this.adManager_, shaka.ads.AdManager.AD_STARTED, (e) => {
  1185.           this.ad_ = (/** @type {!Object} */ (e))['ad'];
  1186.           this.showAdUI();
  1187.         });
  1189.     this.eventManager_.listen(
  1190.         this.adManager_, shaka.ads.AdManager.AD_STOPPED, () => {
  1191.           this.ad_ = null;
  1192.           this.hideAdUI();
  1193.         });
  1195.     if (screen.orientation) {
  1196.       this.eventManager_.listen(screen.orientation, 'change', async () => {
  1197.         await this.onScreenRotation_();
  1198.       });
  1199.     }
  1200.   }
  1203.   /**
  1204.    * When a mobile device is rotated to landscape layout, and the video is
  1205.    * loaded, make the demo app go into fullscreen.
  1206.    * Similarly, exit fullscreen when the device is rotated to portrait layout.
  1207.    * @private
  1208.    */
  1209.   async onScreenRotation_() {
  1210.     if (!this.video_ ||
  1211.         this.video_.readyState == 0 ||
  1212.         this.castProxy_.isCasting() ||
  1213.         !this.config_.enableFullscreenOnRotation ||
  1214.         !this.isFullScreenSupported()) {
  1215.       return;
  1216.     }
  1218.     if (screen.orientation.type.includes('landscape') &&
  1219.         !this.isFullScreenEnabled()) {
  1220.       await this.enterFullScreen_();
  1221.     } else if (screen.orientation.type.includes('portrait') &&
  1222.       this.isFullScreenEnabled()) {
  1223.       await this.exitFullScreen_();
  1224.     }
  1225.   }
  1228.   /**
  1229.    * Hiding the cursor when the mouse stops moving seems to be the only
  1230.    * decent UX in fullscreen mode.  Since we can't use pure CSS for that,
  1231.    * we use events both in and out of fullscreen mode.
  1232.    * Showing the control bar when a key is pressed, and hiding it after some
  1233.    * time.
  1234.    * @param {!Event} event
  1235.    * @private
  1236.    */
  1237.   onMouseMove_(event) {
  1238.     // Disable blue outline for focused elements for mouse navigation.
  1239.     if (event.type == 'mousemove') {
  1240.       this.controlsContainer_.classList.remove('shaka-keyboard-navigation');
  1241.       this.computeOpacity();
  1242.     }
  1243.     if (event.type == 'touchstart' || event.type == 'touchmove' ||
  1244.         event.type == 'touchend' || event.type == 'keyup') {
  1245.       this.lastTouchEventTime_ = Date.now();
  1246.     } else if (this.lastTouchEventTime_ + 1000 < Date.now()) {
  1247.       // It has been a while since the last touch event, this is probably a real
  1248.       // mouse moving, so treat it like a mouse.
  1249.       this.lastTouchEventTime_ = null;
  1250.     }
  1252.     // When there is a touch, we can get a 'mousemove' event after touch events.
  1253.     // This should be treated as part of the touch, which has already been
  1254.     // handled.
  1255.     if (this.lastTouchEventTime_ && event.type == 'mousemove') {
  1256.       return;
  1257.     }
  1259.     // Use the cursor specified in the CSS file.
  1260.     this.videoContainer_.style.cursor = '';
  1262.     this.recentMouseMovement_ = true;
  1264.     // Make sure we are not about to hide the settings menus and then force them
  1265.     // open.
  1266.     this.hideSettingsMenusTimer_.stop();
  1268.     if (!this.isOpaque()) {
  1269.       // Only update the time and seek range on mouse movement if it's the very
  1270.       // first movement and we're about to show the controls.  Otherwise, the
  1271.       // seek bar will be updated much more rapidly during mouse movement.  Do
  1272.       // this right before making it visible.
  1273.       this.updateTimeAndSeekRange_();
  1274.       this.computeOpacity();
  1275.     }
  1277.     // Hide the cursor when the mouse stops moving.
  1278.     // Only applies while the cursor is over the video container.
  1279.     this.mouseStillTimer_.stop();
  1281.     // Only start a timeout on 'touchend' or for 'mousemove' with no touch
  1282.     // events.
  1283.     if (event.type == 'touchend' ||
  1284.         event.type == 'keyup'|| !this.lastTouchEventTime_) {
  1285.       this.mouseStillTimer_.tickAfter(/* seconds= */ 3);
  1286.     }
  1287.   }
  1289.   /** @private */
  1290.   onMouseLeave_() {
  1291.     // We sometimes get 'mouseout' events with touches.  Since we can never
  1292.     // leave the video element when touching, ignore.
  1293.     if (this.lastTouchEventTime_) {
  1294.       return;
  1295.     }
  1297.     // Stop the timer and invoke the callback now to hide the controls.  If we
  1298.     // don't, the opacity style we set in onMouseMove_ will continue to override
  1299.     // the opacity in CSS and force the controls to stay visible.
  1300.     this.mouseStillTimer_.tickNow();
  1301.   }
  1303.   /**
  1304.    * This callback is for when we are pretty sure that the mouse has stopped
  1305.    * moving (aka the mouse is still). This method should only be called via
  1306.    * |mouseStillTimer_|. If this behaviour needs to be invoked directly, use
  1307.    * |mouseStillTimer_.tickNow()|.
  1308.    *
  1309.    * @private
  1310.    */
  1311.   onMouseStill_() {
  1312.     // Hide the cursor.
  1313.     this.videoContainer_.style.cursor = 'none';
  1314.     this.recentMouseMovement_ = false;
  1315.     this.computeOpacity();
  1316.   }
  1318.   /**
  1319.    * @return {boolean} true if any relevant elements are hovered.
  1320.    * @private
  1321.    */
  1322.   isHovered_() {
  1323.     if (!window.matchMedia('hover: hover').matches) {
  1324.       // This is primarily a touch-screen device, so the :hover query below
  1325.       // doesn't make sense.  In spite of this, the :hover query on an element
  1326.       // can still return true on such a device after a touch ends.
  1327.       // See https://bit.ly/34dBORX for details.
  1328.       return false;
  1329.     }
  1331.     return this.showOnHoverControls_.some((element) => {
  1332.       return element.matches(':hover');
  1333.     });
  1334.   }
  1336.   /**
  1337.    * Recompute whether the controls should be shown or hidden.
  1338.    */
  1339.   computeOpacity() {
  1340.     const adIsPaused = this.ad_ ? this.ad_.isPaused() : false;
  1341.     const videoIsPaused = this.video_.paused && !this.isSeeking_;
  1342.     const keyboardNavigationMode = this.controlsContainer_.classList.contains(
  1343.         'shaka-keyboard-navigation');
  1345.     // Keep showing the controls if the ad or video is paused, there has been
  1346.     // recent mouse movement, we're in keyboard navigation, or one of a special
  1347.     // class of elements is hovered.
  1348.     if (adIsPaused ||
  1349.         ((!this.ad_ || !this.ad_.isLinear()) && videoIsPaused) ||
  1350.         this.recentMouseMovement_ ||
  1351.         keyboardNavigationMode ||
  1352.         this.isHovered_()) {
  1353.       // Make sure the state is up-to-date before showing it.
  1354.       this.updateTimeAndSeekRange_();
  1356.       this.controlsContainer_.setAttribute('shown', 'true');
  1357.       this.fadeControlsTimer_.stop();
  1358.     } else {
  1359.       this.fadeControlsTimer_.tickAfter(/* seconds= */ this.config_.fadeDelay);
  1360.     }
  1361.   }
  1363.   /**
  1364.    * @param {!Event} event
  1365.    * @private
  1366.    */
  1367.   onContainerTouch_(event) {
  1368.     if (!this.video_.duration) {
  1369.       // Can't play yet.  Ignore.
  1370.       return;
  1371.     }
  1373.     if (this.isOpaque()) {
  1374.       this.lastTouchEventTime_ = Date.now();
  1375.       // The controls are showing.
  1376.       // Let this event continue and become a click.
  1377.     } else {
  1378.       // The controls are hidden, so show them.
  1379.       this.onMouseMove_(event);
  1380.       // Stop this event from becoming a click event.
  1381.       event.cancelable && event.preventDefault();
  1382.     }
  1383.   }
  1385.   /** @private */
  1386.   onContainerClick_() {
  1387.     if (!this.enabled_) {
  1388.       return;
  1389.     }
  1391.     if (this.anySettingsMenusAreOpen()) {
  1392.       this.hideSettingsMenusTimer_.tickNow();
  1393.     } else if (this.config_.singleClickForPlayAndPause) {
  1394.       this.onPlayPauseClick_();
  1395.     }
  1396.   }
  1398.   /** @private */
  1399.   onPlayPauseClick_() {
  1400.     if (this.ad_ && this.ad_.isLinear()) {
  1401.       this.playPauseAd();
  1402.     } else {
  1403.       this.playPausePresentation();
  1404.     }
  1405.   }
  1407.   /** @private */
  1408.   onCastStatusChange_() {
  1409.     const isCasting = this.castProxy_.isCasting();
  1410.     this.dispatchEvent(new shaka.util.FakeEvent(
  1411.         'caststatuschanged', (new Map()).set('newStatus', isCasting)));
  1413.     if (isCasting) {
  1414.       this.controlsContainer_.setAttribute('casting', 'true');
  1415.     } else {
  1416.       this.controlsContainer_.removeAttribute('casting');
  1417.     }
  1418.   }
  1420.   /** @private */
  1421.   onPlayStateChange_() {
  1422.     this.computeOpacity();
  1423.   }
  1425.   /**
  1426.    * Support controls with keyboard inputs.
  1427.    * @param {!KeyboardEvent} event
  1428.    * @private
  1429.    */
  1430.   onControlsKeyDown_(event) {
  1431.     const activeElement = document.activeElement;
  1432.     const isVolumeBar = activeElement && activeElement.classList ?
  1433.         activeElement.classList.contains('shaka-volume-bar') : false;
  1434.     const isSeekBar = activeElement && activeElement.classList &&
  1435.         activeElement.classList.contains('shaka-seek-bar');
  1436.     // Show the control panel if it is on focus or any button is pressed.
  1437.     if (this.controlsContainer_.contains(activeElement)) {
  1438.       this.onMouseMove_(event);
  1439.     }
  1441.     if (!this.config_.enableKeyboardPlaybackControls) {
  1442.       return;
  1443.     }
  1445.     const keyboardSeekDistance = this.config_.keyboardSeekDistance;
  1446.     const keyboardLargeSeekDistance = this.config_.keyboardLargeSeekDistance;
  1448.     switch (event.key) {
  1449.       case 'ArrowLeft':
  1450.         // If it's not focused on the volume bar, move the seek time backward
  1451.         // for a few sec. Otherwise, the volume will be adjusted automatically.
  1452.         if (this.seekBar_ && !isVolumeBar && keyboardSeekDistance > 0) {
  1453.           event.preventDefault();
  1454.           this.seek_(this.seekBar_.getValue() - keyboardSeekDistance);
  1455.         }
  1456.         break;
  1457.       case 'ArrowRight':
  1458.         // If it's not focused on the volume bar, move the seek time forward
  1459.         // for a few sec. Otherwise, the volume will be adjusted automatically.
  1460.         if (this.seekBar_ && !isVolumeBar && keyboardSeekDistance > 0) {
  1461.           event.preventDefault();
  1462.           this.seek_(this.seekBar_.getValue() + keyboardSeekDistance);
  1463.         }
  1464.         break;
  1465.       case 'PageDown':
  1466.         // PageDown is like ArrowLeft, but has a larger jump distance, and does
  1467.         // nothing to volume.
  1468.         if (this.seekBar_ && isSeekBar && keyboardSeekDistance > 0) {
  1469.           event.preventDefault();
  1470.           this.seek_(this.seekBar_.getValue() - keyboardLargeSeekDistance);
  1471.         }
  1472.         break;
  1473.       case 'PageUp':
  1474.         // PageDown is like ArrowRight, but has a larger jump distance, and does
  1475.         // nothing to volume.
  1476.         if (this.seekBar_ && isSeekBar && keyboardSeekDistance > 0) {
  1477.           event.preventDefault();
  1478.           this.seek_(this.seekBar_.getValue() + keyboardLargeSeekDistance);
  1479.         }
  1480.         break;
  1481.       // Jump to the beginning of the video's seek range.
  1482.       case 'Home':
  1483.         if (this.seekBar_) {
  1484.           this.seek_(this.player_.seekRange().start);
  1485.         }
  1486.         break;
  1487.       // Jump to the end of the video's seek range.
  1488.       case 'End':
  1489.         if (this.seekBar_) {
  1490.           this.seek_(this.player_.seekRange().end);
  1491.         }
  1492.         break;
  1493.       case 'f':
  1494.         if (this.isFullScreenSupported()) {
  1495.           this.toggleFullScreen();
  1496.         }
  1497.         break;
  1498.       case 'm':
  1499.         if (this.ad_ && this.ad_.isLinear()) {
  1500.           this.ad_.setMuted(!this.ad_.isMuted());
  1501.         } else {
  1502.           this.localVideo_.muted = !this.localVideo_.muted;
  1503.         }
  1504.         break;
  1505.       case 'p':
  1506.         if (this.isPiPAllowed()) {
  1507.           this.togglePiP();
  1508.         }
  1509.         break;
  1510.       // Pause or play by pressing space on the seek bar.
  1511.       case ' ':
  1512.         if (isSeekBar) {
  1513.           this.onPlayPauseClick_();
  1514.         }
  1515.         break;
  1516.     }
  1517.   }
  1519.   /**
  1520.    * Support controls with keyboard inputs.
  1521.    * @param {!KeyboardEvent} event
  1522.    * @private
  1523.    */
  1524.   onControlsKeyUp_(event) {
  1525.     // When the key is released, remove it from the pressed keys set.
  1526.     this.pressedKeys_.delete(event.key);
  1527.   }
  1529.   /**
  1530.    * Called both as an event listener and directly by the controls to initialize
  1531.    * the buffering state.
  1532.    * @private
  1533.    */
  1534.   onBufferingStateChange_() {
  1535.     if (!this.enabled_) {
  1536.       return;
  1537.     }
  1539.     shaka.ui.Utils.setDisplay(
  1540.         this.spinnerContainer_, this.player_.isBuffering());
  1541.   }
  1543.   /**
  1544.    * @return {boolean}
  1545.    * @export
  1546.    */
  1547.   isOpaque() {
  1548.     if (!this.enabled_) {
  1549.       return false;
  1550.     }
  1552.     return this.controlsContainer_.getAttribute('shown') != null ||
  1553.         this.controlsContainer_.getAttribute('casting') != null;
  1554.   }
  1556.   /**
  1557.    * Update the video's current time based on the keyboard operations.
  1558.    *
  1559.    * @param {number} currentTime
  1560.    * @private
  1561.    */
  1562.   seek_(currentTime) {
  1563.     goog.asserts.assert(
  1564.         this.seekBar_, 'Caller of seek_ must check for seekBar_ first!');
  1566.     this.seekBar_.changeTo(currentTime);
  1568.     if (this.isOpaque()) {
  1569.       // Only update the time and seek range if it's visible.
  1570.       this.updateTimeAndSeekRange_();
  1571.     }
  1572.   }
  1574.   /**
  1575.    * Called when the seek range or current time need to be updated.
  1576.    * @private
  1577.    */
  1578.   updateTimeAndSeekRange_() {
  1579.     if (this.seekBar_) {
  1580.       this.seekBar_.setValue(this.video_.currentTime);
  1581.       this.seekBar_.update();
  1583.       if (this.seekBar_.isShowing()) {
  1584.         for (const menu of this.menus_) {
  1585.           menu.classList.remove('shaka-low-position');
  1586.         }
  1587.       } else {
  1588.         for (const menu of this.menus_) {
  1589.           menu.classList.add('shaka-low-position');
  1590.         }
  1591.       }
  1592.     }
  1594.     this.dispatchEvent(new shaka.util.FakeEvent('timeandseekrangeupdated'));
  1595.   }
  1597.   /**
  1598.    * Add behaviors for keyboard navigation.
  1599.    * 1. Add blue outline for focused elements.
  1600.    * 2. Allow exiting overflow settings menus by pressing Esc key.
  1601.    * 3. When navigating on overflow settings menu by pressing Tab
  1602.    *    key or Shift+Tab keys keep the focus inside overflow menu.
  1603.    *
  1604.    * @param {!KeyboardEvent} event
  1605.    * @private
  1606.    */
  1607.   onWindowKeyDown_(event) {
  1608.     // Add the key to the pressed keys set when it's pressed.
  1609.     this.pressedKeys_.add(event.key);
  1611.     const anySettingsMenusAreOpen = this.anySettingsMenusAreOpen();
  1613.     if (event.key == 'Tab') {
  1614.       // Enable blue outline for focused elements for keyboard
  1615.       // navigation.
  1616.       this.controlsContainer_.classList.add('shaka-keyboard-navigation');
  1617.       this.computeOpacity();
  1618.       this.eventManager_.listen(window, 'mousedown', () => this.onMouseDown_());
  1619.     }
  1621.     // If escape key was pressed, close any open settings menus.
  1622.     if (event.key == 'Escape') {
  1623.       this.hideSettingsMenusTimer_.tickNow();
  1624.     }
  1626.     if (anySettingsMenusAreOpen && this.pressedKeys_.has('Tab')) {
  1627.       // If Tab key or Shift+Tab keys are pressed when navigating through
  1628.       // an overflow settings menu, keep the focus to loop inside the
  1629.       // overflow menu.
  1630.       this.keepFocusInMenu_(event);
  1631.     }
  1632.   }
  1634.   /**
  1635.    * When the user is using keyboard to navigate inside the overflow settings
  1636.    * menu (pressing Tab key to go forward, or pressing Shift + Tab keys to go
  1637.    * backward), make sure it's focused only on the elements of the overflow
  1638.    * panel.
  1639.    *
  1640.    * This is called by onWindowKeyDown_() function, when there's a settings
  1641.    * overflow menu open, and the Tab key / Shift+Tab keys are pressed.
  1642.    *
  1643.    * @param {!Event} event
  1644.    * @private
  1645.    */
  1646.   keepFocusInMenu_(event) {
  1647.     const openSettingsMenus = this.menus_.filter(
  1648.         (menu) => !menu.classList.contains('shaka-hidden'));
  1649.     if (!openSettingsMenus.length) {
  1650.       // For example, this occurs when you hit escape to close the menu.
  1651.       return;
  1652.     }
  1654.     const settingsMenu = openSettingsMenus[0];
  1655.     if (settingsMenu.childNodes.length) {
  1656.       // Get the first and the last displaying child element from the overflow
  1657.       // menu.
  1658.       let firstShownChild = settingsMenu.firstElementChild;
  1659.       while (firstShownChild &&
  1660.              firstShownChild.classList.contains('shaka-hidden')) {
  1661.         firstShownChild = firstShownChild.nextElementSibling;
  1662.       }
  1664.       let lastShownChild = settingsMenu.lastElementChild;
  1665.       while (lastShownChild &&
  1666.              lastShownChild.classList.contains('shaka-hidden')) {
  1667.         lastShownChild = lastShownChild.previousElementSibling;
  1668.       }
  1670.       const activeElement = document.activeElement;
  1671.       // When only Tab key is pressed, navigate to the next elememnt.
  1672.       // If it's currently focused on the last shown child element of the
  1673.       // overflow menu, let the focus move to the first child element of the
  1674.       // menu.
  1675.       // When Tab + Shift keys are pressed at the same time, navigate to the
  1676.       // previous element. If it's currently focused on the first shown child
  1677.       // element of the overflow menu, let the focus move to the last child
  1678.       // element of the menu.
  1679.       if (this.pressedKeys_.has('Shift')) {
  1680.         if (activeElement == firstShownChild) {
  1681.           event.preventDefault();
  1682.           lastShownChild.focus();
  1683.         }
  1684.       } else {
  1685.         if (activeElement == lastShownChild) {
  1686.           event.preventDefault();
  1687.           firstShownChild.focus();
  1688.         }
  1689.       }
  1690.     }
  1691.   }
  1693.   /**
  1694.    * For keyboard navigation, we use blue borders to highlight the active
  1695.    * element. If we detect that a mouse is being used, remove the blue border
  1696.    * from the active element.
  1697.    * @private
  1698.    */
  1699.   onMouseDown_() {
  1700.     this.eventManager_.unlisten(window, 'mousedown');
  1701.   }
  1703.   /**
  1704.    * Create a localization instance already pre-loaded with all the locales that
  1705.    * we support.
  1706.    *
  1707.    * @return {!shaka.ui.Localization}
  1708.    * @private
  1709.    */
  1710.   static createLocalization_() {
  1711.     /** @type {string} */
  1712.     const fallbackLocale = 'en';
  1714.     /** @type {!shaka.ui.Localization} */
  1715.     const localization = new shaka.ui.Localization(fallbackLocale);
  1716.     shaka.ui.Locales.addTo(localization);
  1717.     localization.changeLocale(navigator.languages || []);
  1719.     return localization;
  1720.   }
  1721. };
  1724. /**
  1725.  * @event shaka.ui.Controls#CastStatusChangedEvent
  1726.  * @description Fired upon receiving a 'caststatuschanged' event from
  1727.  *    the cast proxy.
  1728.  * @property {string} type
  1729.  *   'caststatuschanged'
  1730.  * @property {boolean} newStatus
  1731.  *  The new status of the application. True for 'is casting' and
  1732.  *  false otherwise.
  1733.  * @exportDoc
  1734.  */
  1737. /**
  1738.  * @event shaka.ui.Controls#SubMenuOpenEvent
  1739.  * @description Fired when one of the overflow submenus is opened
  1740.  *    (e. g. language/resolution/subtitle selection).
  1741.  * @property {string} type
  1742.  *   'submenuopen'
  1743.  * @exportDoc
  1744.  */
  1747. /**
  1748.  * @event shaka.ui.Controls#CaptionSelectionUpdatedEvent
  1749.  * @description Fired when the captions/subtitles menu has finished updating.
  1750.  * @property {string} type
  1751.  *   'captionselectionupdated'
  1752.  * @exportDoc
  1753.  */
  1756. /**
  1757.  * @event shaka.ui.Controls#ResolutionSelectionUpdatedEvent
  1758.  * @description Fired when the resolution menu has finished updating.
  1759.  * @property {string} type
  1760.  *   'resolutionselectionupdated'
  1761.  * @exportDoc
  1762.  */
  1765. /**
  1766.  * @event shaka.ui.Controls#LanguageSelectionUpdatedEvent
  1767.  * @description Fired when the audio language menu has finished updating.
  1768.  * @property {string} type
  1769.  *   'languageselectionupdated'
  1770.  * @exportDoc
  1771.  */
  1774. /**
  1775.  * @event shaka.ui.Controls#ErrorEvent
  1776.  * @description Fired when something went wrong with the controls.
  1777.  * @property {string} type
  1778.  *   'error'
  1779.  * @property {!shaka.util.Error} detail
  1780.  *   An object which contains details on the error.  The error's 'category'
  1781.  *   and 'code' properties will identify the specific error that occurred.
  1782.  *   In an uncompiled build, you can also use the 'message' and 'stack'
  1783.  *   properties to debug.
  1784.  * @exportDoc
  1785.  */
  1788. /**
  1789.  * @event shaka.ui.Controls#TimeAndSeekRangeUpdatedEvent
  1790.  * @description Fired when the time and seek range elements have finished
  1791.  *    updating.
  1792.  * @property {string} type
  1793.  *   'timeandseekrangeupdated'
  1794.  * @exportDoc
  1795.  */
  1798. /**
  1799.  * @event shaka.ui.Controls#UIUpdatedEvent
  1800.  * @description Fired after a call to ui.configure() once the UI has finished
  1801.  *    updating.
  1802.  * @property {string} type
  1803.  *   'uiupdated'
  1804.  * @exportDoc
  1805.  */
  1807. /** @private {!Map.<string, !shaka.extern.IUIElement.Factory>} */
  1808. shaka.ui.ControlsPanel.elementNamesToFactories_ = new Map();
  1810. /** @private {?shaka.extern.IUISeekBar.Factory} */
  1811. shaka.ui.ControlsPanel.seekBarFactory_ = new shaka.ui.SeekBar.Factory();