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