Viewer get/setDocumentState messaging. (ampproject#26285)

* Viewer get/setDocumentState messaging.

* Move 'startListening' into 'initializeListeners_'.

Author: gmajoulet

build-system/tasks/presubmit-checks.js

@@ -383,6 +383,7 @@ const forbiddenTerms = {
       'extensions/amp-subscriptions/0.1/viewer-subscription-platform.js',
       'extensions/amp-viewer-integration/0.1/highlight-handler.js',
       'extensions/amp-consent/0.1/consent-ui.js',
+      'extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js',
 
       // iframe-messaging-client.sendMessage
       '3p/iframe-messaging-client.js',

build-system/test-configs/conformance-config.textproto

@@ -40,6 +40,7 @@ requirement: {
   error_message: 'History.p.state is broken in IE11. Please use the helper methods provided in src/history.js'
   value: 'History.prototype.state'
   whitelist: 'src/history.js'
+  whitelist: 'extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js'
 }
 
 # Strings

extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js

@@ -0,0 +1,127 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Action,
+  StateProperty,
+  getStoreService,
+} from './amp-story-store-service';
+
+/** @typedef {{property: !StateProperty}} */
+let GetStateConfigurationDef;
+
+// TODO(#26020): implement and allow retrieving PAGE_ATTACHMENT_STATE.
+// TODO(gmajoulet): implement and allow retrieving STORY_PROGRESS.
+/** @enum {!GetStateConfigurationDef} */
+const GET_STATE_CONFIGURATIONS = {
+  'CURRENT_PAGE_ID': {
+    property: StateProperty.CURRENT_PAGE_ID,
+  },
+  'MUTED_STATE': {
+    property: StateProperty.MUTED_STATE,
+  },
+};
+
+/** @typedef {{action: !Action, isValueValid: function(*):boolean}} */
+let SetStateConfigurationDef;
+
+/** @enum {!SetStateConfigurationDef} */
+const SET_STATE_CONFIGURATIONS = {
+  'MUTED_STATE': {
+    action: Action.TOGGLE_MUTED,
+    isValueValid: value => typeof value === 'boolean',
+  },
+};
+
+/**
+ * Viewer messaging handler.
+ */
+export class AmpStoryViewerMessagingHandler {
+  /**
+   * @param {!Window} win
+   * @param {!../../../src/service/viewer-interface.ViewerInterface} viewer
+   */
+  constructor(win, viewer) {
+    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = getStoreService(win);
+
+    /** @private @const {!../../../src/service/viewer-interface.ViewerInterface} */
+    this.viewer_ = viewer;
+  }
+
+  /**
+   * @public
+   */
+  startListening() {
+    this.viewer_.onMessageRespond('getDocumentState', data =>
+      this.onGetDocumentState_(data)
+    );
+    this.viewer_.onMessageRespond('setDocumentState', data =>
+      this.onSetDocumentState_(data)
+    );
+  }
+
+  /**
+   * @param {string} eventType
+   * @param {?JsonObject|string|undefined} data
+   * @param {boolean=} cancelUnsent
+   */
+  send(eventType, data, cancelUnsent = false) {
+    this.viewer_.sendMessage(eventType, data, cancelUnsent);
+  }
+
+  /**
+   * Handles 'getDocumentState' viewer messages.
+   * @param {!Object=} data
+   * @return {!Promise}
+   * @private
+   */
+  onGetDocumentState_(data = {}) {
+    const {state} = data;
+    const config = GET_STATE_CONFIGURATIONS[state];
+
+    if (!config) {
+      return Promise.reject(`Invalid 'state' parameter`);
+    }
+
+    const value = this.storeService_.get(config.property);
+
+    return Promise.resolve({state, value});
+  }
+
+  /**
+   * Handles 'setDocumentState' viewer messages.
+   * @param {!Object=} data
+   * @return {!Promise<!Object|undefined>}
+   * @private
+   */
+  onSetDocumentState_(data = {}) {
+    const {state, value} = data;
+    const config = SET_STATE_CONFIGURATIONS[state];
+
+    if (!config) {
+      return Promise.reject(`Invalid 'state' parameter`);
+    }
+
+    if (!config.isValueValid(value)) {
+      return Promise.reject(`Invalid 'value' parameter`);
+    }
+
+    this.storeService_.dispatch(config.action, value);
+
+    return Promise.resolve({state, value});
+  }
+}

extensions/amp-story/1.0/amp-story.js

@@ -54,6 +54,7 @@ import {AmpStoryPage, NavigationDirection, PageState} from './amp-story-page';
 import {AmpStoryPageAttachment} from './amp-story-page-attachment';
 import {AmpStoryQuiz} from './amp-story-quiz';
 import {AmpStoryRenderService} from './amp-story-render-service';
+import {AmpStoryViewerMessagingHandler} from './amp-story-viewer-messaging-handler';
 import {AnalyticsVariable, getVariableService} from './variable-service';
 import {CSS} from '../../../build/amp-story-1.0.css';
 import {CommonSignals} from '../../../src/common-signals';
@@ -336,6 +337,11 @@ export class AmpStory extends AMP.BaseElement {
     /** @private @const {!../../../src/service/viewer-interface.ViewerInterface} */
     this.viewer_ = Services.viewerForDoc(this.element);
 
+    /** @private @const {?AmpStoryViewerMessagingHandler} */
+    this.viewerMessagingHandler_ = this.viewer_.isEmbedded()
+      ? new AmpStoryViewerMessagingHandler(this.win, this.viewer_)
+      : null;
+
     /**
      * Store the current paused state, to make sure the story does not play on
      * resume if it was previously paused.
@@ -832,7 +838,14 @@ export class AmpStory extends AMP.BaseElement {
     this.getViewport().onResize(debounce(this.win, () => this.onResize(), 300));
     this.installGestureRecognizers_();
 
+    // TODO(gmajoulet): migrate this to amp-story-viewer-messaging-handler once
+    // there is a way to navigate to pages that does not involve using private
+    // amp-story methods.
     this.viewer_.onMessage('selectPage', data => this.onSelectPage_(data));
+
+    if (this.viewerMessagingHandler_) {
+      this.viewerMessagingHandler_.startListening();
+    }
   }
 
   /** @private */
@@ -1323,8 +1336,8 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   onNoNextPage_() {
-    if (this.viewer_.hasCapability('swipe')) {
-      this.viewer_./*OK*/ sendMessage('selectDocument', dict({'next': true}));
+    if (this.viewer_.hasCapability('swipe') && this.viewerMessagingHandler_) {
+      this.viewerMessagingHandler_.send('selectDocument', dict({'next': true}));
       return;
     }
 
@@ -1352,8 +1365,8 @@ export class AmpStory extends AMP.BaseElement {
    * @private
    */
   onNoPreviousPage_() {
-    if (this.viewer_.hasCapability('swipe')) {
-      this.viewer_./*OK*/ sendMessage(
+    if (this.viewer_.hasCapability('swipe') && this.viewerMessagingHandler_) {
+      this.viewerMessagingHandler_.send(
         'selectDocument',
         dict({'previous': true})
       );

extensions/amp-story/1.0/test/test-amp-story-viewer-messaging-handler.js

@@ -0,0 +1,149 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Action,
+  StateProperty,
+  getStoreService,
+} from '../amp-story-store-service';
+import {AmpStoryViewerMessagingHandler} from '../amp-story-viewer-messaging-handler';
+
+describes.fakeWin('amp-story-viewer-messaging-handler', {}, env => {
+  let fakeViewerService;
+  let storeService;
+  let viewerMessagingHandler;
+
+  beforeEach(() => {
+    fakeViewerService = {
+      responderMap: {},
+      onMessageRespond(eventType, responder) {
+        this.responderMap[eventType] = responder;
+      },
+      receiveMessage(eventType, data) {
+        if (!this.responderMap[eventType]) {
+          return;
+        }
+        return this.responderMap[eventType](data);
+      },
+    };
+    viewerMessagingHandler = new AmpStoryViewerMessagingHandler(
+      env.win,
+      fakeViewerService
+    );
+    viewerMessagingHandler.startListening();
+    storeService = getStoreService(env.win);
+  });
+
+  describe('getDocumentState', () => {
+    it('should throw if no state', async () => {
+      try {
+        await fakeViewerService.receiveMessage('getDocumentState', undefined);
+        return Promise.reject('Previous line should throw an error');
+      } catch (error) {
+        expect(error).to.equal(`Invalid 'state' parameter`);
+      }
+    });
+
+    it('should throw if invalid state', async () => {
+      try {
+        await fakeViewerService.receiveMessage('getDocumentState', {
+          state: 'UNEXISTING_STATE',
+        });
+        return Promise.reject('Previous line should throw an error');
+      } catch (error) {
+        expect(error).to.equal(`Invalid 'state' parameter`);
+      }
+    });
+
+    it('should return the MUTED_STATE', async () => {
+      const response = await fakeViewerService.receiveMessage(
+        'getDocumentState',
+        {state: 'MUTED_STATE'}
+      );
+      expect(response).to.deep.equal({
+        state: 'MUTED_STATE',
+        value: storeService.get(StateProperty.MUTED_STATE),
+      });
+    });
+
+    it('should return the CURRENT_PAGE_ID', async () => {
+      storeService.dispatch(Action.CHANGE_PAGE, {id: 'foo', index: 0});
+      const response = await fakeViewerService.receiveMessage(
+        'getDocumentState',
+        {state: 'CURRENT_PAGE_ID'}
+      );
+      expect(response).to.deep.equal({
+        state: 'CURRENT_PAGE_ID',
+        value: storeService.get(StateProperty.CURRENT_PAGE_ID),
+      });
+    });
+  });
+
+  describe('setDocumentState', () => {
+    it('should throw if no state', async () => {
+      try {
+        await fakeViewerService.receiveMessage('setDocumentState', undefined);
+        return Promise.reject('Previous line should throw an error');
+      } catch (error) {
+        expect(error).to.equal(`Invalid 'state' parameter`);
+      }
+    });
+
+    it('should throw if invalid state', async () => {
+      try {
+        await fakeViewerService.receiveMessage('setDocumentState', {
+          state: 'UNEXISTING_STATE',
+          value: true,
+        });
+        return Promise.reject('Previous line should throw an error');
+      } catch (error) {
+        expect(error).to.equal(`Invalid 'state' parameter`);
+      }
+    });
+
+    it('should throw if no value', async () => {
+      try {
+        await fakeViewerService.receiveMessage('setDocumentState', {
+          state: 'MUTED_STATE',
+        });
+        return Promise.reject('Previous line should throw an error');
+      } catch (error) {
+        expect(error).to.equal(`Invalid 'value' parameter`);
+      }
+    });
+
+    it('should throw if invalid value', async () => {
+      try {
+        await fakeViewerService.receiveMessage('setDocumentState', {
+          state: 'MUTED_STATE',
+          value: 'true' /** only accepts booleans */,
+        });
+        return Promise.reject('Previous line should throw an error');
+      } catch (error) {
+        expect(error).to.equal(`Invalid 'value' parameter`);
+      }
+    });
+
+    it('should set a state', async () => {
+      storeService.dispatch(Action.TOGGLE_MUTED, false);
+      await fakeViewerService.receiveMessage('setDocumentState', {
+        state: 'MUTED_STATE',
+        value: true,
+      });
+      expect(storeService.get(StateProperty.MUTED_STATE)).to.be.true;
+    });
+  });
+});