Wrapping in mutate + i18n.

ampproject · Dec 6, 2018 · 55dde9c · 55dde9c
1 parent 32b9eb8
commit 55dde9c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 5 deletions.
diff --git a/extensions/amp-story/1.0/_locales/default.js b/extensions/amp-story/1.0/_locales/default.js
@@ -54,6 +54,9 @@ export default /** @const {!LocalizedStringBundleDef} */ ({
   [LocalizedStringId.AMP_STORY_DOMAIN_DIALOG_HEADING_LINK]: {
     string: 'More about AMP results',
   },
+  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
+    string: 'Play video',
+  },
   [LocalizedStringId.AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT]: {
     string: ':(',
   },

diff --git a/extensions/amp-story/1.0/_locales/en.js b/extensions/amp-story/1.0/_locales/en.js
@@ -76,6 +76,10 @@ export default /** @const {!LocalizedStringBundleDef} */ ({
     description: 'Label for a link to documentation on how AMP links are ' +
         'handled.',
   },
+  [LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO]: {
+    string: 'Play video',
+    description: 'Label for a button to play the video visible on the page.',
+  },
   [LocalizedStringId.AMP_STORY_HINT_UI_NEXT_LABEL]: {
     string: 'Tap Next',
     description: 'Label indicating that users can navigate to the next ' +

diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
@@ -39,6 +39,7 @@ import {Deferred} from '../../../src/utils/promise';
 import {EventType, dispatch} from './events';
 import {Layout} from '../../../src/layout';
 import {LoadingSpinner} from './loading-spinner';
+import {LocalizedStringId} from './localization';
 import {MediaPool} from './media-pool';
 import {Services} from '../../../src/services';
 import {VideoServiceSync} from '../../../src/service/video-service-sync-impl';
@@ -95,7 +96,7 @@ const REWIND_TIMEOUT_MS = 350;
 const buildPlayMessageElement = element =>
   htmlFor(element)`
       <button role="button" class="i-amphtml-story-page-play-button">
-        Play video
+        <span class="i-amphtml-story-page-play-label"></span>
         <span class='i-amphtml-story-page-play-icon'></span>
       </button>`;
 
@@ -871,7 +872,13 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   buildAndAppendPlayMessage_() {
+    const localizationService = Services.localizationService(this.win);
+
     this.playMessageEl_ = buildPlayMessageElement(this.element);
+    const labelEl =
+        this.playMessageEl_.querySelector('.i-amphtml-story-page-play-label');
+    labelEl.textContent = localizationService.getLocalizedString(
+        LocalizedStringId.AMP_STORY_PAGE_PLAY_VIDEO);
 
     this.playMessageEl_.addEventListener('click', () => {
       this.togglePlayMessage_(false);
@@ -880,7 +887,7 @@ export class AmpStoryPage extends AMP.BaseElement {
           .then(() => this.playAllMedia_());
     });
 
-    this.element.appendChild(this.playMessageEl_);
+    this.mutateElement(() => this.element.appendChild(this.playMessageEl_));
   }
 
   /**
@@ -890,15 +897,18 @@ export class AmpStoryPage extends AMP.BaseElement {
    */
   togglePlayMessage_(isActive) {
     if (!isActive) {
-      this.playMessageEl_ && toggle(this.playMessageEl_, false);
+      this.playMessageEl_ &&
+          this.mutateElement(() =>
+            toggle(dev().assertElement(this.playMessageEl_), false));
       return;
     }
 
     if (!this.playMessageEl_) {
       this.buildAndAppendPlayMessage_();
     }
 
-    toggle(dev().assertElement(this.playMessageEl_), true);
+    this.mutateElement(() =>
+      toggle(dev().assertElement(this.playMessageEl_), true));
   }
 
   /**

diff --git a/extensions/amp-story/1.0/localization.js b/extensions/amp-story/1.0/localization.js
@@ -25,7 +25,7 @@ import {parseJson} from '../../../src/json';
  *   - NOT be reused; to deprecate an ID, comment it out and prefix its key with
  *     the string "DEPRECATED_"
  *
- * Next ID: 34
+ * Next ID: 35
  *
  * @const @enum {string}
  */
@@ -44,6 +44,7 @@ export const LocalizedStringId = {
   AMP_STORY_DOMAIN_DIALOG_HEADING_LINK: '26',
   AMP_STORY_HINT_UI_NEXT_LABEL: '2',
   AMP_STORY_HINT_UI_PREVIOUS_LABEL: '3',
+  AMP_STORY_PAGE_PLAY_VIDEO: '34',
   AMP_STORY_SHARING_CLIPBOARD_FAILURE_TEXT: '4',
   AMP_STORY_SHARING_CLIPBOARD_SUCCESS_TEXT: '5',
   AMP_STORY_SHARING_PROVIDER_NAME_EMAIL: '6',