shaka-player 4.4.3 → 4.6.0

package/demo/input_container.js

@@ -9,7 +9,6 @@ goog.provide('shakaDemo.InputContainer');
 
 
 goog.require('shakaDemo.Tooltips');
-goog.requireType('shakaDemo.MessageIds');
 
 /**
  * Creates elements for containing inputs. It represents a single "section" of
@@ -22,8 +21,8 @@ goog.requireType('shakaDemo.MessageIds');
 shakaDemo.InputContainer = class {
   /**
    * @param {!Element} parentDiv
-   * @param {?shakaDemo.MessageIds} headerText The text to be displayed by
-   *   the header. If null, there will be no header.
+   * @param {?string} headerText The text to be displayed by the header.
+   *   If null, there will be no header.
    * @param {!shakaDemo.InputContainer.Style} style
    * @param {?string} docLink
    */
@@ -46,7 +45,7 @@ shakaDemo.InputContainer = class {
     /** @type {?Element} */
     this.latestElementContainer;
 
-    /** @type {?shakaDemo.MessageIds} */
+    /** @type {?string} */
     this.latestTooltip;
 
     /** @private {number} */
@@ -101,7 +100,7 @@ shakaDemo.InputContainer = class {
 
   /**
    * @param {!Element} parentDiv
-   * @param {shakaDemo.MessageIds} headerText
+   * @param {string} headerText
    * @private
    */
   createHeader_(parentDiv, headerText) {
@@ -123,7 +122,7 @@ shakaDemo.InputContainer = class {
       this.header_ = document.createElement('div');
       this.header_.classList.add('input-header');
     }
-    this.header_.textContent = shakaDemoMain.getLocalizedString(headerText);
+    this.header_.textContent = headerText;
     parentDiv.appendChild(this.header_);
   }
 
@@ -170,8 +169,8 @@ shakaDemo.InputContainer = class {
 
   /**
    * Makes a row, for storing an input.
-   * @param {?shakaDemo.MessageIds} labelString
-   * @param {?shakaDemo.MessageIds} tooltipString
+   * @param {?string} labelString
+   * @param {?string} tooltipString
    * @param {string=} rowClass
    */
   addRow(labelString, tooltipString, rowClass) {
@@ -190,7 +189,7 @@ shakaDemo.InputContainer = class {
       label.setAttribute('for', elementId);
       label.classList.add('input-container-label');
       const labelText = document.createElement('b');
-      labelText.textContent = shakaDemoMain.getLocalizedString(labelString);
+      labelText.textContent = labelString;
       label.appendChild(labelText);
       this.latestRow_.appendChild(label);
     }

package/demo/main.js

@@ -10,7 +10,6 @@ goog.provide('shakaDemo.Main');
 goog.require('ShakaDemoAssetInfo');
 goog.require('goog.asserts');
 goog.require('shakaDemo.CloseButton');
-goog.require('shakaDemo.MessageIds');
 goog.require('shakaDemo.Utils');
 goog.require('shakaDemo.Visualizer');
 goog.require('shakaDemo.VisualizerButton');
@@ -122,9 +121,8 @@ shakaDemo.Main = class {
    * This does not dispatch the shaka-main-loaded event, so it will not cause
    * the nav bar buttons to be set up.
    * @param {!shaka.ui.Overlay.FailReasonCode} reasonCode
-   * @return {!Promise}
    */
-  async initFailed(reasonCode) {
+  initFailed(reasonCode) {
     this.initCommon_();
 
     // Set up version links, so the user can switch to compiled mode if
@@ -155,25 +153,19 @@ shakaDemo.Main = class {
       element.classList.add('disabled-by-fail');
     }
 
-    // Because the UI did not load, this will need to set up a localization
-    // object manually.
-    this.localization_ = new shaka.ui.Localization(/* fallbackLocale= */ 'en');
-    this.localization_.changeLocale(navigator.languages || []);
-    await this.setupLocalization_();
-
     // Process a synthetic error about lack of browser support.
     const severity = shaka.util.Error.Severity.CRITICAL;
     let href = '';
     let message = '';
     switch (reasonCode) {
       case shaka.ui.Overlay.FailReasonCode.NO_BROWSER_SUPPORT:
-        message = this.getLocalizedString(
-            shakaDemo.MessageIds.FAILURE_NO_BROWSER_SUPPORT);
+        message = 'Your browser is not supported!';
         href = 'https://github.com/shaka-project/shaka-player#' +
                 'platform-and-browser-support-matrix';
         break;
       case shaka.ui.Overlay.FailReasonCode.PLAYER_FAILED_TO_LOAD:
-        message = this.getLocalizedString(shakaDemo.MessageIds.FAILURE_MISC);
+        message = 'Shaka Player failed to load! If you are using an adblocker' +
+            ', try switching to compiled mode at the bottom of the page.';
         break;
     }
     this.handleError_(severity, message, href);
@@ -205,7 +197,7 @@ shakaDemo.Main = class {
     // Optionally enter noinput mode. This has to happen before setting up the
     // player.
     this.noInput_ = 'noinput' in this.getParams_();
-    await this.setupPlayer_();
+    this.setupPlayer_();
     this.readHash_();
     window.addEventListener('hashchange', () => this.hashChanged_());
 
@@ -392,11 +384,8 @@ shakaDemo.Main = class {
     ui.configure(uiConfig);
   }
 
-  /**
-   * @return {!Promise}
-   * @private
-   */
-  async setupPlayer_() {
+  /** @private */
+  setupPlayer_() {
     const video = /** @type {!HTMLVideoElement} */ (this.video_);
     const ui = video['ui'];
     this.player_ = ui.getControls().getPlayer();
@@ -443,7 +432,6 @@ shakaDemo.Main = class {
     });
 
     this.localization_ = this.controls_.getLocalization();
-    await this.setupLocalization_();
 
     const drawerCloseButton = document.getElementById('drawer-close-button');
     drawerCloseButton.addEventListener('click', () => {
@@ -481,50 +469,6 @@ shakaDemo.Main = class {
     this.hideElement_(drawerCloseButton);
   }
 
-  /**
-   * @return {!Promise}
-   * @private
-   */
-  async setupLocalization_() {
-    // Set up localization lazy-loading.
-    const applyNewLocaleIfPossible = () => {
-      this.localizeHTMLElements_();
-      this.dispatchEventWithName_('shaka-main-locale-changed');
-    };
-    const UNKNOWN_LOCALES = shaka.ui.Localization.UNKNOWN_LOCALES;
-    this.localization_.addEventListener(UNKNOWN_LOCALES, (event) => {
-      for (const locale of event['locales']) {
-        // This will leave promise rejections uncaught; this is acceptable, as
-        // this function is actually expected to fail fairly often, and has
-        // built-in fallback behavior (from localization events) without needing
-        // to catch the promise rejection.
-        this.loadUILocale_(locale).then(() => {
-          if (locale == this.uiLocale_) {
-            applyNewLocaleIfPossible();
-          }
-        });
-      }
-    });
-    const LOCALE_CHANGED = shaka.ui.Localization.LOCALE_CHANGED;
-    this.localization_.addEventListener(LOCALE_CHANGED, (event) => {
-      applyNewLocaleIfPossible();
-    });
-    const initialLocaleLoads = [];
-    initialLocaleLoads.push(this.loadUILocale_(this.uiLocale_));
-    if (this.uiLocale_.includes('-')) {
-      // Also try to load the 'base' localization.
-      // This is so that, for example, the uiLocale_ is set to 'en-US', it will
-      // try to load 'en'.
-      initialLocaleLoads.push(this.loadUILocale_(this.uiLocale_.split('-')[0]));
-    }
-    if (!this.uiLocale_.startsWith('en')) {
-      // Load 'en' as a fallback option, if not already loaded.
-      initialLocaleLoads.push(this.loadUILocale_('en'));
-    }
-    await Promise.all(initialLocaleLoads);
-    this.localizeHTMLElements_();
-  }
-
   /** @return {boolean} */
   getIsDrawerOpen() {
     const drawer = document.querySelector('.mdl-layout__drawer');
@@ -719,13 +663,13 @@ shakaDemo.Main = class {
    *
    * @param {!ShakaDemoAssetInfo} asset
    * @param {boolean} needOffline True if offline support is required.
-   * @return {?shakaDemo.MessageIds} unsupportedReason
+   * @return {?string} unsupportedReason
    *   Null if asset is supported.
    */
   getAssetUnsupportedReason(asset, needOffline) {
     if (needOffline &&
         (!shaka.offline.Storage.support() || !this.initialStoredList_)) {
-      return shakaDemo.MessageIds.UNSUPPORTED_NO_OFFLINE;
+      return 'Your browser does not support offline storage.';
     }
 
     if (asset.source == shakaAssets.Source.CUSTOM) {
@@ -736,11 +680,11 @@ shakaDemo.Main = class {
 
     // Is the asset disabled?
     if (asset.disabled) {
-      return shakaDemo.MessageIds.UNSUPPORTED_DISABLED;
+      return 'This asset is disabled.';
     }
 
     if (needOffline && !asset.features.includes(shakaAssets.Feature.OFFLINE)) {
-      return shakaDemo.MessageIds.UNSUPPORTED_NO_DOWNLOAD;
+      return 'This asset cannot be downloaded.';
     }
 
     if (!asset.isClear() && !asset.isAes128()) {
@@ -748,7 +692,7 @@ shakaDemo.Main = class {
         return this.support_.drm[shakaAssets.identifierForKeySystem(drm)];
       });
       if (!hasSupportedDRM) {
-        return shakaDemo.MessageIds.UNSUPPORTED_NO_KEY_SUPPORT;
+        return 'Your browser does not support the required key systems.';
       }
       if (needOffline) {
         const hasSupportedOfflineDRM = asset.drm.some((drm) => {
@@ -757,23 +701,24 @@ shakaDemo.Main = class {
                  this.support_.drm[identifier].persistentState;
         });
         if (!hasSupportedOfflineDRM) {
-          return shakaDemo.MessageIds.UNSUPPORTED_NO_LICENSE_SUPPORT;
+          return 'Your browser does not support offline licenses for the ' +
+              'required key systems.';
         }
       }
     }
 
     // Does the browser support the asset's manifest type?
     if (asset.features.includes(shakaAssets.Feature.DASH) &&
-        !this.support_.manifest['mpd']) {
-      return shakaDemo.MessageIds.UNSUPPORTED_NO_DASH_SUPPORT;
+        !this.support_.manifest['application/dash+xml']) {
+      return 'Your browser does not support MPEG-DASH manifests.';
     }
     if (asset.features.includes(shakaAssets.Feature.HLS) &&
-        !this.support_.manifest['m3u8']) {
-      return shakaDemo.MessageIds.UNSUPPORTED_NO_HLS_SUPPORT;
+        !this.support_.manifest['application/x-mpegurl']) {
+      return 'Your browser does not support HLS manifests.';
     }
     if (asset.features.includes(shakaAssets.Feature.MSS) &&
-        !this.support_.manifest['ism']) {
-      return shakaDemo.MessageIds.UNSUPPORTED_NO_MSS_SUPPORT;
+        !this.support_.manifest['application/vnd.ms-sstr+xml']) {
+      return 'Your browser does not support MSS manifests.';
     }
 
     // Does the asset contain a playable mime type?
@@ -790,11 +735,14 @@ shakaDemo.Main = class {
     if (asset.features.includes(shakaAssets.Feature.CONTAINERLESS)) {
       mimeTypes.push('audio/aac');
     }
+    if (asset.features.includes(shakaAssets.Feature.DOLBY_VISION_3D)) {
+      mimeTypes.push('video/mp4; codecs="dvh1.20.01"');
+    }
     const hasSupportedMimeType = mimeTypes.some((type) => {
       return this.support_.media[type];
     });
     if (!hasSupportedMimeType) {
-      return shakaDemo.MessageIds.UNSUPPORTED_NO_FORMAT_SUPPORT;
+      return 'Your browser does not support the required video format.';
     }
 
     return null;
@@ -841,55 +789,6 @@ shakaDemo.Main = class {
     return this.nativeControlsEnabled_;
   }
 
-  /**
-   * Look through all elements in the DOM, and look for things tagged as having
-   * a localized string. Then, localize them.
-   *
-   * @private
-   */
-  localizeHTMLElements_() {
-    for (const element of document.querySelectorAll('[localized-string]')) {
-      const key = element.getAttribute('localized-string');
-      const value = shakaDemo.MessageIds[key];
-      if (value) {
-        element.textContent = this.getLocalizedString(value);
-      }
-    }
-  }
-
-  /**
-   * @param {!shakaDemo.MessageIds} string
-   * @return {string}
-   */
-  getLocalizedString(string) {
-    return this.localization_.resolve(string);
-  }
-
-  /**
-   * @param {string} locale
-   * @return {!Promise}
-   * @private
-   */
-  async loadUILocale_(locale) {
-    if (!locale) {
-      return;
-    }
-
-    const load = async (urlBase) => {
-      const url = urlBase + '/locales/' + locale + '.json';
-
-      try {
-        const text = await this.loadText_(url);
-        const obj = /** @type {!Object.<string, string>} */(JSON.parse(text));
-        const map = new Map(Object.entries(obj));
-        this.localization_.insert(locale, map);
-      } catch (error) {
-        console.warn('Unable to load locale', locale, 'for url', url);
-      }
-    };
-    await Promise.all([load('../ui'), load('../demo')]);
-  }
-
   /** @param {string} locale */
   setUILocale(locale) {
     this.uiLocale_ = locale;
@@ -1349,6 +1248,11 @@ shakaDemo.Main = class {
       if (asset.imaAssetKey || (asset.imaContentSrcId && asset.imaVideoId)) {
         manifestUri = await this.getManifestUriFromAdManager_(asset);
       }
+      // If it's a MediaTailor asset, request ad-containing manifest
+      // from the ad manager.
+      if (asset.mediaTailorUrl) {
+        manifestUri = await this.getManifestUriFromMediaTailorAdManager_(asset);
+      }
       await this.player_.load(
           manifestUri,
           /* startTime= */ null,
@@ -1367,6 +1271,11 @@ shakaDemo.Main = class {
         this.player_.addThumbnailsTrack(extraThumbnail);
       }
 
+      for (const extraChapter of asset.extraChapter) {
+        this.player_.addChaptersTrack(extraChapter.uri, extraChapter.language,
+            extraChapter.mime);
+      }
+
       // If the asset has an ad tag attached to it, load the ads
       const adManager = this.player_.getAdManager();
       if (adManager && asset.adTagUri) {
@@ -1636,6 +1545,34 @@ shakaDemo.Main = class {
     }
   }
 
+  /**
+   * @param {ShakaDemoAssetInfo} asset
+   * @return {!Promise.<string>}
+   * @private
+   */
+  async getManifestUriFromMediaTailorAdManager_(asset) {
+    const adManager = this.player_.getAdManager();
+    const container = this.controls_.getServerSideAdContainer();
+    try {
+      goog.asserts.assert(this.video_ != null, 'Video should not be null!');
+      goog.asserts.assert(asset.mediaTailorUrl != null,
+          'Media Tailor info not be null!');
+      const netEngine = this.player_.getNetworkingEngine();
+      goog.asserts.assert(netEngine, 'There should be a net engine.');
+      adManager.initMediaTailor(container, netEngine, this.video_);
+      const uri = await adManager.requestMediaTailorStream(
+          asset.mediaTailorUrl, asset.mediaTailorAdsParams,
+          /* backupUri= */ asset.manifestUri);
+      return uri;
+    } catch (error) {
+      console.log(error);
+      console.warn('Ads code has been prevented from running ' +
+          'or returned an error. Proceeding without ads.');
+
+      return asset.manifestUri;
+    }
+  }
+
   /**
    * Sets up a nav button, and an associated tab.
    * This method is meant to be called by the various tabs, as part of their
@@ -1810,7 +1747,6 @@ shakaDemo.Main = class {
     // Always show the new error if:
     //   1. there is no error showing currently
     //   2. the new error is more severe than the old one
-    // Sadly, we do not (yet?) have localizations for error messages.
     if (this.currentErrorSeverity_ == null ||
         severity > this.currentErrorSeverity_) {
       this.errorDisplayLink_.href = href;

package/demo/search.js

@@ -11,7 +11,6 @@ goog.provide('shakaDemo.Search');
 goog.require('shakaDemo.AssetCard');
 goog.require('shakaDemo.BoolInput');
 goog.require('shakaDemo.InputContainer');
-goog.require('shakaDemo.MessageIds');
 goog.require('shakaDemo.SelectInput');
 goog.requireType('ShakaDemoAssetInfo');
 
@@ -60,12 +59,6 @@ shakaDemo.Search = class {
     document.addEventListener('shaka-main-offline-progress', () => {
       this.updateOfflineProgress_();
     });
-    document.addEventListener('shaka-main-locale-changed', () => {
-      this.remakeSearchDiv_(container);
-      this.remakeResultsDiv_();
-      // Update the componentHandler, to account for any new MDL elements added.
-      componentHandler.upgradeDom();
-    });
     document.addEventListener('shaka-main-page-changed', () => {
       if (!this.resultsDiv_.childNodes.length &&
           !container.classList.contains('hidden')) {
@@ -153,7 +146,7 @@ shakaDemo.Search = class {
       if (unsupportedReason) {
         c.markAsUnsupported(unsupportedReason);
       } else {
-        c.addButton(shakaDemo.MessageIds.PLAY, () => {
+        c.addButton('Play', () => {
           shakaDemoMain.loadAsset(asset);
           this.updateSelected_();
         });
@@ -270,7 +263,7 @@ shakaDemo.Search = class {
    * The term this represents.
    * @param {shakaDemo.Search.TermType} type
    * The type of term that this term is.
-   * @param {?shakaDemo.MessageIds} tooltip
+   * @param {?string} tooltip
    * @private
    */
   makeBooleanInput_(searchContainer, choice, type, tooltip) {
@@ -298,7 +291,7 @@ shakaDemo.Search = class {
    * Creates an input for a group of related but mutually-exclusive search
    * terms.
    * @param {!shakaDemo.InputContainer} searchContainer
-   * @param {!shakaDemo.MessageIds} name
+   * @param {string} name
    * @param {!Array.<!shakaDemo.Search.SearchTerm>} choices
    * An array of the terms in this term group.
    * @param {shakaDemo.Search.TermType} type
@@ -311,7 +304,7 @@ shakaDemo.Search = class {
     const nullOption = '---';
     const valuesObject = {};
     for (const term of choices) {
-      valuesObject[term] = shakaDemoMain.getLocalizedString(term);
+      valuesObject[term] = term;
     }
     valuesObject[nullOption] = nullOption;
     let lastValue = nullOption;
@@ -357,23 +350,18 @@ shakaDemo.Search = class {
     const coreContainer = new shakaDemo.InputContainer(
         container, /* headerText= */ null, shakaDemo.InputContainer.Style.FLEX,
         /* docLink= */ null);
-    this.makeSelectInput_(coreContainer,
-        shakaDemo.MessageIds.MANIFEST_SEARCH,
+    this.makeSelectInput_(coreContainer, 'Manifest',
         [Feature.DASH, Feature.HLS, Feature.MSS], FEATURE);
-    this.makeSelectInput_(coreContainer,
-        shakaDemo.MessageIds.CONTAINER_SEARCH,
+    this.makeSelectInput_(coreContainer, 'Container',
         [Feature.MP4, Feature.MP2TS, Feature.WEBM, Feature.CONTAINERLESS],
         FEATURE);
-    this.makeSelectInput_(coreContainer,
-        shakaDemo.MessageIds.DRM_SEARCH,
+    this.makeSelectInput_(coreContainer, 'DRM',
         Object.values(shakaAssets.KeySystem), DRM);
-    this.makeSelectInput_(coreContainer,
-        shakaDemo.MessageIds.SOURCE_SEARCH,
+    this.makeSelectInput_(coreContainer, 'Source',
         Object.values(shakaAssets.Source).filter((term) => {
           return term != shakaAssets.Source.CUSTOM;
         }), SOURCE);
-    this.makeSelectInput_(coreContainer,
-        shakaDemo.MessageIds.LIVE_SEARCH,
+    this.makeSelectInput_(coreContainer, 'Live',
         [Feature.LOW_LATENCY, Feature.LIVE, Feature.VOD], FEATURE);
 
     // Special terms.
@@ -382,29 +370,36 @@ shakaDemo.Search = class {
         container, /* headerText= */ null, containerStyle,
         /* docLink= */ null);
     this.makeBooleanInput_(specialContainer, Feature.HIGH_DEFINITION, FEATURE,
-        shakaDemo.MessageIds.HIGH_DEFINITION_SEARCH);
+        'Filters for assets with at least one high-definition video stream.');
+    this.makeBooleanInput_(specialContainer, Feature.ULTRA_HIGH_DEFINITION,
+        FEATURE, 'Filters for assets with at least one ultra-high-definition' +
+        ' video stream.');
     this.makeBooleanInput_(specialContainer, Feature.XLINK, FEATURE,
-        shakaDemo.MessageIds.XLINK_SEARCH);
+        'Filters for assets that have XLINK tags in their manifests, so that ' +
+        'they can be broken into multiple files.');
     this.makeBooleanInput_(specialContainer, Feature.SUBTITLES, FEATURE,
-        shakaDemo.MessageIds.SUBTITLES_SEARCH);
+        'Filters for assets with caption tracks, or embedded captions.');
     this.makeBooleanInput_(specialContainer, Feature.TRICK_MODE, FEATURE,
-        shakaDemo.MessageIds.TRICK_MODE_SEARCH);
+        'Filters for assets that have special video tracks to be used in ' +
+        'trick mode playback (aka fast-forward).');
     this.makeBooleanInput_(specialContainer, Feature.SURROUND, FEATURE,
-        shakaDemo.MessageIds.SURROUND_SEARCH);
+        'Filters for assets with at least one surround sound audio track.');
     this.makeBooleanInput_(specialContainer, Feature.OFFLINE, FEATURE,
-        shakaDemo.MessageIds.OFFLINE_SEARCH);
+        'Filters for assets that can be stored offline.');
     this.makeBooleanInput_(specialContainer, Feature.STORED, FEATURE,
-        shakaDemo.MessageIds.STORED_SEARCH);
+        'Filters for assets that have been stored offline.');
     this.makeBooleanInput_(specialContainer, Feature.ADS, FEATURE,
-        shakaDemo.MessageIds.AD_SEARCH);
+        'Filters for assets that have advertisements.');
     this.makeBooleanInput_(specialContainer, Feature.AUDIO_ONLY, FEATURE,
-        shakaDemo.MessageIds.AUDIO_ONLY_SEARCH);
+        'Filters for assets that do not have video streams.');
     this.makeBooleanInput_(specialContainer, Feature.THUMBNAILS, FEATURE,
-        shakaDemo.MessageIds.THUMBNAILS);
+        'Filters for assets that have a thumbnail track.');
+    this.makeBooleanInput_(specialContainer, Feature.CHAPTERS, FEATURE,
+        'Filters for assets that have a chapters track.');
     this.makeBooleanInput_(specialContainer, Feature.LCEVC, FEATURE,
-        shakaDemo.MessageIds.LCEVC);
-    this.makeBooleanInput_(specialContainer, Feature.LOW_LATENCY,
-        FEATURE, shakaDemo.MessageIds.LOW_LATENCY);
+        'Filters for assets that have an LCEVC enhancement layer.');
+    this.makeBooleanInput_(specialContainer, Feature.CONTENT_STEERING, FEATURE,
+        'Filters for assets that use Content Steering.');
 
     container.appendChild(this.resultsDiv_);
   }

package/demo/service_worker.js

@@ -92,9 +92,6 @@ const OPTIONAL_RESOURCES = [
   'https://shaka-player-demo.appspot.com/assets/poster.jpg',
   'https://shaka-player-demo.appspot.com/assets/audioOnly.gif',
 
-  // The mux.js transmuxing library for MPEG-2 TS and CEA support.
-  '../node_modules/mux.js/dist/mux.min.js',
-
   // The codem-isoboxer library for MSS support.
   '../node_modules/codem-isoboxer/dist/iso_boxer.min.js',
 

package/demo/tooltip.js

@@ -7,19 +7,17 @@
 
 goog.provide('shakaDemo.Tooltips');
 
-goog.requireType('shakaDemo.MessageIds');
-
 /**
  * Creates and contains a tooltip.
  */
 shakaDemo.Tooltips = class {
   /**
    * @param {!Element} labeledElement
-   * @param {shakaDemo.MessageIds} message
+   * @param {string} content
    */
-  static make(labeledElement, message) {
+  static make(labeledElement, content) {
     tippy(labeledElement, {
-      content: shakaDemoMain.getLocalizedString(message),
+      content,
       placement: 'bottom',
       arrow: true,
       animation: 'scale',

package/demo/visualizer.js

@@ -84,8 +84,7 @@ shakaDemo.Visualizer = class {
     inputContainer.addRow(null, null);
     this.screenshotButton_ = document.createElement('button');
     inputContainer.latestElementContainer.appendChild(this.screenshotButton_);
-    this.screenshotButton_.textContent = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.VISUALIZER_SCREENSHOT_BUTTON);
+    this.screenshotButton_.textContent = 'Take Screenshot';
     this.screenshotButton_.classList.add('mdl-button');
     this.screenshotButton_.classList.add('mdl-button--colored');
     this.screenshotButton_.classList.add('mdl-js-button');
@@ -94,11 +93,10 @@ shakaDemo.Visualizer = class {
       this.takeScreenshot_();
     });
 
-    inputContainer.addRow(
-        shakaDemo.MessageIds.VISUALIZER_AUTO_SCREENSHOT_TOGGLE, null);
+    inputContainer.addRow('Take Screenshot On Stall', null);
     /** @private {!shakaDemo.BoolInput} */
     this.autoScreenshotToggle_ = new shakaDemo.BoolInput(
-        inputContainer, shakaDemo.MessageIds.VISUALIZER_AUTO_SCREENSHOT_TOGGLE,
+        inputContainer, 'Take Screenshot On Stall',
         (input) => {
           this.takeAutoScreenshots_ = input.checked;
         });

package/demo/visualizer_button.js

@@ -7,8 +7,6 @@
 
 goog.provide('shakaDemo.VisualizerButton');
 
-goog.require('shakaDemo.MessageIds');
-
 /**
  * A custom UI overflow button, to allow users to show the visualizer.
  * This cannot actually extend shaka.ui.Element, as that class does not exist
@@ -41,6 +39,7 @@ shakaDemo.VisualizerButton = class extends shaka.ui.Element {
     label.classList.add('shaka-overflow-menu-only');
     this.nameSpan_ = document.createElement('span');
     label.appendChild(this.nameSpan_);
+    this.nameSpan_.textContent = 'Buffer Visualizer';
 
     /** @private {!HTMLElement} */
     this.currentPipState_ = /** @type {!HTMLElement} */ (
@@ -57,24 +56,6 @@ shakaDemo.VisualizerButton = class extends shaka.ui.Element {
           !shakaDemoMain.getIsVisualizerActive());
       this.setIcon_();
     });
-
-    this.eventManager.listen(
-        this.localization, shaka.ui.Localization.LOCALE_UPDATED, () => {
-          this.updateLocalizedStrings_();
-        });
-
-    this.eventManager.listen(
-        this.localization, shaka.ui.Localization.LOCALE_CHANGED, () => {
-          this.updateLocalizedStrings_();
-        });
-  }
-
-  /** @private */
-  updateLocalizedStrings_() {
-    this.nameSpan_.textContent = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.VISUALIZER_BUTTON);
-    // TODO: Make sure that the screenreader description of this control is
-    // localized!
   }
 
   /** @private */