diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js index 6dd2337fe9ef..5b174bf0734b 100644 --- a/extensions/amp-story/1.0/amp-story-store-service.js +++ b/extensions/amp-story/1.0/amp-story-store-service.js @@ -210,6 +210,7 @@ export const Action = { TOGGLE_SHARE_MENU: 'toggleShareMenu', ADD_SHOPPING_DATA: 'addShoppingData', TOGGLE_STORY_HAS_PLAYBACK_UI: 'toggleStoryHasPlaybackUi', + TOGGLE_STORY_HAS_BACKGROUND_AUDIO: 'toggleStoryHasBackgroundAudio', TOGGLE_SYSTEM_UI_IS_VISIBLE: 'toggleSystemUiIsVisible', TOGGLE_UI: 'toggleUi', SET_GYROSCOPE_PERMISSION: 'setGyroscopePermission', @@ -340,6 +341,11 @@ const actions = (state, action, data) => { ...state, [StateProperty.STORY_HAS_PLAYBACK_UI_STATE]: !!data, }); + case Action.TOGGLE_STORY_HAS_BACKGROUND_AUDIO: + return /** @type {!State} */ ({ + ...state, + [StateProperty.STORY_HAS_BACKGROUND_AUDIO_STATE]: !!data, + }); // Mutes or unmutes the story media. case Action.TOGGLE_MUTED: return /** @type {!State} */ ({ diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js index efaa76b51d1b..4bc4bb7855cc 100644 --- a/extensions/amp-story/1.0/amp-story.js +++ b/extensions/amp-story/1.0/amp-story.js @@ -578,6 +578,7 @@ export class AmpStory extends AMP.BaseElement { * @private */ buildSystemLayer_(initialPageId) { + this.updateAudioIcon_(); this.updatePausedIcon_(); this.element.appendChild(this.systemLayer_.build(initialPageId)); } @@ -2124,6 +2125,19 @@ export class AmpStory extends AMP.BaseElement { this.mediaPool_.play(this.backgroundAudioEl_); } + /** + * Update the store if the story has background audio. + * @private + */ + updateAudioIcon_() { + const storyHasBackgroundAudio = + this.element.hasAttribute('background-audio'); + this.storeService_.dispatch( + Action.TOGGLE_STORY_HAS_BACKGROUND_AUDIO, + storyHasBackgroundAudio + ); + } + /** * Shows the play/pause icon if there is an element with playback on the story. * @private diff --git a/extensions/amp-story/1.0/test/test-amp-story.js b/extensions/amp-story/1.0/test/test-amp-story.js index 858a33bccbf5..1fabeb7ac80a 100644 --- a/extensions/amp-story/1.0/test/test-amp-story.js +++ b/extensions/amp-story/1.0/test/test-amp-story.js @@ -921,6 +921,18 @@ describes.realWin( }); }); + it('should update the STORY_HAS_BACKGROUND_AUDIO property if story has background audio', async () => { + await createStoryWithPages(2, ['cover', 'page-1']); + story.element.setAttribute('background-audio', 'audio.mp3'); + await story.layoutCallback(); + + expect( + story.storeService_.get( + StateProperty.STORY_HAS_BACKGROUND_AUDIO_STATE + ) + ).to.be.true; + }); + it('should remove the muted attribute on unmuted state change', async () => { await createStoryWithPages(2, ['cover', 'page-1']);