⏪ [Story system layer] Audio icon disappears when story has backgroun…

…d audio (#37314)

* Added tasts

* Undo

* Reverted changes and added test

* Removed newlines between test

* Removed extra bracket

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} */ ({

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

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']);