Source: ui/ui.js

  1. /*! @license
  2.  * Shaka Player
  3.  * Copyright 2016 Google LLC
  4.  * SPDX-License-Identifier: Apache-2.0
  5.  */
  8. goog.provide('shaka.ui.Overlay');
  9. goog.provide('shaka.ui.Overlay.FailReasonCode');
  10. goog.provide('shaka.ui.Overlay.TrackLabelFormat');
  12. goog.require('goog.asserts');
  13. goog.require('shaka.Player');
  14. goog.require('shaka.log');
  15. goog.require('shaka.polyfill');
  16. goog.require('shaka.ui.Controls');
  17. goog.require('shaka.util.ConfigUtils');
  18. goog.require('shaka.util.Dom');
  19. goog.require('shaka.util.FakeEvent');
  20. goog.require('shaka.util.IDestroyable');
  21. goog.require('shaka.util.Platform');
  23. /**
  24.  * @implements {shaka.util.IDestroyable}
  25.  * @export
  26.  */
  27. shaka.ui.Overlay = class {
  28.   /**
  29.    * @param {!shaka.Player} player
  30.    * @param {!HTMLElement} videoContainer
  31.    * @param {!HTMLMediaElement} video
  32.    * @param {?HTMLCanvasElement=} vrCanvas
  33.    */
  34.   constructor(player, videoContainer, video, vrCanvas = null) {
  35.     /** @private {shaka.Player} */
  36.     this.player_ = player;
  38.     /** @private {HTMLElement} */
  39.     this.videoContainer_ = videoContainer;
  41.     /** @private {!shaka.extern.UIConfiguration} */
  42.     this.config_ = this.defaultConfig_();
  44.     // Make sure this container is discoverable and that the UI can be reached
  45.     // through it.
  46.     videoContainer['dataset']['shakaPlayerContainer'] = '';
  47.     videoContainer['ui'] = this;
  49.     // Tag the container for mobile platforms, to allow different styles.
  50.     if (this.isMobile()) {
  51.       videoContainer.classList.add('shaka-mobile');
  52.     }
  54.     /** @private {shaka.ui.Controls} */
  55.     this.controls_ = new shaka.ui.Controls(
  56.         player, videoContainer, video, vrCanvas, this.config_);
  58.     // Run the initial setup so that no configure() call is required for default
  59.     // settings.
  60.     this.configure({});
  62.     // If the browser's native controls are disabled, use UI TextDisplayer.
  63.     if (!video.controls) {
  64.       player.setVideoContainer(videoContainer);
  65.     }
  67.     videoContainer['ui'] = this;
  68.     video['ui'] = this;
  69.   }
  72.   /**
  73.    * @override
  74.    * @export
  75.    */
  76.   async destroy() {
  77.     if (this.controls_) {
  78.       await this.controls_.destroy();
  79.     }
  80.     this.controls_ = null;
  82.     if (this.player_) {
  83.       await this.player_.destroy();
  84.     }
  85.     this.player_ = null;
  86.   }
  89.   /**
  90.    * Detects if this is a mobile platform, in case you want to choose a
  91.    * different UI configuration on mobile devices.
  92.    *
  93.    * @return {boolean}
  94.    * @export
  95.    */
  96.   isMobile() {
  97.     return shaka.util.Platform.isMobile();
  98.   }
  101.   /**
  102.    * @return {!shaka.extern.UIConfiguration}
  103.    * @export
  104.    */
  105.   getConfiguration() {
  106.     const ret = this.defaultConfig_();
  107.     shaka.util.ConfigUtils.mergeConfigObjects(
  108.         ret, this.config_, this.defaultConfig_(),
  109.         /* overrides= */ {}, /* path= */ '');
  110.     return ret;
  111.   }
  114.   /**
  115.    * @param {string|!Object} config This should either be a field name or an
  116.    *   object following the form of {@link shaka.extern.UIConfiguration}, where
  117.    *   you may omit any field you do not wish to change.
  118.    * @param {*=} value This should be provided if the previous parameter
  119.    *   was a string field name.
  120.    * @export
  121.    */
  122.   configure(config, value) {
  123.     goog.asserts.assert(typeof(config) == 'object' || arguments.length == 2,
  124.         'String configs should have values!');
  126.     // ('fieldName', value) format
  127.     if (arguments.length == 2 && typeof(config) == 'string') {
  128.       config = shaka.util.ConfigUtils.convertToConfigObject(config, value);
  129.     }
  131.     goog.asserts.assert(typeof(config) == 'object', 'Should be an object!');
  133.     shaka.util.ConfigUtils.mergeConfigObjects(
  134.         this.config_, config, this.defaultConfig_(),
  135.         /* overrides= */ {}, /* path= */ '');
  137.     // If a cast receiver app id has been given, add a cast button to the UI
  138.     if (this.config_.castReceiverAppId &&
  139.         !this.config_.overflowMenuButtons.includes('cast')) {
  140.       this.config_.overflowMenuButtons.push('cast');
  141.     }
  143.     goog.asserts.assert(this.player_ != null, 'Should have a player!');
  145.     this.controls_.configure(this.config_);
  147.     this.controls_.dispatchEvent(new shaka.util.FakeEvent('uiupdated'));
  148.   }
  151.   /**
  152.    * @return {shaka.ui.Controls}
  153.    * @export
  154.    */
  155.   getControls() {
  156.     return this.controls_;
  157.   }
  160.   /**
  161.    * Enable or disable the custom controls.
  162.    *
  163.    * @param {boolean} enabled
  164.    * @export
  165.    */
  166.   setEnabled(enabled) {
  167.     this.controls_.setEnabledShakaControls(enabled);
  168.   }
  171.   /**
  172.    * @return {!shaka.extern.UIConfiguration}
  173.    * @private
  174.    */
  175.   defaultConfig_() {
  176.     const config = {
  177.       controlPanelElements: [
  178.         'play_pause',
  179.         'time_and_duration',
  180.         'spacer',
  181.         'mute',
  182.         'volume',
  183.         'fullscreen',
  184.         'overflow_menu',
  185.       ],
  186.       overflowMenuButtons: [
  187.         'captions',
  188.         'quality',
  189.         'language',
  190.         'chapter',
  191.         'picture_in_picture',
  192.         'cast',
  193.         'playback_rate',
  194.         'recenter_vr',
  195.         'toggle_stereoscopic',
  196.       ],
  197.       statisticsList: [
  198.         'width',
  199.         'height',
  200.         'corruptedFrames',
  201.         'decodedFrames',
  202.         'droppedFrames',
  203.         'drmTimeSeconds',
  204.         'licenseTime',
  205.         'liveLatency',
  206.         'loadLatency',
  207.         'bufferingTime',
  208.         'manifestTimeSeconds',
  209.         'estimatedBandwidth',
  210.         'streamBandwidth',
  211.         'maxSegmentDuration',
  212.         'pauseTime',
  213.         'playTime',
  214.         'completionPercent',
  215.         'manifestSizeBytes',
  216.         'bytesDownloaded',
  217.         'nonFatalErrorCount',
  218.         'manifestPeriodCount',
  219.         'manifestGapCount',
  220.       ],
  221.       adStatisticsList: [
  222.         'loadTimes',
  223.         'averageLoadTime',
  224.         'started',
  225.         'playedCompletely',
  226.         'skipped',
  227.         'errors',
  228.       ],
  229.       contextMenuElements: [
  230.         'loop',
  231.         'picture_in_picture',
  232.         'save_video_frame',
  233.         'statistics',
  234.         'ad_statistics',
  235.       ],
  236.       playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
  237.       fastForwardRates: [2, 4, 8, 1],
  238.       rewindRates: [-1, -2, -4, -8],
  239.       addSeekBar: true,
  240.       addBigPlayButton: false,
  241.       customContextMenu: false,
  242.       castReceiverAppId: '',
  243.       castAndroidReceiverCompatible: false,
  244.       clearBufferOnQualityChange: true,
  245.       showUnbufferedStart: false,
  246.       seekBarColors: {
  247.         base: 'rgba(255, 255, 255, 0.3)',
  248.         buffered: 'rgba(255, 255, 255, 0.54)',
  249.         played: 'rgb(255, 255, 255)',
  250.         adBreaks: 'rgb(255, 204, 0)',
  251.       },
  252.       volumeBarColors: {
  253.         base: 'rgba(255, 255, 255, 0.54)',
  254.         level: 'rgb(255, 255, 255)',
  255.       },
  256.       trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
  257.       textTrackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
  258.       fadeDelay: 0,
  259.       doubleClickForFullscreen: true,
  260.       singleClickForPlayAndPause: true,
  261.       enableKeyboardPlaybackControls: true,
  262.       enableFullscreenOnRotation: true,
  263.       forceLandscapeOnFullscreen: true,
  264.       enableTooltips: false,
  265.       keyboardSeekDistance: 5,
  266.       keyboardLargeSeekDistance: 60,
  267.       fullScreenElement: this.videoContainer_,
  268.       preferDocumentPictureInPicture: true,
  269.       showAudioChannelCountVariants: true,
  270.       seekOnTaps: navigator.maxTouchPoints > 0,
  271.       tapSeekDistance: 10,
  272.       refreshTickInSeconds: 0.125,
  273.       displayInVrMode: false,
  274.       defaultVrProjectionMode: 'equirectangular',
  275.       setupMediaSession: true,
  276.       preferVideoFullScreenInVisionOS: false,
  277.     };
  279.     // eslint-disable-next-line no-restricted-syntax
  280.     if ('remote' in HTMLMediaElement.prototype) {
  281.       config.overflowMenuButtons.push('remote');
  282.     } else if (window.WebKitPlaybackTargetAvailabilityEvent) {
  283.       config.overflowMenuButtons.push('airplay');
  284.     }
  286.     // On mobile, by default, hide the volume slide and the small play/pause
  287.     // button and show the big play/pause button in the center.
  288.     // This is in line with default styles in Chrome.
  289.     if (this.isMobile()) {
  290.       config.addBigPlayButton = true;
  291.       config.controlPanelElements = config.controlPanelElements.filter(
  292.           (name) => name != 'play_pause' && name != 'volume');
  293.     }
  295.     // Set this button here to push it at the end.
  296.     config.overflowMenuButtons.push('save_video_frame');
  298.     return config;
  299.   }
  301.   /**
  302.    * @private
  303.    */
  304.   static async scanPageForShakaElements_() {
  305.     // Install built-in polyfills to patch browser incompatibilities.
  306.     shaka.polyfill.installAll();
  307.     // Check to see if the browser supports the basic APIs Shaka needs.
  308.     if (!shaka.Player.isBrowserSupported()) {
  309.       shaka.log.error('Shaka Player does not support this browser. ' +
  310.           'Please see https://tinyurl.com/y7s4j9tr for the list of ' +
  311.           'supported browsers.');
  313.       // After scanning the page for elements, fire a special "loaded" event for
  314.       // when the load fails. This will allow the page to react to the failure.
  315.       shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  316.           shaka.ui.Overlay.FailReasonCode.NO_BROWSER_SUPPORT);
  317.       return;
  318.     }
  320.     // Look for elements marked 'data-shaka-player-container'
  321.     // on the page. These will be used to create our default
  322.     // UI.
  323.     const containers = document.querySelectorAll(
  324.         '[data-shaka-player-container]');
  326.     // Look for elements marked 'data-shaka-player'. They will
  327.     // either be used in our default UI or with native browser
  328.     // controls.
  329.     const videos = document.querySelectorAll(
  330.         '[data-shaka-player]');
  332.     // Look for elements marked 'data-shaka-player-canvas'
  333.     // on the page. These will be used to create our default
  334.     // UI.
  335.     const canvases = document.querySelectorAll(
  336.         '[data-shaka-player-canvas]');
  338.     // Look for elements marked 'data-shaka-player-vr-canvas'
  339.     // on the page. These will be used to create our default
  340.     // UI.
  341.     const vrCanvases = document.querySelectorAll(
  342.         '[data-shaka-player-vr-canvas]');
  344.     if (!videos.length && !containers.length) {
  345.       // No elements have been tagged with shaka attributes.
  346.     } else if (videos.length && !containers.length) {
  347.       // Just the video elements were provided.
  348.       for (const video of videos) {
  349.         // If the app has already manually created a UI for this element,
  350.         // don't create another one.
  351.         if (video['ui']) {
  352.           continue;
  353.         }
  354.         goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  355.             'Should be a video element!');
  357.         const container = document.createElement('div');
  358.         const videoParent = video.parentElement;
  359.         videoParent.replaceChild(container, video);
  360.         container.appendChild(video);
  361.         const {lcevcCanvas, vrCanvas} =
  362.             shaka.ui.Overlay.findOrMakeSpecialCanvases_(
  363.                 container, canvases, vrCanvases);
  364.         shaka.ui.Overlay.setupUIandAutoLoad_(
  365.             container, video, lcevcCanvas, vrCanvas);
  366.       }
  367.     } else {
  368.       for (const container of containers) {
  369.         // If the app has already manually created a UI for this element,
  370.         // don't create another one.
  371.         if (container['ui']) {
  372.           continue;
  373.         }
  374.         goog.asserts.assert(container.tagName.toLowerCase() == 'div',
  375.             'Container should be a div!');
  377.         let currentVideo = null;
  378.         for (const video of videos) {
  379.           goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  380.               'Should be a video element!');
  381.           if (video.parentElement == container) {
  382.             currentVideo = video;
  383.             break;
  384.           }
  385.         }
  387.         if (!currentVideo) {
  388.           currentVideo = document.createElement('video');
  389.           currentVideo.setAttribute('playsinline', '');
  390.           container.appendChild(currentVideo);
  391.         }
  392.         const {lcevcCanvas, vrCanvas} =
  393.             shaka.ui.Overlay.findOrMakeSpecialCanvases_(
  394.                 container, canvases, vrCanvases);
  395.         try {
  396.           // eslint-disable-next-line no-await-in-loop
  397.           await shaka.ui.Overlay.setupUIandAutoLoad_(
  398.               container, currentVideo, lcevcCanvas, vrCanvas);
  399.         } catch (e) {
  400.           // This can fail if, for example, not every player file has loaded.
  401.           // Ad-block is a likely cause for this sort of failure.
  402.           shaka.log.error('Error setting up Shaka Player', e);
  403.           shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  404.               shaka.ui.Overlay.FailReasonCode.PLAYER_FAILED_TO_LOAD);
  405.           return;
  406.         }
  407.       }
  408.     }
  410.     // After scanning the page for elements, fire the "loaded" event.  This will
  411.     // let apps know they can use the UI library programmatically now, even if
  412.     // they didn't have any Shaka-related elements declared in their HTML.
  413.     shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-loaded');
  414.   }
  417.   /**
  418.    * @param {string} eventName
  419.    * @param {shaka.ui.Overlay.FailReasonCode=} reasonCode
  420.    * @private
  421.    */
  422.   static dispatchLoadedEvent_(eventName, reasonCode) {
  423.     let detail = null;
  424.     if (reasonCode != undefined) {
  425.       detail = {
  426.         'reasonCode': reasonCode,
  427.       };
  428.     }
  429.     const uiLoadedEvent = new CustomEvent(eventName, {detail});
  430.     document.dispatchEvent(uiLoadedEvent);
  431.   }
  434.   /**
  435.    * @param {!Element} container
  436.    * @param {!Element} video
  437.    * @param {!Element} lcevcCanvas
  438.    * @param {!Element} vrCanvas
  439.    * @private
  440.    */
  441.   static async setupUIandAutoLoad_(container, video, lcevcCanvas, vrCanvas) {
  442.     // Create the UI
  443.     const player = new shaka.Player();
  444.     const ui = new shaka.ui.Overlay(player,
  445.         shaka.util.Dom.asHTMLElement(container),
  446.         shaka.util.Dom.asHTMLMediaElement(video),
  447.         shaka.util.Dom.asHTMLCanvasElement(vrCanvas));
  449.     // Attach Canvas used for LCEVC Decoding
  450.     player.attachCanvas(/** @type {HTMLCanvasElement} */(lcevcCanvas));
  452.     // Get and configure cast app id.
  453.     let castAppId = '';
  455.     // Get and configure cast Android Receiver Compatibility
  456.     let castAndroidReceiverCompatible = false;
  458.     // Cast receiver id can be specified on either container or video.
  459.     // It should not be provided on both. If it was, we will use the last
  460.     // one we saw.
  461.     if (container['dataset'] &&
  462.         container['dataset']['shakaPlayerCastReceiverId']) {
  463.       castAppId = container['dataset']['shakaPlayerCastReceiverId'];
  464.       castAndroidReceiverCompatible =
  465.           container['dataset']['shakaPlayerCastAndroidReceiverCompatible'] ===
  466.           'true';
  467.     } else if (video['dataset'] &&
  468.                video['dataset']['shakaPlayerCastReceiverId']) {
  469.       castAppId = video['dataset']['shakaPlayerCastReceiverId'];
  470.       castAndroidReceiverCompatible =
  471.         video['dataset']['shakaPlayerCastAndroidReceiverCompatible'] === 'true';
  472.     }
  474.     if (castAppId.length) {
  475.       ui.configure({castReceiverAppId: castAppId,
  476.         castAndroidReceiverCompatible: castAndroidReceiverCompatible});
  477.     }
  479.     if (shaka.util.Dom.asHTMLMediaElement(video).controls) {
  480.       ui.getControls().setEnabledNativeControls(true);
  481.     }
  483.     // Get the source and load it
  484.     // Source can be specified either on the video element:
  485.     //  <video src='foo.m2u8'></video>
  486.     // or as a separate element inside the video element:
  487.     //  <video>
  488.     //    <source src='foo.m2u8'/>
  489.     //  </video>
  490.     // It should not be specified on both.
  491.     const urls = [];
  492.     const src = video.getAttribute('src');
  493.     if (src) {
  494.       urls.push(src);
  495.       video.removeAttribute('src');
  496.     }
  498.     for (const source of video.getElementsByTagName('source')) {
  499.       urls.push(/** @type {!HTMLSourceElement} */ (source).src);
  500.       video.removeChild(source);
  501.     }
  503.     await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
  505.     for (const url of urls) {
  506.       try { // eslint-disable-next-line no-await-in-loop
  507.         await ui.getControls().getPlayer().load(url);
  508.         break;
  509.       } catch (e) {
  510.         shaka.log.error('Error auto-loading asset', e);
  511.       }
  512.     }
  513.   }
  516.   /**
  517.    * @param {!Element} container
  518.    * @param {!NodeList.<!Element>} canvases
  519.    * @param {!NodeList.<!Element>} vrCanvases
  520.    * @return {{lcevcCanvas: !Element, vrCanvas: !Element}}
  521.    * @private
  522.    */
  523.   static findOrMakeSpecialCanvases_(container, canvases, vrCanvases) {
  524.     let lcevcCanvas = null;
  525.     for (const canvas of canvases) {
  526.       goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
  527.           'Should be a canvas element!');
  528.       if (canvas.parentElement == container) {
  529.         lcevcCanvas = canvas;
  530.         break;
  531.       }
  532.     }
  533.     if (!lcevcCanvas) {
  534.       lcevcCanvas = document.createElement('canvas');
  535.       lcevcCanvas.classList.add('shaka-canvas-container');
  536.       container.appendChild(lcevcCanvas);
  537.     }
  538.     let vrCanvas = null;
  539.     for (const canvas of vrCanvases) {
  540.       goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
  541.           'Should be a canvas element!');
  542.       if (canvas.parentElement == container) {
  543.         vrCanvas = canvas;
  544.         break;
  545.       }
  546.     }
  547.     if (!vrCanvas) {
  548.       vrCanvas = document.createElement('canvas');
  549.       vrCanvas.classList.add('shaka-vr-canvas-container');
  550.       container.appendChild(vrCanvas);
  551.     }
  552.     return {
  553.       lcevcCanvas,
  554.       vrCanvas,
  555.     };
  556.   }
  557. };
  559. /**
  560.  * Describes what information should show up in labels for selecting audio
  561.  * variants and text tracks.
  562.  *
  563.  * @enum {number}
  564.  * @export
  565.  */
  566. shaka.ui.Overlay.TrackLabelFormat = {
  567.   'LANGUAGE': 0,
  568.   'ROLE': 1,
  569.   'LANGUAGE_ROLE': 2,
  570.   'LABEL': 3,
  571. };
  573. /**
  574.  * Describes the possible reasons that the UI might fail to load.
  575.  *
  576.  * @enum {number}
  577.  * @export
  578.  */
  579. shaka.ui.Overlay.FailReasonCode = {
  580.   'NO_BROWSER_SUPPORT': 0,
  581.   'PLAYER_FAILED_TO_LOAD': 1,
  582. };
  585. if (document.readyState == 'complete') {
  586.   // Don't fire this event synchronously.  In a compiled bundle, the "shaka"
  587.   // namespace might not be exported to the window until after this point.
  588.   (async () => {
  589.     await Promise.resolve();
  590.     shaka.ui.Overlay.scanPageForShakaElements_();
  591.   })();
  592. } else {
  593.   window.addEventListener('load', shaka.ui.Overlay.scanPageForShakaElements_);
  594. }