diff --git a/docs/spec/amp-story-player.md b/docs/spec/amp-story-player.md index 0592480c9802..cee855801a8e 100644 --- a/docs/spec/amp-story-player.md +++ b/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. diff --git a/src/amp-story-player/amp-story-player-impl.js b/src/amp-story-player/amp-story-player-impl.js index 09094e77eff0..da366cb2c59d 100644 --- a/src/amp-story-player/amp-story-player-impl.js +++ b/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 diff --git a/test/unit/test-amp-story-player.js b/test/unit/test-amp-story-player.js index fc02a6313931..d972f40f1420 100644 --- a/test/unit/test-amp-story-player.js +++ b/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);