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