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.    */
  33.   constructor(player, videoContainer, video) {
  34.     /** @private {shaka.Player} */
  35.     this.player_ = player;
  37.     /** @private {HTMLElement} */
  38.     this.videoContainer_ = videoContainer;
  40.     /** @private {!shaka.extern.UIConfiguration} */
  41.     this.config_ = this.defaultConfig_();
  43.     // Make sure this container is discoverable and that the UI can be reached
  44.     // through it.
  45.     videoContainer['dataset']['shakaPlayerContainer'] = '';
  46.     videoContainer['ui'] = this;
  48.     // Tag the container for mobile platforms, to allow different styles.
  49.     if (this.isMobile()) {
  50.       videoContainer.classList.add('shaka-mobile');
  51.     }
  53.     /** @private {shaka.ui.Controls} */
  54.     this.controls_ = new shaka.ui.Controls(
  55.         player, videoContainer, video, this.config_);
  57.     // Run the initial setup so that no configure() call is required for default
  58.     // settings.
  59.     this.configure({});
  61.     // If the browser's native controls are disabled, use UI TextDisplayer.
  62.     if (!video.controls) {
  63.       player.setVideoContainer(videoContainer);
  64.     }
  66.     videoContainer['ui'] = this;
  67.     video['ui'] = this;
  68.   }
  71.   /**
  72.    * @override
  73.    * @export
  74.    */
  75.   async destroy() {
  76.     if (this.controls_) {
  77.       await this.controls_.destroy();
  78.     }
  79.     this.controls_ = null;
  81.     if (this.player_) {
  82.       await this.player_.destroy();
  83.     }
  84.     this.player_ = null;
  85.   }
  88.   /**
  89.    * Detects if this is a mobile platform, in case you want to choose a
  90.    * different UI configuration on mobile devices.
  91.    *
  92.    * @return {boolean}
  93.    * @export
  94.    */
  95.   isMobile() {
  96.     return shaka.util.Platform.isMobile();
  97.   }
  100.   /**
  101.    * @return {!shaka.extern.UIConfiguration}
  102.    * @export
  103.    */
  104.   getConfiguration() {
  105.     const ret = this.defaultConfig_();
  106.     shaka.util.ConfigUtils.mergeConfigObjects(
  107.         ret, this.config_, this.defaultConfig_(),
  108.         /* overrides= */ {}, /* path= */ '');
  109.     return ret;
  110.   }
  113.   /**
  114.    * @param {string|!Object} config This should either be a field name or an
  115.    *   object following the form of {@link shaka.extern.UIConfiguration}, where
  116.    *   you may omit any field you do not wish to change.
  117.    * @param {*=} value This should be provided if the previous parameter
  118.    *   was a string field name.
  119.    * @export
  120.    */
  121.   configure(config, value) {
  122.     goog.asserts.assert(typeof(config) == 'object' || arguments.length == 2,
  123.         'String configs should have values!');
  125.     // ('fieldName', value) format
  126.     if (arguments.length == 2 && typeof(config) == 'string') {
  127.       config = shaka.util.ConfigUtils.convertToConfigObject(config, value);
  128.     }
  130.     goog.asserts.assert(typeof(config) == 'object', 'Should be an object!');
  132.     shaka.util.ConfigUtils.mergeConfigObjects(
  133.         this.config_, config, this.defaultConfig_(),
  134.         /* overrides= */ {}, /* path= */ '');
  136.     // If a cast receiver app id has been given, add a cast button to the UI
  137.     if (this.config_.castReceiverAppId &&
  138.         !this.config_.overflowMenuButtons.includes('cast')) {
  139.       this.config_.overflowMenuButtons.push('cast');
  140.     }
  142.     goog.asserts.assert(this.player_ != null, 'Should have a player!');
  144.     this.controls_.configure(this.config_);
  146.     this.controls_.dispatchEvent(new shaka.util.FakeEvent('uiupdated'));
  147.   }
  150.   /**
  151.    * @return {shaka.ui.Controls}
  152.    * @export
  153.    */
  154.   getControls() {
  155.     return this.controls_;
  156.   }
  159.   /**
  160.    * Enable or disable the custom controls.
  161.    *
  162.    * @param {boolean} enabled
  163.    * @export
  164.    */
  165.   setEnabled(enabled) {
  166.     this.controls_.setEnabledShakaControls(enabled);
  167.   }
  170.   /**
  171.    * @return {!shaka.extern.UIConfiguration}
  172.    * @private
  173.    */
  174.   defaultConfig_() {
  175.     const config = {
  176.       controlPanelElements: [
  177.         'play_pause',
  178.         'time_and_duration',
  179.         'spacer',
  180.         'mute',
  181.         'volume',
  182.         'fullscreen',
  183.         'overflow_menu',
  184.       ],
  185.       overflowMenuButtons: [
  186.         'captions',
  187.         'quality',
  188.         'language',
  189.         'picture_in_picture',
  190.         'cast',
  191.         'playback_rate',
  192.       ],
  193.       statisticsList: [
  194.         'width',
  195.         'height',
  196.         'corruptedFrames',
  197.         'decodedFrames',
  198.         'droppedFrames',
  199.         'drmTimeSeconds',
  200.         'licenseTime',
  201.         'liveLatency',
  202.         'loadLatency',
  203.         'bufferingTime',
  204.         'manifestTimeSeconds',
  205.         'estimatedBandwidth',
  206.         'streamBandwidth',
  207.         'maxSegmentDuration',
  208.         'pauseTime',
  209.         'playTime',
  210.         'completionPercent',
  211.       ],
  212.       contextMenuElements: [
  213.         'loop',
  214.         'picture_in_picture',
  215.         'statistics',
  216.       ],
  217.       playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
  218.       fastForwardRates: [2, 4, 8, 1],
  219.       rewindRates: [-1, -2, -4, -8],
  220.       addSeekBar: true,
  221.       addBigPlayButton: false,
  222.       customContextMenu: false,
  223.       castReceiverAppId: '',
  224.       castAndroidReceiverCompatible: false,
  225.       clearBufferOnQualityChange: true,
  226.       showUnbufferedStart: false,
  227.       seekBarColors: {
  228.         base: 'rgba(255, 255, 255, 0.3)',
  229.         buffered: 'rgba(255, 255, 255, 0.54)',
  230.         played: 'rgb(255, 255, 255)',
  231.         adBreaks: 'rgb(255, 204, 0)',
  232.         chapterMarks: 'rgb(27, 27, 27)',
  233.         chapterLabels: 'rgb(255, 255, 255)',
  234.       },
  235.       volumeBarColors: {
  236.         base: 'rgba(255, 255, 255, 0.54)',
  237.         level: 'rgb(255, 255, 255)',
  238.       },
  239.       trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
  240.       fadeDelay: 0,
  241.       doubleClickForFullscreen: true,
  242.       singleClickForPlayAndPause: true,
  243.       enableKeyboardPlaybackControls: true,
  244.       enableFullscreenOnRotation: true,
  245.       forceLandscapeOnFullscreen: true,
  246.       enableTooltips: false,
  247.       keyboardSeekDistance: 5,
  248.       keyboardLargeSeekDistance: 60,
  249.       fullScreenElement: this.videoContainer_,
  250.       preferDocumentPictureInPicture: true,
  251.       showAudioChannelCountVariants: true,
  252.     };
  254.     // eslint-disable-next-line no-restricted-syntax
  255.     if ('remote' in HTMLMediaElement.prototype) {
  256.       config.overflowMenuButtons.push('remote');
  257.     } else if (window.WebKitPlaybackTargetAvailabilityEvent) {
  258.       config.overflowMenuButtons.push('airplay');
  259.     }
  261.     // On mobile, by default, hide the volume slide and the small play/pause
  262.     // button and show the big play/pause button in the center.
  263.     // This is in line with default styles in Chrome.
  264.     if (this.isMobile()) {
  265.       config.addBigPlayButton = true;
  266.       config.controlPanelElements = config.controlPanelElements.filter(
  267.           (name) => name != 'play_pause' && name != 'volume');
  268.     }
  270.     return config;
  271.   }
  273.   /**
  274.    * @private
  275.    */
  276.   static async scanPageForShakaElements_() {
  277.     // Install built-in polyfills to patch browser incompatibilities.
  278.     shaka.polyfill.installAll();
  279.     // Check to see if the browser supports the basic APIs Shaka needs.
  280.     if (!shaka.Player.isBrowserSupported()) {
  281.       shaka.log.error('Shaka Player does not support this browser. ' +
  282.           'Please see https://tinyurl.com/y7s4j9tr for the list of ' +
  283.           'supported browsers.');
  285.       // After scanning the page for elements, fire a special "loaded" event for
  286.       // when the load fails. This will allow the page to react to the failure.
  287.       shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  288.           shaka.ui.Overlay.FailReasonCode.NO_BROWSER_SUPPORT);
  289.       return;
  290.     }
  292.     // Look for elements marked 'data-shaka-player-container'
  293.     // on the page. These will be used to create our default
  294.     // UI.
  295.     const containers = document.querySelectorAll(
  296.         '[data-shaka-player-container]');
  298.     // Look for elements marked 'data-shaka-player'. They will
  299.     // either be used in our default UI or with native browser
  300.     // controls.
  301.     const videos = document.querySelectorAll(
  302.         '[data-shaka-player]');
  304.     // Look for elements marked 'data-shaka-player-canvas'
  305.     // on the page. These will be used to create our default
  306.     // UI.
  307.     const canvases = document.querySelectorAll(
  308.         '[data-shaka-player-canvas]');
  310.     if (!videos.length && !containers.length) {
  311.       // No elements have been tagged with shaka attributes.
  312.     } else if (videos.length && !containers.length) {
  313.       // Just the video elements were provided.
  314.       for (const video of videos) {
  315.         // If the app has already manually created a UI for this element,
  316.         // don't create another one.
  317.         if (video['ui']) {
  318.           continue;
  319.         }
  320.         goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  321.             'Should be a video element!');
  323.         const container = document.createElement('div');
  324.         const videoParent = video.parentElement;
  325.         videoParent.replaceChild(container, video);
  326.         container.appendChild(video);
  327.         let currentCanvas = null;
  328.         for (const canvas of canvases) {
  329.           goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
  330.               'Should be a canvas element!');
  331.           if (canvas.parentElement == container) {
  332.             currentCanvas = canvas;
  333.             break;
  334.           }
  335.         }
  336.         if (!currentCanvas) {
  337.           currentCanvas = document.createElement('canvas');
  338.           currentCanvas.classList.add('shaka-canvas-container');
  339.           container.appendChild(currentCanvas);
  340.         }
  341.         shaka.ui.Overlay.setupUIandAutoLoad_(container, video, currentCanvas);
  342.       }
  343.     } else {
  344.       for (const container of containers) {
  345.         // If the app has already manually created a UI for this element,
  346.         // don't create another one.
  347.         if (container['ui']) {
  348.           continue;
  349.         }
  350.         goog.asserts.assert(container.tagName.toLowerCase() == 'div',
  351.             'Container should be a div!');
  353.         let currentVideo = null;
  354.         for (const video of videos) {
  355.           goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  356.               'Should be a video element!');
  357.           if (video.parentElement == container) {
  358.             currentVideo = video;
  359.             break;
  360.           }
  361.         }
  363.         if (!currentVideo) {
  364.           currentVideo = document.createElement('video');
  365.           currentVideo.setAttribute('playsinline', '');
  366.           container.appendChild(currentVideo);
  367.         }
  369.         let currentCanvas = null;
  370.         for (const canvas of canvases) {
  371.           goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
  372.               'Should be a canvas element!');
  373.           if (canvas.parentElement == container) {
  374.             currentCanvas = canvas;
  375.             break;
  376.           }
  377.         }
  378.         if (!currentCanvas) {
  379.           currentCanvas = document.createElement('canvas');
  380.           currentCanvas.classList.add('shaka-canvas-container');
  381.           container.appendChild(currentCanvas);
  382.         }
  384.         try {
  385.           // eslint-disable-next-line no-await-in-loop
  386.           await shaka.ui.Overlay.setupUIandAutoLoad_(
  387.               container, currentVideo, currentCanvas);
  388.         } catch (e) {
  389.           // This can fail if, for example, not every player file has loaded.
  390.           // Ad-block is a likely cause for this sort of failure.
  391.           shaka.log.error('Error setting up Shaka Player', e);
  392.           shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  393.               shaka.ui.Overlay.FailReasonCode.PLAYER_FAILED_TO_LOAD);
  394.           return;
  395.         }
  396.       }
  397.     }
  399.     // After scanning the page for elements, fire the "loaded" event.  This will
  400.     // let apps know they can use the UI library programmatically now, even if
  401.     // they didn't have any Shaka-related elements declared in their HTML.
  402.     shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-loaded');
  403.   }
  406.   /**
  407.    * @param {string} eventName
  408.    * @param {shaka.ui.Overlay.FailReasonCode=} reasonCode
  409.    * @private
  410.    */
  411.   static dispatchLoadedEvent_(eventName, reasonCode) {
  412.     let detail = null;
  413.     if (reasonCode != undefined) {
  414.       detail = {
  415.         'reasonCode': reasonCode,
  416.       };
  417.     }
  418.     const uiLoadedEvent = new CustomEvent(eventName, {detail});
  419.     document.dispatchEvent(uiLoadedEvent);
  420.   }
  423.   /**
  424.    * @param {!Element} container
  425.    * @param {!Element} video
  426.    * @param {!Element} canvas
  427.    * @private
  428.    */
  429.   static async setupUIandAutoLoad_(container, video, canvas) {
  430.     // Create the UI
  431.     const player = new shaka.Player();
  432.     const ui = new shaka.ui.Overlay(player,
  433.         shaka.util.Dom.asHTMLElement(container),
  434.         shaka.util.Dom.asHTMLMediaElement(video));
  436.     // Attach Canvas used for LCEVC Decoding
  437.     player.attachCanvas(/** @type {HTMLCanvasElement} */(canvas));
  439.     // Get and configure cast app id.
  440.     let castAppId = '';
  442.     // Get and configure cast Android Receiver Compatibility
  443.     let castAndroidReceiverCompatible = false;
  445.     // Cast receiver id can be specified on either container or video.
  446.     // It should not be provided on both. If it was, we will use the last
  447.     // one we saw.
  448.     if (container['dataset'] &&
  449.         container['dataset']['shakaPlayerCastReceiverId']) {
  450.       castAppId = container['dataset']['shakaPlayerCastReceiverId'];
  451.       castAndroidReceiverCompatible =
  452.           container['dataset']['shakaPlayerCastAndroidReceiverCompatible'] ===
  453.           'true';
  454.     } else if (video['dataset'] &&
  455.                video['dataset']['shakaPlayerCastReceiverId']) {
  456.       castAppId = video['dataset']['shakaPlayerCastReceiverId'];
  457.       castAndroidReceiverCompatible =
  458.         video['dataset']['shakaPlayerCastAndroidReceiverCompatible'] === 'true';
  459.     }
  461.     if (castAppId.length) {
  462.       ui.configure({castReceiverAppId: castAppId,
  463.         castAndroidReceiverCompatible: castAndroidReceiverCompatible});
  464.     }
  466.     if (shaka.util.Dom.asHTMLMediaElement(video).controls) {
  467.       ui.getControls().setEnabledNativeControls(true);
  468.     }
  470.     // Get the source and load it
  471.     // Source can be specified either on the video element:
  472.     //  <video src='foo.m2u8'></video>
  473.     // or as a separate element inside the video element:
  474.     //  <video>
  475.     //    <source src='foo.m2u8'/>
  476.     //  </video>
  477.     // It should not be specified on both.
  478.     const src = video.getAttribute('src');
  479.     if (src) {
  480.       const sourceElem = document.createElement('source');
  481.       sourceElem.setAttribute('src', src);
  482.       video.appendChild(sourceElem);
  483.       video.removeAttribute('src');
  484.     }
  486.     for (const elem of video.querySelectorAll('source')) {
  487.       try { // eslint-disable-next-line no-await-in-loop
  488.         await ui.getControls().getPlayer().load(elem.getAttribute('src'));
  489.         break;
  490.       } catch (e) {
  491.         shaka.log.error('Error auto-loading asset', e);
  492.       }
  493.     }
  495.     await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
  496.   }
  497. };
  499. /**
  500.  * Describes what information should show up in labels for selecting audio
  501.  * variants and text tracks.
  502.  *
  503.  * @enum {number}
  504.  * @export
  505.  */
  506. shaka.ui.Overlay.TrackLabelFormat = {
  507.   'LANGUAGE': 0,
  508.   'ROLE': 1,
  509.   'LANGUAGE_ROLE': 2,
  510.   'LABEL': 3,
  511. };
  513. /**
  514.  * Describes the possible reasons that the UI might fail to load.
  515.  *
  516.  * @enum {number}
  517.  * @export
  518.  */
  519. shaka.ui.Overlay.FailReasonCode = {
  520.   'NO_BROWSER_SUPPORT': 0,
  521.   'PLAYER_FAILED_TO_LOAD': 1,
  522. };
  525. if (document.readyState == 'complete') {
  526.   // Don't fire this event synchronously.  In a compiled bundle, the "shaka"
  527.   // namespace might not be exported to the window until after this point.
  528.   (async () => {
  529.     await Promise.resolve();
  530.     shaka.ui.Overlay.scanPageForShakaElements_();
  531.   })();
  532. } else {
  533.   window.addEventListener('load', shaka.ui.Overlay.scanPageForShakaElements_);
  534. }