diff --git a/extensions/amp-story/1.0/_locales/default.js b/extensions/amp-story/1.0/_locales/default.js index 027078afc810d..0be5317697316 100644 --- 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 index fe94c58023bce..b6b1361bca9f6 100644 --- 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 index 54ed015e4e055..e71e3e6839f71 100644 --- 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)` `; @@ -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,7 +897,9 @@ 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; } @@ -898,7 +907,8 @@ export class AmpStoryPage extends AMP.BaseElement { 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 index ebadc734990d2..6a8876cea8ce4 100644 --- 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',