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.Utils');
  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.         });
  207.     this.adManager_.initInterstitial(
  208.         this.getClientSideAdContainer(), this.localPlayer_, this.localVideo_);
  209.   }
  211.   /**
  212.    * @override
  213.    * @export
  214.    */
  215.   async destroy() {
  216.     if (document.pictureInPictureElement == this.localVideo_) {
  217.       await document.exitPictureInPicture();
  218.     }
  220.     if (this.eventManager_) {
  221.       this.eventManager_.release();
  222.       this.eventManager_ = null;
  223.     }
  225.     if (this.mouseStillTimer_) {
  226.       this.mouseStillTimer_.stop();
  227.       this.mouseStillTimer_ = null;
  228.     }
  230.     if (this.fadeControlsTimer_) {
  231.       this.fadeControlsTimer_.stop();
  232.       this.fadeControlsTimer_ = null;
  233.     }
  235.     if (this.hideSettingsMenusTimer_) {
  236.       this.hideSettingsMenusTimer_.stop();
  237.       this.hideSettingsMenusTimer_ = null;
  238.     }
  240.     if (this.timeAndSeekRangeTimer_) {
  241.       this.timeAndSeekRangeTimer_.stop();
  242.       this.timeAndSeekRangeTimer_ = null;
  243.     }
  245.     if (this.vr_) {
  246.       this.vr_.release();
  247.       this.vr_ = null;
  248.     }
  250.     // Important!  Release all child elements before destroying the cast proxy
  251.     // or player.  This makes sure those destructions will not trigger event
  252.     // listeners in the UI which would then invoke the cast proxy or player.
  253.     this.releaseChildElements_();
  255.     if (this.controlsContainer_) {
  256.       this.videoContainer_.removeChild(this.controlsContainer_);
  257.       this.controlsContainer_ = null;
  258.     }
  260.     if (this.castProxy_) {
  261.       await this.castProxy_.destroy();
  262.       this.castProxy_ = null;
  263.     }
  265.     if (this.localPlayer_) {
  266.       await this.localPlayer_.destroy();
  267.       this.localPlayer_ = null;
  268.     }
  269.     this.player_ = null;
  271.     this.localVideo_ = null;
  272.     this.video_ = null;
  274.     this.localization_ = null;
  275.     this.pressedKeys_.clear();
  277.     // FakeEventTarget implements IReleasable
  278.     super.release();
  279.   }
  282.   /** @private */
  283.   releaseChildElements_() {
  284.     for (const element of this.elements_) {
  285.       element.release();
  286.     }
  288.     this.elements_ = [];
  289.   }
  291.   /**
  292.    * @param {string} name
  293.    * @param {!shaka.extern.IUIElement.Factory} factory
  294.    * @export
  295.    */
  296.   static registerElement(name, factory) {
  297.     shaka.ui.ControlsPanel.elementNamesToFactories_.set(name, factory);
  298.   }
  300.   /**
  301.    * @param {!shaka.extern.IUISeekBar.Factory} factory
  302.    * @export
  303.    */
  304.   static registerSeekBar(factory) {
  305.     shaka.ui.ControlsPanel.seekBarFactory_ = factory;
  306.   }
  308.   /**
  309.    * This allows the application to inhibit casting.
  310.    *
  311.    * @param {boolean} allow
  312.    * @export
  313.    */
  314.   allowCast(allow) {
  315.     this.castAllowed_ = allow;
  316.     this.onCastStatusChange_();
  317.   }
  319.   /**
  320.    * Used by the application to notify the controls that a load operation is
  321.    * complete.  This allows the controls to recalculate play/paused state, which
  322.    * is important for platforms like Android where autoplay is disabled.
  323.    * @export
  324.    */
  325.   loadComplete() {
  326.     // If we are on Android or if autoplay is false, video.paused should be
  327.     // true. Otherwise, video.paused is false and the content is autoplaying.
  328.     this.onPlayStateChange_();
  329.   }
  331.   /**
  332.    * @param {!shaka.extern.UIConfiguration} config
  333.    * @export
  334.    */
  335.   configure(config) {
  336.     this.config_ = config;
  338.     this.castProxy_.changeReceiverId(config.castReceiverAppId,
  339.         config.castAndroidReceiverCompatible);
  341.     // Deconstruct the old layout if applicable
  342.     if (this.seekBar_) {
  343.       this.seekBar_ = null;
  344.     }
  346.     if (this.playButton_) {
  347.       this.playButton_ = null;
  348.     }
  350.     if (this.contextMenu_) {
  351.       this.contextMenu_ = null;
  352.     }
  354.     if (this.vr_) {
  355.       this.vr_.configure(config);
  356.     }
  358.     if (this.controlsContainer_) {
  359.       shaka.util.Dom.removeAllChildren(this.controlsContainer_);
  360.       this.releaseChildElements_();
  361.     } else {
  362.       this.addControlsContainer_();
  363.       // The client-side ad container is only created once, and is never
  364.       // re-created or uprooted in the DOM, even when the DOM is re-created,
  365.       // since that seemingly breaks the IMA SDK.
  366.       this.addClientAdContainer_();
  368.       goog.asserts.assert(
  369.           this.controlsContainer_, 'Should have a controlsContainer_!');
  370.       goog.asserts.assert(this.localVideo_, 'Should have a localVideo_!');
  371.       goog.asserts.assert(this.player_, 'Should have a player_!');
  372.       this.vr_ = new shaka.ui.VRManager(this.controlsContainer_, this.vrCanvas_,
  373.           this.localVideo_, this.player_, this.config_);
  374.     }
  376.     // Create the new layout
  377.     this.createDOM_();
  379.     // Init the play state
  380.     this.onPlayStateChange_();
  382.     // Elements that should not propagate clicks (controls panel, menus)
  383.     const noPropagationElements = this.videoContainer_.getElementsByClassName(
  384.         'shaka-no-propagation');
  385.     for (const element of noPropagationElements) {
  386.       const cb = (event) => event.stopPropagation();
  387.       this.eventManager_.listen(element, 'click', cb);
  388.       this.eventManager_.listen(element, 'dblclick', cb);
  389.     }
  390.   }
  392.   /**
  393.    * Enable or disable the custom controls. Enabling disables native
  394.    * browser controls.
  395.    *
  396.    * @param {boolean} enabled
  397.    * @export
  398.    */
  399.   setEnabledShakaControls(enabled) {
  400.     this.enabled_ = enabled;
  401.     if (enabled) {
  402.       this.videoContainer_.setAttribute('shaka-controls', 'true');
  404.       // If we're hiding native controls, make sure the video element itself is
  405.       // not tab-navigable.  Our custom controls will still be tab-navigable.
  406.       this.localVideo_.tabIndex = -1;
  407.       this.localVideo_.controls = false;
  408.     } else {
  409.       this.videoContainer_.removeAttribute('shaka-controls');
  410.     }
  412.     // The effects of play state changes are inhibited while showing native
  413.     // browser controls.  Recalculate that state now.
  414.     this.onPlayStateChange_();
  415.   }
  417.   /**
  418.    * Enable or disable native browser controls. Enabling disables shaka
  419.    * controls.
  420.    *
  421.    * @param {boolean} enabled
  422.    * @export
  423.    */
  424.   setEnabledNativeControls(enabled) {
  425.     // If we enable the native controls, the element must be tab-navigable.
  426.     // If we disable the native controls, we want to make sure that the video
  427.     // element itself is not tab-navigable, so that the element is skipped over
  428.     // when tabbing through the page.
  429.     this.localVideo_.controls = enabled;
  430.     this.localVideo_.tabIndex = enabled ? 0 : -1;
  432.     if (enabled) {
  433.       this.setEnabledShakaControls(false);
  434.     }
  435.   }
  437.   /**
  438.    * @export
  439.    * @return {?shaka.extern.IAd}
  440.    */
  441.   getAd() {
  442.     return this.ad_;
  443.   }
  445.   /**
  446.    * @export
  447.    * @return {shaka.cast.CastProxy}
  448.    */
  449.   getCastProxy() {
  450.     return this.castProxy_;
  451.   }
  453.   /**
  454.    * @return {shaka.ui.Localization}
  455.    * @export
  456.    */
  457.   getLocalization() {
  458.     return this.localization_;
  459.   }
  461.   /**
  462.    * @return {!HTMLElement}
  463.    * @export
  464.    */
  465.   getVideoContainer() {
  466.     return this.videoContainer_;
  467.   }
  469.   /**
  470.    * @return {HTMLMediaElement}
  471.    * @export
  472.    */
  473.   getVideo() {
  474.     return this.video_;
  475.   }
  477.   /**
  478.    * @return {HTMLMediaElement}
  479.    * @export
  480.    */
  481.   getLocalVideo() {
  482.     return this.localVideo_;
  483.   }
  485.   /**
  486.    * @return {shaka.Player}
  487.    * @export
  488.    */
  489.   getPlayer() {
  490.     return this.player_;
  491.   }
  493.   /**
  494.    * @return {shaka.Player}
  495.    * @export
  496.    */
  497.   getLocalPlayer() {
  498.     return this.localPlayer_;
  499.   }
  501.   /**
  502.    * @return {!HTMLElement}
  503.    * @export
  504.    */
  505.   getControlsContainer() {
  506.     goog.asserts.assert(
  507.         this.controlsContainer_, 'No controls container after destruction!');
  508.     return this.controlsContainer_;
  509.   }
  511.   /**
  512.    * @return {!HTMLElement}
  513.    * @export
  514.    */
  515.   getServerSideAdContainer() {
  516.     return this.daiAdContainer_;
  517.   }
  519.   /**
  520.    * @return {!HTMLElement}
  521.    * @export
  522.    */
  523.   getClientSideAdContainer() {
  524.     return this.clientAdContainer_;
  525.   }
  527.   /**
  528.    * @return {!shaka.extern.UIConfiguration}
  529.    * @export
  530.    */
  531.   getConfig() {
  532.     return this.config_;
  533.   }
  535.   /**
  536.    * @return {boolean}
  537.    * @export
  538.    */
  539.   isSeeking() {
  540.     return this.isSeeking_;
  541.   }
  544.   /**
  545.    * @param {boolean} seeking
  546.    * @export
  547.    */
  548.   setSeeking(seeking) {
  549.     this.isSeeking_ = seeking;
  550.   }
  552.   /**
  553.    * @return {boolean}
  554.    * @export
  555.    */
  556.   isCastAllowed() {
  557.     return this.castAllowed_;
  558.   }
  560.   /**
  561.    * @return {number}
  562.    * @export
  563.    */
  564.   getDisplayTime() {
  565.     return this.seekBar_ ? this.seekBar_.getValue() : this.video_.currentTime;
  566.   }
  568.   /**
  569.    * @param {?number} time
  570.    * @export
  571.    */
  572.   setLastTouchEventTime(time) {
  573.     this.lastTouchEventTime_ = time;
  574.   }
  576.   /**
  577.    * @return {boolean}
  578.    * @export
  579.    */
  580.   anySettingsMenusAreOpen() {
  581.     return this.menus_.some(
  582.         (menu) => !menu.classList.contains('shaka-hidden'));
  583.   }
  585.   /** @export */
  586.   hideSettingsMenus() {
  587.     this.hideSettingsMenusTimer_.tickNow();
  588.   }
  590.   /**
  591.    * @return {boolean}
  592.    * @export
  593.    */
  594.   isFullScreenSupported() {
  595.     if (document.fullscreenEnabled) {
  596.       return true;
  597.     }
  598.     const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  599.     if (video.webkitSupportsFullscreen) {
  600.       return true;
  601.     }
  602.     return false;
  603.   }
  605.   /**
  606.    * @return {boolean}
  607.    * @export
  608.    */
  609.   isFullScreenEnabled() {
  610.     if (document.fullscreenEnabled) {
  611.       return !!document.fullscreenElement;
  612.     }
  613.     const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  614.     if (video.webkitSupportsFullscreen) {
  615.       return video.webkitDisplayingFullscreen;
  616.     }
  617.     return false;
  618.   }
  620.   /** @private */
  621.   async enterFullScreen_() {
  622.     try {
  623.       if (document.fullscreenEnabled) {
  624.         if (document.pictureInPictureElement) {
  625.           await document.exitPictureInPicture();
  626.         }
  627.         const fullScreenElement = this.config_.fullScreenElement;
  628.         await fullScreenElement.requestFullscreen({navigationUI: 'hide'});
  630.         if (this.config_.forceLandscapeOnFullscreen && screen.orientation) {
  631.           // Locking to 'landscape' should let it be either
  632.           // 'landscape-primary' or 'landscape-secondary' as appropriate.
  633.           // We ignore errors from this specific call, since it creates noise
  634.           // on desktop otherwise.
  635.           try {
  636.             await screen.orientation.lock('landscape');
  637.           } catch (error) {}
  638.         }
  639.       } else {
  640.         const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  641.         if (video.webkitSupportsFullscreen) {
  642.           video.webkitEnterFullscreen();
  643.         }
  644.       }
  645.     } catch (error) {
  646.       // Entering fullscreen can fail without user interaction.
  647.       this.dispatchEvent(new shaka.util.FakeEvent(
  648.           'error', (new Map()).set('detail', error)));
  649.     }
  650.   }
  652.   /** @private */
  653.   async exitFullScreen_() {
  654.     if (document.fullscreenEnabled) {
  655.       if (screen.orientation) {
  656.         screen.orientation.unlock();
  657.       }
  658.       await document.exitFullscreen();
  659.     } else {
  660.       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  661.       if (video.webkitSupportsFullscreen) {
  662.         video.webkitExitFullscreen();
  663.       }
  664.     }
  665.   }
  667.   /** @export */
  668.   async toggleFullScreen() {
  669.     if (this.isFullScreenEnabled()) {
  670.       await this.exitFullScreen_();
  671.     } else {
  672.       await this.enterFullScreen_();
  673.     }
  674.   }
  676.   /**
  677.    * @return {boolean}
  678.    * @export
  679.    */
  680.   isPiPAllowed() {
  681.     if (this.castProxy_.isCasting()) {
  682.       return false;
  683.     }
  684.     if ('documentPictureInPicture' in window &&
  685.         this.config_.preferDocumentPictureInPicture) {
  686.       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  687.       return !video.disablePictureInPicture;
  688.     }
  689.     if (document.pictureInPictureEnabled) {
  690.       const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  691.       return !video.disablePictureInPicture;
  692.     }
  693.     return false;
  694.   }
  696.   /**
  697.    * @return {boolean}
  698.    * @export
  699.    */
  700.   isPiPEnabled() {
  701.     if ('documentPictureInPicture' in window &&
  702.         this.config_.preferDocumentPictureInPicture) {
  703.       return !!window.documentPictureInPicture.window;
  704.     } else {
  705.       return !!document.pictureInPictureElement;
  706.     }
  707.   }
  709.   /** @export */
  710.   async togglePiP() {
  711.     try {
  712.       if ('documentPictureInPicture' in window &&
  713.         this.config_.preferDocumentPictureInPicture) {
  714.         await this.toggleDocumentPictureInPicture_();
  715.       } else if (!document.pictureInPictureElement) {
  716.         // If you were fullscreen, leave fullscreen first.
  717.         if (document.fullscreenElement) {
  718.           document.exitFullscreen();
  719.         }
  720.         const video = /** @type {HTMLVideoElement} */(this.localVideo_);
  721.         await video.requestPictureInPicture();
  722.       } else {
  723.         await document.exitPictureInPicture();
  724.       }
  725.     } catch (error) {
  726.       this.dispatchEvent(new shaka.util.FakeEvent(
  727.           'error', (new Map()).set('detail', error)));
  728.     }
  729.   }
  731.   /**
  732.    * The Document Picture-in-Picture API makes it possible to open an
  733.    * always-on-top window that can be populated with arbitrary HTML content.
  734.    * https://developer.chrome.com/docs/web-platform/document-picture-in-picture
  735.    * @private
  736.    */
  737.   async toggleDocumentPictureInPicture_() {
  738.     // Close Picture-in-Picture window if any.
  739.     if (window.documentPictureInPicture.window) {
  740.       window.documentPictureInPicture.window.close();
  741.       return;
  742.     }
  744.     // Open a Picture-in-Picture window.
  745.     const pipPlayer = this.videoContainer_;
  746.     const rectPipPlayer = pipPlayer.getBoundingClientRect();
  747.     const pipWindow = await window.documentPictureInPicture.requestWindow({
  748.       width: rectPipPlayer.width,
  749.       height: rectPipPlayer.height,
  750.     });
  752.     // Copy style sheets to the Picture-in-Picture window.
  753.     this.copyStyleSheetsToWindow_(pipWindow);
  755.     // Add placeholder for the player.
  756.     const parentPlayer = pipPlayer.parentNode || document.body;
  757.     const placeholder = this.videoContainer_.cloneNode(true);
  758.     placeholder.style.visibility = 'hidden';
  759.     placeholder.style.height = getComputedStyle(pipPlayer).height;
  760.     parentPlayer.appendChild(placeholder);
  762.     // Make sure player fits in the Picture-in-Picture window.
  763.     const styles = document.createElement('style');
  764.     styles.append(`[data-shaka-player-container] {
  765.       width: 100% !important; max-height: 100%}`);
  766.     pipWindow.document.head.append(styles);
  768.     // Move player to the Picture-in-Picture window.
  769.     pipWindow.document.body.append(pipPlayer);
  771.     // Listen for the PiP closing event to move the player back.
  772.     this.eventManager_.listenOnce(pipWindow, 'pagehide', () => {
  773.       placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
  774.     });
  775.   }
  777.   /** @private */
  778.   copyStyleSheetsToWindow_(win) {
  779.     const styleSheets = /** @type {!Iterable<*>} */(document.styleSheets);
  780.     const allCSS = [...styleSheets]
  781.         .map((sheet) => {
  782.           try {
  783.             return [...sheet.cssRules].map((rule) => rule.cssText).join('');
  784.           } catch (e) {
  785.             const link = /** @type {!HTMLLinkElement} */(
  786.               document.createElement('link'));
  788.             link.rel = 'stylesheet';
  789.             link.type = sheet.type;
  790.             link.media = sheet.media;
  791.             link.href = sheet.href;
  792.             win.document.head.appendChild(link);
  793.           }
  794.           return '';
  795.         })
  796.         .filter(Boolean)
  797.         .join('\n');
  798.     const style = document.createElement('style');
  800.     style.textContent = allCSS;
  801.     win.document.head.appendChild(style);
  802.   }
  805.   /** @export */
  806.   showAdUI() {
  807.     shaka.ui.Utils.setDisplay(this.adPanel_, true);
  808.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, true);
  809.     this.controlsContainer_.setAttribute('ad-active', 'true');
  810.   }
  812.   /** @export */
  813.   hideAdUI() {
  814.     shaka.ui.Utils.setDisplay(this.adPanel_, false);
  815.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
  816.     this.controlsContainer_.removeAttribute('ad-active');
  817.   }
  819.   /**
  820.    * Play or pause the current presentation.
  821.    */
  822.   playPausePresentation() {
  823.     if (!this.enabled_) {
  824.       return;
  825.     }
  827.     if (!this.video_.duration) {
  828.       // Can't play yet.  Ignore.
  829.       return;
  830.     }
  832.     this.player_.cancelTrickPlay();
  834.     if (this.presentationIsPaused()) {
  835.       this.video_.play();
  836.     } else {
  837.       this.video_.pause();
  838.     }
  839.   }
  841.   /**
  842.    * Play or pause the current ad.
  843.    */
  844.   playPauseAd() {
  845.     if (this.ad_ && this.ad_.isPaused()) {
  846.       this.ad_.play();
  847.     } else if (this.ad_) {
  848.       this.ad_.pause();
  849.     }
  850.   }
  853.   /**
  854.    * Return true if the presentation is paused.
  855.    *
  856.    * @return {boolean}
  857.    */
  858.   presentationIsPaused() {
  859.     // The video element is in a paused state while seeking, but we don't count
  860.     // that.
  861.     return this.video_.paused && !this.isSeeking();
  862.   }
  865.   /** @private */
  866.   createDOM_() {
  867.     this.videoContainer_.classList.add('shaka-video-container');
  868.     this.localVideo_.classList.add('shaka-video');
  870.     this.addScrimContainer_();
  872.     if (this.config_.addBigPlayButton) {
  873.       this.addPlayButton_();
  874.     }
  876.     if (this.config_.customContextMenu) {
  877.       this.addContextMenu_();
  878.     }
  880.     if (!this.spinnerContainer_) {
  881.       this.addBufferingSpinner_();
  882.     }
  884.     if (this.config_.seekOnTaps) {
  885.       this.addFastForwardButtonOnControlsContainer_();
  886.       this.addRewindButtonOnControlsContainer_();
  887.     }
  889.     this.addDaiAdContainer_();
  891.     this.addControlsButtonPanel_();
  893.     this.menus_ = Array.from(
  894.         this.videoContainer_.getElementsByClassName('shaka-settings-menu'));
  895.     this.menus_.push(...Array.from(
  896.         this.videoContainer_.getElementsByClassName('shaka-overflow-menu')));
  898.     this.addSeekBar_();
  900.     this.showOnHoverControls_ = Array.from(
  901.         this.videoContainer_.getElementsByClassName(
  902.             'shaka-show-controls-on-mouse-over'));
  903.   }
  905.   /** @private */
  906.   addControlsContainer_() {
  907.     /** @private {HTMLElement} */
  908.     this.controlsContainer_ = shaka.util.Dom.createHTMLElement('div');
  909.     this.controlsContainer_.classList.add('shaka-controls-container');
  910.     this.videoContainer_.appendChild(this.controlsContainer_);
  912.     // Use our controls by default, without anyone calling
  913.     // setEnabledShakaControls:
  914.     this.videoContainer_.setAttribute('shaka-controls', 'true');
  916.     this.eventManager_.listen(this.controlsContainer_, 'touchstart', (e) => {
  917.       this.onContainerTouch_(e);
  918.     }, {passive: false});
  920.     this.eventManager_.listen(this.controlsContainer_, 'click', () => {
  921.       this.onContainerClick_();
  922.     });
  924.     this.eventManager_.listen(this.controlsContainer_, 'dblclick', () => {
  925.       if (this.config_.doubleClickForFullscreen &&
  926.           this.isFullScreenSupported()) {
  927.         this.toggleFullScreen();
  928.       }
  929.     });
  930.   }
  932.   /** @private */
  933.   addPlayButton_() {
  934.     const playButtonContainer = shaka.util.Dom.createHTMLElement('div');
  935.     playButtonContainer.classList.add('shaka-play-button-container');
  936.     this.controlsContainer_.appendChild(playButtonContainer);
  938.     /** @private {shaka.ui.BigPlayButton} */
  939.     this.playButton_ =
  940.         new shaka.ui.BigPlayButton(playButtonContainer, this);
  941.     this.elements_.push(this.playButton_);
  942.   }
  944.   /** @private */
  945.   addContextMenu_() {
  946.     /** @private {shaka.ui.ContextMenu} */
  947.     this.contextMenu_ =
  948.         new shaka.ui.ContextMenu(this.controlsButtonPanel_, this);
  949.     this.elements_.push(this.contextMenu_);
  950.   }
  952.   /** @private */
  953.   addScrimContainer_() {
  954.     // This is the container that gets styled by CSS to have the
  955.     // black gradient scrim at the end of the controls.
  956.     const scrimContainer = shaka.util.Dom.createHTMLElement('div');
  957.     scrimContainer.classList.add('shaka-scrim-container');
  958.     this.controlsContainer_.appendChild(scrimContainer);
  959.   }
  961.   /** @private */
  962.   addAdControls_() {
  963.     /** @private {!HTMLElement} */
  964.     this.adPanel_ = shaka.util.Dom.createHTMLElement('div');
  965.     this.adPanel_.classList.add('shaka-ad-controls');
  966.     const showAdPanel = this.ad_ != null && this.ad_.isLinear();
  967.     shaka.ui.Utils.setDisplay(this.adPanel_, showAdPanel);
  968.     this.bottomControls_.appendChild(this.adPanel_);
  970.     const adPosition = new shaka.ui.AdPosition(this.adPanel_, this);
  971.     this.elements_.push(adPosition);
  973.     const adCounter = new shaka.ui.AdCounter(this.adPanel_, this);
  974.     this.elements_.push(adCounter);
  976.     const skipButton = new shaka.ui.SkipAdButton(this.adPanel_, this);
  977.     this.elements_.push(skipButton);
  978.   }
  980.   /** @private */
  981.   addBufferingSpinner_() {
  982.     /** @private {!HTMLElement} */
  983.     this.spinnerContainer_ = shaka.util.Dom.createHTMLElement('div');
  984.     this.spinnerContainer_.classList.add('shaka-spinner-container');
  985.     this.videoContainer_.appendChild(this.spinnerContainer_);
  987.     const spinner = shaka.util.Dom.createHTMLElement('div');
  988.     spinner.classList.add('shaka-spinner');
  989.     this.spinnerContainer_.appendChild(spinner);
  991.     // Svg elements have to be created with the svg xml namespace.
  992.     const xmlns = 'http://www.w3.org/2000/svg';
  994.     const svg =
  995.       /** @type {!HTMLElement} */(document.createElementNS(xmlns, 'svg'));
  996.     svg.classList.add('shaka-spinner-svg');
  997.     svg.setAttribute('viewBox', '0 0 30 30');
  998.     spinner.appendChild(svg);
  1000.     // These coordinates are relative to the SVG viewBox above.  This is
  1001.     // distinct from the actual display size in the page, since the "S" is for
  1002.     // "Scalable." The radius of 14.5 is so that the edges of the 1-px-wide
  1003.     // stroke will touch the edges of the viewBox.
  1004.     const spinnerCircle = document.createElementNS(xmlns, 'circle');
  1005.     spinnerCircle.classList.add('shaka-spinner-path');
  1006.     spinnerCircle.setAttribute('cx', '15');
  1007.     spinnerCircle.setAttribute('cy', '15');
  1008.     spinnerCircle.setAttribute('r', '14.5');
  1009.     spinnerCircle.setAttribute('fill', 'none');
  1010.     spinnerCircle.setAttribute('stroke-width', '1');
  1011.     spinnerCircle.setAttribute('stroke-miterlimit', '10');
  1012.     svg.appendChild(spinnerCircle);
  1013.   }
  1015.   /**
  1016.    * Add fast-forward button on Controls container for moving video some
  1017.    * seconds ahead when the video is tapped more than once, video seeks ahead
  1018.    * some seconds for every extra tap.
  1019.    * @private
  1020.    */
  1021.   addFastForwardButtonOnControlsContainer_() {
  1022.     const hiddenFastForwardContainer = shaka.util.Dom.createHTMLElement('div');
  1023.     hiddenFastForwardContainer.classList.add(
  1024.         'shaka-hidden-fast-forward-container');
  1025.     this.controlsContainer_.appendChild(hiddenFastForwardContainer);
  1027.     /** @private {shaka.ui.HiddenFastForwardButton} */
  1028.     this.hiddenFastForwardButton_ =
  1029.         new shaka.ui.HiddenFastForwardButton(hiddenFastForwardContainer, this);
  1030.     this.elements_.push(this.hiddenFastForwardButton_);
  1031.   }
  1033.   /**
  1034.    * Add Rewind button on Controls container for moving video some seconds
  1035.    * behind when the video is tapped more than once, video seeks behind some
  1036.    * seconds for every extra tap.
  1037.    * @private
  1038.    */
  1039.   addRewindButtonOnControlsContainer_() {
  1040.     const hiddenRewindContainer = shaka.util.Dom.createHTMLElement('div');
  1041.     hiddenRewindContainer.classList.add(
  1042.         'shaka-hidden-rewind-container');
  1043.     this.controlsContainer_.appendChild(hiddenRewindContainer);
  1045.     /** @private {shaka.ui.HiddenRewindButton} */
  1046.     this.hiddenRewindButton_ =
  1047.         new shaka.ui.HiddenRewindButton(hiddenRewindContainer, this);
  1048.     this.elements_.push(this.hiddenRewindButton_);
  1049.   }
  1051.   /** @private */
  1052.   addControlsButtonPanel_() {
  1053.     /** @private {!HTMLElement} */
  1054.     this.bottomControls_ = shaka.util.Dom.createHTMLElement('div');
  1055.     this.bottomControls_.classList.add('shaka-bottom-controls');
  1056.     this.bottomControls_.classList.add('shaka-no-propagation');
  1057.     this.controlsContainer_.appendChild(this.bottomControls_);
  1059.     // Overflow menus are supposed to hide once you click elsewhere
  1060.     // on the page. The click event listener on window ensures that.
  1061.     // However, clicks on the bottom controls don't propagate to the container,
  1062.     // so we have to explicitly hide the menus onclick here.
  1063.     this.eventManager_.listen(this.bottomControls_, 'click', (e) => {
  1064.       // We explicitly deny this measure when clicking on buttons that
  1065.       // open submenus in the control panel.
  1066.       if (!e.target['closest']('.shaka-overflow-button')) {
  1067.         this.hideSettingsMenus();
  1068.       }
  1069.     });
  1071.     this.addAdControls_();
  1073.     /** @private {!HTMLElement} */
  1074.     this.controlsButtonPanel_ = shaka.util.Dom.createHTMLElement('div');
  1075.     this.controlsButtonPanel_.classList.add('shaka-controls-button-panel');
  1076.     this.controlsButtonPanel_.classList.add(
  1077.         'shaka-show-controls-on-mouse-over');
  1078.     if (this.config_.enableTooltips) {
  1079.       this.controlsButtonPanel_.classList.add('shaka-tooltips-on');
  1080.     }
  1081.     this.bottomControls_.appendChild(this.controlsButtonPanel_);
  1083.     // Create the elements specified by controlPanelElements
  1084.     for (const name of this.config_.controlPanelElements) {
  1085.       if (shaka.ui.ControlsPanel.elementNamesToFactories_.get(name)) {
  1086.         const factory =
  1087.             shaka.ui.ControlsPanel.elementNamesToFactories_.get(name);
  1088.         const element = factory.create(this.controlsButtonPanel_, this);
  1089.         this.elements_.push(element);
  1090.       } else {
  1091.         shaka.log.alwaysWarn('Unrecognized control panel element requested:',
  1092.             name);
  1093.       }
  1094.     }
  1095.   }
  1098.   /**
  1099.    * Adds a container for server side ad UI with IMA SDK.
  1100.    *
  1101.    * @private
  1102.    */
  1103.   addDaiAdContainer_() {
  1104.     /** @private {!HTMLElement} */
  1105.     this.daiAdContainer_ = shaka.util.Dom.createHTMLElement('div');
  1106.     this.daiAdContainer_.classList.add('shaka-server-side-ad-container');
  1107.     this.controlsContainer_.appendChild(this.daiAdContainer_);
  1108.   }
  1111.   /**
  1112.    * Adds a seekbar depending on the configuration.
  1113.    * By default an instance of shaka.ui.SeekBar is created
  1114.    * This behaviour can be overriden by providing a SeekBar factory using the
  1115.    * registerSeekBarFactory function.
  1116.    *
  1117.    * @private
  1118.    */
  1119.   addSeekBar_() {
  1120.     if (this.config_.addSeekBar) {
  1121.       this.seekBar_ = shaka.ui.ControlsPanel.seekBarFactory_.create(
  1122.           this.bottomControls_, this);
  1123.       this.elements_.push(this.seekBar_);
  1124.     } else {
  1125.       // Settings menus need to be positioned lower if the seekbar is absent.
  1126.       for (const menu of this.menus_) {
  1127.         menu.classList.add('shaka-low-position');
  1128.       }
  1129.     }
  1130.   }
  1133.   /**
  1134.    * Adds a container for client side ad UI with IMA SDK.
  1135.    *
  1136.    * @private
  1137.    */
  1138.   addClientAdContainer_() {
  1139.     /** @private {!HTMLElement} */
  1140.     this.clientAdContainer_ = shaka.util.Dom.createHTMLElement('div');
  1141.     this.clientAdContainer_.classList.add('shaka-client-side-ad-container');
  1142.     shaka.ui.Utils.setDisplay(this.clientAdContainer_, false);
  1143.     this.eventManager_.listen(this.clientAdContainer_, 'click', () => {
  1144.       this.onContainerClick_();
  1145.     });
  1146.     this.videoContainer_.appendChild(this.clientAdContainer_);
  1147.   }
  1149.   /**
  1150.    * Adds static event listeners.  This should only add event listeners to
  1151.    * things that don't change (e.g. Player).  Dynamic elements (e.g. controls)
  1152.    * should have their event listeners added when they are created.
  1153.    *
  1154.    * @private
  1155.    */
  1156.   addEventListeners_() {
  1157.     this.eventManager_.listen(this.player_, 'buffering', () => {
  1158.       this.onBufferingStateChange_();
  1159.     });
  1160.     // Set the initial state, as well.
  1161.     this.onBufferingStateChange_();
  1163.     // Listen for key down events to detect tab and enable outline
  1164.     // for focused elements.
  1165.     this.eventManager_.listen(window, 'keydown', (e) => {
  1166.       this.onWindowKeyDown_(/** @type {!KeyboardEvent} */(e));
  1167.     });
  1169.     // Listen for click events to dismiss the settings menus.
  1170.     this.eventManager_.listen(window, 'click', () => this.hideSettingsMenus());
  1172.     // Avoid having multiple submenus open at the same time.
  1173.     this.eventManager_.listen(
  1174.         this, 'submenuopen', () => {
  1175.           this.hideSettingsMenus();
  1176.         });
  1178.     this.eventManager_.listen(this.video_, 'play', () => {
  1179.       this.onPlayStateChange_();
  1180.     });
  1182.     this.eventManager_.listen(this.video_, 'pause', () => {
  1183.       this.onPlayStateChange_();
  1184.     });
  1186.     this.eventManager_.listen(this.videoContainer_, 'mousemove', (e) => {
  1187.       this.onMouseMove_(e);
  1188.     });
  1190.     this.eventManager_.listen(this.videoContainer_, 'touchmove', (e) => {
  1191.       this.onMouseMove_(e);
  1192.     }, {passive: true});
  1194.     this.eventManager_.listen(this.videoContainer_, 'touchend', (e) => {
  1195.       this.onMouseMove_(e);
  1196.     }, {passive: true});
  1198.     this.eventManager_.listen(this.videoContainer_, 'mouseleave', () => {
  1199.       this.onMouseLeave_();
  1200.     });
  1202.     this.eventManager_.listen(this.castProxy_, 'caststatuschanged', () => {
  1203.       this.onCastStatusChange_();
  1204.     });
  1206.     this.eventManager_.listen(this.vr_, 'vrstatuschanged', () => {
  1207.       this.dispatchEvent(new shaka.util.FakeEvent('vrstatuschanged'));
  1208.     });
  1210.     this.eventManager_.listen(this.videoContainer_, 'keydown', (e) => {
  1211.       this.onControlsKeyDown_(/** @type {!KeyboardEvent} */(e));
  1212.     });
  1214.     this.eventManager_.listen(this.videoContainer_, 'keyup', (e) => {
  1215.       this.onControlsKeyUp_(/** @type {!KeyboardEvent} */(e));
  1216.     });
  1218.     this.eventManager_.listen(
  1219.         this.adManager_, shaka.ads.Utils.AD_STARTED, (e) => {
  1220.           this.ad_ = (/** @type {!Object} */ (e))['ad'];
  1221.           this.showAdUI();
  1222.         });
  1224.     this.eventManager_.listen(
  1225.         this.adManager_, shaka.ads.Utils.AD_STOPPED, () => {
  1226.           this.ad_ = null;
  1227.           this.hideAdUI();
  1228.         });
  1230.     if (screen.orientation) {
  1231.       this.eventManager_.listen(screen.orientation, 'change', async () => {
  1232.         await this.onScreenRotation_();
  1233.       });
  1234.     }
  1235.   }
  1238.   /**
  1239.    * When a mobile device is rotated to landscape layout, and the video is
  1240.    * loaded, make the demo app go into fullscreen.
  1241.    * Similarly, exit fullscreen when the device is rotated to portrait layout.
  1242.    * @private
  1243.    */
  1244.   async onScreenRotation_() {
  1245.     if (!this.video_ ||
  1246.         this.video_.readyState == 0 ||
  1247.         this.castProxy_.isCasting() ||
  1248.         !this.config_.enableFullscreenOnRotation ||
  1249.         !this.isFullScreenSupported()) {
  1250.       return;
  1251.     }
  1253.     if (screen.orientation.type.includes('landscape') &&
  1254.         !this.isFullScreenEnabled()) {
  1255.       await this.enterFullScreen_();
  1256.     } else if (screen.orientation.type.includes('portrait') &&
  1257.       this.isFullScreenEnabled()) {
  1258.       await this.exitFullScreen_();
  1259.     }
  1260.   }
  1263.   /**
  1264.    * Hiding the cursor when the mouse stops moving seems to be the only
  1265.    * decent UX in fullscreen mode.  Since we can't use pure CSS for that,
  1266.    * we use events both in and out of fullscreen mode.
  1267.    * Showing the control bar when a key is pressed, and hiding it after some
  1268.    * time.
  1269.    * @param {!Event} event
  1270.    * @private
  1271.    */
  1272.   onMouseMove_(event) {
  1273.     // Disable blue outline for focused elements for mouse navigation.
  1274.     if (event.type == 'mousemove') {
  1275.       this.controlsContainer_.classList.remove('shaka-keyboard-navigation');
  1276.       this.computeOpacity();
  1277.     }
  1278.     if (event.type == 'touchstart' || event.type == 'touchmove' ||
  1279.         event.type == 'touchend' || event.type == 'keyup') {
  1280.       this.lastTouchEventTime_ = Date.now();
  1281.     } else if (this.lastTouchEventTime_ + 1000 < Date.now()) {
  1282.       // It has been a while since the last touch event, this is probably a real
  1283.       // mouse moving, so treat it like a mouse.
  1284.       this.lastTouchEventTime_ = null;
  1285.     }
  1287.     // When there is a touch, we can get a 'mousemove' event after touch events.
  1288.     // This should be treated as part of the touch, which has already been
  1289.     // handled.
  1290.     if (this.lastTouchEventTime_ && event.type == 'mousemove') {
  1291.       return;
  1292.     }
  1294.     // Use the cursor specified in the CSS file.
  1295.     this.videoContainer_.style.cursor = '';
  1297.     this.recentMouseMovement_ = true;
  1299.     // Make sure we are not about to hide the settings menus and then force them
  1300.     // open.
  1301.     this.hideSettingsMenusTimer_.stop();
  1303.     if (!this.isOpaque()) {
  1304.       // Only update the time and seek range on mouse movement if it's the very
  1305.       // first movement and we're about to show the controls.  Otherwise, the
  1306.       // seek bar will be updated much more rapidly during mouse movement.  Do
  1307.       // this right before making it visible.
  1308.       this.updateTimeAndSeekRange_();
  1309.       this.computeOpacity();
  1310.     }
  1312.     // Hide the cursor when the mouse stops moving.
  1313.     // Only applies while the cursor is over the video container.
  1314.     this.mouseStillTimer_.stop();
  1316.     // Only start a timeout on 'touchend' or for 'mousemove' with no touch
  1317.     // events.
  1318.     if (event.type == 'touchend' ||
  1319.         event.type == 'keyup'|| !this.lastTouchEventTime_) {
  1320.       this.mouseStillTimer_.tickAfter(/* seconds= */ 3);
  1321.     }
  1322.   }
  1324.   /** @private */
  1325.   onMouseLeave_() {
  1326.     // We sometimes get 'mouseout' events with touches.  Since we can never
  1327.     // leave the video element when touching, ignore.
  1328.     if (this.lastTouchEventTime_) {
  1329.       return;
  1330.     }
  1332.     // Stop the timer and invoke the callback now to hide the controls.  If we
  1333.     // don't, the opacity style we set in onMouseMove_ will continue to override
  1334.     // the opacity in CSS and force the controls to stay visible.
  1335.     this.mouseStillTimer_.tickNow();
  1336.   }
  1338.   /**
  1339.    * This callback is for when we are pretty sure that the mouse has stopped
  1340.    * moving (aka the mouse is still). This method should only be called via
  1341.    * |mouseStillTimer_|. If this behaviour needs to be invoked directly, use
  1342.    * |mouseStillTimer_.tickNow()|.
  1343.    *
  1344.    * @private
  1345.    */
  1346.   onMouseStill_() {
  1347.     // Hide the cursor.
  1348.     this.videoContainer_.style.cursor = 'none';
  1349.     this.recentMouseMovement_ = false;
  1350.     this.computeOpacity();
  1351.   }
  1353.   /**
  1354.    * @return {boolean} true if any relevant elements are hovered.
  1355.    * @private
  1356.    */
  1357.   isHovered_() {
  1358.     if (!window.matchMedia('hover: hover').matches) {
  1359.       // This is primarily a touch-screen device, so the :hover query below
  1360.       // doesn't make sense.  In spite of this, the :hover query on an element
  1361.       // can still return true on such a device after a touch ends.
  1362.       // See https://bit.ly/34dBORX for details.
  1363.       return false;
  1364.     }
  1366.     return this.showOnHoverControls_.some((element) => {
  1367.       return element.matches(':hover');
  1368.     });
  1369.   }
  1371.   /**
  1372.    * Recompute whether the controls should be shown or hidden.
  1373.    */
  1374.   computeOpacity() {
  1375.     const adIsPaused = this.ad_ ? this.ad_.isPaused() : false;
  1376.     const videoIsPaused = this.video_.paused && !this.isSeeking_;
  1377.     const keyboardNavigationMode = this.controlsContainer_.classList.contains(
  1378.         'shaka-keyboard-navigation');
  1380.     // Keep showing the controls if the ad or video is paused, there has been
  1381.     // recent mouse movement, we're in keyboard navigation, or one of a special
  1382.     // class of elements is hovered.
  1383.     if (adIsPaused ||
  1384.         ((!this.ad_ || !this.ad_.isLinear()) && videoIsPaused) ||
  1385.         this.recentMouseMovement_ ||
  1386.         keyboardNavigationMode ||
  1387.         this.isHovered_()) {
  1388.       // Make sure the state is up-to-date before showing it.
  1389.       this.updateTimeAndSeekRange_();
  1391.       this.controlsContainer_.setAttribute('shown', 'true');
  1392.       this.fadeControlsTimer_.stop();
  1393.     } else {
  1394.       this.fadeControlsTimer_.tickAfter(/* seconds= */ this.config_.fadeDelay);
  1395.     }
  1396.   }
  1398.   /**
  1399.    * @param {!Event} event
  1400.    * @private
  1401.    */
  1402.   onContainerTouch_(event) {
  1403.     if (!this.video_.duration) {
  1404.       // Can't play yet.  Ignore.
  1405.       return;
  1406.     }
  1408.     if (this.isOpaque()) {
  1409.       this.lastTouchEventTime_ = Date.now();
  1410.       // The controls are showing.
  1411.       // Let this event continue and become a click.
  1412.     } else {
  1413.       // The controls are hidden, so show them.
  1414.       this.onMouseMove_(event);
  1415.       // Stop this event from becoming a click event.
  1416.       event.cancelable && event.preventDefault();
  1417.     }
  1418.   }
  1420.   /** @private */
  1421.   onContainerClick_() {
  1422.     if (!this.enabled_ || this.isPlayingVR()) {
  1423.       return;
  1424.     }
  1426.     if (this.anySettingsMenusAreOpen()) {
  1427.       this.hideSettingsMenusTimer_.tickNow();
  1428.     } else if (this.config_.singleClickForPlayAndPause) {
  1429.       this.onPlayPauseClick_();
  1430.     }
  1431.   }
  1433.   /** @private */
  1434.   onPlayPauseClick_() {
  1435.     if (this.ad_ && this.ad_.isLinear()) {
  1436.       this.playPauseAd();
  1437.     } else {
  1438.       this.playPausePresentation();
  1439.     }
  1440.   }
  1442.   /** @private */
  1443.   onCastStatusChange_() {
  1444.     const isCasting = this.castProxy_.isCasting();
  1445.     this.dispatchEvent(new shaka.util.FakeEvent(
  1446.         'caststatuschanged', (new Map()).set('newStatus', isCasting)));
  1448.     if (isCasting) {
  1449.       this.controlsContainer_.setAttribute('casting', 'true');
  1450.     } else {
  1451.       this.controlsContainer_.removeAttribute('casting');
  1452.     }
  1453.   }
  1455.   /** @private */
  1456.   onPlayStateChange_() {
  1457.     this.computeOpacity();
  1458.   }
  1460.   /**
  1461.    * Support controls with keyboard inputs.
  1462.    * @param {!KeyboardEvent} event
  1463.    * @private
  1464.    */
  1465.   onControlsKeyDown_(event) {
  1466.     const activeElement = document.activeElement;
  1467.     const isVolumeBar = activeElement && activeElement.classList ?
  1468.         activeElement.classList.contains('shaka-volume-bar') : false;
  1469.     const isSeekBar = activeElement && activeElement.classList &&
  1470.         activeElement.classList.contains('shaka-seek-bar');
  1471.     // Show the control panel if it is on focus or any button is pressed.
  1472.     if (this.controlsContainer_.contains(activeElement)) {
  1473.       this.onMouseMove_(event);
  1474.     }
  1476.     if (!this.config_.enableKeyboardPlaybackControls) {
  1477.       return;
  1478.     }
  1480.     const keyboardSeekDistance = this.config_.keyboardSeekDistance;
  1481.     const keyboardLargeSeekDistance = this.config_.keyboardLargeSeekDistance;
  1483.     switch (event.key) {
  1484.       case 'ArrowLeft':
  1485.         // If it's not focused on the volume bar, move the seek time backward
  1486.         // for a few sec. Otherwise, the volume will be adjusted automatically.
  1487.         if (this.seekBar_ && isSeekBar && !isVolumeBar &&
  1488.             keyboardSeekDistance > 0) {
  1489.           event.preventDefault();
  1490.           this.seek_(this.seekBar_.getValue() - keyboardSeekDistance);
  1491.         }
  1492.         break;
  1493.       case 'ArrowRight':
  1494.         // If it's not focused on the volume bar, move the seek time forward
  1495.         // for a few sec. Otherwise, the volume will be adjusted automatically.
  1496.         if (this.seekBar_ && isSeekBar && !isVolumeBar &&
  1497.             keyboardSeekDistance > 0) {
  1498.           event.preventDefault();
  1499.           this.seek_(this.seekBar_.getValue() + keyboardSeekDistance);
  1500.         }
  1501.         break;
  1502.       case 'PageDown':
  1503.         // PageDown is like ArrowLeft, but has a larger jump distance, and does
  1504.         // nothing to volume.
  1505.         if (this.seekBar_ && isSeekBar && keyboardSeekDistance > 0) {
  1506.           event.preventDefault();
  1507.           this.seek_(this.seekBar_.getValue() - keyboardLargeSeekDistance);
  1508.         }
  1509.         break;
  1510.       case 'PageUp':
  1511.         // PageDown is like ArrowRight, but has a larger jump distance, and does
  1512.         // nothing to volume.
  1513.         if (this.seekBar_ && isSeekBar && keyboardSeekDistance > 0) {
  1514.           event.preventDefault();
  1515.           this.seek_(this.seekBar_.getValue() + keyboardLargeSeekDistance);
  1516.         }
  1517.         break;
  1518.       // Jump to the beginning of the video's seek range.
  1519.       case 'Home':
  1520.         if (this.seekBar_) {
  1521.           this.seek_(this.player_.seekRange().start);
  1522.         }
  1523.         break;
  1524.       // Jump to the end of the video's seek range.
  1525.       case 'End':
  1526.         if (this.seekBar_) {
  1527.           this.seek_(this.player_.seekRange().end);
  1528.         }
  1529.         break;
  1530.       case 'f':
  1531.         if (this.isFullScreenSupported()) {
  1532.           this.toggleFullScreen();
  1533.         }
  1534.         break;
  1535.       case 'm':
  1536.         if (this.ad_ && this.ad_.isLinear()) {
  1537.           this.ad_.setMuted(!this.ad_.isMuted());
  1538.         } else {
  1539.           this.localVideo_.muted = !this.localVideo_.muted;
  1540.         }
  1541.         break;
  1542.       case 'p':
  1543.         if (this.isPiPAllowed()) {
  1544.           this.togglePiP();
  1545.         }
  1546.         break;
  1547.       // Pause or play by pressing space on the seek bar.
  1548.       case ' ':
  1549.         if (isSeekBar) {
  1550.           this.onPlayPauseClick_();
  1551.         }
  1552.         break;
  1553.     }
  1554.   }
  1556.   /**
  1557.    * Support controls with keyboard inputs.
  1558.    * @param {!KeyboardEvent} event
  1559.    * @private
  1560.    */
  1561.   onControlsKeyUp_(event) {
  1562.     // When the key is released, remove it from the pressed keys set.
  1563.     this.pressedKeys_.delete(event.key);
  1564.   }
  1566.   /**
  1567.    * Called both as an event listener and directly by the controls to initialize
  1568.    * the buffering state.
  1569.    * @private
  1570.    */
  1571.   onBufferingStateChange_() {
  1572.     if (!this.enabled_) {
  1573.       return;
  1574.     }
  1576.     shaka.ui.Utils.setDisplay(
  1577.         this.spinnerContainer_, this.player_.isBuffering());
  1578.   }
  1580.   /**
  1581.    * @return {boolean}
  1582.    * @export
  1583.    */
  1584.   isOpaque() {
  1585.     if (!this.enabled_) {
  1586.       return false;
  1587.     }
  1589.     return this.controlsContainer_.getAttribute('shown') != null ||
  1590.         this.controlsContainer_.getAttribute('casting') != null;
  1591.   }
  1593.   /**
  1594.    * Update the video's current time based on the keyboard operations.
  1595.    *
  1596.    * @param {number} currentTime
  1597.    * @private
  1598.    */
  1599.   seek_(currentTime) {
  1600.     goog.asserts.assert(
  1601.         this.seekBar_, 'Caller of seek_ must check for seekBar_ first!');
  1603.     this.seekBar_.changeTo(currentTime);
  1605.     if (this.isOpaque()) {
  1606.       // Only update the time and seek range if it's visible.
  1607.       this.updateTimeAndSeekRange_();
  1608.     }
  1609.   }
  1611.   /**
  1612.    * Called when the seek range or current time need to be updated.
  1613.    * @private
  1614.    */
  1615.   updateTimeAndSeekRange_() {
  1616.     if (this.seekBar_) {
  1617.       this.seekBar_.setValue(this.video_.currentTime);
  1618.       this.seekBar_.update();
  1620.       if (this.seekBar_.isShowing()) {
  1621.         for (const menu of this.menus_) {
  1622.           menu.classList.remove('shaka-low-position');
  1623.         }
  1624.       } else {
  1625.         for (const menu of this.menus_) {
  1626.           menu.classList.add('shaka-low-position');
  1627.         }
  1628.       }
  1629.     }
  1631.     this.dispatchEvent(new shaka.util.FakeEvent('timeandseekrangeupdated'));
  1632.   }
  1634.   /**
  1635.    * Add behaviors for keyboard navigation.
  1636.    * 1. Add blue outline for focused elements.
  1637.    * 2. Allow exiting overflow settings menus by pressing Esc key.
  1638.    * 3. When navigating on overflow settings menu by pressing Tab
  1639.    *    key or Shift+Tab keys keep the focus inside overflow menu.
  1640.    *
  1641.    * @param {!KeyboardEvent} event
  1642.    * @private
  1643.    */
  1644.   onWindowKeyDown_(event) {
  1645.     // Add the key to the pressed keys set when it's pressed.
  1646.     this.pressedKeys_.add(event.key);
  1648.     const anySettingsMenusAreOpen = this.anySettingsMenusAreOpen();
  1650.     if (event.key == 'Tab') {
  1651.       // Enable blue outline for focused elements for keyboard
  1652.       // navigation.
  1653.       this.controlsContainer_.classList.add('shaka-keyboard-navigation');
  1654.       this.computeOpacity();
  1655.       this.eventManager_.listen(window, 'mousedown', () => this.onMouseDown_());
  1656.     }
  1658.     // If escape key was pressed, close any open settings menus.
  1659.     if (event.key == 'Escape') {
  1660.       this.hideSettingsMenusTimer_.tickNow();
  1661.     }
  1663.     if (anySettingsMenusAreOpen && this.pressedKeys_.has('Tab')) {
  1664.       // If Tab key or Shift+Tab keys are pressed when navigating through
  1665.       // an overflow settings menu, keep the focus to loop inside the
  1666.       // overflow menu.
  1667.       this.keepFocusInMenu_(event);
  1668.     }
  1669.   }
  1671.   /**
  1672.    * When the user is using keyboard to navigate inside the overflow settings
  1673.    * menu (pressing Tab key to go forward, or pressing Shift + Tab keys to go
  1674.    * backward), make sure it's focused only on the elements of the overflow
  1675.    * panel.
  1676.    *
  1677.    * This is called by onWindowKeyDown_() function, when there's a settings
  1678.    * overflow menu open, and the Tab key / Shift+Tab keys are pressed.
  1679.    *
  1680.    * @param {!Event} event
  1681.    * @private
  1682.    */
  1683.   keepFocusInMenu_(event) {
  1684.     const openSettingsMenus = this.menus_.filter(
  1685.         (menu) => !menu.classList.contains('shaka-hidden'));
  1686.     if (!openSettingsMenus.length) {
  1687.       // For example, this occurs when you hit escape to close the menu.
  1688.       return;
  1689.     }
  1691.     const settingsMenu = openSettingsMenus[0];
  1692.     if (settingsMenu.childNodes.length) {
  1693.       // Get the first and the last displaying child element from the overflow
  1694.       // menu.
  1695.       let firstShownChild = settingsMenu.firstElementChild;
  1696.       while (firstShownChild &&
  1697.              firstShownChild.classList.contains('shaka-hidden')) {
  1698.         firstShownChild = firstShownChild.nextElementSibling;
  1699.       }
  1701.       let lastShownChild = settingsMenu.lastElementChild;
  1702.       while (lastShownChild &&
  1703.              lastShownChild.classList.contains('shaka-hidden')) {
  1704.         lastShownChild = lastShownChild.previousElementSibling;
  1705.       }
  1707.       const activeElement = document.activeElement;
  1708.       // When only Tab key is pressed, navigate to the next elememnt.
  1709.       // If it's currently focused on the last shown child element of the
  1710.       // overflow menu, let the focus move to the first child element of the
  1711.       // menu.
  1712.       // When Tab + Shift keys are pressed at the same time, navigate to the
  1713.       // previous element. If it's currently focused on the first shown child
  1714.       // element of the overflow menu, let the focus move to the last child
  1715.       // element of the menu.
  1716.       if (this.pressedKeys_.has('Shift')) {
  1717.         if (activeElement == firstShownChild) {
  1718.           event.preventDefault();
  1719.           lastShownChild.focus();
  1720.         }
  1721.       } else {
  1722.         if (activeElement == lastShownChild) {
  1723.           event.preventDefault();
  1724.           firstShownChild.focus();
  1725.         }
  1726.       }
  1727.     }
  1728.   }
  1730.   /**
  1731.    * For keyboard navigation, we use blue borders to highlight the active
  1732.    * element. If we detect that a mouse is being used, remove the blue border
  1733.    * from the active element.
  1734.    * @private
  1735.    */
  1736.   onMouseDown_() {
  1737.     this.eventManager_.unlisten(window, 'mousedown');
  1738.   }
  1740.   /**
  1741.    * @export
  1742.    */
  1743.   showUI() {
  1744.     const event = new Event('mousemove', {bubbles: false, cancelable: false});
  1745.     this.onMouseMove_(event);
  1746.   }
  1748.   /**
  1749.    * @export
  1750.    */
  1751.   hideUI() {
  1752.     this.onMouseLeave_();
  1753.   }
  1755.   /**
  1756.    * @return {shaka.ui.VRManager}
  1757.    */
  1758.   getVR() {
  1759.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1760.     return this.vr_;
  1761.   }
  1763.   /**
  1764.    * Returns if a VR is capable.
  1765.    *
  1766.    * @return {boolean}
  1767.    * @export
  1768.    */
  1769.   canPlayVR() {
  1770.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1771.     return this.vr_.canPlayVR();
  1772.   }
  1774.   /**
  1775.    * Returns if a VR is supported.
  1776.    *
  1777.    * @return {boolean}
  1778.    * @export
  1779.    */
  1780.   isPlayingVR() {
  1781.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1782.     return this.vr_.isPlayingVR();
  1783.   }
  1785.   /**
  1786.    * Reset VR view.
  1787.    */
  1788.   resetVR() {
  1789.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1790.     this.vr_.reset();
  1791.   }
  1793.   /**
  1794.    * Get the angle of the north.
  1795.    *
  1796.    * @return {?number}
  1797.    * @export
  1798.    */
  1799.   getVRNorth() {
  1800.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1801.     return this.vr_.getNorth();
  1802.   }
  1804.   /**
  1805.    * Returns the angle of the current field of view displayed in degrees.
  1806.    *
  1807.    * @return {?number}
  1808.    * @export
  1809.    */
  1810.   getVRFieldOfView() {
  1811.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1812.     return this.vr_.getFieldOfView();
  1813.   }
  1815.   /**
  1816.    * Changing the field of view increases or decreases the portion of the video
  1817.    * that is viewed at one time. If the field of view is decreased, a small
  1818.    * part of the video will be seen, but with more detail. If the field of view
  1819.    * is increased, a larger part of the video will be seen, but with less
  1820.    * detail.
  1821.    *
  1822.    * @param {number} fieldOfView In degrees
  1823.    * @export
  1824.    */
  1825.   setVRFieldOfView(fieldOfView) {
  1826.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1827.     this.vr_.setFieldOfView(fieldOfView);
  1828.   }
  1830.   /**
  1831.    * Toggle stereoscopic mode.
  1832.    *
  1833.    * @export
  1834.    */
  1835.   toggleStereoscopicMode() {
  1836.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1837.     this.vr_.toggleStereoscopicMode();
  1838.   }
  1840.   /**
  1841.    * Returns true if stereoscopic mode is enabled.
  1842.    *
  1843.    * @return {boolean}
  1844.    */
  1845.   isStereoscopicModeEnabled() {
  1846.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1847.     return this.vr_.isStereoscopicModeEnabled();
  1848.   }
  1850.   /**
  1851.    * Increment the yaw in X angle in degrees.
  1852.    *
  1853.    * @param {number} angle In degrees
  1854.    * @export
  1855.    */
  1856.   incrementYaw(angle) {
  1857.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1858.     this.vr_.incrementYaw(angle);
  1859.   }
  1861.   /**
  1862.    * Increment the pitch in X angle in degrees.
  1863.    *
  1864.    * @param {number} angle In degrees
  1865.    * @export
  1866.    */
  1867.   incrementPitch(angle) {
  1868.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1869.     this.vr_.incrementPitch(angle);
  1870.   }
  1872.   /**
  1873.    * Increment the roll in X angle in degrees.
  1874.    *
  1875.    * @param {number} angle In degrees
  1876.    * @export
  1877.    */
  1878.   incrementRoll(angle) {
  1879.     goog.asserts.assert(this.vr_ != null, 'Should have a VR manager!');
  1880.     this.vr_.incrementRoll(angle);
  1881.   }
  1883.   /**
  1884.    * Create a localization instance already pre-loaded with all the locales that
  1885.    * we support.
  1886.    *
  1887.    * @return {!shaka.ui.Localization}
  1888.    * @private
  1889.    */
  1890.   static createLocalization_() {
  1891.     /** @type {string} */
  1892.     const fallbackLocale = 'en';
  1894.     /** @type {!shaka.ui.Localization} */
  1895.     const localization = new shaka.ui.Localization(fallbackLocale);
  1896.     shaka.ui.Locales.addTo(localization);
  1897.     localization.changeLocale(navigator.languages || []);
  1899.     return localization;
  1900.   }
  1901. };
  1904. /**
  1905.  * @event shaka.ui.Controls#CastStatusChangedEvent
  1906.  * @description Fired upon receiving a 'caststatuschanged' event from
  1907.  *    the cast proxy.
  1908.  * @property {string} type
  1909.  *   'caststatuschanged'
  1910.  * @property {boolean} newStatus
  1911.  *  The new status of the application. True for 'is casting' and
  1912.  *  false otherwise.
  1913.  * @exportDoc
  1914.  */
  1917. /**
  1918.  * @event shaka.ui.Controls#VRStatusChangedEvent
  1919.  * @description Fired when VR status change
  1920.  * @property {string} type
  1921.  *   'vrstatuschanged'
  1922.  * @exportDoc
  1923.  */
  1926. /**
  1927.  * @event shaka.ui.Controls#SubMenuOpenEvent
  1928.  * @description Fired when one of the overflow submenus is opened
  1929.  *    (e. g. language/resolution/subtitle selection).
  1930.  * @property {string} type
  1931.  *   'submenuopen'
  1932.  * @exportDoc
  1933.  */
  1936. /**
  1937.  * @event shaka.ui.Controls#CaptionSelectionUpdatedEvent
  1938.  * @description Fired when the captions/subtitles menu has finished updating.
  1939.  * @property {string} type
  1940.  *   'captionselectionupdated'
  1941.  * @exportDoc
  1942.  */
  1945. /**
  1946.  * @event shaka.ui.Controls#ResolutionSelectionUpdatedEvent
  1947.  * @description Fired when the resolution menu has finished updating.
  1948.  * @property {string} type
  1949.  *   'resolutionselectionupdated'
  1950.  * @exportDoc
  1951.  */
  1954. /**
  1955.  * @event shaka.ui.Controls#LanguageSelectionUpdatedEvent
  1956.  * @description Fired when the audio language menu has finished updating.
  1957.  * @property {string} type
  1958.  *   'languageselectionupdated'
  1959.  * @exportDoc
  1960.  */
  1963. /**
  1964.  * @event shaka.ui.Controls#ErrorEvent
  1965.  * @description Fired when something went wrong with the controls.
  1966.  * @property {string} type
  1967.  *   'error'
  1968.  * @property {!shaka.util.Error} detail
  1969.  *   An object which contains details on the error.  The error's 'category'
  1970.  *   and 'code' properties will identify the specific error that occurred.
  1971.  *   In an uncompiled build, you can also use the 'message' and 'stack'
  1972.  *   properties to debug.
  1973.  * @exportDoc
  1974.  */
  1977. /**
  1978.  * @event shaka.ui.Controls#TimeAndSeekRangeUpdatedEvent
  1979.  * @description Fired when the time and seek range elements have finished
  1980.  *    updating.
  1981.  * @property {string} type
  1982.  *   'timeandseekrangeupdated'
  1983.  * @exportDoc
  1984.  */
  1987. /**
  1988.  * @event shaka.ui.Controls#UIUpdatedEvent
  1989.  * @description Fired after a call to ui.configure() once the UI has finished
  1990.  *    updating.
  1991.  * @property {string} type
  1992.  *   'uiupdated'
  1993.  * @exportDoc
  1994.  */
  1996. /** @private {!Map.<string, !shaka.extern.IUIElement.Factory>} */
  1997. shaka.ui.ControlsPanel.elementNamesToFactories_ = new Map();
  1999. /** @private {?shaka.extern.IUISeekBar.Factory} */
  2000. shaka.ui.ControlsPanel.seekBarFactory_ = new shaka.ui.SeekBar.Factory();