Added localization system to demo.

No localizations exist currently, but this adds the framework for them. Change-Id: I81a8cab128884753c765a192181d5d88f0ed13f1
Pavelas · Nov 18, 2019 · 4c6325d · 4c6325d
1 parent 8d1ec9b
commit 4c6325d
Show file tree

Hide file tree

Showing 21 changed files with 1,506 additions and 394 deletions.
diff --git a/build/check.py b/build/check.py
@@ -279,6 +279,7 @@ def get(*path_components):
               get('third_party', 'language-mapping-list'))
   files.add(os.path.join(base, 'demo', 'common', 'asset.js'))
   files.add(os.path.join(base, 'demo', 'common', 'assets.js'))
+  files.add(os.path.join(base, 'demo', 'common', 'message_ids.js'))
 
   localizations = compiler.GenerateLocalizations(None)
   localizations.generate(args.force)

diff --git a/demo/asset_card.js b/demo/asset_card.js
@@ -140,7 +140,7 @@ shakaDemo.AssetCard = class {
 
   /**
    * @param {string} icon
-   * @param {string} title
+   * @param {!shakaDemo.MessageIds} title
    * @private
    */
   addFeatureIcon_(icon, title) {
@@ -181,31 +181,32 @@ shakaDemo.AssetCard = class {
     for (const drm of asset.drm) {
       switch (drm) {
         case KeySystem.WIDEVINE:
-          this.addFeatureIcon_('widevine', 'Widevine DRM');
+          this.addFeatureIcon_('widevine', drm);
           break;
         case KeySystem.CLEAR_KEY:
-          this.addFeatureIcon_('clear_key', 'Clear Key DRM');
+          this.addFeatureIcon_('clear_key', drm);
           break;
         case KeySystem.PLAYREADY:
-          this.addFeatureIcon_('playready', 'PlayReady DRM');
+          this.addFeatureIcon_('playready', drm);
           break;
       }
     }
   }
 
   /**
    * Modify an asset to make it clear that it is unsupported.
-   * @param {string} unsupportedReason
+   * @param {!shakaDemo.MessageIds} unsupportedReason
    */
   markAsUnsupported(unsupportedReason) {
     this.card_.classList.add('asset-card-unsupported');
-    this.makeUnsupportedButton_('Not Available', unsupportedReason);
+    this.makeUnsupportedButton_(
+        shakaDemo.MessageIds.UNSUPPORTED, unsupportedReason);
   }
 
   /**
    * Make a button that represents the lack of a working button.
-   * @param {string} buttonName
-   * @param {string} unsupportedReason
+   * @param {?shakaDemo.MessageIds} buttonName
+   * @param {!shakaDemo.MessageIds} unsupportedReason
    * @return {!Element}
    * @private
    */
@@ -277,7 +278,7 @@ shakaDemo.AssetCard = class {
     }
     if (unsupportedReason) {
       // This can't be stored.
-      const button = this.makeUnsupportedButton_('', unsupportedReason);
+      const button = this.makeUnsupportedButton_(null, unsupportedReason);
       // As this is a unsupported button, it is wrapped in an "attach point";
       // that is the element this has to move with CSS, otherwise the tooltip
       // will end up coming out of the wrong place.
@@ -286,12 +287,12 @@ shakaDemo.AssetCard = class {
       return;
     }
     if (this.asset_.isStored()) {
-      const deleteButton = this.addButton('', () => {
+      const deleteButton = this.addButton(null, () => {
         this.attachDeleteDialog_(deleteButton);
       });
       styleAsDownloadButton(deleteButton, deleteButton, 'offline_pin');
     } else {
-      const downloadButton = this.addButton('', async () => {
+      const downloadButton = this.addButton(null, async () => {
         downloadButton.disabled = true;
         await this.asset_.storeCallback();
         this.remakeButtons();
@@ -310,17 +311,16 @@ shakaDemo.AssetCard = class {
       return;
     }
 
-    // TODO: Localize these messages.
-    const deleteMessage = 'Delete the offline copy?';
-    this.makeYesNoDialogue_(parentDiv, deleteMessage, async () => {
-      deleteButton.disabled = true;
-      await this.asset_.unstoreCallback();
-    });
+    this.makeYesNoDialogue_(parentDiv,
+        shakaDemo.MessageIds.DELETE_STORED_PROMPT, async () => {
+          deleteButton.disabled = true;
+          await this.asset_.unstoreCallback();
+        });
   }
 
   /**
    * @param {!Element} parentDiv
-   * @param {string} text
+   * @param {!shakaDemo.MessageIds} text
    * @param {function():Promise} callback
    * @private
    */
@@ -334,14 +334,14 @@ shakaDemo.AssetCard = class {
 
     const textElement = document.createElement('h2');
     textElement.classList.add('mdl-typography--title');
-    textElement.textContent = text;
+    textElement.textContent = shakaDemoMain.getLocalizedString(text);
     dialog.appendChild(textElement);
 
     const buttonsDiv = document.createElement('div');
     dialog.appendChild(buttonsDiv);
-    const makeButton = (text, fn) => {
+    const makeButton = (textId, fn) => {
       const button = document.createElement('button');
-      button.textContent = text;
+      button.textContent = shakaDemoMain.getLocalizedString(textId);
       button.classList.add('mdl-button');
       button.classList.add('mdl-button--colored');
       button.classList.add('mdl-js-button');
@@ -352,13 +352,12 @@ shakaDemo.AssetCard = class {
       buttonsDiv.appendChild(button);
       button.blur();
     };
-    // TODO: Localize these messages.
-    makeButton('Yes', async () => {
+    makeButton(shakaDemo.MessageIds.PROMPT_YES, async () => {
       dialog.close();
       await callback();
       this.remakeButtons();
     });
-    makeButton('No', () => {
+    makeButton(shakaDemo.MessageIds.PROMPT_NO, () => {
       dialog.close();
     });
 
@@ -386,9 +385,9 @@ shakaDemo.AssetCard = class {
   /**
    * Adds a button to the bottom of the card that will call |onClick| when
    * clicked. For example, a play or delete button.
-   * @param {string} name
+   * @param {?shakaDemo.MessageIds} name
    * @param {function()} onclick
-   * @param {string=} yesNoDialogText
+   * @param {shakaDemo.MessageIds=} yesNoDialogText
    * @return {!Element}
    */
   addButton(name, onclick, yesNoDialogText) {
@@ -397,7 +396,7 @@ shakaDemo.AssetCard = class {
     button.classList.add('mdl-button--colored');
     button.classList.add('mdl-js-button');
     button.classList.add('mdl-js-ripple-effect');
-    button.textContent = name;
+    button.textContent = name ? shakaDemoMain.getLocalizedString(name) : '';
     button.addEventListener('click', () => {
       if (!button.hasAttribute('disabled')) {
         if (yesNoDialogText) {

diff --git a/demo/cast_receiver/index.html b/demo/cast_receiver/index.html
@@ -50,6 +50,7 @@
   // This file contains goog.require calls for all exported library classes.
   '../../shaka-player.uncompiled.js',
   // These are the individual parts of the receiver app.
+  '../common/message_ids.js',
   '../common/asset.js',
   '../common/assets.js',
   'receiver_app.js',

diff --git a/demo/common/asset.js b/demo/common/asset.js
@@ -18,6 +18,8 @@
 
 goog.provide('ShakaDemoAssetInfo');
 
+goog.require('shakaDemo.MessageIds');
+
 
 /**
  * An object that contains information about an asset.
@@ -39,7 +41,7 @@ const ShakaDemoAssetInfo = class {
     this.iconUri = iconUri;
     /** @type {string} */
     this.manifestUri = manifestUri;
-    /** @type {string} */
+    /** @type {!shakaAssets.Source} */
     this.source = source;
 
     // Optional members.
@@ -51,8 +53,8 @@ const ShakaDemoAssetInfo = class {
     this.extraText = [];
     /** @type {?string} */
     this.certificateUri = null;
-    /** @type {string} */
-    this.description = '';
+    /** @type {?string} */
+    this.description = null;
     /** @type {boolean} */
     this.isFeatured = false;
     /** @type {!Array.<!shakaAssets.KeySystem>} */
@@ -104,9 +106,9 @@ const ShakaDemoAssetInfo = class {
   }
 
   /**
-   * A sort comparator for comparing two strings, ignoring case.
-   * @param {string} a
-   * @param {string} b
+   * A sort comparator for comparing two message Ids, ignoring case.
+   * @param {shakaDemo.MessageIds} a
+   * @param {shakaDemo.MessageIds} b
    * @return {number}
    * @private
    */