[amp-story-player] [custom UI] Add messaging for clicks in system lay…

…er controls (#30745) * initial code for reacting to custom UI from the system layer. * rename, validation, fix custom icon * return events from story to player * rename to add clarity * update config from player side * check for skipButtonIdx * renames, extract click listener * types
ampproject · Oct 27, 2020 · ce28ebe · ce28ebe
1 parent df4269c
commit ce28ebe
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 24 deletions.
diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js
@@ -95,7 +95,7 @@ export let InteractiveReactData;
  *    canShowPreviousPageHelp: boolean,
  *    canShowSharingUis: boolean,
  *    canShowSystemLayerButtons: boolean,
- *    customControls: !Array<!Object>,
+ *    viewerCustomControls: !Array<!Object>,
  *    accessState: boolean,
  *    adState: boolean,
  *    pageAttachmentState: boolean,
@@ -145,7 +145,7 @@ export const StateProperty = {
   CAN_SHOW_PREVIOUS_PAGE_HELP: 'canShowPreviousPageHelp',
   CAN_SHOW_SHARING_UIS: 'canShowSharingUis',
   CAN_SHOW_SYSTEM_LAYER_BUTTONS: 'canShowSystemLayerButtons',
-  CUSTOM_CONTROLS: 'customControls',
+  VIEWER_CUSTOM_CONTROLS: 'viewerCustomControls',
 
   // App States.
   ACCESS_STATE: 'accessState', // amp-access paywall.
@@ -229,7 +229,7 @@ export const Action = {
   TOGGLE_VIEWPORT_WARNING: 'toggleViewportWarning',
   ADD_NEW_PAGE_ID: 'addNewPageId',
   SET_PAGE_SIZE: 'updatePageSize',
-  SET_CUSTOM_CONTROLS: 'setCustomControls',
+  SET_VIEWER_CUSTOM_CONTROLS: 'setCustomControls',
 };
 
 /**
@@ -483,10 +483,10 @@ const actions = (state, action, data) => {
         ...state,
         [StateProperty.PAGE_SIZE]: data,
       });
-    case Action.SET_CUSTOM_CONTROLS:
+    case Action.SET_VIEWER_CUSTOM_CONTROLS:
       return /** @type {!State} */ ({
         ...state,
-        [StateProperty.CUSTOM_CONTROLS]: data,
+        [StateProperty.VIEWER_CUSTOM_CONTROLS]: data,
       });
     default:
       dev().error(TAG, 'Unknown action %s.', action);
@@ -590,7 +590,7 @@ export class AmpStoryStoreService {
       [StateProperty.CAN_SHOW_PAGINATION_BUTTONS]: true,
       [StateProperty.CAN_SHOW_SHARING_UIS]: true,
       [StateProperty.CAN_SHOW_SYSTEM_LAYER_BUTTONS]: true,
-      [StateProperty.CUSTOM_CONTROLS]: [],
+      [StateProperty.VIEWER_CUSTOM_CONTROLS]: [],
       [StateProperty.ACCESS_STATE]: false,
       [StateProperty.AD_STATE]: false,
       [StateProperty.AFFILIATE_LINK_STATE]: null,

diff --git a/extensions/amp-story/1.0/amp-story-system-layer.js b/extensions/amp-story/1.0/amp-story-system-layer.js
@@ -13,12 +13,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {
+  AMP_STORY_PLAYER_EVENT,
+  VIEWER_CONTROL_EVENTS,
+} from '../../../src/amp-story-player/amp-story-player-impl';
 import {
   Action,
   StateProperty,
   UIType,
   getStoreService,
 } from './amp-story-store-service';
+import {AmpStoryViewerMessagingHandler} from './amp-story-viewer-messaging-handler';
 import {CSS} from '../../../build/amp-story-system-layer-1.0.css';
 import {
   DevelopmentModeLog,
@@ -260,22 +265,30 @@ const TEMPLATE = {
   ],
 };
 
+/**
+ * Contains the event name belonging to the viewer control.
+ * @const {string}
+ */
+const VIEWER_CONTROL_EVENT_NAME = '__AMP_VIEWER_CONTROL_EVENT_NAME__';
+
 /** @enum {string} */
-const CONTROL_TYPES = {
+const VIEWER_CONTROL_TYPES = {
   CLOSE: 'close-button',
   SHARE: 'share-button',
   SKIP_NEXT: 'skip-next-button',
 };
 
-const CONTROL_DEFAULTS = {
-  [CONTROL_TYPES.SHARE]: {
+const VIEWER_CONTROL_DEFAULTS = {
+  [VIEWER_CONTROL_TYPES.SHARE]: {
     'selector': `.${SHARE_CLASS}`,
   },
-  [CONTROL_TYPES.CLOSE]: {
+  [VIEWER_CONTROL_TYPES.CLOSE]: {
     'selector': `.${CLOSE_CLASS}`,
+    'event': VIEWER_CONTROL_EVENTS[VIEWER_CONTROL_TYPES.CLOSE],
   },
-  [CONTROL_TYPES.SKIP_NEXT]: {
+  [VIEWER_CONTROL_TYPES.SKIP_NEXT]: {
     'selector': `.${SKIP_NEXT_CLASS}`,
+    'event': VIEWER_CONTROL_EVENTS[VIEWER_CONTROL_TYPES.SKIP_NEXT],
   },
 };
 
@@ -342,6 +355,12 @@ export class SystemLayer {
 
     /** @private {?number|?string} */
     this.timeoutId_ = null;
+
+    /** @private {?../../../src/service/viewer-interface.ViewerInterface} */
+    this.viewer_ = null;
+
+    /** @private {?AmpStoryViewerMessagingHandler} */
+    this.viewerMessagingHandler_ = null;
   }
 
   /**
@@ -395,9 +414,12 @@ export class SystemLayer {
       this.systemLayerEl_.setAttribute('ios', '');
     }
 
-    const viewer = Services.viewerForDoc(this.win_.document.documentElement);
+    this.viewer_ = Services.viewerForDoc(this.win_.document.documentElement);
+    this.viewerMessagingHandler_ = this.viewer_.isEmbedded()
+      ? new AmpStoryViewerMessagingHandler(this.win_, this.viewer_)
+      : null;
 
-    if (shouldShowStoryUrlInfo(viewer)) {
+    if (shouldShowStoryUrlInfo(this.viewer_)) {
       this.systemLayerEl_.classList.add('i-amphtml-embedded');
       this.getShadowRoot().setAttribute(HAS_INFO_BUTTON_ATTRIBUTE, '');
     } else {
@@ -447,6 +469,12 @@ export class SystemLayer {
         this.onInfoClick_();
       } else if (matches(target, `.${SIDEBAR_CLASS}, .${SIDEBAR_CLASS} *`)) {
         this.onSidebarClick_();
+      } else if (matches(target, `.${CLOSE_CLASS}, .${CLOSE_CLASS} *`)) {
+        this.onViewerControlClick_(dev().assertElement(event.target));
+      } else if (
+        matches(target, `.${SKIP_NEXT_CLASS}, .${SKIP_NEXT_CLASS} *`)
+      ) {
+        this.onViewerControlClick_(dev().assertElement(event.target));
       }
     });
 
@@ -566,8 +594,8 @@ export class SystemLayer {
     });
 
     this.storeService_.subscribe(
-      StateProperty.CUSTOM_CONTROLS,
-      (config) => this.onCustomControls_(config),
+      StateProperty.VIEWER_CUSTOM_CONTROLS,
+      (config) => this.onViewerCustomControls_(config),
       true /* callToInitialize */
     );
   }
@@ -880,10 +908,33 @@ export class SystemLayer {
    */
   onShareClick_(event) {
     event.preventDefault();
+    if (event.target[VIEWER_CONTROL_EVENT_NAME]) {
+      this.onViewerControlClick_(dev().assertElement(event.target));
+      return;
+    }
+
     const isOpen = this.storeService_.get(StateProperty.SHARE_MENU_STATE);
     this.storeService_.dispatch(Action.TOGGLE_SHARE_MENU, !isOpen);
   }
 
+  /**
+   * Sends message back to the viewer with the corresponding event.
+   * @param {!Element} element
+   * @private
+   */
+  onViewerControlClick_(element) {
+    const eventName = element[VIEWER_CONTROL_EVENT_NAME];
+
+    this.viewerMessagingHandler_ &&
+      this.viewerMessagingHandler_.send(
+        'documentStateUpdate',
+        dict({
+          'state': AMP_STORY_PLAYER_EVENT,
+          'value': eventName,
+        })
+      );
+  }
+
   /**
    * Handles click events on the info button and toggles the info dialog.
    * @private
@@ -915,10 +966,10 @@ export class SystemLayer {
   /**
    * Reacts to a custom configuration change coming from the player level.
    * Updates UI to match configuration described by publisher.
-   * @param {!Array<!Object>} controls
+   * @param {!Array<!../../../src/amp-story-player/amp-story-player-impl.ViewerControlDef>} controls
    * @private
    */
-  onCustomControls_(controls) {
+  onViewerCustomControls_(controls) {
     if (controls.length <= 0) {
       return;
     }
@@ -928,7 +979,7 @@ export class SystemLayer {
         return;
       }
 
-      const defaultConfig = CONTROL_DEFAULTS[control.name];
+      const defaultConfig = VIEWER_CONTROL_DEFAULTS[control.name];
 
       if (!defaultConfig) {
         return;
@@ -951,6 +1002,12 @@ export class SystemLayer {
         });
       }
 
+      if (control.state === 'disabled') {
+        this.vsync_.mutate(() => {
+          element.disabled = true;
+        });
+      }
+
       if (control.position === 'start') {
         const startButtonContainer = this.systemLayerEl_.querySelector(
           '.i-amphtml-story-system-layer-buttons-start-position'
@@ -967,6 +1024,11 @@ export class SystemLayer {
           'background-image': `url(${control.backgroundImageUrl})`,
         });
       }
+
+      if (control.event || defaultConfig.event) {
+        element[VIEWER_CONTROL_EVENT_NAME] =
+          control.event || defaultConfig.event;
+      }
     });
   }
 

diff --git a/extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js b/extensions/amp-story/1.0/amp-story-viewer-messaging-handler.js
@@ -203,6 +203,9 @@ export class AmpStoryViewerMessagingHandler {
    * @private
    */
   onCustomDocumentUI_(data) {
-    this.storeService_.dispatch(Action.SET_CUSTOM_CONTROLS, data.controls);
+    this.storeService_.dispatch(
+      Action.SET_VIEWER_CUSTOM_CONTROLS,
+      data.controls
+    );
   }
 }