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.device.DeviceFactory');
  15. goog.require('shaka.device.IDevice');
  16. goog.require('shaka.log');
  17. goog.require('shaka.polyfill');
  18. goog.require('shaka.ui.Controls');
  19. goog.require('shaka.ui.Watermark');
  20. goog.require('shaka.util.ConfigUtils');
  21. goog.require('shaka.util.Dom');
  22. goog.require('shaka.util.FakeEvent');
  23. goog.require('shaka.util.IDestroyable');
  25. /**
  26.  * @implements {shaka.util.IDestroyable}
  27.  * @export
  28.  */
  29. shaka.ui.Overlay = class {
  30.   /**
  31.    * @param {!shaka.Player} player
  32.    * @param {!HTMLElement} videoContainer
  33.    * @param {!HTMLMediaElement} video
  34.    * @param {?HTMLCanvasElement=} vrCanvas
  35.    */
  36.   constructor(player, videoContainer, video, vrCanvas = null) {
  37.     /** @private {shaka.Player} */
  38.     this.player_ = player;
  40.     /** @private {HTMLElement} */
  41.     this.videoContainer_ = videoContainer;
  43.     /** @private {!shaka.extern.UIConfiguration} */
  44.     this.config_ = this.defaultConfig_();
  46.     // Get and configure cast app id.
  47.     let castAppId = '';
  49.     // Get and configure cast Android Receiver Compatibility
  50.     let castAndroidReceiverCompatible = false;
  52.     // Cast receiver id can be specified on either container or video.
  53.     // It should not be provided on both. If it was, we will use the last
  54.     // one we saw.
  55.     if (videoContainer['dataset'] &&
  56.         videoContainer['dataset']['shakaPlayerCastReceiverId']) {
  57.       const dataSet = videoContainer['dataset'];
  58.       castAppId = dataSet['shakaPlayerCastReceiverId'];
  59.       castAndroidReceiverCompatible =
  60.           dataSet['shakaPlayerCastAndroidReceiverCompatible'] === 'true';
  61.     } else if (video['dataset'] &&
  62.                video['dataset']['shakaPlayerCastReceiverId']) {
  63.       const dataSet = video['dataset'];
  64.       castAppId = dataSet['shakaPlayerCastReceiverId'];
  65.       castAndroidReceiverCompatible =
  66.           dataSet['shakaPlayerCastAndroidReceiverCompatible'] === 'true';
  67.     }
  69.     if (castAppId.length) {
  70.       this.config_.castReceiverAppId = castAppId;
  71.       this.config_.castAndroidReceiverCompatible =
  72.           castAndroidReceiverCompatible;
  73.     }
  75.     // Make sure this container is discoverable and that the UI can be reached
  76.     // through it.
  77.     videoContainer['dataset']['shakaPlayerContainer'] = '';
  78.     videoContainer['ui'] = this;
  80.     // Tag the container for mobile platforms, to allow different styles.
  81.     if (this.isMobile()) {
  82.       videoContainer.classList.add('shaka-mobile');
  83.     }
  85.     /** @private {shaka.ui.Controls} */
  86.     this.controls_ = new shaka.ui.Controls(
  87.         player, videoContainer, video, vrCanvas, this.config_);
  89.     // If the browser's native controls are disabled, use UI TextDisplayer.
  90.     if (!video.controls) {
  91.       player.setVideoContainer(videoContainer);
  92.     }
  94.     videoContainer['ui'] = this;
  95.     video['ui'] = this;
  96.     /** @private {shaka.ui.Watermark} */
  97.     this.watermark_ = null;
  98.   }
  101.   /**
  102.    * @param {boolean=} forceDisconnect If true, force the receiver app to shut
  103.    *   down by disconnecting.  Does nothing if not connected.
  104.    * @override
  105.    * @export
  106.    */
  107.   async destroy(forceDisconnect = false) {
  108.     if (this.controls_) {
  109.       await this.controls_.destroy(forceDisconnect);
  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.     const device = shaka.device.DeviceFactory.getDevice();
  130.     return device.getDeviceType() == shaka.device.IDevice.DeviceType.MOBILE;
  131.   }
  134.   /**
  135.    * Detects if this is a smart tv platform, in case you want to choose a
  136.    * different UI configuration on smart tv devices.
  137.    *
  138.    * @return {boolean}
  139.    * @export
  140.    */
  141.   isSmartTV() {
  142.     const device = shaka.device.DeviceFactory.getDevice();
  143.     return device.getDeviceType() == shaka.device.IDevice.DeviceType.TV;
  144.   }
  147.   /**
  148.    * @return {!shaka.extern.UIConfiguration}
  149.    * @export
  150.    */
  151.   getConfiguration() {
  152.     const ret = this.defaultConfig_();
  153.     shaka.util.ConfigUtils.mergeConfigObjects(
  154.         ret, this.config_, this.defaultConfig_(),
  155.         /* overrides= */ {}, /* path= */ '');
  156.     return ret;
  157.   }
  160.   /**
  161.    * @param {string|!Object} config This should either be a field name or an
  162.    *   object following the form of {@link shaka.extern.UIConfiguration}, where
  163.    *   you may omit any field you do not wish to change.
  164.    * @param {*=} value This should be provided if the previous parameter
  165.    *   was a string field name.
  166.    * @export
  167.    */
  168.   configure(config, value) {
  169.     goog.asserts.assert(typeof(config) == 'object' || arguments.length == 2,
  170.         'String configs should have values!');
  172.     // ('fieldName', value) format
  173.     if (arguments.length == 2 && typeof(config) == 'string') {
  174.       config = shaka.util.ConfigUtils.convertToConfigObject(config, value);
  175.     }
  177.     goog.asserts.assert(typeof(config) == 'object', 'Should be an object!');
  179.     const newConfig = /** @type {!shaka.extern.UIConfiguration} */(
  180.       Object.assign({}, this.config_));
  181.     shaka.util.ConfigUtils.mergeConfigObjects(
  182.         newConfig, config, this.defaultConfig_(),
  183.         /* overrides= */ {}, /* path= */ '');
  185.     goog.asserts.assert(this.player_ != null, 'Should have a player!');
  187.     const diff = shaka.util.ConfigUtils.getDifferenceFromConfigObjects(
  188.         newConfig, this.config_);
  189.     if (!Object.keys(diff).length) {
  190.       // No changes
  191.       return;
  192.     }
  194.     this.config_ = newConfig;
  196.     this.controls_.configure(this.config_);
  198.     this.controls_.dispatchEvent(new shaka.util.FakeEvent('uiupdated'));
  200.     this.setupCastSenderUrl_();
  201.   }
  204.   /**
  205.    * @return {shaka.ui.Controls}
  206.    * @export
  207.    */
  208.   getControls() {
  209.     return this.controls_;
  210.   }
  213.   /**
  214.    * Enable or disable the custom controls.
  215.    *
  216.    * @param {boolean} enabled
  217.    * @export
  218.    */
  219.   setEnabled(enabled) {
  220.     this.controls_.setEnabledShakaControls(enabled);
  221.   }
  224.   /**
  225.    * @param {string} text
  226.    * @param {?shaka.ui.Watermark.Options=} options
  227.    * @export
  228.    */
  229.   setTextWatermark(text, options) {
  230.     if (text && !this.watermark_ && this.videoContainer_ && this.controls_) {
  231.       this.watermark_ = new shaka.ui.Watermark(
  232.           this.videoContainer_, this.controls_);
  233.     }
  234.     if (this.watermark_) {
  235.       this.watermark_.setTextWatermark(text, options);
  236.     }
  237.   }
  239.   /**
  240.    * @export
  241.    */
  242.   removeWatermark() {
  243.     if (this.watermark_) {
  244.       this.watermark_.removeWatermark();
  245.     }
  246.   }
  249.   /**
  250.    * @return {!shaka.extern.UIConfiguration}
  251.    * @private
  252.    */
  253.   defaultConfig_() {
  254.     const controlPanelElements = [
  255.       'play_pause',
  256.       'skip_next',
  257.       'mute',
  258.       'volume',
  259.       'time_and_duration',
  260.       'spacer',
  261.       'overflow_menu',
  262.     ];
  264.     if (window.chrome) {
  265.       controlPanelElements.push('cast');
  266.     }
  267.     // eslint-disable-next-line no-restricted-syntax
  268.     if ('remote' in HTMLMediaElement.prototype) {
  269.       controlPanelElements.push('remote');
  270.     } else if (window.WebKitPlaybackTargetAvailabilityEvent) {
  271.       controlPanelElements.push('airplay');
  272.     }
  273.     controlPanelElements.push('fullscreen');
  275.     const config = {
  276.       controlPanelElements,
  277.       overflowMenuButtons: [
  278.         'captions',
  279.         'quality',
  280.         'language',
  281.         'chapter',
  282.         'picture_in_picture',
  283.         'playback_rate',
  284.         'recenter_vr',
  285.         'toggle_stereoscopic',
  286.         'save_video_frame',
  287.       ],
  288.       statisticsList: [
  289.         'width',
  290.         'height',
  291.         'currentCodecs',
  292.         'corruptedFrames',
  293.         'decodedFrames',
  294.         'droppedFrames',
  295.         'drmTimeSeconds',
  296.         'licenseTime',
  297.         'liveLatency',
  298.         'loadLatency',
  299.         'bufferingTime',
  300.         'manifestTimeSeconds',
  301.         'estimatedBandwidth',
  302.         'streamBandwidth',
  303.         'maxSegmentDuration',
  304.         'pauseTime',
  305.         'playTime',
  306.         'completionPercent',
  307.         'manifestSizeBytes',
  308.         'bytesDownloaded',
  309.         'nonFatalErrorCount',
  310.         'manifestPeriodCount',
  311.         'manifestGapCount',
  312.       ],
  313.       adStatisticsList: [
  314.         'loadTimes',
  315.         'averageLoadTime',
  316.         'started',
  317.         'overlayAds',
  318.         'playedCompletely',
  319.         'skipped',
  320.         'errors',
  321.       ],
  322.       contextMenuElements: [
  323.         'loop',
  324.         'picture_in_picture',
  325.         'save_video_frame',
  326.         'statistics',
  327.         'ad_statistics',
  328.       ],
  329.       playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
  330.       fastForwardRates: [2, 4, 8, 1],
  331.       rewindRates: [-1, -2, -4, -8],
  332.       addSeekBar: true,
  333.       addBigPlayButton: false,
  334.       customContextMenu: false,
  335.       castReceiverAppId: '',
  336.       castAndroidReceiverCompatible: false,
  337.       clearBufferOnQualityChange: true,
  338.       showUnbufferedStart: false,
  339.       seekBarColors: {
  340.         base: 'rgba(255, 255, 255, 0.3)',
  341.         buffered: 'rgba(255, 255, 255, 0.54)',
  342.         played: 'rgb(255, 255, 255)',
  343.         adBreaks: 'rgb(255, 204, 0)',
  344.       },
  345.       volumeBarColors: {
  346.         base: 'rgba(255, 255, 255, 0.54)',
  347.         level: 'rgb(255, 255, 255)',
  348.       },
  349.       qualityMarks: {
  350.         '720': '',
  351.         '1080': 'HD',
  352.         '1440': '2K',
  353.         '2160': '4K',
  354.         '4320': '8K',
  355.       },
  356.       trackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
  357.       textTrackLabelFormat: shaka.ui.Overlay.TrackLabelFormat.LANGUAGE,
  358.       fadeDelay: 0,
  359.       closeMenusDelay: 2,
  360.       doubleClickForFullscreen: true,
  361.       singleClickForPlayAndPause: true,
  362.       enableKeyboardPlaybackControls: true,
  363.       enableFullscreenOnRotation: true,
  364.       forceLandscapeOnFullscreen: true,
  365.       enableTooltips: true,
  366.       keyboardSeekDistance: 5,
  367.       keyboardLargeSeekDistance: 60,
  368.       fullScreenElement: this.videoContainer_,
  369.       preferDocumentPictureInPicture: true,
  370.       showAudioChannelCountVariants: true,
  371.       seekOnTaps: false,
  372.       tapSeekDistance: 10,
  373.       refreshTickInSeconds: 0.125,
  374.       displayInVrMode: false,
  375.       defaultVrProjectionMode: 'equirectangular',
  376.       setupMediaSession: true,
  377.       preferVideoFullScreenInVisionOS: false,
  378.       showAudioCodec: true,
  379.       showVideoCodec: true,
  380.       castSenderUrl: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js',
  381.     };
  383.     // On mobile, by default, hide the volume slide and the small play/pause
  384.     // button and show the big play/pause button in the center.
  385.     // This is in line with default styles in Chrome.
  386.     if (this.isMobile()) {
  387.       config.addBigPlayButton = true;
  388.       config.singleClickForPlayAndPause = false;
  389.       config.seekOnTaps = true;
  390.       config.enableTooltips = false;
  391.       config.doubleClickForFullscreen = false;
  392.       const filterElements = [
  393.         'play_pause',
  394.         'skip_next',
  395.         'volume',
  396.       ];
  397.       config.controlPanelElements = config.controlPanelElements.filter(
  398.           (name) => !filterElements.includes(name));
  399.       config.overflowMenuButtons = config.overflowMenuButtons.filter(
  400.           (name) => !filterElements.includes(name));
  401.       config.contextMenuElements = config.contextMenuElements.filter(
  402.           (name) => !filterElements.includes(name));
  403.     }
  405.     if (this.isSmartTV()) {
  406.       config.addBigPlayButton = true;
  407.       config.singleClickForPlayAndPause = false;
  408.       config.enableTooltips = false;
  409.       config.doubleClickForFullscreen = false;
  410.       const filterElements = [
  411.         'play_pause',
  412.         'cast',
  413.         'remote',
  414.         'airplay',
  415.         'volume',
  416.         'save_video_frame',
  417.       ];
  418.       config.controlPanelElements = config.controlPanelElements.filter(
  419.           (name) => !filterElements.includes(name));
  420.       config.overflowMenuButtons = config.overflowMenuButtons.filter(
  421.           (name) => !filterElements.includes(name));
  422.       config.contextMenuElements = config.contextMenuElements.filter(
  423.           (name) => !filterElements.includes(name));
  424.     }
  426.     return config;
  427.   }
  429.   /**
  430.    * @private
  431.    */
  432.   setupCastSenderUrl_() {
  433.     const castSenderUrl = this.config_.castSenderUrl;
  434.     if (!castSenderUrl || !this.config_.castReceiverAppId ||
  435.         !window.chrome || chrome.cast || this.isSmartTV()) {
  436.       return;
  437.     }
  438.     let alreadyLoaded = false;
  439.     for (const element of document.getElementsByTagName('script')) {
  440.       const script = /** @type {HTMLScriptElement} **/(element);
  441.       if (script.src === castSenderUrl) {
  442.         alreadyLoaded = true;
  443.         break;
  444.       }
  445.     }
  446.     if (!alreadyLoaded) {
  447.       const script =
  448.         /** @type {HTMLScriptElement} **/(document.createElement('script'));
  449.       script.src = castSenderUrl;
  450.       script.defer = true;
  451.       document.head.appendChild(script);
  452.     }
  453.   }
  455.   /**
  456.    * @private
  457.    */
  458.   static async scanPageForShakaElements_() {
  459.     // Install built-in polyfills to patch browser incompatibilities.
  460.     shaka.polyfill.installAll();
  461.     // Check to see if the browser supports the basic APIs Shaka needs.
  462.     if (!shaka.Player.isBrowserSupported()) {
  463.       shaka.log.error('Shaka Player does not support this browser. ' +
  464.           'Please see https://tinyurl.com/y7s4j9tr for the list of ' +
  465.           'supported browsers.');
  467.       // After scanning the page for elements, fire a special "loaded" event for
  468.       // when the load fails. This will allow the page to react to the failure.
  469.       shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  470.           shaka.ui.Overlay.FailReasonCode.NO_BROWSER_SUPPORT);
  471.       return;
  472.     }
  474.     // Look for elements marked 'data-shaka-player-container'
  475.     // on the page. These will be used to create our default
  476.     // UI.
  477.     const containers = document.querySelectorAll(
  478.         '[data-shaka-player-container]');
  480.     // Look for elements marked 'data-shaka-player'. They will
  481.     // either be used in our default UI or with native browser
  482.     // controls.
  483.     const videos = document.querySelectorAll(
  484.         '[data-shaka-player]');
  486.     // Look for elements marked 'data-shaka-player-canvas'
  487.     // on the page. These will be used to create our default
  488.     // UI.
  489.     const canvases = document.querySelectorAll(
  490.         '[data-shaka-player-canvas]');
  492.     // Look for elements marked 'data-shaka-player-vr-canvas'
  493.     // on the page. These will be used to create our default
  494.     // UI.
  495.     const vrCanvases = document.querySelectorAll(
  496.         '[data-shaka-player-vr-canvas]');
  498.     if (!videos.length && !containers.length) {
  499.       // No elements have been tagged with shaka attributes.
  500.     } else if (videos.length && !containers.length) {
  501.       // Just the video elements were provided.
  502.       for (const video of videos) {
  503.         // If the app has already manually created a UI for this element,
  504.         // don't create another one.
  505.         if (video['ui']) {
  506.           continue;
  507.         }
  508.         goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  509.             'Should be a video element!');
  511.         const container = document.createElement('div');
  512.         const videoParent = video.parentElement;
  513.         videoParent.replaceChild(container, video);
  514.         container.appendChild(video);
  515.         const {lcevcCanvas, vrCanvas} =
  516.             shaka.ui.Overlay.findOrMakeSpecialCanvases_(
  517.                 container, canvases, vrCanvases);
  518.         shaka.ui.Overlay.setupUIandAutoLoad_(
  519.             container, video, lcevcCanvas, vrCanvas);
  520.       }
  521.     } else {
  522.       for (const container of containers) {
  523.         // If the app has already manually created a UI for this element,
  524.         // don't create another one.
  525.         if (container['ui']) {
  526.           continue;
  527.         }
  528.         goog.asserts.assert(container.tagName.toLowerCase() == 'div',
  529.             'Container should be a div!');
  531.         let currentVideo = null;
  532.         for (const video of videos) {
  533.           goog.asserts.assert(video.tagName.toLowerCase() == 'video',
  534.               'Should be a video element!');
  535.           if (video.parentElement == container) {
  536.             currentVideo = video;
  537.             break;
  538.           }
  539.         }
  541.         if (!currentVideo) {
  542.           currentVideo = document.createElement('video');
  543.           currentVideo.setAttribute('playsinline', '');
  544.           container.appendChild(currentVideo);
  545.         }
  546.         const {lcevcCanvas, vrCanvas} =
  547.             shaka.ui.Overlay.findOrMakeSpecialCanvases_(
  548.                 container, canvases, vrCanvases);
  549.         try {
  550.           // eslint-disable-next-line no-await-in-loop
  551.           await shaka.ui.Overlay.setupUIandAutoLoad_(
  552.               container, currentVideo, lcevcCanvas, vrCanvas);
  553.         } catch (e) {
  554.           // This can fail if, for example, not every player file has loaded.
  555.           // Ad-block is a likely cause for this sort of failure.
  556.           shaka.log.error('Error setting up Shaka Player', e);
  557.           shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-load-failed',
  558.               shaka.ui.Overlay.FailReasonCode.PLAYER_FAILED_TO_LOAD);
  559.           return;
  560.         }
  561.       }
  562.     }
  564.     // After scanning the page for elements, fire the "loaded" event.  This will
  565.     // let apps know they can use the UI library programmatically now, even if
  566.     // they didn't have any Shaka-related elements declared in their HTML.
  567.     shaka.ui.Overlay.dispatchLoadedEvent_('shaka-ui-loaded');
  568.   }
  571.   /**
  572.    * @param {string} eventName
  573.    * @param {shaka.ui.Overlay.FailReasonCode=} reasonCode
  574.    * @private
  575.    */
  576.   static dispatchLoadedEvent_(eventName, reasonCode) {
  577.     let detail = null;
  578.     if (reasonCode != undefined) {
  579.       detail = {
  580.         'reasonCode': reasonCode,
  581.       };
  582.     }
  583.     const uiLoadedEvent = new CustomEvent(eventName, {detail});
  584.     document.dispatchEvent(uiLoadedEvent);
  585.   }
  588.   /**
  589.    * @param {!Element} container
  590.    * @param {!Element} video
  591.    * @param {!Element} lcevcCanvas
  592.    * @param {?Element} vrCanvas
  593.    * @private
  594.    */
  595.   static async setupUIandAutoLoad_(container, video, lcevcCanvas, vrCanvas) {
  596.     // Create the UI
  597.     const player = new shaka.Player();
  598.     const ui = new shaka.ui.Overlay(player,
  599.         shaka.util.Dom.asHTMLElement(container),
  600.         shaka.util.Dom.asHTMLMediaElement(video),
  601.         vrCanvas ? shaka.util.Dom.asHTMLCanvasElement(vrCanvas) : null);
  603.     // Attach Canvas used for LCEVC Decoding
  604.     player.attachCanvas(/** @type {HTMLCanvasElement} */(lcevcCanvas));
  606.     if (shaka.util.Dom.asHTMLMediaElement(video).controls) {
  607.       ui.getControls().setEnabledNativeControls(true);
  608.     }
  610.     // Get the source and load it
  611.     // Source can be specified either on the video element:
  612.     //  <video src='foo.m2u8'></video>
  613.     // or as a separate element inside the video element:
  614.     //  <video>
  615.     //    <source src='foo.m2u8'/>
  616.     //  </video>
  617.     // It should not be specified on both.
  618.     const urls = [];
  619.     const src = video.getAttribute('src');
  620.     if (src) {
  621.       urls.push(src);
  622.       video.removeAttribute('src');
  623.     }
  625.     for (const source of video.getElementsByTagName('source')) {
  626.       urls.push(/** @type {!HTMLSourceElement} */ (source).src);
  627.       video.removeChild(source);
  628.     }
  630.     await player.attach(shaka.util.Dom.asHTMLMediaElement(video));
  632.     for (const url of urls) {
  633.       try { // eslint-disable-next-line no-await-in-loop
  634.         await ui.getControls().getPlayer().load(url);
  635.         break;
  636.       } catch (e) {
  637.         shaka.log.error('Error auto-loading asset', e);
  638.       }
  639.     }
  640.   }
  643.   /**
  644.    * @param {!Element} container
  645.    * @param {!NodeList<!Element>} canvases
  646.    * @param {!NodeList<!Element>} vrCanvases
  647.    * @return {{lcevcCanvas: !Element, vrCanvas: ?Element}}
  648.    * @private
  649.    */
  650.   static findOrMakeSpecialCanvases_(container, canvases, vrCanvases) {
  651.     let lcevcCanvas = null;
  652.     for (const canvas of canvases) {
  653.       goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
  654.           'Should be a canvas element!');
  655.       if (canvas.parentElement == container) {
  656.         lcevcCanvas = canvas;
  657.         break;
  658.       }
  659.     }
  660.     if (!lcevcCanvas) {
  661.       lcevcCanvas = document.createElement('canvas');
  662.       lcevcCanvas.classList.add('shaka-canvas-container');
  663.       container.appendChild(lcevcCanvas);
  664.     }
  665.     let vrCanvas = null;
  666.     for (const canvas of vrCanvases) {
  667.       goog.asserts.assert(canvas.tagName.toLowerCase() == 'canvas',
  668.           'Should be a canvas element!');
  669.       if (canvas.parentElement == container) {
  670.         vrCanvas = canvas;
  671.         break;
  672.       }
  673.     }
  674.     return {
  675.       lcevcCanvas,
  676.       vrCanvas,
  677.     };
  678.   }
  679. };
  681. /**
  682.  * Describes what information should show up in labels for selecting audio
  683.  * variants and text tracks.
  684.  *
  685.  * @enum {number}
  686.  * @export
  687.  */
  688. shaka.ui.Overlay.TrackLabelFormat = {
  689.   'LANGUAGE': 0,
  690.   'ROLE': 1,
  691.   'LANGUAGE_ROLE': 2,
  692.   'LABEL': 3,
  693. };
  695. /**
  696.  * Describes the possible reasons that the UI might fail to load.
  697.  *
  698.  * @enum {number}
  699.  * @export
  700.  */
  701. shaka.ui.Overlay.FailReasonCode = {
  702.   'NO_BROWSER_SUPPORT': 0,
  703.   'PLAYER_FAILED_TO_LOAD': 1,
  704. };
  707. if (document.readyState == 'complete') {
  708.   // Don't fire this event synchronously.  In a compiled bundle, the "shaka"
  709.   // namespace might not be exported to the window until after this point.
  710.   (async () => {
  711.     await Promise.resolve();
  712.     shaka.ui.Overlay.scanPageForShakaElements_();
  713.   })();
  714. } else {
  715.   window.addEventListener('load', shaka.ui.Overlay.scanPageForShakaElements_);
  716. }