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.SkipAdButton');
  25. goog.require('shaka.ui.Utils');
  26. goog.require('shaka.ui.VRManager');
  27. goog.require('shaka.util.Dom');
  28. goog.require('shaka.util.EventManager');
  29. goog.require('shaka.util.FakeEvent');
  30. goog.require('shaka.util.FakeEventTarget');
  31. goog.require('shaka.util.IDestroyable');
  32. goog.require('shaka.util.Timer');
  34. goog.requireType('shaka.Player');
  37. /**
  38.  * A container for custom video controls.
  39.  * @implements {shaka.util.IDestroyable}
  40.  * @export
  41.  */
  42. shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
  43.   /**
  44.    * @param {!shaka.Player} player
  45.    * @param {!HTMLElement} videoContainer
  46.    * @param {!HTMLMediaElement} video
  47.    * @param {?HTMLCanvasElement} vrCanvas
  48.    * @param {shaka.extern.UIConfiguration} config
  49.    */
  50.   constructor(player, videoContainer, video, vrCanvas, config) {
  51.     super();
  53.     /** @private {boolean} */
  54.     this.enabled_ = true;
  56.     /** @private {shaka.extern.UIConfiguration} */
  57.     this.config_ = config;
  59.     /** @private {shaka.cast.CastProxy} */
  60.     this.castProxy_ = new shaka.cast.CastProxy(
  61.         video, player, this.config_.castReceiverAppId,
  62.         this.config_.castAndroidReceiverCompatible);
  64.     /** @private {boolean} */
  65.     this.castAllowed_ = true;
  67.     /** @private {HTMLMediaElement} */
  68.     this.video_ = this.castProxy_.getVideo();
  70.     /** @private {HTMLMediaElement} */
  71.     this.localVideo_ = video;
  73.     /** @private {shaka.Player} */
  74.     this.player_ = this.castProxy_.getPlayer();
  76.     /** @private {shaka.Player} */
  77.     this.localPlayer_ = player;
  79.     /** @private {!HTMLElement} */
  80.     this.videoContainer_ = videoContainer;
  82.     /** @private {?HTMLCanvasElement} */
  83.     this.vrCanvas_ = vrCanvas;
  85.     /** @private {shaka.extern.IAdManager} */
  86.     this.adManager_ = this.player_.getAdManager();
  88.     /** @private {?shaka.extern.IAd} */
  89.     this.ad_ = null;
  91.     /** @private {?shaka.extern.IUISeekBar} */
  92.     this.seekBar_ = null;
  94.     /** @private {boolean} */
  95.     this.isSeeking_ = false;
  97.     /** @private {!Array.<!HTMLElement>} */
  98.     this.menus_ = [];
  100.     /**
  101.      * Individual controls which, when hovered or tab-focused, will force the
  102.      * controls to be shown.
  103.      * @private {!Array.<!Element>}
  104.      */
  105.     this.showOnHoverControls_ = [];
  107.     /** @private {boolean} */
  108.     this.recentMouseMovement_ = false;
  110.     /**
  111.      * This timer is used to detect when the user has stopped moving the mouse
  112.      * and we should fade out the ui.
  113.      *
  114.      * @private {shaka.util.Timer}
  115.      */
  116.     this.mouseStillTimer_ = new shaka.util.Timer(() => {
  117.       this.onMouseStill_();
  118.     });
  120.     /**
  121.      * This timer is used to delay the fading of the UI.
  122.      *
  123.      * @private {shaka.util.Timer}
  124.      */
  125.     this.fadeControlsTimer_ = new shaka.util.Timer(() => {
  126.       this.controlsContainer_.removeAttribute('shown');
  128.       // If there's an overflow menu open, keep it this way for a couple of
  129.       // seconds in case a user immediately initiates another mouse move to
  130.       // interact with the menus. If that didn't happen, go ahead and hide
  131.       // the menus.
  132.       this.hideSettingsMenusTimer_.tickAfter(/* seconds= */ 2);
  133.     });
  135.     /**
  136.      * This timer will be used to hide all settings menus. When the timer ticks
  137.      * it will force all controls to invisible.
  138.      *
  139.      * Rather than calling the callback directly, |Controls| will always call it
  140.      * through the timer to avoid conflicts.
  141.      *
  142.      * @private {shaka.util.Timer}
  143.      */
  144.     this.hideSettingsMenusTimer_ = new shaka.util.Timer(() => {
  145.       for (const menu of this.menus_) {
  146.         shaka.ui.Utils.setDisplay(menu, /* visible= */ false);
  147.       }
  148.     });
  150.     /**
  151.      * This timer is used to regularly update the time and seek range elements
  152.      * so that we are communicating the current state as accurately as possibly.
  153.      *
  154.      * Unlike the other timers, this timer does not "own" the callback because
  155.      * this timer is acting like a heartbeat.
  156.      *
  157.      * @private {shaka.util.Timer}
  158.      */
  159.     this.timeAndSeekRangeTimer_ = new shaka.util.Timer(() => {
  160.       // Suppress timer-based updates if the controls are hidden.
  161.       if (this.isOpaque()) {
  162.         this.updateTimeAndSeekRange_();
  163.       }
  164.     });
  166.     /** @private {?number} */
  167.     this.lastTouchEventTime_ = null;
  169.     /** @private {!Array.<!shaka.extern.IUIElement>} */
  170.     this.elements_ = [];
  172.     /** @private {shaka.ui.Localization} */
  173.     this.localization_ = shaka.ui.Controls.createLocalization_();
  175.     /** @private {shaka.util.EventManager} */
  176.     this.eventManager_ = new shaka.util.EventManager();
  178.     /** @private {?shaka.ui.VRManager} */
  179.     this.vr_ = null;
  181.     // Configure and create the layout of the controls
  182.     this.configure(this.config_);
  183.     this.addEventListeners_();
  185.     /**
  186.      * The pressed keys set is used to record which keys are currently pressed
  187.      * down, so we can know what keys are pressed at the same time.
  188.      * Used by the focusInsideOverflowMenu_() function.
  189.      * @private {!Set.<string>}
  190.      */
  191.     this.pressedKeys_ = new Set();
  193.     // We might've missed a caststatuschanged event from the proxy between
  194.     // the controls creation and initializing. Run onCastStatusChange_()
  195.     // to ensure we have the casting state right.
  196.     this.onCastStatusChange_();
  198.     // Start this timer after we are finished initializing everything,
  199.     this.timeAndSeekRangeTimer_.tickEvery(this.config_.refreshTickInSeconds);
  201.     this.eventManager_.listen(this.localization_,
  202.         shaka.ui.Localization.LOCALE_CHANGED, (e) => {
  203.           const locale = e['locales'][0];
  204.           this.adManager_.setLocale(locale);
  205.         });
  206.   }
  208.   /**
  209.    * @override
  210.    * @export
  211.    */
  212.   async destroy() {
  213.     if (document.pictureInPictureElement == this.localVideo_) {
  214.       await document.exitPictureInPicture();
  215.     }
  217.     if (this.eventManager_) {
  218.       this.eventManager_.release();
  219.       this.eventManager_ = null;
  220.     }
  222.     if (this.mouseStillTimer_) {
  223.       this.mouseStillTimer_.stop();
  224.       this.mouseStillTimer_ = null;
  225.     }
  227.     if (this.fadeControlsTimer_) {
  228.       this.fadeControlsTimer_.stop();
  229.       this.fadeControlsTimer_ = null;
  230.     }
  232.     if (this.hideSettingsMenusTimer_) {
  233.       this.hideSettingsMenusTimer_.stop();
  234.       this.hideSettingsMenusTimer_ = null;
  235.     }
  237.     if (this.timeAndSeekRangeTimer_) {
  238.       this.timeAndSeekRangeTimer_.stop();
  239.       this.timeAndSeekRangeTimer_ = null;
  240.     }
  242.     if (this.vr_) {
  243.       this.vr_.release();
  244.       this.vr_ = null;
  245.     }
  247.     // Important!  Release all child elements before destroying the cast proxy
  248.     // or player.  This makes sure those destructions will not trigger event
  249.     // listeners in the UI which would then invoke the cast proxy or player.
  250.     this.releaseChildElements_();
  252.     if (this.controlsContainer_) {
  253.       this.videoContainer_.removeChild(this.controlsContainer_);
  254.       this.controlsContainer_ = null;
  255.     }
  257.     if (this.castProxy_) {
  258.       await this.castProxy_.destroy();
  259.       this.castProxy_ = null;
  260.     }
  262.     if (this.localPlayer_) {
  263.       await this.localPlayer_.destroy();
  264.       this.localPlayer_ = null;
  265.     }
  266.     this.player_ = null;
  268.     this.localVideo_ = null;
  269.     this.video_ = null;
  271.     this.localization_ = null;
  272.     this.pressedKeys_.clear();
  274.     // FakeEventTarget implements IReleasable
  275.     super.release();
  276.   }
  279.   /** @private */
  280.   releaseChildElements_() {
  281.     for (const element of this.elements_) {
  282.       element.release();
  283.     }
  285.     this.elements_ = [];
  286.   }
  288.   /**
  289.    * @param {string} name
  290.    * @param {!shaka.extern.IUIElement.Factory} factory
  291.    * @export
  292.    */
  293.   static registerElement(name, factory) {
  294.     shaka.ui.ControlsPanel.elementNamesToFactories_.set(name, factory);
  295.   }
  297.   /**
  298.    * @param {!shaka.extern.IUISeekBar.Factory} factory
  299.    * @export
  300.    */
  301.   static registerSeekBar(factory) {
  302.     shaka.ui.ControlsPanel.seekBarFactory_ = factory;
  303.   }
  305.   /**
  306.    * This allows the application to inhibit casting.
  307.    *
  308.    * @param {boolean} allow
  309.    * @export
  310.    */
  311.   allowCast(allow) {
  312.     this.castAllowed_ = allow;
  313.     this.onCastStatusChange_();
  314.   }
  316.   /**
  317.    * Used by the application to notify the controls that a load operation is
  318.    * complete.  This allows the controls to recalculate play/paused state, which
  319.    * is important for platforms like Android where autoplay is disabled.
  320.    * @export
  321.    */
  322.   loadComplete() {
  323.     // If we are on Android or if autoplay is false, video.paused should be
  324.     // true. Otherwise, video.paused is false and the content is autoplaying.
  325.     this.onPlayStateChange_();
  326.   }
  328.   /**
  329.    * @param {!shaka.extern.UIConfiguration} config
  330.    * @export
  331.    */
  332.   configure(config) {
  333.     this.config_ = config;
  335.     this.castProxy_.changeReceiverId(config.castReceiverAppId,
  336.         config.castAndroidReceiverCompatible);
  338.     // Deconstruct the old layout if applicable
  339.     if (this.seekBar_) {
  340.       this.seekBar_ = null;
  341.     }
  343.     if (this.playButton_) {
  344.       this.playButton_ = null;
  345.     }
  347.     if (this.contextMenu_) {
  348.       this.contextMenu_ = null;
  349.     }
  351.     if (this.vr_) {
  352.       this.vr_.configure(config);
  353.     }
  355.     if (this.controlsContainer_) {
  356.       shaka.util.Dom.removeAllChildren(this.controlsContainer_);
  357.       this.releaseChildElements_();
  358.     } else {
  359.       this.addControlsContainer_();
  360.       // The client-side ad container is only created once, and is never
  361.       // re-created or uprooted in the DOM, even when the DOM is re-created,
  362.       // since that seemingly breaks the IMA SDK.
  363.       this.addClientAdContainer_();
  365.       goog.asserts.assert(
  366.           this.controlsContainer_, 'Should have a controlsContainer_!');
  367.       goog.asserts.assert(this.localVideo_, 'Should have a localVideo_!');
  368.       goog.asserts.assert(this.player_, 'Should have a player_!');
  369.       this.vr_ = new shaka.ui.VRManager(this.controlsContainer_, this.vrCanvas_,
  370.           this.localVideo_, this.player_, this.config_);
  371.     }
  373.     // Create the new layout
  374.     this.createDOM_();
  376.     // Init the play state
  377.     this.onPlayStateChange_();
  379.     // Elements that should not propagate clicks (controls panel, menus)
  380.     const noPropagationElements = this.videoContainer_.getElementsByClassName(
  381.         'shaka-no-propagation');
  382.     for (const element of noPropagationElements) {
  383.       const cb = (event) => event.stopPropagation();
  384.       this.eventManager_.listen(element, 'click', cb);
  385.       this.eventManager_.listen(element, 'dblclick', cb);
  386.     }
  387.   }
  389.   /**
  390.    * Enable or disable the custom controls. Enabling disables native
  391.    * browser controls.
  392.    *
  393.    * @param {boolean} enabled
  394.    * @export
  395.    */
  396.   setEnabledShakaControls(enabled) {
  397.     this.enabled_ = enabled;
  398.     if (enabled) {
  399.       this.videoContainer_.setAttribute('shaka-controls', 'true');
  401.       // If we're hiding native controls, make sure the video element itself is
  402.       // not tab-navigable.  Our custom controls will still be tab-navigable.
  403.       this.localVideo_.tabIndex = -1;
  404.       this.localVideo_.controls = false;
  405.     } else {
  406.       this.videoContainer_.removeAttribute('shaka-controls');
  407.     }
  409.     // The effects of play state changes are inhibited while showing native
  410.     // browser controls.  Recalculate that state now.
  411.     this.onPlayStateChange_();
  412.   }
  414.   /**
  415.    * Enable or disable native browser controls. Enabling disables shaka
  416.    * controls.
  417.    *
  418.    * @param {boolean} enabled
  419.    * @export
  420.    */
  421.   setEnabledNativeControls(enabled) {
  422.     // If we enable the native controls, the element must be tab-navigable.
  423.     // If we disable the native controls, we want to make sure that the video
  424.     // element itself is not tab-navigable, so that the element is skipped over
  425.     // when tabbing through the page.
  426.     this.localVideo_.controls = enabled;
  427.     this.localVideo_.tabIndex = enabled ? 0 : -1;
  429.     if (enabled) {
  430.       this.setEnabledShakaControls(false);
  431.     }
  432.   }
  434.   /**
  435.    * @export
  436.    * @return {?shaka.extern.IAd}
  437.    */
  438.   getAd() {
  439.     return this.ad_;
  440.   }
  442.   /**
  443.    * @export
  444.    * @return {shaka.cast.CastProxy}
  445.    */
  446.   getCastProxy() {
  447.     return this.castProxy_;
  448.   }
  450.   /**
  451.    * @return {shaka.ui.Localization}
  452.    * @export
  453.    */
  454.   getLocalization() {
  455.     return this.localization_;
  456.   }
  458.   /**
  459.    * @return {!HTMLElement}
  460.    * @export
  461.    */
  462.   getVideoContainer() {
  463.     return this.videoContainer_;
  464.   }
  466.   /**
  467.    * @return {HTMLMediaElement}
  468.    * @export
  469.    */
  470.   getVideo() {
  471.     return this.video_;
  472.   }
  474.   /**
  475.    * @return {HTMLMediaElement}
  476.    * @export
  477.    */
  478.   getLocalVideo() {
  479.     return this.localVideo_;
  480.   }
  482.   /**
  483.    * @return {shaka.Player}
  484.    * @export
  485.    */
  486.   getPlayer() {
  487.     return this.player_;
  488.   }
  490.   /**
  491.    * @return {shaka.Player}
  492.    * @export
  493.    */
  494.   getLocalPlayer() {
  495.     return this.localPlayer_;
  496.   }
  498.   /**
  499.    * @return {!HTMLElement}
  500.    * @export
  501.    */
  502.   getControlsContainer() {
  503.     goog.asserts.assert(
  504.         this.controlsContainer_, 'No controls container after destruction!');
  505.     return this.controlsContainer_;
  506.   }
  508.   /**
  509.    * @return {!HTMLElement}
  510.    * @export
  511.    */
  512.   getServerSideAdContainer() {
  513.     return this.daiAdContainer_;
  514.   }
  516.   /**
  517.    * @return {!HTMLElement}
  518.    * @export
  519.    */
  520.   getClientSideAdContainer() {
  521.     return this.clientAdContainer_;
  522.   }
  524.   /**
  525.    * @return {!shaka.extern.UIConfiguration}
  526.    * @export
  527.    */
  528.   getConfig() {
  529.     return this.config_;
  530.   }
  532.   /**
  533.    * @return {boolean}
  534.    * @export
  535.    */
  536.   isSeeking() {
  537.     return this.isSeeking_;
  538.   }
  541.   /**
  542.    * @param {boolean} seeking
  543.    * @export
  544.    */
  545.   setSeeking(seeking) {
  546.     this.isSeeking_ = seeking;
  547.   }
  549.   /**
  550.    * @return {boolean}
  551.    * @export
  552.    */
  553.   isCastAllowed() {
  554.     return this.castAllowed_;
  555.   }
  557.   /**
  558.    * @return {number}
  559.    * @export
  560.    */
  561.   getDisplayTime() {
  562.     return this.seekBar_ ? this.seekBar_.getValue() : this.video_.currentTime;
  563.   }
  565.   /**
  566.    * @param {?number} time
  567.    * @export
  568.    */
  569.   setLastTouchEventTime(time) {
  570.     this.lastTouchEventTime_ = time;
  571.   }
  573.   /**
  574.    * @return {boolean}
  575.    * @export
  576.    */
  577.   anySettingsMenusAreOpen() {
  578.     return this.menus_.some(
  579.         (menu) => !menu.classList.contains('shaka-hidden'));
  580.   }
  582.   /** @export */
  583.   hideSettingsMenus() {
  584.     this.hideSettingsMenusTimer_.tickNow();
  585.   }
  587.   /**
  588.    * @return {boolean}
  589.    * @export
  590.    */
  591.   isFullScreenSupported() {
  592.     if (document.fullscreenEnabled) {
  593.       return true;
  594.     }
  595.     const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  596.     if (video.webkitSupportsFullscreen) {
  597.       return true;
  598.     }
  599.     return false;
  600.   }
  602.   /**
  603.    * @return {boolean}
  604.    * @export
  605.    */
  606.   isFullScreenEnabled() {
  607.     if (document.fullscreenEnabled) {
  608.       return !!document.fullscreenElement;
  609.     }
  610.     const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  611.     if (video.webkitSupportsFullscreen) {
  612.       return video.webkitDisplayingFullscreen;
  613.     }
  614.     return false;
  615.   }
  617.   /** @private */
  618.   async enterFullScreen_() {
  619.     try {
  620.       if (document.fullscreenEnabled) {
  621.         if (document.pictureInPictureElement) {
  622.           await document.exitPictureInPicture();
  623.         }
  624.         const fullScreenElement = this.config_.fullScreenElement;
  625.         await fullScreenElement.requestFullscreen({navigationUI: 'hide'});
  627.         if (this.config_.forceLandscapeOnFullscreen && screen.orientation) {
  628.           // Locking to 'landscape' should let it be either
  629.           // 'landscape-primary' or 'landscape-secondary' as appropriate.
  630.           // We ignore errors from this specific call, since it creates noise
  631.           // on desktop otherwise.
  632.           try {
  633.             await screen.orientation.lock('landscape');
  634.           } catch (error) {}
  635.         }
  636.       } else {
  637.         const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  638.         if (video.webkitSupportsFullscreen) {
  639.           video.webkitEnterFullscreen();
  640.         }
  641.       }
  642.     } catch (error) {
  643.       // Entering fullscreen can fail without user interaction.
  644.       this.dispatchEvent(new shaka.util.FakeEvent(
  645.           'error', (new Map()).set('detail', error)));
  646.     }
  647.   }
  649.   /** @private */
  650.   async exitFullScreen_() {
  651.     if (document.fullscreenEnabled) {
  652.       if (screen.orientation) {
  653.         screen.orientation.unlock();
  654.       }
  655.       await document.exitFullscreen();
  656.     } else {
  657.       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  658.       if (video.webkitSupportsFullscreen) {
  659.         video.webkitExitFullscreen();
  660.       }
  661.     }
  662.   }
  664.   /** @export */
  665.   async toggleFullScreen() {
  666.     if (this.isFullScreenEnabled()) {
  667.       await this.exitFullScreen_();
  668.     } else {
  669.       await this.enterFullScreen_();
  670.     }
  671.   }
  673.   /**
  674.    * @return {boolean}
  675.    * @export
  676.    */
  677.   isPiPAllowed() {
  678.     if (this.castProxy_.isCasting()) {
  679.       return false;
  680.     }
  681.     if ('documentPictureInPicture' in window &&
  682.         this.config_.preferDocumentPictureInPicture) {
  683.       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  684.       return !video.disablePictureInPicture;
  685.     }
  686.     if (document.pictureInPictureEnabled) {
  687.       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  688.       return !video.disablePictureInPicture;
  689.     }
  690.     return false;
  691.   }
  693.   /**
  694.    * @return {boolean}
  695.    * @export
  696.    */
  697.   isPiPEnabled() {
  698.     if ('documentPictureInPicture' in window &&
  699.         this.config_.preferDocumentPictureInPicture) {
  700.       return !!window.documentPictureInPicture.window;
  701.     } else {
  702.       return !!document.pictureInPictureElement;
  703.     }
  704.   }
  706.   /** @export */
  707.   async togglePiP() {
  708.     try {
  709.       if ('documentPictureInPicture' in window &&
  710.         this.config_.preferDocumentPictureInPicture) {
  711.         await this.toggleDocumentPictureInPicture_();
  712.       } else if (!document.pictureInPictureElement) {
  713.         // If you were fullscreen, leave fullscreen first.
  714.         if (document.fullscreenElement) {
  715.           document.exitFullscreen();
  716.         }
  717.         const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  718.         await video.requestPictureInPicture();
  719.       } else {
  720.         await document.exitPictureInPicture();
  721.       }
  722.     } catch (error) {
  723.       this.dispatchEvent(new shaka.util.FakeEvent(
  724.           'error', (new Map()).set('detail', error)));
  725.     }
  726.   }
  728.   /**
  729.    * The Document Picture-in-Picture API makes it possible to open an
  730.    * always-on-top window that can be populated with arbitrary HTML content.
  731.    * https://developer.chrome.com/docs/web-platform/document-picture-in-picture
  732.    * @private
  733.    */
  734.   async toggleDocumentPictureInPicture_() {
  735.     // Close Picture-in-Picture window if any.
  736.     if (window.documentPictureInPicture.window) {
  737.       window.documentPictureInPicture.window.close();
  738.       return;
  739.     }
  741.     // Open a Picture-in-Picture window.
  742.     const pipPlayer = this.videoContainer_;
  743.     const rectPipPlayer = pipPlayer.getBoundingClientRect();
  744.     const pipWindow = await window.documentPictureInPicture.requestWindow({
  745.       width: rectPipPlayer.width,
  746.       height: rectPipPlayer.height,
  747.     });
  749.     // Copy style sheets to the Picture-in-Picture window.
  750.     this.copyStyleSheetsToWindow_(pipWindow);
  752.     // Add placeholder for the player.
  753.     const parentPlayer = pipPlayer.parentNode || document.body;
  754.     const placeholder = this.videoContainer_.cloneNode(true);
  755.     placeholder.style.visibility = 'hidden';
  756.     placeholder.style.height = getComputedStyle(pipPlayer).height;
  757.     parentPlayer.appendChild(placeholder);
  759.     // Make sure player fits in the Picture-in-Picture window.
  760.     const styles = document.createElement('style');
  761.     styles.append(`[data-shaka-player-container] {
  762.       width: 100% !important; max-height: 100%}`);
  763.     pipWindow.document.head.append(styles);
  765.     // Move player to the Picture-in-Picture window.
  766.     pipWindow.document.body.append(pipPlayer);
  768.     // Listen for the PiP closing event to move the player back.
  769.     this.eventManager_.listenOnce(pipWindow, 'pagehide', () => {
  770.       placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
  771.     });
  772.   }
  774.   /** @private */
  775.   copyStyleSheetsToWindow_(win) {
  776.     const styleSheets = /** @type {!Iterable<*>} */(document.styleSheets);
  777.     const allCSS = [...styleSheets]
  778.         .map((sheet) => {
  779.           try {
  780.             return [...sheet.cssRules].map((rule) => rule.cssText).join('');
  781.           } catch (e) {
  782.             const link = /** @type {!HTMLLinkElement} */(
  783.               document.createElement('link'));
  785.             link.rel = 'stylesheet';
  786.             link.type = sheet.type;
  787.             link.media = sheet.media;
  788.             link.href = sheet.href;
  789.             win.document.head.appendChild(link);
  790.           }
  791.           return '';
  792.         })
  793.         .filter(Boolean)
  794.         .join('\n');
  795.     const style = document.createElement('style');
  797.     style.textContent = allCSS;
  798.     win.document.head.appendChild(style);
  799.   }
  802.   /** @export */
  803.   showAdUI() {
  804.     shaka.ui.Utils.setDisplay(this.adPanel_, true);
  805.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, true);
  806.     this.controlsContainer_.setAttribute('ad-active', 'true');
  807.   }
  809.   /** @export */
  810.   hideAdUI() {
  811.     shaka.ui.Utils.setDisplay(this.adPanel_, false);
  812.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
  813.     this.controlsContainer_.removeAttribute('ad-active');
  814.   }
  816.   /**
  817.    * Play or pause the current presentation.
  818.    */
  819.   playPausePresentation() {
  820.     if (!this.enabled_) {
  821.       return;
  822.     }
  824.     if (!this.video_.duration) {
  825.       // Can't play yet.  Ignore.
  826.       return;
  827.     }
  829.     this.player_.cancelTrickPlay();
  831.     if (this.presentationIsPaused()) {
  832.       this.video_.play();
  833.     } else {
  834.       this.video_.pause();
  835.     }
  836.   }
  838.   /**
  839.    * Play or pause the current ad.
  840.    */
  841.   playPauseAd() {
  842.     if (this.ad_ && this.ad_.isPaused()) {
  843.       this.ad_.play();
  844.     } else if (this.ad_) {
  845.       this.ad_.pause();
  846.     }
  847.   }
  850.   /**
  851.    * Return true if the presentation is paused.
  852.    *
  853.    * @return {boolean}
  854.    */
  855.   presentationIsPaused() {
  856.     // The video element is in a paused state while seeking, but we don't count
  857.     // that.
  858.     return this.video_.paused && !this.isSeeking();
  859.   }
  862.   /** @private */
  863.   createDOM_() {
  864.     this.videoContainer_.classList.add('shaka-video-container');
  865.     this.localVideo_.classList.add('shaka-video');
  867.     this.addScrimContainer_();
  869.     if (this.config_.addBigPlayButton) {
  870.       this.addPlayButton_();
  871.     }
  873.     if (this.config_.customContextMenu) {
  874.       this.addContextMenu_();
  875.     }
  877.     if (!this.spinnerContainer_) {
  878.       this.addBufferingSpinner_();
  879.     }
  881.     if (this.config_.seekOnTaps) {
  882.       this.addFastForwardButtonOnControlsContainer_();
  883.       this.addRewindButtonOnControlsContainer_();
  884.     }
  886.     this.addDaiAdContainer_();
  888.     this.addControlsButtonPanel_();
  890.     this.menus_ = Array.from(
  891.         this.videoContainer_.getElementsByClassName('shaka-settings-menu'));
  892.     this.menus_.push(...Array.from(
  893.         this.videoContainer_.getElementsByClassName('shaka-overflow-menu')));
  895.     this.addSeekBar_();
  897.     this.showOnHoverControls_ = Array.from(
  898.         this.videoContainer_.getElementsByClassName(
  899.             'shaka-show-controls-on-mouse-over'));
  900.   }
  902.   /** @private */
  903.   addControlsContainer_() {
  904.     /** @private {HTMLElement} */
  905.     this.controlsContainer_ = shaka.util.Dom.createHTMLElement('div');
  906.     this.controlsContainer_.classList.add('shaka-controls-container');
  907.     this.videoContainer_.appendChild(this.controlsContainer_);
  909.     // Use our controls by default, without anyone calling
  910.     // setEnabledShakaControls:
  911.     this.videoContainer_.setAttribute('shaka-controls', 'true');
  913.     this.eventManager_.listen(this.controlsContainer_, 'touchstart', (e) => {
  914.       this.onContainerTouch_(e);
  915.     }, {passive: false});
  917.     this.eventManager_.listen(this.controlsContainer_, 'click', () => {
  918.       this.onContainerClick_();
  919.     });
  921.     this.eventManager_.listen(this.controlsContainer_, 'dblclick', () => {
  922.       if (this.config_.doubleClickForFullscreen &&
  923.           this.isFullScreenSupported()) {
  924.         this.toggleFullScreen();
  925.       }
  926.     });
  927.   }
  929.   /** @private */
  930.   addPlayButton_() {
  931.     const playButtonContainer = shaka.util.Dom.createHTMLElement('div');
  932.     playButtonContainer.classList.add('shaka-play-button-container');
  933.     this.controlsContainer_.appendChild(playButtonContainer);
  935.     /** @private {shaka.ui.BigPlayButton} */
  936.     this.playButton_ =
  937.         new shaka.ui.BigPlayButton(playButtonContainer, this);
  938.     this.elements_.push(this.playButton_);
  939.   }
  941.   /** @private */
  942.   addContextMenu_() {
  943.     /** @private {shaka.ui.ContextMenu} */
  944.     this.contextMenu_ =
  945.         new shaka.ui.ContextMenu(this.controlsButtonPanel_, this);
  946.     this.elements_.push(this.contextMenu_);
  947.   }
  949.   /** @private */
  950.   addScrimContainer_() {
  951.     // This is the container that gets styled by CSS to have the
  952.     // black gradient scrim at the end of the controls.
  953.     const scrimContainer = shaka.util.Dom.createHTMLElement('div');
  954.     scrimContainer.classList.add('shaka-scrim-container');
  955.     this.controlsContainer_.appendChild(scrimContainer);
  956.   }
  958.   /** @private */
  959.   addAdControls_() {
  960.     /** @private {!HTMLElement} */
  961.     this.adPanel_ = shaka.util.Dom.createHTMLElement('div');
  962.     this.adPanel_.classList.add('shaka-ad-controls');
  963.     const showAdPanel = this.ad_ != null && this.ad_.isLinear();
  964.     shaka.ui.Utils.setDisplay(this.adPanel_, showAdPanel);
  965.     this.bottomControls_.appendChild(this.adPanel_);
  967.     const adPosition = new shaka.ui.AdPosition(this.adPanel_, this);
  968.     this.elements_.push(adPosition);
  970.     const adCounter = new shaka.ui.AdCounter(this.adPanel_, this);
  971.     this.elements_.push(adCounter);
  973.     const skipButton = new shaka.ui.SkipAdButton(this.adPanel_, this);
  974.     this.elements_.push(skipButton);
  975.   }
  977.   /** @private */
  978.   addBufferingSpinner_() {
  979.     /** @private {!HTMLElement} */
  980.     this.spinnerContainer_ = shaka.util.Dom.createHTMLElement('div');
  981.     this.spinnerContainer_.classList.add('shaka-spinner-container');
  982.     this.videoContainer_.appendChild(this.spinnerContainer_);
  984.     const spinner = shaka.util.Dom.createHTMLElement('div');
  985.     spinner.classList.add('shaka-spinner');
  986.     this.spinnerContainer_.appendChild(spinner);
  988.     // Svg elements have to be created with the svg xml namespace.
  989.     const xmlns = 'http://www.w3.org/2000/svg';
  991.     const svg =
  992.       /** @type {!HTMLElement} */(document.createElementNS(xmlns, 'svg'));
  993.     svg.classList.add('shaka-spinner-svg');
  994.     svg.setAttribute('viewBox', '0 0 30 30');
  995.     spinner.appendChild(svg);
  997.     // These coordinates are relative to the SVG viewBox above.  This is
  998.     // distinct from the actual display size in the page, since the "S" is for
  999.     // "Scalable." The radius of 14.5 is so that the edges of the 1-px-wide
  1000.     // stroke will touch the edges of the viewBox.
  1001.     const spinnerCircle = document.createElementNS(xmlns, 'circle');
  1002.     spinnerCircle.classList.add('shaka-spinner-path');
  1003.     spinnerCircle.setAttribute('cx', '15');
  1004.     spinnerCircle.setAttribute('cy', '15');
  1005.     spinnerCircle.setAttribute('r', '14.5');
  1006.     spinnerCircle.setAttribute('fill', 'none');
  1007.     spinnerCircle.setAttribute('stroke-width', '1');
  1008.     spinnerCircle.setAttribute('stroke-miterlimit', '10');
  1009.     svg.appendChild(spinnerCircle);
  1010.   }
  1012.   /**
  1013.    * Add fast-forward button on Controls container for moving video some
  1014.    * seconds ahead when the video is tapped more than once, video seeks ahead
  1015.    * some seconds for every extra tap.
  1016.    * @private
  1017.    */
  1018.   addFastForwardButtonOnControlsContainer_() {
  1019.     const hiddenFastForwardContainer = shaka.util.Dom.createHTMLElement('div');
  1020.     hiddenFastForwardContainer.classList.add(
  1021.         'shaka-hidden-fast-forward-container');
  1022.     this.controlsContainer_.appendChild(hiddenFastForwardContainer);
  1024.     /** @private {shaka.ui.HiddenFastForwardButton} */
  1025.     this.hiddenFastForwardButton_ =
  1026.         new shaka.ui.HiddenFastForwardButton(hiddenFastForwardContainer, this);
  1027.     this.elements_.push(this.hiddenFastForwardButton_);
  1028.   }
  1030.   /**
  1031.    * Add Rewind button on Controls container for moving video some seconds
  1032.    * behind when the video is tapped more than once, video seeks behind some
  1033.    * seconds for every extra tap.
  1034.    * @private
  1035.    */
  1036.   addRewindButtonOnControlsContainer_() {
  1037.     const hiddenRewindContainer = shaka.util.Dom.createHTMLElement('div');
  1038.     hiddenRewindContainer.classList.add(
  1039.         'shaka-hidden-rewind-container');
  1040.     this.controlsContainer_.appendChild(hiddenRewindContainer);
  1042.     /** @private {shaka.ui.HiddenRewindButton} */
  1043.     this.hiddenRewindButton_ =
  1044.         new shaka.ui.HiddenRewindButton(hiddenRewindContainer, this);
  1045.     this.elements_.push(this.hiddenRewindButton_);
  1046.   }
  1048.   /** @private */
  1049.   addControlsButtonPanel_() {
  1050.     /** @private {!HTMLElement} */
  1051.     this.bottomControls_ = shaka.util.Dom.createHTMLElement('div');
  1052.     this.bottomControls_.classList.add('shaka-bottom-controls');
  1053.     this.bottomControls_.classList.add('shaka-no-propagation');
  1054.     this.controlsContainer_.appendChild(this.bottomControls_);
  1056.     // Overflow menus are supposed to hide once you click elsewhere
  1057.     // on the page. The click event listener on window ensures that.
  1058.     // However, clicks on the bottom controls don't propagate to the container,
  1059.     // so we have to explicitly hide the menus onclick here.
  1060.     this.eventManager_.listen(this.bottomControls_, 'click', (e) => {
  1061.       // We explicitly deny this measure when clicking on buttons that
  1062.       // open submenus in the control panel.
  1063.       if (!e.target['closest']('.shaka-overflow-button')) {
  1064.         this.hideSettingsMenus();
  1065.       }
  1066.     });
  1068.     this.addAdControls_();
  1070.     /** @private {!HTMLElement} */
  1071.     this.controlsButtonPanel_ = shaka.util.Dom.createHTMLElement('div');
  1072.     this.controlsButtonPanel_.classList.add('shaka-controls-button-panel');
  1073.     this.controlsButtonPanel_.classList.add(
  1074.         'shaka-show-controls-on-mouse-over');
  1075.     if (this.config_.enableTooltips) {
  1076.       this.controlsButtonPanel_.classList.add('shaka-tooltips-on');
  1077.     }
  1078.     this.bottomControls_.appendChild(this.controlsButtonPanel_);
  1080.     // Create the elements specified by controlPanelElements
  1081.     for (const name of this.config_.controlPanelElements) {
  1082.       if (shaka.ui.ControlsPanel.elementNamesToFactories_.get(name)) {
  1083.         const factory =
  1084.             shaka.ui.ControlsPanel.elementNamesToFactories_.get(name);
  1085.         const element = factory.create(this.controlsButtonPanel_, this);
  1086.         this.elements_.push(element);
  1087.       } else {
  1088.         shaka.log.alwaysWarn('Unrecognized control panel element requested:',
  1089.             name);
  1090.       }
  1091.     }
  1092.   }
  1095.   /**
  1096.    * Adds a container for server side ad UI with IMA SDK.
  1097.    *
  1098.    * @private
  1099.    */
  1100.   addDaiAdContainer_() {
  1101.     /** @private {!HTMLElement} */
  1102.     this.daiAdContainer_ = shaka.util.Dom.createHTMLElement('div');
  1103.     this.daiAdContainer_.classList.add('shaka-server-side-ad-container');
  1104.     this.controlsContainer_.appendChild(this.daiAdContainer_);
  1105.   }
  1108.   /**
  1109.    * Adds a seekbar depending on the configuration.
  1110.    * By default an instance of shaka.ui.SeekBar is created
  1111.    * This behaviour can be overriden by providing a SeekBar factory using the
  1112.    * registerSeekBarFactory function.
  1113.    *
  1114.    * @private
  1115.    */
  1116.   addSeekBar_() {
  1117.     if (this.config_.addSeekBar) {
  1118.       this.seekBar_ = shaka.ui.ControlsPanel.seekBarFactory_.create(
  1119.           this.bottomControls_, this);
  1120.       this.elements_.push(this.seekBar_);
  1121.     } else {
  1122.       // Settings menus need to be positioned lower if the seekbar is absent.
  1123.       for (const menu of this.menus_) {
  1124.         menu.classList.add('shaka-low-position');
  1125.       }
  1126.     }
  1127.   }
  1130.   /**
  1131.    * Adds a container for client side ad UI with IMA SDK.
  1132.    *
  1133.    * @private
  1134.    */
  1135.   addClientAdContainer_() {
  1136.     /** @private {!HTMLElement} */
  1137.     this.clientAdContainer_ = shaka.util.Dom.createHTMLElement('div');
  1138.     this.clientAdContainer_.classList.add('shaka-client-side-ad-container');
  1139.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
  1140.     this.eventManager_.listen(this.clientAdContainer_, 'click', () => {
  1141.       this.onContainerClick_();
  1142.     });
  1143.     this.videoContainer_.appendChild(this.clientAdContainer_);
  1144.   }
  1146.   /**
  1147.    * Adds static event listeners.  This should only add event listeners to
  1148.    * things that don't change (e.g. Player).  Dynamic elements (e.g. controls)
  1149.    * should have their event listeners added when they are created.
  1150.    *
  1151.    * @private
  1152.    */
  1153.   addEventListeners_() {
  1154.     this.eventManager_.listen(this.player_, 'buffering', () => {
  1155.       this.onBufferingStateChange_();
  1156.     });
  1157.     // Set the initial state, as well.
  1158.     this.onBufferingStateChange_();
  1160.     // Listen for key down events to detect tab and enable outline
  1161.     // for focused elements.
  1162.     this.eventManager_.listen(window, 'keydown', (e) => {
  1163.       this.onWindowKeyDown_(/** @type {!KeyboardEvent} */(e));
  1164.     });
  1166.     // Listen for click events to dismiss the settings menus.
  1167.     this.eventManager_.listen(window, 'click', () => this.hideSettingsMenus());
  1169.     // Avoid having multiple submenus open at the same time.
  1170.     this.eventManager_.listen(
  1171.         this, 'submenuopen', () => {
  1172.           this.hideSettingsMenus();
  1173.         });
  1175.     this.eventManager_.listen(this.video_, 'play', () => {
  1176.       this.onPlayStateChange_();
  1177.     });
  1179.     this.eventManager_.listen(this.video_, 'pause', () => {
  1180.       this.onPlayStateChange_();
  1181.     });
  1183.     this.eventManager_.listen(this.videoContainer_, 'mousemove', (e) => {
  1184.       this.onMouseMove_(e);
  1185.     });
  1187.     this.eventManager_.listen(this.videoContainer_, 'touchmove', (e) => {
  1188.       this.onMouseMove_(e);
  1189.     }, {passive: true});
  1191.     this.eventManager_.listen(this.videoContainer_, 'touchend', (e) => {
  1192.       this.onMouseMove_(e);
  1193.     }, {passive: true});
  1195.     this.eventManager_.listen(this.videoContainer_, 'mouseleave', () => {
  1196.       this.onMouseLeave_();
  1197.     });
  1199.     this.eventManager_.listen(this.castProxy_, 'caststatuschanged', () => {
  1200.       this.onCastStatusChange_();
  1201.     });
  1203.     this.eventManager_.listen(this.vr_, 'vrstatuschanged', () => {
  1204.       this.dispatchEvent(new shaka.util.FakeEvent('vrstatuschanged'));
  1205.     });
  1207.     this.eventManager_.listen(this.videoContainer_, 'keydown', (e) => {
  1208.       this.onControlsKeyDown_(/** @type {!KeyboardEvent} */(e));
  1209.     });
  1211.     this.eventManager_.listen(this.videoContainer_, 'keyup', (e) => {
  1212.       this.onControlsKeyUp_(/** @type {!KeyboardEvent} */(e));
  1213.     });
  1215.     this.eventManager_.listen(
  1216.         this.adManager_, shaka.ads.AdManager.AD_STARTED, (e) => {
  1217.           this.ad_ = (/** @type {!Object} */ (e))['ad'];
  1218.           this.showAdUI();
  1219.         });
  1221.     this.eventManager_.listen(
  1222.         this.adManager_, shaka.ads.AdManager.AD_STOPPED, () => {
  1223.           this.ad_ = null;
  1224.           this.hideAdUI();
  1225.         });
  1227.     if (screen.orientation) {
  1228.       this.eventManager_.listen(screen.orientation, 'change', async () => {
  1229.         await this.onScreenRotation_();
  1230.       });
  1231.     }
  1232.   }
  1235.   /**
  1236.    * When a mobile device is rotated to landscape layout, and the video is
  1237.    * loaded, make the demo app go into fullscreen.
  1238.    * Similarly, exit fullscreen when the device is rotated to portrait layout.
  1239.    * @private
  1240.    */
  1241.   async onScreenRotation_() {
  1242.     if (!this.video_ ||
  1243.         this.video_.readyState == 0 ||
  1244.         this.castProxy_.isCasting() ||
  1245.         !this.config_.enableFullscreenOnRotation ||
  1246.         !this.isFullScreenSupported()) {
  1247.       return;
  1248.     }
  1250.     if (screen.orientation.type.includes('landscape') &&
  1251.         !this.isFullScreenEnabled()) {
  1252.       await this.enterFullScreen_();
  1253.     } else if (screen.orientation.type.includes('portrait') &&
  1254.       this.isFullScreenEnabled()) {
  1255.       await this.exitFullScreen_();
  1256.     }
  1257.   }
  1260.   /**
  1261.    * Hiding the cursor when the mouse stops moving seems to be the only
  1262.    * decent UX in fullscreen mode.  Since we can't use pure CSS for that,
  1263.    * we use events both in and out of fullscreen mode.
  1264.    * Showing the control bar when a key is pressed, and hiding it after some
  1265.    * time.
  1266.    * @param {!Event} event
  1267.    * @private
  1268.    */
  1269.   onMouseMove_(event) {
  1270.     // Disable blue outline for focused elements for mouse navigation.
  1271.     if (event.type == 'mousemove') {
  1272.       this.controlsContainer_.classList.remove('shaka-keyboard-navigation');
  1273.       this.computeOpacity();
  1274.     }
  1275.     if (event.type == 'touchstart' || event.type == 'touchmove' ||
  1276.         event.type == 'touchend' || event.type == 'keyup') {
  1277.       this.lastTouchEventTime_ = Date.now();
  1278.     } else if (this.lastTouchEventTime_ + 1000 < Date.now()) {
  1279.       // It has been a while since the last touch event, this is probably a real
  1280.       // mouse moving, so treat it like a mouse.
  1281.       this.lastTouchEventTime_ = null;
  1282.     }
  1284.     // When there is a touch, we can get a 'mousemove' event after touch events.
  1285.     // This should be treated as part of the touch, which has already been
  1286.     // handled.
  1287.     if (this.lastTouchEventTime_ && event.type == 'mousemove') {
  1288.       return;
  1289.     }
  1291.     // Use the cursor specified in the CSS file.
  1292.     this.videoContainer_.style.cursor = '';
  1294.     this.recentMouseMovement_ = true;
  1296.     // Make sure we are not about to hide the settings menus and then force them
  1297.     // open.
  1298.     this.hideSettingsMenusTimer_.stop();
  1300.     if (!this.isOpaque()) {
  1301.       // Only update the time and seek range on mouse movement if it's the very
  1302.       // first movement and we're about to show the controls.  Otherwise, the
  1303.       // seek bar will be updated much more rapidly during mouse movement.  Do
  1304.       // this right before making it visible.
  1305.       this.updateTimeAndSeekRange_();
  1306.       this.computeOpacity();
  1307.     }
  1309.     // Hide the cursor when the mouse stops moving.
  1310.     // Only applies while the cursor is over the video container.
  1311.     this.mouseStillTimer_.stop();
  1313.     // Only start a timeout on 'touchend' or for 'mousemove' with no touch
  1314.     // events.
  1315.     if (event.type == 'touchend' ||
  1316.         event.type == 'keyup'|| !this.lastTouchEventTime_) {
  1317.       this.mouseStillTimer_.tickAfter(/* seconds= */ 3);
  1318.     }
  1319.   }
  1321.   /** @private */
  1322.   onMouseLeave_() {
  1323.     // We sometimes get 'mouseout' events with touches.  Since we can never
  1324.     // leave the video element when touching, ignore.
  1325.     if (this.lastTouchEventTime_) {
  1326.       return;
  1327.     }
  1329.     // Stop the timer and invoke the callback now to hide the controls.  If we
  1330.     // don't, the opacity style we set in onMouseMove_ will continue to override
  1331.     // the opacity in CSS and force the controls to stay visible.
  1332.     this.mouseStillTimer_.tickNow();
  1333.   }
  1335.   /**
  1336.    * This callback is for when we are pretty sure that the mouse has stopped
  1337.    * moving (aka the mouse is still). This method should only be called via
  1338.    * |mouseStillTimer_|. If this behaviour needs to be invoked directly, use
  1339.    * |mouseStillTimer_.tickNow()|.
  1340.    *
  1341.    * @private
  1342.    */
  1343.   onMouseStill_() {
  1344.     // Hide the cursor.
  1345.     this.videoContainer_.style.cursor = 'none';
  1346.     this.recentMouseMovement_ = false;
  1347.     this.computeOpacity();
  1348.   }
  1350.   /**
  1351.    * @return {boolean} true if any relevant elements are hovered.
  1352.    * @private
  1353.    */
  1354.   isHovered_() {
  1355.     if (!window.matchMedia('hover: hover').matches) {
  1356.       // This is primarily a touch-screen device, so the :hover query below
  1357.       // doesn't make sense.  In spite of this, the :hover query on an element
  1358.       // can still return true on such a device after a touch ends.
  1359.       // See https://bit.ly/34dBORX for details.
  1360.       return false;
  1361.     }
  1363.     return this.showOnHoverControls_.some((element) => {
  1364.       return element.matches(':hover');
  1365.     });
  1366.   }
  1368.   /**
  1369.    * Recompute whether the controls should be shown or hidden.
  1370.    */
  1371.   computeOpacity() {
  1372.     const adIsPaused = this.ad_ ? this.ad_.isPaused() : false;
  1373.     const videoIsPaused = this.video_.paused && !this.isSeeking_;
  1374.     const keyboardNavigationMode = this.controlsContainer_.classList.contains(
  1375.         'shaka-keyboard-navigation');
  1377.     // Keep showing the controls if the ad or video is paused, there has been
  1378.     // recent mouse movement, we're in keyboard navigation, or one of a special
  1379.     // class of elements is hovered.
  1380.     if (adIsPaused ||
  1381.         ((!this.ad_ || !this.ad_.isLinear()) && videoIsPaused) ||
  1382.         this.recentMouseMovement_ ||
  1383.         keyboardNavigationMode ||
  1384.         this.isHovered_()) {
  1385.       // Make sure the state is up-to-date before showing it.
  1386.       this.updateTimeAndSeekRange_();
  1388.       this.controlsContainer_.setAttribute('shown', 'true');
  1389.       this.fadeControlsTimer_.stop();
  1390.     } else {
  1391.       this.fadeControlsTimer_.tickAfter(/* seconds= */ this.config_.fadeDelay);
  1392.     }
  1393.   }
  1395.   /**
  1396.    * @param {!Event} event
  1397.    * @private
  1398.    */
  1399.   onContainerTouch_(event) {
  1400.     if (!this.video_.duration) {
  1401.       // Can't play yet.  Ignore.
  1402.       return;
  1403.     }
  1405.     if (this.isOpaque()) {
  1406.       this.lastTouchEventTime_ = Date.now();
  1407.       // The controls are showing.
  1408.       // Let this event continue and become a click.
  1409.     } else {
  1410.       // The controls are hidden, so show them.
  1411.       this.onMouseMove_(event);
  1412.       // Stop this event from becoming a click event.
  1413.       event.cancelable && event.preventDefault();
  1414.     }
  1415.   }
  1417.   /** @private */
  1418.   onContainerClick_() {
  1419.     if (!this.enabled_ || this.isPlayingVR()) {
  1420.       return;
  1421.     }
  1423.     if (this.anySettingsMenusAreOpen()) {
  1424.       this.hideSettingsMenusTimer_.tickNow();
  1425.     } else if (this.config_.singleClickForPlayAndPause) {
  1426.       this.onPlayPauseClick_();
  1427.     }
  1428.   }
  1430.   /** @private */
  1431.   onPlayPauseClick_() {
  1432.     if (this.ad_ && this.ad_.isLinear()) {
  1433.       this.playPauseAd();
  1434.     } else {
  1435.       this.playPausePresentation();
  1436.     }
  1437.   }
  1439.   /** @private */
  1440.   onCastStatusChange_() {
  1441.     const isCasting = this.castProxy_.isCasting();
  1442.     this.dispatchEvent(new shaka.util.FakeEvent(
  1443.         'caststatuschanged', (new Map()).set('newStatus', isCasting)));
  1445.     if (isCasting) {
  1446.       this.controlsContainer_.setAttribute('casting', 'true');
  1447.     } else {
  1448.       this.controlsContainer_.removeAttribute('casting');
  1449.     }
  1450.   }
  1452.   /** @private */
  1453.   onPlayStateChange_() {
  1454.     this.computeOpacity();
  1455.   }
  1457.   /**
  1458.    * Support controls with keyboard inputs.
  1459.    * @param {!KeyboardEvent} event
  1460.    * @private
  1461.    */
  1462.   onControlsKeyDown_(event) {
  1463.     const activeElement = document.activeElement;
  1464.     const isVolumeBar = activeElement && activeElement.classList ?
  1465.         activeElement.classList.contains('shaka-volume-bar') : false;
  1466.     const isSeekBar = activeElement && activeElement.classList &&
  1467.         activeElement.classList.contains('shaka-seek-bar');
  1468.     // Show the control panel if it is on focus or any button is pressed.
  1469.     if (this.controlsContainer_.contains(activeElement)) {
  1470.       this.onMouseMove_(event);
  1471.     }
  1473.     if (!this.config_.enableKeyboardPlaybackControls) {
  1474.       return;
  1475.     }
  1477.     const keyboardSeekDistance = this.config_.keyboardSeekDistance;
  1478.     const keyboardLargeSeekDistance = this.config_.keyboardLargeSeekDistance;
  1480.     switch (event.key) {
  1481.       case 'ArrowLeft':
  1482.         // If it's not focused on the volume bar, move the seek time backward
  1483.         // for a few sec. Otherwise, the volume will be adjusted automatically.
  1484.         if (this.seekBar_ && isSeekBar && !isVolumeBar &&
  1485.             keyboardSeekDistance > 0) {
  1486.           event.preventDefault();
  1487.           this.seek_(this.seekBar_.getValue() - keyboardSeekDistance);
  1488.         }
  1489.         break;
  1490.       case 'ArrowRight':
  1491.         // If it's not focused on the volume bar, move the seek time forward
  1492.         // for a few sec. Otherwise, the volume will be adjusted automatically.
  1493.         if (this.seekBar_ && isSeekBar && !isVolumeBar &&
  1494.             keyboardSeekDistance > 0) {
  1495.           event.preventDefault();
  1496.           this.seek_(this.seekBar_.getValue() + keyboardSeekDistance);
  1497.         }
  1498.         break;
  1499.       case 'PageDown':
  1500.         // PageDown is like ArrowLeft, but has a larger jump distance, and does
  1501.         // nothing to volume.
  1502.         if (this.seekBar_ && isSeekBar && keyboardSeekDistance > 0) {
  1503.           event.preventDefault();
  1504.           this.seek_(this.seekBar_.getValue() - keyboardLargeSeekDistance);
  1505.         }
  1506.         break;
  1507.       case 'PageUp':
  1508.         // PageDown is like ArrowRight, but has a larger jump distance, and does
  1509.         // nothing to volume.
  1510.         if (this.seekBar_ && isSeekBar && keyboardSeekDistance > 0) {
  1511.           event.preventDefault();
  1512.           this.seek_(this.seekBar_.getValue() + keyboardLargeSeekDistance);
  1513.         }
  1514.         break;
  1515.       // Jump to the beginning of the video's seek range.
  1516.       case 'Home':
  1517.         if (this.seekBar_) {
  1518.           this.seek_(this.player_.seekRange().start);
  1519.         }
  1520.         break;
  1521.       // Jump to the end of the video's seek range.
  1522.       case 'End':
  1523.         if (this.seekBar_) {
  1524.           this.seek_(this.player_.seekRange().end);
  1525.         }
  1526.         break;
  1527.       case 'f':
  1528.         if (this.isFullScreenSupported()) {
  1529.           this.toggleFullScreen();
  1530.         }
  1531.         break;
  1532.       case 'm':
  1533.         if (this.ad_ && this.ad_.isLinear()) {
  1534.           this.ad_.setMuted(!this.ad_.isMuted());
  1535.         } else {
  1536.           this.localVideo_.muted = !this.localVideo_.muted;
  1537.         }
  1538.         break;
  1539.       case 'p':
  1540.         if (this.isPiPAllowed()) {
  1541.           this.togglePiP();
  1542.         }
  1543.         break;
  1544.       // Pause or play by pressing space on the seek bar.
  1545.       case ' ':
  1546.         if (isSeekBar) {
  1547.           this.onPlayPauseClick_();
  1548.         }
  1549.         break;
  1550.     }
  1551.   }
  1553.   /**
  1554.    * Support controls with keyboard inputs.
  1555.    * @param {!KeyboardEvent} event
  1556.    * @private
  1557.    */
  1558.   onControlsKeyUp_(event) {
  1559.     // When the key is released, remove it from the pressed keys set.
  1560.     this.pressedKeys_.delete(event.key);
  1561.   }
  1563.   /**
  1564.    * Called both as an event listener and directly by the controls to initialize
  1565.    * the buffering state.
  1566.    * @private
  1567.    */
  1568.   onBufferingStateChange_() {
  1569.     if (!this.enabled_) {
  1570.       return;
  1571.     }
  1573.     shaka.ui.Utils.setDisplay(
  1574.         this.spinnerContainer_, this.player_.isBuffering());
  1575.   }
  1577.   /**
  1578.    * @return {boolean}
  1579.    * @export
  1580.    */
  1581.   isOpaque() {
  1582.     if (!this.enabled_) {
  1583.       return false;
  1584.     }
  1586.     return this.controlsContainer_.getAttribute('shown') != null ||
  1587.         this.controlsContainer_.getAttribute('casting') != null;
  1588.   }
  1590.   /**
  1591.    * Update the video's current time based on the keyboard operations.
  1592.    *
  1593.    * @param {number} currentTime
  1594.    * @private
  1595.    */
  1596.   seek_(currentTime) {
  1597.     goog.asserts.assert(
  1598.         this.seekBar_, 'Caller of seek_ must check for seekBar_ first!');
  1600.     this.seekBar_.changeTo(currentTime);
  1602.     if (this.isOpaque()) {
  1603.       // Only update the time and seek range if it's visible.
  1604.       this.updateTimeAndSeekRange_();
  1605.     }
  1606.   }
  1608.   /**
  1609.    * Called when the seek range or current time need to be updated.
  1610.    * @private
  1611.    */
  1612.   updateTimeAndSeekRange_() {
  1613.     if (this.seekBar_) {
  1614.       this.seekBar_.setValue(this.video_.currentTime);
  1615.       this.seekBar_.update();
  1617.       if (this.seekBar_.isShowing()) {
  1618.         for (const menu of this.menus_) {
  1619.           menu.classList.remove('shaka-low-position');
  1620.         }
  1621.       } else {
  1622.         for (const menu of this.menus_) {
  1623.           menu.classList.add('shaka-low-position');
  1624.         }
  1625.       }
  1626.     }
  1628.     this.dispatchEvent(new shaka.util.FakeEvent('timeandseekrangeupdated'));
  1629.   }
  1631.   /**
  1632.    * Add behaviors for keyboard navigation.
  1633.    * 1. Add blue outline for focused elements.
  1634.    * 2. Allow exiting overflow settings menus by pressing Esc key.
  1635.    * 3. When navigating on overflow settings menu by pressing Tab
  1636.    *    key or Shift+Tab keys keep the focus inside overflow menu.
  1637.    *
  1638.    * @param {!KeyboardEvent} event
  1639.    * @private
  1640.    */
  1641.   onWindowKeyDown_(event) {
  1642.     // Add the key to the pressed keys set when it's pressed.
  1643.     this.pressedKeys_.add(event.key);
  1645.     const anySettingsMenusAreOpen = this.anySettingsMenusAreOpen();
  1647.     if (event.key == 'Tab') {
  1648.       // Enable blue outline for focused elements for keyboard
  1649.       // navigation.
  1650.       this.controlsContainer_.classList.add('shaka-keyboard-navigation');
  1651.       this.computeOpacity();
  1652.       this.eventManager_.listen(window, 'mousedown', () => this.onMouseDown_());
  1653.     }
  1655.     // If escape key was pressed, close any open settings menus.
  1656.     if (event.key == 'Escape') {
  1657.       this.hideSettingsMenusTimer_.tickNow();
  1658.     }
  1660.     if (anySettingsMenusAreOpen && this.pressedKeys_.has('Tab')) {
  1661.       // If Tab key or Shift+Tab keys are pressed when navigating through
  1662.       // an overflow settings menu, keep the focus to loop inside the
  1663.       // overflow menu.
  1664.       this.keepFocusInMenu_(event);
  1665.     }
  1666.   }
  1668.   /**
  1669.    * When the user is using keyboard to navigate inside the overflow settings
  1670.    * menu (pressing Tab key to go forward, or pressing Shift + Tab keys to go
  1671.    * backward), make sure it's focused only on the elements of the overflow
  1672.    * panel.
  1673.    *
  1674.    * This is called by onWindowKeyDown_() function, when there's a settings
  1675.    * overflow menu open, and the Tab key / Shift+Tab keys are pressed.
  1676.    *
  1677.    * @param {!Event} event
  1678.    * @private
  1679.    */
  1680.   keepFocusInMenu_(event) {
  1681.     const openSettingsMenus = this.menus_.filter(
  1682.         (menu) => !menu.classList.contains('shaka-hidden'));
  1683.     if (!openSettingsMenus.length) {
  1684.       // For example, this occurs when you hit escape to close the menu.
  1685.       return;
  1686.     }
  1688.     const settingsMenu = openSettingsMenus[0];
  1689.     if (settingsMenu.childNodes.length) {
  1690.       // Get the first and the last displaying child element from the overflow
  1691.       // menu.
  1692.       let firstShownChild = settingsMenu.firstElementChild;
  1693.       while (firstShownChild &&
  1694.              firstShownChild.classList.contains('shaka-hidden')) {
  1695.         firstShownChild = firstShownChild.nextElementSibling;
  1696.       }
  1698.       let lastShownChild = settingsMenu.lastElementChild;
  1699.       while (lastShownChild &&
  1700.              lastShownChild.classList.contains('shaka-hidden')) {
  1701.         lastShownChild = lastShownChild.previousElementSibling;
  1702.       }
  1704.       const activeElement = document.activeElement;
  1705.       // When only Tab key is pressed, navigate to the next elememnt.
  1706.       // If it's currently focused on the last shown child element of the
  1707.       // overflow menu, let the focus move to the first child element of the
  1708.       // menu.
  1709.       // When Tab + Shift keys are pressed at the same time, navigate to the
  1710.       // previous element. If it's currently focused on the first shown child
  1711.       // element of the overflow menu, let the focus move to the last child
  1712.       // element of the menu.
  1713.       if (this.pressedKeys_.has('Shift')) {
  1714.         if (activeElement == firstShownChild) {
  1715.           event.preventDefault();
  1716.           lastShownChild.focus();
  1717.         }
  1718.       } else {
  1719.         if (activeElement == lastShownChild) {
  1720.           event.preventDefault();
  1721.           firstShownChild.focus();
  1722.         }
  1723.       }
  1724.     }
  1725.   }
  1727.   /**
  1728.    * For keyboard navigation, we use blue borders to highlight the active
  1729.    * element. If we detect that a mouse is being used, remove the blue border
  1730.    * from the active element.
  1731.    * @private
  1732.    */
  1733.   onMouseDown_() {
  1734.     this.eventManager_.unlisten(window, 'mousedown');
  1735.   }
  1737.   /**
  1738.    * @export
  1739.    */
  1740.   showUI() {
  1741.     const event = new Event('mousemove', {bubbles: false, cancelable: false});
  1742.     this.onMouseMove_(event);
  1743.   }
  1745.   /**
  1746.    * @export
  1747.    */
  1748.   hideUI() {
  1749.     this.onMouseLeave_();
  1750.   }
  1752.   /**
  1753.    * @return {shaka.ui.VRManager}
  1754.    */
  1755.   getVR() {
  1756.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1757.     return this.vr_;
  1758.   }
  1760.   /**
  1761.    * Returns if a VR is capable.
  1762.    *
  1763.    * @return {boolean}
  1764.    * @export
  1765.    */
  1766.   canPlayVR() {
  1767.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1768.     return this.vr_.canPlayVR();
  1769.   }
  1771.   /**
  1772.    * Returns if a VR is supported.
  1773.    *
  1774.    * @return {boolean}
  1775.    * @export
  1776.    */
  1777.   isPlayingVR() {
  1778.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1779.     return this.vr_.isPlayingVR();
  1780.   }
  1782.   /**
  1783.    * Reset VR view.
  1784.    */
  1785.   resetVR() {
  1786.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1787.     this.vr_.reset();
  1788.   }
  1790.   /**
  1791.    * Get the angle of the north.
  1792.    *
  1793.    * @return {?number}
  1794.    * @export
  1795.    */
  1796.   getVRNorth() {
  1797.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1798.     return this.vr_.getNorth();
  1799.   }
  1801.   /**
  1802.    * Returns the angle of the current field of view displayed in degrees.
  1803.    *
  1804.    * @return {?number}
  1805.    * @export
  1806.    */
  1807.   getVRFieldOfView() {
  1808.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1809.     return this.vr_.getFieldOfView();
  1810.   }
  1812.   /**
  1813.    * Changing the field of view increases or decreases the portion of the video
  1814.    * that is viewed at one time. If the field of view is decreased, a small
  1815.    * part of the video will be seen, but with more detail. If the field of view
  1816.    * is increased, a larger part of the video will be seen, but with less
  1817.    * detail.
  1818.    *
  1819.    * @param {number} fieldOfView In degrees
  1820.    * @export
  1821.    */
  1822.   setVRFieldOfView(fieldOfView) {
  1823.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1824.     this.vr_.setFieldOfView(fieldOfView);
  1825.   }
  1827.   /**
  1828.    * Toggle stereoscopic mode.
  1829.    *
  1830.    * @export
  1831.    */
  1832.   toggleStereoscopicMode() {
  1833.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1834.     this.vr_.toggleStereoscopicMode();
  1835.   }
  1837.   /**
  1838.    * Returns true if stereoscopic mode is enabled.
  1839.    *
  1840.    * @return {boolean}
  1841.    */
  1842.   isStereoscopicModeEnabled() {
  1843.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1844.     return this.vr_.isStereoscopicModeEnabled();
  1845.   }
  1847.   /**
  1848.    * Increment the yaw in X angle in degrees.
  1849.    *
  1850.    * @param {number} angle In degrees
  1851.    * @export
  1852.    */
  1853.   incrementYaw(angle) {
  1854.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1855.     this.vr_.incrementYaw(angle);
  1856.   }
  1858.   /**
  1859.    * Increment the pitch in X angle in degrees.
  1860.    *
  1861.    * @param {number} angle In degrees
  1862.    * @export
  1863.    */
  1864.   incrementPitch(angle) {
  1865.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1866.     this.vr_.incrementPitch(angle);
  1867.   }
  1869.   /**
  1870.    * Increment the roll in X angle in degrees.
  1871.    *
  1872.    * @param {number} angle In degrees
  1873.    * @export
  1874.    */
  1875.   incrementRoll(angle) {
  1876.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1877.     this.vr_.incrementRoll(angle);
  1878.   }
  1880.   /**
  1881.    * Create a localization instance already pre-loaded with all the locales that
  1882.    * we support.
  1883.    *
  1884.    * @return {!shaka.ui.Localization}
  1885.    * @private
  1886.    */
  1887.   static createLocalization_() {
  1888.     /** @type {string} */
  1889.     const fallbackLocale = 'en';
  1891.     /** @type {!shaka.ui.Localization} */
  1892.     const localization = new shaka.ui.Localization(fallbackLocale);
  1893.     shaka.ui.Locales.addTo(localization);
  1894.     localization.changeLocale(navigator.languages || []);
  1896.     return localization;
  1897.   }
  1898. };
  1901. /**
  1902.  * @event shaka.ui.Controls#CastStatusChangedEvent
  1903.  * @description Fired upon receiving a 'caststatuschanged' event from
  1904.  *    the cast proxy.
  1905.  * @property {string} type
  1906.  *   'caststatuschanged'
  1907.  * @property {boolean} newStatus
  1908.  *  The new status of the application. True for 'is casting' and
  1909.  *  false otherwise.
  1910.  * @exportDoc
  1911.  */
  1914. /**
  1915.  * @event shaka.ui.Controls#VRStatusChangedEvent
  1916.  * @description Fired when VR status change
  1917.  * @property {string} type
  1918.  *   'vrstatuschanged'
  1919.  * @exportDoc
  1920.  */
  1923. /**
  1924.  * @event shaka.ui.Controls#SubMenuOpenEvent
  1925.  * @description Fired when one of the overflow submenus is opened
  1926.  *    (e. g. language/resolution/subtitle selection).
  1927.  * @property {string} type
  1928.  *   'submenuopen'
  1929.  * @exportDoc
  1930.  */
  1933. /**
  1934.  * @event shaka.ui.Controls#CaptionSelectionUpdatedEvent
  1935.  * @description Fired when the captions/subtitles menu has finished updating.
  1936.  * @property {string} type
  1937.  *   'captionselectionupdated'
  1938.  * @exportDoc
  1939.  */
  1942. /**
  1943.  * @event shaka.ui.Controls#ResolutionSelectionUpdatedEvent
  1944.  * @description Fired when the resolution menu has finished updating.
  1945.  * @property {string} type
  1946.  *   'resolutionselectionupdated'
  1947.  * @exportDoc
  1948.  */
  1951. /**
  1952.  * @event shaka.ui.Controls#LanguageSelectionUpdatedEvent
  1953.  * @description Fired when the audio language menu has finished updating.
  1954.  * @property {string} type
  1955.  *   'languageselectionupdated'
  1956.  * @exportDoc
  1957.  */
  1960. /**
  1961.  * @event shaka.ui.Controls#ErrorEvent
  1962.  * @description Fired when something went wrong with the controls.
  1963.  * @property {string} type
  1964.  *   'error'
  1965.  * @property {!shaka.util.Error} detail
  1966.  *   An object which contains details on the error.  The error's 'category'
  1967.  *   and 'code' properties will identify the specific error that occurred.
  1968.  *   In an uncompiled build, you can also use the 'message' and 'stack'
  1969.  *   properties to debug.
  1970.  * @exportDoc
  1971.  */
  1974. /**
  1975.  * @event shaka.ui.Controls#TimeAndSeekRangeUpdatedEvent
  1976.  * @description Fired when the time and seek range elements have finished
  1977.  *    updating.
  1978.  * @property {string} type
  1979.  *   'timeandseekrangeupdated'
  1980.  * @exportDoc
  1981.  */
  1984. /**
  1985.  * @event shaka.ui.Controls#UIUpdatedEvent
  1986.  * @description Fired after a call to ui.configure() once the UI has finished
  1987.  *    updating.
  1988.  * @property {string} type
  1989.  *   'uiupdated'
  1990.  * @exportDoc
  1991.  */
  1993. /** @private {!Map.<string, !shaka.extern.IUIElement.Factory>} */
  1994. shaka.ui.ControlsPanel.elementNamesToFactories_ = new Map();
  1996. /** @private {?shaka.extern.IUISeekBar.Factory} */
  1997. shaka.ui.ControlsPanel.seekBarFactory_ = new shaka.ui.SeekBar.Factory();