shaka-player 4.4.3 → 4.6.0

package/demo/custom.js

@@ -12,7 +12,6 @@ goog.require('ShakaDemoAssetInfo');
 goog.require('shakaDemo.AssetCard');
 goog.require('shakaDemo.Input');
 goog.require('shakaDemo.InputContainer');
-goog.require('shakaDemo.MessageIds');
 goog.require('shakaDemo.TextInput');
 
 /** @type {?shakaDemo.Custom} */
@@ -71,9 +70,6 @@ shakaDemo.Custom = class {
     document.addEventListener('shaka-main-offline-progress', () => {
       this.updateOfflineProgress_();
     });
-    document.addEventListener('shaka-main-locale-changed', () => {
-      this.remakeSavedList_();
-    });
     document.addEventListener('shaka-main-page-changed', () => {
       if (!this.savedList_.childNodes.length &&
           !container.classList.contains('hidden')) {
@@ -142,9 +138,8 @@ shakaDemo.Custom = class {
       const div = document.createElement('div');
       headersDiv.appendChild(div);
       const containerStyle = shakaDemo.InputContainer.Style.VERTICAL;
-      const headerText = shakaDemo.MessageIds.LICENSE_HEADER_TITLE;
       const container = new shakaDemo.InputContainer(
-          div, headerText, containerStyle,
+          div, 'License Header', containerStyle,
           /* docLink= */ null);
 
       const collisionCheckEntry = {
@@ -209,9 +204,7 @@ shakaDemo.Custom = class {
       const nameOnChange = (input) => {
         onChange(input.value, headerValue);
       };
-      const licenseHeaderName = shakaDemoMain.getLocalizedString(
-          shakaDemo.MessageIds.LICENSE_HEADER_NAME);
-      this.makeField_(container, licenseHeaderName, nameSetup, nameOnChange);
+      this.makeField_(container, 'Header Name', nameSetup, nameOnChange);
 
       const valueSetup = (input, container) => {
         if (headerValue) {
@@ -221,9 +214,7 @@ shakaDemo.Custom = class {
       const valueOnChange = (input) => {
         onChange(headerName, input.value);
       };
-      const licenseHeaderValue = shakaDemoMain.getLocalizedString(
-          shakaDemo.MessageIds.LICENSE_HEADER_VALUE);
-      this.makeField_(container, licenseHeaderValue, valueSetup, valueOnChange);
+      this.makeField_(container, 'Header Value', valueSetup, valueOnChange);
     };
     if (assetInProgress.licenseRequestHeaders.size == 0) {
       // It starts out with a single empty row, but each time you start filling
@@ -244,40 +235,6 @@ shakaDemo.Custom = class {
   }
 
 
-  /**
-   * @param {!ShakaDemoAssetInfo} assetInProgress
-   * @param {!Array.<!HTMLInputElement>} inputsToCheck
-   * @return {!Element} div
-   * @private
-   */
-  makeAssetDialogContentsHLS_(assetInProgress, inputsToCheck) {
-    const mediaPlaylistDiv = document.createElement('div');
-    const containerStyle = shakaDemo.InputContainer.Style.FLEX;
-    const container = new shakaDemo.InputContainer(
-        mediaPlaylistDiv, /* headerText= */ null, containerStyle,
-        /* docLink= */ null);
-    container.getClassList().add('wide-input');
-    container.setDefaultRowClass('wide-input');
-
-    const fullMimeTypeSetup = (input, container) => {
-      if (assetInProgress.mediaPlaylistFullMimeType) {
-        input.value = assetInProgress.mediaPlaylistFullMimeType;
-      }
-      const defaultConfig = shaka.util.PlayerConfiguration.createDefault();
-      input.placeholder = defaultConfig.manifest.hls.mediaPlaylistFullMimeType;
-    };
-    const fullMimeTypeOnChange = (input) => {
-      assetInProgress.setMediaPlaylistFullMimeType(input.value);
-    };
-    const fullMimeTypeName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.HLS_FULL_MIME_TYPE);
-    this.makeField_(
-        container, fullMimeTypeName, fullMimeTypeSetup, fullMimeTypeOnChange);
-
-    return mediaPlaylistDiv;
-  }
-
-
   /**
    * @param {!ShakaDemoAssetInfo} assetInProgress
    * @param {!Array.<!HTMLInputElement>} inputsToCheck
@@ -300,10 +257,7 @@ shakaDemo.Custom = class {
     const adTagOnChange = (input) => {
       assetInProgress.adTagUri = input.value;
     };
-    const adTagURLName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.AD_TAG_URL);
-    this.makeField_(
-        container, adTagURLName, adTagSetup, adTagOnChange);
+    this.makeField_(container, 'Ad Tag URL', adTagSetup, adTagOnChange);
 
     // Make the content source id field.
     const contentSrcIdSetup = (input, container) => {
@@ -319,8 +273,7 @@ shakaDemo.Custom = class {
       this.manifestField_.required =
         this.checkManifestRequired_(assetInProgress);
     };
-    const contentSrcIdName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.IMA_CONTENT_SRC_ID);
+    const contentSrcIdName = 'Content source ID (for VOD DAI Content)';
     this.makeField_(
         container, contentSrcIdName, contentSrcIdSetup, contentSrcIdOnChange);
 
@@ -338,10 +291,8 @@ shakaDemo.Custom = class {
       this.manifestField_.required =
         this.checkManifestRequired_(assetInProgress);
     };
-    const videoIdName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.IMA_VIDEO_ID);
-    this.makeField_(
-        container, videoIdName, videoIdSetup, videoIdOnChange);
+    const videoIdName = 'Video ID (for VOD DAI Content)';
+    this.makeField_(container, videoIdName, videoIdSetup, videoIdOnChange);
 
     // Make the asset key field.
     const assetKeySetup = (input, container) => {
@@ -357,10 +308,8 @@ shakaDemo.Custom = class {
       this.manifestField_.required =
         this.checkManifestRequired_(assetInProgress);
     };
-    const assetKeyName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.IMA_ASSET_KEY);
-    this.makeField_(
-        container, assetKeyName, assetKeySetup, assetKeyChange);
+    const assetKeyName = 'Asset key (for LIVE DAI Content)';
+    this.makeField_(container, assetKeyName, assetKeySetup, assetKeyChange);
 
     // Make the manifest type field.
     const manifestTypeSetup = (input, container) => {
@@ -376,11 +325,25 @@ shakaDemo.Custom = class {
       this.manifestField_.required =
         this.checkManifestRequired_(assetInProgress);
     };
-    const manifestTypeName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.IMA_MANIFEST_TYPE);
+    const manifestTypeName = 'Manifest type (for DAI Content)';
     this.makeField_(
         container, manifestTypeName, manifestTypeSetup, manifestTypeChange);
 
+    // Make the MediaTailor URL field.
+    const mediaTailorSetup = (input, container) => {
+      if (assetInProgress.mediaTailorUrl) {
+        input.value = assetInProgress.mediaTailorUrl;
+      }
+    };
+    const mediaTailorOnChange = (input) => {
+      assetInProgress.setMediaTailor(input.value);
+      this.manifestField_.required =
+        this.checkManifestRequired_(assetInProgress);
+    };
+    const mediaTailorName = 'Media Tailor URL';
+    this.makeField_(
+        container, mediaTailorName, mediaTailorSetup, mediaTailorOnChange);
+
     return adsDiv;
   }
 
@@ -437,10 +400,8 @@ shakaDemo.Custom = class {
     const licenseOnChange = (input) => {
       setLicenseServerURLs();
     };
-    const licenseServerURLName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.LICENSE_SERVER_URL);
     this.makeField_(
-        container, licenseServerURLName, licenseSetup, licenseOnChange);
+        container, 'Custom License Server URL', licenseSetup, licenseOnChange);
 
     // Make the license certificate URL field.
     const certSetup = (input, container) => {
@@ -451,10 +412,8 @@ shakaDemo.Custom = class {
     const certOnChange = (input) => {
       assetInProgress.certificateUri = input.value;
     };
-    const licenseCertificateURLName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.LICENSE_CERTIFICATE_URL);
     this.makeField_(
-        container, licenseCertificateURLName, certSetup, certOnChange);
+        container, 'Custom License Certificate URL', certSetup, certOnChange);
 
     // Make the drm system field.
     const drmSetup = (input, container) => {
@@ -470,14 +429,42 @@ shakaDemo.Custom = class {
     const drmOnChange = (input) => {
       setLicenseServerURLs();
     };
-    const DRMSystemName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.DRM_SYSTEM);
-    this.makeField_(
-        container, DRMSystemName, drmSetup, drmOnChange);
+    this.makeField_(container, 'Custom DRM System', drmSetup, drmOnChange);
 
     return drmDiv;
   }
 
+  /**
+   * @param {!ShakaDemoAssetInfo} assetInProgress
+   * @param {!Array.<!HTMLInputElement>} inputsToCheck
+   * @return {!Element} div
+   * @private
+   */
+  makeAssetDialogContentsExtraTracks_(assetInProgress, inputsToCheck) {
+    const extraTracksDiv = document.createElement('div');
+    const containerStyle = shakaDemo.InputContainer.Style.FLEX;
+    const container = new shakaDemo.InputContainer(
+        extraTracksDiv, /* headerText= */ null, containerStyle,
+        /* docLink= */ null);
+    container.getClassList().add('wide-input');
+    container.setDefaultRowClass('wide-input');
+
+    const thumbnailsUrlSetup = (input, container) => {
+      if (assetInProgress.extraThumbnail.length) {
+        input.value = assetInProgress.extraThumbnail[0];
+      }
+    };
+    const thumbnailsUrlOnChange = (input) => {
+      assetInProgress.extraThumbnail = [];
+      assetInProgress.addExtraThumbnail(input.value);
+    };
+
+    this.makeField_(
+        container, 'Thumbnails URL', thumbnailsUrlSetup, thumbnailsUrlOnChange);
+
+    return extraTracksDiv;
+  }
+
   /**
    * @param {!ShakaDemoAssetInfo} assetInProgress
    * @param {!Array.<!HTMLInputElement>} inputsToCheck
@@ -508,8 +495,7 @@ shakaDemo.Custom = class {
       // Make an error that shows up if you did not provide valid JSON.
       const error = document.createElement('span');
       error.classList.add('mdl-textfield__error');
-      error.textContent = shakaDemoMain.getLocalizedString(
-          shakaDemo.MessageIds.INVALID_JSON_CONFIG_ERROR);
+      error.textContent = 'Invalid JSON configuration';
 
       container.appendChild(error);
     };
@@ -526,8 +512,7 @@ shakaDemo.Custom = class {
         inputWrapper.setValid(false);
       }
     };
-    const extraConfigLabel = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.EXTRA_SHAKA_PLAYER_CONFIG);
+    const extraConfigLabel = 'Extra Shaka Player configuration (JSON)';
     this.makeField_(
         container, extraConfigLabel, extraSetup, extraOnChange,
         /* isTextArea= */ true);
@@ -557,8 +542,7 @@ shakaDemo.Custom = class {
       // Make an error that shows up if you did not provide an URL.
       const error = document.createElement('span');
       error.classList.add('mdl-textfield__error');
-      error.textContent = shakaDemoMain.getLocalizedString(
-          shakaDemo.MessageIds.MANIFEST_URL_ERROR);
+      error.textContent = 'Must have a manifest URL, or IMA DAI id fields';
       container.appendChild(error);
 
       // Add a regex that will detect empty strings.
@@ -569,10 +553,7 @@ shakaDemo.Custom = class {
     const manifestOnChange = (input) => {
       assetInProgress.manifestUri = input.value.trim();
     };
-    const manifestURLName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.MANIFEST_URL);
-    this.makeField_(
-        container, manifestURLName, manifestSetup, manifestOnChange);
+    this.makeField_(container, 'Manifest URL', manifestSetup, manifestOnChange);
 
     // Make the name field.
     const nameSetup = (input, container) => {
@@ -582,8 +563,7 @@ shakaDemo.Custom = class {
       // Make an error that shows up if you have an empty/duplicate name.
       const error = document.createElement('span');
       error.classList.add('mdl-textfield__error');
-      error.textContent = shakaDemoMain.getLocalizedString(
-          shakaDemo.MessageIds.NAME_ERROR);
+      error.textContent = 'Must be a unique name.';
       container.appendChild(error);
 
       // Make a regex that will detect duplicates.
@@ -604,10 +584,7 @@ shakaDemo.Custom = class {
     const nameOnChange = (input) => {
       assetInProgress.name = input.value;
     };
-    const nameName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.NAME);
-    this.makeField_(
-        container, nameName, nameSetup, nameOnChange);
+    this.makeField_(container, 'Name', nameSetup, nameOnChange);
 
     // Make the icon field.
     const iconSetup = (input, container) => {
@@ -634,11 +611,7 @@ shakaDemo.Custom = class {
         iconDiv.appendChild(img);
       }
     };
-
-    const iconURLName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.ICON_URL);
-    this.makeField_(
-        container, iconURLName, iconSetup, iconOnChange);
+    this.makeField_(container, 'Icon URL', iconSetup, iconOnChange);
 
     // Make the MIME type field.
     const mimeTypeSetup = (input, container) => {
@@ -650,11 +623,7 @@ shakaDemo.Custom = class {
     const mimeTypeOnChange = (input) => {
       assetInProgress.mimeType = input.value || null;
     };
-
-    const mimeTypeName = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.MIME_TYPE);
-    this.makeField_(
-        container, mimeTypeName, mimeTypeSetup, mimeTypeOnChange);
+    this.makeField_(container, 'MIME Type', mimeTypeSetup, mimeTypeOnChange);
 
     return mainDiv;
   }
@@ -668,7 +637,9 @@ shakaDemo.Custom = class {
     // from the Google Ad Manager using IMA ids.
     const isDaiAdManifest = (assetInProgress.imaContentSrcId &&
         assetInProgress.imaVideoId) || assetInProgress.imaAssetKey != null;
-    return !isDaiAdManifest;
+    // Or if we are getting it from AWS Elemental MediaTailor.
+    const isMediaTailor = !!assetInProgress.mediaTailorUrl;
+    return !isDaiAdManifest && !isMediaTailor;
   }
 
   /**
@@ -681,9 +652,7 @@ shakaDemo.Custom = class {
     const finishDiv = document.createElement('tr');
 
     const buttonStyle = shakaDemo.Custom.ButtonStyle_.RAISED;
-    const saveString =
-        shakaDemoMain.getLocalizedString(shakaDemo.MessageIds.SAVE_BUTTON);
-    finishDiv.appendChild(this.makeButton_(saveString, buttonStyle, () => {
+    finishDiv.appendChild(this.makeButton_('Save', buttonStyle, () => {
       for (const input of inputsToCheck) {
         if (!input.validity.valid) {
           return;
@@ -695,9 +664,7 @@ shakaDemo.Custom = class {
       this.remakeSavedList_();
       this.dialog_.close();
     }));
-    const cancelString =
-        shakaDemoMain.getLocalizedString(shakaDemo.MessageIds.CANCEL_BUTTON);
-    finishDiv.appendChild(this.makeButton_(cancelString, buttonStyle, () => {
+    finishDiv.appendChild(this.makeButton_('Cancel', buttonStyle, () => {
       this.dialog_.close();
     }));
 
@@ -726,7 +693,7 @@ shakaDemo.Custom = class {
         assetInProgress, inputsToCheck);
     const adsDiv = this.makeAssetDialogContentsAds_(
         assetInProgress, inputsToCheck);
-    const hlsDiv = this.makeAssetDialogContentsHLS_(
+    const extraTracksDiv = this.makeAssetDialogContentsExtraTracks_(
         assetInProgress, inputsToCheck);
     const extraConfigDiv = this.makeAssetDialogContentsExtra_(
         assetInProgress, inputsToCheck);
@@ -737,9 +704,8 @@ shakaDemo.Custom = class {
     const tabDiv = document.createElement('tr');
     const tabsToHide = [];
     const buttonsToSwitch = [];
-    const addTabButton = (messageId, tabToShow, startOn) => {
+    const addTabButton = (name, tabToShow, startOn) => {
       const buttonStyle = shakaDemo.Custom.ButtonStyle_.PLAIN;
-      const name = shakaDemoMain.getLocalizedString(messageId);
       const button = this.makeButton_(name, buttonStyle, () => {
         for (const tab of tabsToHide) {
           tab.classList.add('hidden');
@@ -759,18 +725,12 @@ shakaDemo.Custom = class {
         tabToShow.classList.add('hidden');
       }
     };
-    addTabButton(
-        shakaDemo.MessageIds.MAIN_TAB, mainDiv, /* startOn= */ true);
-    addTabButton(
-        shakaDemo.MessageIds.DRM_TAB, drmDiv, /* startOn= */ false);
-    addTabButton(
-        shakaDemo.MessageIds.HEADERS_TAB, headersDiv, /* startOn= */ false);
-    addTabButton(
-        shakaDemo.MessageIds.ADS_TAB, adsDiv, /* startOn= */ false);
-    addTabButton(
-        shakaDemo.MessageIds.HLS_TAB, hlsDiv, /* startOn= */ false);
-    addTabButton(
-        shakaDemo.MessageIds.EXTRA_TAB, extraConfigDiv, /* startOn= */ false);
+    addTabButton('Main', mainDiv, /* startOn= */ true);
+    addTabButton('Drm', drmDiv, /* startOn= */ false);
+    addTabButton('Headers', headersDiv, /* startOn= */ false);
+    addTabButton('Ads', adsDiv, /* startOn= */ false);
+    addTabButton('Extra Tracks', extraTracksDiv, /* startOn= */ false);
+    addTabButton('Extra Config', extraConfigDiv, /* startOn= */ false);
 
     // Append the divs in the desired order.
     this.dialog_.appendChild(tabDiv);
@@ -778,7 +738,7 @@ shakaDemo.Custom = class {
     this.dialog_.appendChild(drmDiv);
     this.dialog_.appendChild(headersDiv);
     this.dialog_.appendChild(adsDiv);
-    this.dialog_.appendChild(hlsDiv);
+    this.dialog_.appendChild(extraTracksDiv);
     this.dialog_.appendChild(extraConfigDiv);
     this.dialog_.appendChild(finishDiv);
     this.dialog_.appendChild(iconDiv);
@@ -861,24 +821,24 @@ shakaDemo.Custom = class {
     const savedList = this.savedList_;
     const isFeatured = false;
     return new shakaDemo.AssetCard(savedList, asset, isFeatured, (c) => {
-      c.addButton(shakaDemo.MessageIds.PLAY, () => {
+      c.addButton('Play', () => {
         shakaDemoMain.loadAsset(asset);
         this.updateSelected_();
       });
-      c.addButton(shakaDemo.MessageIds.EDIT_CUSTOM, async () => {
+      c.addButton('Edit', async () => {
         if (asset.unstoreCallback) {
           await asset.unstoreCallback();
         }
         this.showAssetDialog_(asset);
       });
-      c.addButton(shakaDemo.MessageIds.DELETE_CUSTOM, async () => {
+      c.addButton('Delete', async () => {
         this.assets_.delete(asset);
         if (asset.unstoreCallback) {
           await asset.unstoreCallback();
         }
         this.saveAssetInfos_(this.assets_);
         this.remakeSavedList_();
-      }, shakaDemo.MessageIds.DELETE_CUSTOM);
+      }, 'Delete this custom asset?');
       c.addStoreButton();
     });
   }
@@ -905,15 +865,10 @@ shakaDemo.Custom = class {
         textElement.textContent = text;
         this.savedList_.appendChild(textElement);
       };
-      makeMessage('title',
-          shakaDemoMain.getLocalizedString(
-              shakaDemo.MessageIds.CUSTOM_INTRO_ONE));
-      makeMessage('body-2',
-          shakaDemoMain.getLocalizedString(
-              shakaDemo.MessageIds.CUSTOM_INTRO_TWO));
+      makeMessage('title', 'Try Shaka Player with your own content!');
+      makeMessage('body-2', 'Press the button below to add a custom asset.');
       makeMessage('body-1',
-          shakaDemoMain.getLocalizedString(
-              shakaDemo.MessageIds.CUSTOM_INTRO_THREE));
+          'Custom assets will remain even after reloading the page.');
     } else {
       // Make asset cards for the assets.
       this.assetCards_ = Array.from(this.assets_).map((asset) => {

package/demo/front.js

@@ -9,7 +9,6 @@ goog.provide('shakaDemo.Front');
 
 
 goog.require('shakaDemo.AssetCard');
-goog.require('shakaDemo.MessageIds');
 goog.requireType('ShakaDemoAssetInfo');
 
 /** @type {?shakaDemo.Front} */
@@ -50,9 +49,6 @@ shakaDemo.Front = class {
     document.addEventListener('shaka-main-offline-progress', () => {
       this.updateOfflineProgress_();
     });
-    document.addEventListener('shaka-main-locale-changed', () => {
-      this.remakeAssetCards_();
-    });
     document.addEventListener('shaka-main-page-changed', () => {
       if (!this.assetCardDiv_.childNodes.length &&
           !container.classList.contains('hidden')) {
@@ -74,19 +70,20 @@ shakaDemo.Front = class {
     const makeMessage = (textClass, text) => {
       const textElement = document.createElement('h2');
       textElement.classList.add('mdl-typography--' + textClass);
-      textElement.textContent = shakaDemoMain.getLocalizedString(text);
+      textElement.textContent = text;
       this.messageDiv_.appendChild(textElement);
     };
-    makeMessage('body-2', shakaDemo.MessageIds.FRONT_INTRO_ONE);
-    makeMessage('body-1', shakaDemo.MessageIds.FRONT_INTRO_TWO);
+    makeMessage('body-2', 'This is a demo of Google\'s Shaka Player, a ' +
+        'JavaScript library for adaptive video streaming.');
+    makeMessage('body-1', 'Choose a video to playback; more assets are ' +
+        'available via the "all content" tab.');
 
     const hideButton = document.createElement('button');
     hideButton.classList.add('mdl-button');
     hideButton.classList.add('mdl-button--colored');
     hideButton.classList.add('mdl-js-button');
     hideButton.classList.add('mdl-js-ripple-effect');
-    hideButton.textContent = shakaDemoMain.getLocalizedString(
-        shakaDemo.MessageIds.FRONT_INTRO_DISMISS);
+    hideButton.textContent = 'Dismiss';
     hideButton.addEventListener('click', () => {
       shaka.util.Dom.removeAllChildren(this.messageDiv_);
       window.localStorage.setItem(hideName, 'true');
@@ -122,7 +119,7 @@ shakaDemo.Front = class {
       if (unsupportedReason) {
         c.markAsUnsupported(unsupportedReason);
       } else {
-        c.addButton(shakaDemo.MessageIds.PLAY, () => {
+        c.addButton('Play', () => {
           shakaDemoMain.loadAsset(asset);
           this.updateSelected_();
         });

package/demo/index.html

@@ -36,12 +36,10 @@
     <link rel="stylesheet" href="../dist/controls.css">
 
     <script defer src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
-    <!-- transmuxing support is enabled by including this: -->
-    <script defer src="../node_modules/mux.js/dist/mux.min.js"></script>
     <!-- MSS support is enabled by including this: -->
     <script defer src="../node_modules/codem-isoboxer/dist/iso_boxer.min.js"></script>
     <!-- MPEG-5 Part2 LCEVC support is enabled by including this: -->
-    <script defer src="../node_modules/lcevc_dil.js/dist/lcevc_dil.min.js"></script>
+    <script defer src="../node_modules/lcevc_dec.js/dist/lcevc_dec.min.js"></script>
     <!-- MDL is enabled by including this: -->
     <script defer src="../node_modules/material-design-lite/dist/material.min.js"></script>
     <!-- MDL modal dialogs are enabled by including these: -->
@@ -87,7 +85,6 @@ UNCOMPILED_JS = [
   // Enable less, the CSS pre-processor.
   '../node_modules/less/dist/less.js',
   // These are the individual parts of the demo app.
-  'common/message_ids.js',
   'common/asset.js',
   'common/assets.js',
   'demo_uncompiled.js',
@@ -102,11 +99,11 @@ UNCOMPILED_JS = [
       <header class="app-header mdl-layout__header should-hide-in-no-input-mode">
         <header class="mdl-layout__header-row" id="nav-button-container">
           <img alt="Shaka Player Logo" src="shaka_logo_trans.png" class="logo" />
-          <button id="nav-button-front" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail" defaultselected localized-string="HOME" tab-identifier="HOME"></button>
-          <button id="nav-button-search" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail" localized-string="ALL_CONTENT" tab-identifier="ALL_CONTENT"></button>
-          <button id="nav-button-custom" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail" localized-string="CUSTOM_CONTENT" tab-identifier="CUSTOM CONTENT"></button>
+          <button id="nav-button-front" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail" defaultselected tab-identifier="HOME">HOME</button>
+          <button id="nav-button-search" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail" tab-identifier="ALL_CONTENT">ALL CONTENT</button>
+          <button id="nav-button-custom" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail" tab-identifier="CUSTOM CONTENT">CUSTOM CONTENT</button>
           <div class="mdl-layout-spacer"></div>
-          <button id="bug-button" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail" localized-string="REPORT_BUG"></button>
+          <button id="bug-button" class="mdl-button mdl-js-button mdl-js-ripple-effect should-disable-on-fail">REPORT BUG</button>
           <div class="version-block">
             <span class="version-string"></span>
           </div>
@@ -117,7 +114,7 @@ UNCOMPILED_JS = [
       </div>
       <div class="mdl-layout__drawer hamburger-menu">
         <div id="hamburger-menu-title" class="mdl-layout-title">
-          <div localized-string="CONFIG"></div>
+          <div>Shaka Player Demo Config</div>
           <div class="mdl-layout-spacer"></div>
           <button id="drawer-close-button" class="mdl-button mdl-js-button mdl-button--icon should-disable-on-fail"><i class="material-icons-round">close</i></button>
         </div>
@@ -144,28 +141,28 @@ UNCOMPILED_JS = [
           <div class="mdl-mega-footer__middle-section">
 
             <div class="mdl-mega-footer__drop-down-section">
-              <h1 class="mdl-mega-footer__heading" localized-string="PROJECT_LINKS_HEADER"></h1>
+              <h1 class="mdl-mega-footer__heading">PROJECT LINKS</h1>
               <ul class="mdl-mega-footer__link-list">
-                <li><a rel="noopener" target="_blank" href="../docs/api/index.html" localized-string="DOCUMENTATION"></a></li>
-                <li><a rel="noopener" target="_blank" href="https://www.apache.org/licenses/LICENSE-2.0" localized-string="LICENSE"></a></li>
-                <li><a rel="noopener" target="_blank" href="https://github.com/shaka-project/shaka-player" localized-string="SOURCE"></a></li>
-                <li><a rel="noopener" target="_blank" href="https://www.npmjs.com/package/shaka-player" localized-string="NPM"></a></li>
-                <li><a rel="noopener" target="_blank" href="../support.html" localized-string="SUPPORT"></a></li>
+                <li><a rel="noopener" target="_blank" href="../docs/api/index.html">Documentation</a></li>
+                <li><a rel="noopener" target="_blank" href="https://www.apache.org/licenses/LICENSE-2.0">Apache License</a></li>
+                <li><a rel="noopener" target="_blank" href="https://github.com/shaka-project/shaka-player">Source on GitHub</a></li>
+                <li><a rel="noopener" target="_blank" href="https://www.npmjs.com/package/shaka-player">Package on NPM</a></li>
+                <li><a rel="noopener" target="_blank" href="../support.html">Browser Support Test</a></li>
               </ul>
             </div>
             <div class="mdl-mega-footer__drop-down-section">
-              <h1 class="mdl-mega-footer__heading" localized-string="CDN_HEADER"></h1>
+              <h1 class="mdl-mega-footer__heading">CDN</h1>
               <ul class="mdl-mega-footer__link-list">
-                <li><a rel="noopener" target="_blank" href="https://developers.google.com/speed/libraries/#shaka-player" localized-string="LIBRARIES"></a></li>
-                <li><a rel="noopener" target="_blank" href="https://www.jsdelivr.com/package/npm/shaka-player" localized-string="JSDELIVR"></a></li>
+                <li><a rel="noopener" target="_blank" href="https://developers.google.com/speed/libraries/#shaka-player">Google Hosted Libraries</a></li>
+                <li><a rel="noopener" target="_blank" href="https://www.jsdelivr.com/package/npm/shaka-player">jsDelivr</a></li>
               </ul>
             </div>
             <div class="mdl-mega-footer__drop-down-section">
-              <h1 class="mdl-mega-footer__heading" localized-string="DEMO_MODE_HEADER"></h1>
+              <h1 class="mdl-mega-footer__heading">DEMO MODE</h1>
               <ul class="mdl-mega-footer__link-list" id="compiled-links">
-                <li><a href="#build=compiled" id="compiled-link" localized-string="COMPILED_RELEASE"></a></li>
-                <li><a href="#build=debug_compiled" id="debug-compiled-link" localized-string="COMPILED_DEBUG"></a></li>
-                <li><a href="#build=uncompiled" id="uncompiled-link" localized-string="UNCOMPILED"></a></li>
+                <li><a href="#build=compiled" id="compiled-link">Compiled (Release)</a></li>
+                <li><a href="#build=debug_compiled" id="debug-compiled-link">Compiled (Debug)</a></li>
+                <li><a href="#build=uncompiled" id="uncompiled-link">Uncompiled</a></li>
               </ul>
             </div>
           </div>

package/demo/input.js

@@ -11,7 +11,6 @@ goog.provide('shakaDemo.NumberInput');
 goog.provide('shakaDemo.SelectInput');
 goog.provide('shakaDemo.TextInput');
 
-goog.require('shakaDemo.MessageIds');
 goog.requireType('shakaDemo.InputContainer');
 
 /**
@@ -121,7 +120,7 @@ shakaDemo.Input.lastId_ = 0;
 shakaDemo.SelectInput = class extends shakaDemo.Input {
   /**
    * @param {!shakaDemo.InputContainer} parentContainer
-   * @param {?shakaDemo.MessageIds} name
+   * @param {?string} name
    * @param {function(!HTMLInputElement, !shakaDemo.Input)} onChange
    * @param {!Object.<string, string>} values
    */
@@ -134,7 +133,7 @@ shakaDemo.SelectInput = class extends shakaDemo.Input {
     this.extra_.classList.add('mdl-textfield__label');
     this.extra_.setAttribute('for', this.input_.id);
     if (name) {
-      this.extra_.textContent = shakaDemoMain.getLocalizedString(name);
+      this.extra_.textContent = name;
     }
     for (const value of Object.keys(values)) {
       const option =
@@ -243,18 +242,14 @@ shakaDemo.NumberInput = class extends shakaDemo.TextInput {
     error.classList.add('mdl-textfield__error');
     this.container_.appendChild(error);
 
-    const MessageIds = shakaDemo.MessageIds;
-    const localize = (name) => shakaDemoMain.getLocalizedString(name);
     if (canBeZero && canBeDecimal) {
-      error.textContent = localize(MessageIds.NUMBER_DECIMAL_WARNING);
+      error.textContent = 'Must be a positive number.';
     } else if (canBeZero) {
-      error.textContent = localize(MessageIds.NUMBER_INTEGER_WARNING);
+      error.textContent = 'Must be a positive integer.';
     } else if (canBeDecimal) {
-      error.textContent =
-          localize(MessageIds.NUMBER_NONZERO_DECIMAL_WARNING);
+      error.textContent = 'Must be a positive, nonzero number.';
     } else {
-      error.textContent =
-          localize(MessageIds.NUMBER_NONZERO_INTEGER_WARNING);
+      error.textContent = 'Must be a positive, nonzero integer.';
     }
 
     this.input_.pattern = '(Infinity|';