✨ [amp-story-player] Re-emit captions state to host page

docs/spec/amp-story-player.md

@@ -663,6 +663,16 @@ player.addEventListener('amp-story-muted-state', (event) => {
 })
 ```
 
+#### amp-story-captions-state
+
+Fired when the story's captions are turned on/off. This event provides a `captions` property.
+
+```javascript
+player.addEventListener('amp-story-captions-state', (event) => {
+  console.log('captions state', event.detail.captions);
+})
+```
+
 #### navigation
 
 Fired when the player changes to a new story and provides the `index`, the player's story after changing, and `remaining`, the number of stories left.

src/amp-story-player/amp-story-player-impl.js

@@ -100,6 +100,7 @@ const STORY_MESSAGE_STATE_TYPE_ENUM = {
   PAGE_ATTACHMENT_STATE: 'PAGE_ATTACHMENT_STATE',
   UI_STATE: 'UI_STATE',
   MUTED_STATE: 'MUTED_STATE',
+  CAPTIONS_STATE: 'CAPTIONS_STATE',
   CURRENT_PAGE_ID: 'CURRENT_PAGE_ID',
   STORY_PROGRESS: 'STORY_PROGRESS',
   DESKTOP_ASPECT_RATIO: 'DESKTOP_ASPECT_RATIO',
@@ -645,6 +646,10 @@ export class AmpStoryPlayer {
             'state': STORY_MESSAGE_STATE_TYPE_ENUM.MUTED_STATE,
           });
 
+          messaging.sendRequest('onDocumentState', {
+            'state': STORY_MESSAGE_STATE_TYPE_ENUM.CAPTIONS_STATE,
+          });
+
           messaging.sendRequest('onDocumentState', {
             'state': STORY_MESSAGE_STATE_TYPE_ENUM.UI_STATE,
           });
@@ -1596,6 +1601,9 @@ export class AmpStoryPlayer {
       case STORY_MESSAGE_STATE_TYPE_ENUM.MUTED_STATE:
         this.onMutedStateUpdate_(/** @type {string} */ (data.value));
         break;
+      case STORY_MESSAGE_STATE_TYPE_ENUM.CAPTIONS_STATE:
+        this.onCaptionsStateUpdate_(/** @type {string} */ (data.value));
+        break;
       case STORY_MESSAGE_STATE_TYPE_ENUM.UI_STATE:
         // Handles UI state updates on window resize.
         this.onUiStateUpdate_(/** @type {number} */ (data.value));
@@ -1671,6 +1679,17 @@ export class AmpStoryPlayer {
     );
   }
 
+  /**
+   * Reacts to captions on/off events coming from the story.
+   * @param {string} captions
+   * @private
+   */
+  onCaptionsStateUpdate_(captions) {
+    this.element_.dispatchEvent(
+      createCustomEvent(this.win_, 'amp-story-captions-state', {captions})
+    );
+  }
+
   /**
    * Reacts to page id update events inside the story.
    * @param {string} pageId

test/unit/test-amp-story-player.js

@@ -1460,6 +1460,56 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
       });
     });
 
+    it('should dispatch amp-story-captions-state when story captions are turned on', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await macroTask();
+
+      const spy = env.sandbox.spy();
+      playerEl.addEventListener('amp-story-captions-state', spy);
+
+      const fakeData = {state: 'CAPTIONS_STATE', value: true};
+      fireHandler['documentStateUpdate']('documentStateUpdate', fakeData);
+
+      await macroTask();
+
+      expect(spy).to.have.been.calledWithMatch({
+        type: 'amp-story-captions-state',
+        detail: {
+          captions: true,
+        },
+      });
+    });
+
+    it('should dispatch amp-story-captions-state when story captions are turned off', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+      attachPlayerWithStories(playerEl, 1);
+
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+      await macroTask();
+
+      const spy = env.sandbox.spy();
+      playerEl.addEventListener('amp-story-captions-state', spy);
+
+      const fakeData = {state: 'CAPTIONS_STATE', value: false};
+      fireHandler['documentStateUpdate']('documentStateUpdate', fakeData);
+
+      await macroTask();
+
+      expect(spy).to.have.been.calledWithMatch({
+        type: 'amp-story-captions-state',
+        detail: {
+          captions: false,
+        },
+      });
+    });
+
     it('should react to CURRENT_PAGE_ID events', async () => {
       const playerEl = win.document.createElement('amp-story-player');
       attachPlayerWithStories(playerEl, 1);