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 {!shaka.extern.UIConfiguration} */
  38.     this.config_ = this.defaultConfig_();
  40.     // Make sure this container is discoverable and that the UI can be reached
  41.     // through it.
  42.     videoContainer['dataset']['shakaPlayerContainer'] = '';
  43.     videoContainer['ui'] = this;
  45.     // Tag the container for mobile platforms, to allow different styles.
  46.     if (this.isMobile()) {
  47.       videoContainer.classList.add('shaka-mobile');
  48.     }
  50.     /** @private {shaka.ui.Controls} */
  51.     this.controls_ = new shaka.ui.Controls(
  52.         player, videoContainer, video, this.config_);
  54.     // Run the initial setup so that no configure() call is required for default
  55.     // settings.
  56.     this.configure({});
  58.     // If the browser's native controls are disabled, use UI TextDisplayer.
  59.     if (!video.controls) {
  60.       player.setVideoContainer(videoContainer);
  61.     }
  63.     videoContainer['ui'] = this;
  64.     video['ui'] = this;
  65.   }
  68.   /**
  69.    * @override
  70.    * @export
  71.    */
  72.   async destroy() {
  73.     if (this.controls_) {
  74.       await this.controls_.destroy();
  75.     }
  76.     this.controls_ = null;
  78.     if (this.player_) {
  79.       await this.player_.destroy();
  80.     }
  81.     this.player_ = null;
  82.   }
  85.   /**
  86.    * Detects if this is a mobile platform, in case you want to choose a
  87.    * different UI configuration on mobile devices.
  88.    *
  89.    * @return {boolean}
  90.    * @export
  91.    */
  92.   isMobile() {
  93.     return shaka.util.Platform.isMobile();
  94.   }
  97.   /**
  98.    * @return {!shaka.extern.UIConfiguration}
  99.    * @export
  100.    */
  101.   getConfiguration() {
  102.     const ret = this.defaultConfig_();
  103.     shaka.util.ConfigUtils.mergeConfigObjects(
  104.         ret, this.config_, this.defaultConfig_(),
  105.         /* overrides= */ {}, /* path= */ '');
  106.     return ret;
  107.   }
  110.   /**
  111.    * @param {string|!Object} config This should either be a field name or an
  112.    *   object following the form of {@link shaka.extern.UIConfiguration}, where
  113.    *   you may omit any field you do not wish to change.
  114.    * @param {*=} value This should be provided if the previous parameter
  115.    *   was a string field name.
  116.    * @export
  117.    */
  118.   configure(config, value) {
  119.     goog.asserts.assert(typeof(config) == 'object' || arguments.length == 2,
  120.         'String configs should have values!');
  122.     // ('fieldName', value) format
  123.     if (arguments.length == 2 && typeof(config) == 'string') {
  124.       config = shaka.util.ConfigUtils.convertToConfigObject(config, value);
  125.     }
  127.     goog.asserts.assert(typeof(config) == 'object', 'Should be an object!');
  129.     shaka.util.ConfigUtils.mergeConfigObjects(
  130.         this.config_, config, this.defaultConfig_(),
  131.         /* overrides= */ {}, /* path= */ '');
  133.     // If a cast receiver app id has been given, add a cast button to the UI
  134.     if (this.config_.castReceiverAppId &&
  135.         !this.config_.overflowMenuButtons.includes('cast')) {
  136.       this.config_.overflowMenuButtons.push('cast');
  137.     }
  139.     goog.asserts.assert(this.player_ != null, 'Should have a player!');
  141.     this.controls_.configure(this.config_);
  143.     this.controls_.dispatchEvent(new shaka.util.FakeEvent('uiupdated'));
  144.   }
  147.   /**
  148.    * @return {shaka.ui.Controls}
  149.    * @export
  150.    */
  151.   getControls() {
  152.     return this.controls_;
  153.   }
  156.   /**
  157.    * Enable or disable the custom controls.
  158.    *
  159.    * @param {boolean} enabled
  160.    * @export
  161.    */
  162.   setEnabled(enabled) {
  163.     this.controls_.setEnabledShakaControls(enabled);
  164.   }
  167.   /**
  168.    * @return {!shaka.extern.UIConfiguration}
  169.    * @private
  170.    */
  171.   defaultConfig_() {
  172.     const config = {
  173.       controlPanelElements: [
  174.         'play_pause',
  175.         'time_and_duration',
  176.         'spacer',
  177.         'mute',
  178.         'volume',
  179.         'fullscreen',
  180.         'overflow_menu',
  181.       ],
  182.       overflowMenuButtons: [
  183.         'captions',
  184.         'quality',
  185.         'language',
  186.         'picture_in_picture',
  187.         'cast',
  188.         'playback_rate',
  189.       ],
  190.       addSeekBar: true,
  191.       addBigPlayButton: false,
  192.       castReceiverAppId: '',
  193.       clearBufferOnQualityChange: true,
  194.       showUnbufferedStart: false,
  195.       seekBarColors: {
  196.         base: 'rgba(255, 255, 255, 0.3)',
  197.         buffered: 'rgba(255, 255, 255, 0.54)',
  198.         played: 'rgb(255, 255, 255)',
  199.         adBreaks: 'rgb(255, 204, 0)',
  200.       },
  201.       volumeBarColors: {
  202.         base: 'rgba(255, 255, 255, 0.54)',
  203.         level: 'rgb(255, 255, 255)',
  204.       },
  205.       trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
  206.       fadeDelay: 0,
  207.       doubleClickForFullscreen: true,
  208.       enableKeyboardPlaybackControls: true,
  209.       enableFullscreenOnRotation: true,
  210.       forceLandscapeOnFullscreen: true,
  211.     };
  213.     // Check AirPlay support
  214.     if (window.WebKitPlaybackTargetAvailabilityEvent) {
  215.       config.overflowMenuButtons.push('airplay');
  216.     }
  218.     // On mobile, by default, hide the volume slide and the small play/pause
  219.     // button and show the big play/pause button in the center.
  220.     // This is in line with default styles in Chrome.
  221.     if (this.isMobile()) {
  222.       config.addBigPlayButton = true;
  223.       config.controlPanelElements = config.controlPanelElements.filter(
  224.           (name) => name != 'play_pause' && name != 'volume');
  225.     }
  227.     return config;
  228.   }
  230.   /**
  231.    * @private
  232.    */
  233.   static async scanPageForShakaElements_() {
  234.     // Install built-in polyfills to patch browser incompatibilities.
  235.     shaka.polyfill.installAll();
  236.     // Check to see if the browser supports the basic APIs Shaka needs.
  237.     if (!shaka.Player.isBrowserSupported()) {
  238.       shaka.log.error('Shaka Player does not support this browser. ' +
  239.           'Please see https://tinyurl.com/y7s4j9tr for the list of ' +
  240.           'supported browsers.');
  242.       // After scanning the page for elements, fire a special "loaded" event for
  243.       // when the load fails. This will allow the page to react to the failure.
  244.       shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  245.           shaka.ui.Overlay.FailReasonCode.NO_BROWSER_SUPPORT);
  246.       return;
  247.     }
  249.     // Look for elements marked 'data-shaka-player-container'
  250.     // on the page. These will be used to create our default
  251.     // UI.
  252.     const containers = document.querySelectorAll(
  253.         '[data-shaka-player-container]');
  255.     // Look for elements marked 'data-shaka-player'. They will
  256.     // either be used in our default UI or with native browser
  257.     // controls.
  258.     const videos = document.querySelectorAll(
  259.         '[data-shaka-player]');
  261.     if (!videos.length && !containers.length) {
  262.       // No elements have been tagged with shaka attributes.
  263.     } else if (videos.length && !containers.length) {
  264.       // Just the video elements were provided.
  265.       for (const video of videos) {
  266.         // If the app has already manually created a UI for this element,
  267.         // don't create another one.
  268.         if (video['ui']) {
  269.           continue;
  270.         }
  271.         goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  272.             'Should be a video element!');
  274.         const container = document.createElement('div');
  275.         const videoParent = video.parentElement;
  276.         videoParent.replaceChild(container, video);
  277.         container.appendChild(video);
  279.         shaka.ui.Overlay.setupUIandAutoLoad_(container, video);
  280.       }
  281.     } else {
  282.       for (const container of containers) {
  283.         // If the app has already manually created a UI for this element,
  284.         // don't create another one.
  285.         if (container['ui']) {
  286.           continue;
  287.         }
  288.         goog.asserts.assert(container.tagName.toLowerCase() == 'div',
  289.             'Container should be a div!');
  291.         let currentVideo = null;
  292.         for (const video of videos) {
  293.           goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  294.               'Should be a video element!');
  295.           if (video.parentElement == container) {
  296.             currentVideo = video;
  297.             break;
  298.           }
  299.         }
  301.         if (!currentVideo) {
  302.           currentVideo = document.createElement('video');
  303.           currentVideo.setAttribute('playsinline', '');
  304.           container.appendChild(currentVideo);
  305.         }
  307.         try {
  308.           // eslint-disable-next-line no-await-in-loop
  309.           await shaka.ui.Overlay.setupUIandAutoLoad_(container, currentVideo);
  310.         } catch (e) {
  311.           // This can fail if, for example, not every player file has loaded.
  312.           // Ad-block is a likely cause for this sort of failure.
  313.           shaka.log.error('Error setting up Shaka Player', e);
  314.           shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  315.               shaka.ui.Overlay.FailReasonCode.PLAYER_FAILED_TO_LOAD);
  316.           return;
  317.         }
  318.       }
  319.     }
  321.     // After scanning the page for elements, fire the "loaded" event.  This will
  322.     // let apps know they can use the UI library programmatically now, even if
  323.     // they didn't have any Shaka-related elements declared in their HTML.
  324.     shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-loaded');
  325.   }
  328.   /**
  329.    * @param {string} eventName
  330.    * @param {shaka.ui.Overlay.FailReasonCode=} reasonCode
  331.    * @private
  332.    */
  333.   static dispatchLoadedEvent_(eventName, reasonCode) {
  334.     let detail = null;
  335.     if (reasonCode != undefined) {
  336.       detail = {
  337.         'reasonCode': reasonCode,
  338.       };
  339.     }
  340.     const uiLoadedEvent = new CustomEvent(eventName, {detail});
  341.     document.dispatchEvent(uiLoadedEvent);
  342.   }
  345.   /**
  346.    * @param {!Element} container
  347.    * @param {!Element} video
  348.    * @private
  349.    */
  350.   static async setupUIandAutoLoad_(container, video) {
  351.     // Create the UI
  352.     const player = new shaka.Player(
  353.         shaka.util.Dom.asHTMLMediaElement(video));
  354.     const ui = new shaka.ui.Overlay(player,
  355.         shaka.util.Dom.asHTMLElement(container),
  356.         shaka.util.Dom.asHTMLMediaElement(video));
  358.     // Get and configure cast app id.
  359.     let castAppId = '';
  361.     // Cast receiver id can be specified on either container or video.
  362.     // It should not be provided on both. If it was, we will use the last
  363.     // one we saw.
  364.     if (container['dataset'] &&
  365.         container['dataset']['shakaPlayerCastReceiverId']) {
  366.       castAppId = container['dataset']['shakaPlayerCastReceiverId'];
  367.     } else if (video['dataset'] &&
  368.                video['dataset']['shakaPlayerCastReceiverId']) {
  369.       castAppId = video['dataset']['shakaPlayerCastReceiverId'];
  370.     }
  372.     if (castAppId.length) {
  373.       ui.configure({castReceiverAppId: castAppId});
  374.     }
  376.     if (shaka.util.Dom.asHTMLMediaElement(video).controls) {
  377.       ui.getControls().setEnabledNativeControls(true);
  378.     }
  380.     // Get the source and load it
  381.     // Source can be specified either on the video element:
  382.     //  <video src='foo.m2u8'></video>
  383.     // or as a separate element inside the video element:
  384.     //  <video>
  385.     //    <source src='foo.m2u8'/>
  386.     //  </video>
  387.     // It should not be specified on both.
  388.     const src = video.getAttribute('src');
  389.     if (src) {
  390.       const sourceElem = document.createElement('source');
  391.       sourceElem.setAttribute('src', src);
  392.       video.appendChild(sourceElem);
  393.       video.removeAttribute('src');
  394.     }
  396.     for (const elem of video.querySelectorAll('source')) {
  397.       try { // eslint-disable-next-line no-await-in-loop
  398.         await ui.getControls().getPlayer().load(elem.getAttribute('src'));
  399.         break;
  400.       } catch (e) {
  401.         shaka.log.error('Error auto-loading asset', e);
  402.       }
  403.     }
  404.   }
  405. };
  407. /**
  408.  * Describes what information should show up in labels for selecting audio
  409.  * variants and text tracks.
  410.  *
  411.  * @enum {number}
  412.  * @export
  413.  */
  414. shaka.ui.Overlay.TrackLabelFormat = {
  415.   'LANGUAGE': 0,
  416.   'ROLE': 1,
  417.   'LANGUAGE_ROLE': 2,
  418.   'LABEL': 3,
  419. };
  421. /*
  422.  * "shaka.ui.TrackLabelFormat" is deprecated and will be removed in v4.
  423.  *
  424.  * @deprecated
  425.  * @enum {number}
  426.  */
  427. shaka.ui.TrackLabelFormat = shaka.ui.Overlay.TrackLabelFormat;
  429. /**
  430.  * Describes the possible reasons that the UI might fail to load.
  431.  *
  432.  * @enum {number}
  433.  * @export
  434.  */
  435. shaka.ui.Overlay.FailReasonCode = {
  436.   'NO_BROWSER_SUPPORT': 0,
  437.   'PLAYER_FAILED_TO_LOAD': 1,
  438. };
  441. /**
  442.  * "shaka.ui.FailReasonCode" is deprecated and will be removed in v4.
  443.  *
  444.  * @deprecated
  445.  * @enum {number}
  446.  */
  447. shaka.ui.FailReasonCode = shaka.ui.Overlay.FailReasonCode;
  450. if (document.readyState == 'complete') {
  451.   // Don't fire this event synchronously.  In a compiled bundle, the "shaka"
  452.   // namespace might not be exported to the window until after this point.
  453.   (async () => {
  454.     await Promise.resolve();
  455.     shaka.ui.Overlay.scanPageForShakaElements_();
  456.   })();
  457. } else {
  458.   window.addEventListener('load', shaka.ui.Overlay.scanPageForShakaElements_);
  459. }