✨ [Amp story player] [Desktop panels player] Hide buttons if full-ble…

…ed story. (#35397)

* Desktop player show or hide buttons.

* Comments. Hide new code behind experiment.

* Update UI type.

* Promise for getUI state. Add comment.

* One line.

* Update type.

* Type

* Unit test for calling UI state update on resize.

css/amp-story-player-shadow.css

@@ -141,6 +141,12 @@
     cursor: initial;
   }
 
+  .i-amphtml-story-player-full-bleed-story .i-amphtml-story-player-desktop-panel-prev,
+  .i-amphtml-story-player-full-bleed-story .i-amphtml-story-player-desktop-panel-next {
+    opacity: 0;
+    pointer-events: none;
+  }
+
   .i-amphtml-story-player-desktop-panel-prev {
     margin-inline-start: calc(var(--i-amphtml-story-player-desktop-panel-button-margin));
     background-image: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.66667 8L16 16V0L4.66667 8ZM0 16H2.66667V0H0V16Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.66667 8L16 16V0L4.66667 8ZM0 16H2.66667V0H0V16Z"/></svg>')!important;

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

@@ -58,6 +58,10 @@ const GET_STATE_CONFIGURATIONS = {
     dataSource: DataSources.STORE_SERVICE,
     property: StateProperty.PAGE_ATTACHMENT_STATE,
   },
+  'UI_STATE': {
+    dataSource: DataSources.STORE_SERVICE,
+    property: StateProperty.UI_STATE,
+  },
   'STORY_PROGRESS': {
     dataSource: DataSources.VARIABLE_SERVICE,
     property: AnalyticsVariable.STORY_PROGRESS,

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

@@ -110,6 +110,7 @@ const STORY_STATE_TYPE = {
 /** @enum {string} */
 const STORY_MESSAGE_STATE_TYPE = {
   PAGE_ATTACHMENT_STATE: 'PAGE_ATTACHMENT_STATE',
+  UI_STATE: 'UI_STATE',
   MUTED_STATE: 'MUTED_STATE',
   CURRENT_PAGE_ID: 'CURRENT_PAGE_ID',
   STORY_PROGRESS: 'STORY_PROGRESS',
@@ -187,11 +188,6 @@ const LOG_TYPE = {
   DEV: 'amp-story-player-dev',
 };
 
-/**
- * Flag to show or hide the desktop panels player experiment.
- * @const {boolean}
- */
-
 /**
  * NOTE: If udpated here, update in amp-story.js
  * @private @const {number}
@@ -652,6 +648,11 @@ export class AmpStoryPlayer {
             dict({'state': STORY_MESSAGE_STATE_TYPE.MUTED_STATE})
           );
 
+          messaging.sendRequest(
+            'onDocumentState',
+            dict({'state': STORY_MESSAGE_STATE_TYPE.UI_STATE})
+          );
+
           messaging.registerHandler('documentStateUpdate', (event, data) => {
             this.onDocumentStateUpdate_(
               /** @type {!DocumentStateTypeDef} */ (data),
@@ -967,11 +968,50 @@ export class AmpStoryPlayer {
 
     if (this.isDesktopPanelExperimentOn_) {
       this.checkButtonsDisabled_();
+      this.getUiState_().then((uiTypeNumber) =>
+        this.onUiStateUpdate_(uiTypeNumber)
+      );
     }
     this.signalNavigation_(navigation);
     this.maybeFetchMoreStories_(remaining);
   }
 
+  /**
+   * Gets UI state from active story.
+   * @private
+   * @return {Promise}
+   */
+  getUiState_() {
+    const story = this.stories_[this.currentIdx_];
+
+    return new Promise((resolve) => {
+      story.messagingPromise.then((messaging) => {
+        messaging
+          .sendRequest(
+            'getDocumentState',
+            {state: STORY_MESSAGE_STATE_TYPE.UI_STATE},
+            true
+          )
+          .then((event) => resolve(event.value));
+      });
+    });
+  }
+
+  /**
+   * Shows or hides one panel UI on state update.
+   * @param {number} uiTypeNumber
+   * @private
+   */
+  onUiStateUpdate_(uiTypeNumber) {
+    const isFullbleed =
+      uiTypeNumber === 2 /** DESKTOP_FULLBLEED */ ||
+      uiTypeNumber === 0; /** MOBILE */
+    this.rootEl_.classList.toggle(
+      'i-amphtml-story-player-full-bleed-story',
+      isFullbleed
+    );
+  }
+
   /**
    * Fetches more stories if appropiate.
    * @param {number} remaining Number of stories remaining in the player.
@@ -1523,6 +1563,12 @@ export class AmpStoryPlayer {
       case STORY_MESSAGE_STATE_TYPE.MUTED_STATE:
         this.onMutedStateUpdate_(/** @type {string} */ (data.value));
         break;
+      case STORY_MESSAGE_STATE_TYPE.UI_STATE:
+        if (this.isDesktopPanelExperimentOn_) {
+          // Handles UI state updates on window resize.
+          this.onUiStateUpdate_(/** @type {number} */ (data.value));
+        }
+        break;
       case AMP_STORY_PLAYER_EVENT:
         this.onPlayerEvent_(/** @type {string} */ (data.value));
         break;

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

@@ -19,7 +19,7 @@ import {AmpStoryPlayer} from '../../src/amp-story-player/amp-story-player-impl';
 import {Messaging} from '@ampproject/viewer-messaging';
 import {PageScroller} from '../../src/amp-story-player/page-scroller';
 import {expect} from 'chai';
-import {listenOncePromise} from '../../src/event-helper';
+import {createCustomEvent, listenOncePromise} from '../../src/event-helper';
 import {macroTask} from '#testing/yield';
 
 describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
@@ -1527,5 +1527,24 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
         playerEl.querySelector('.i-amphtml-story-player-desktop-panel-next')
       ).to.exist;
     });
+
+    it('Should get UI state on resize', async () => {
+      const playerEl = win.document.createElement('amp-story-player');
+
+      attachPlayerWithStories(playerEl, 5);
+      win.DESKTOP_PANEL_STORY_PLAYER_EXP_ON = true;
+      const player = new AmpStoryPlayer(win, playerEl);
+
+      await player.load();
+
+      const sendRequestSpy = env.sandbox.spy(fakeMessaging, 'sendRequest');
+
+      win.dispatchEvent(createCustomEvent(win, 'resize', null));
+      await nextTick();
+
+      expect(sendRequestSpy).to.have.been.calledWith('onDocumentState', {
+        'state': 'UI_STATE',
+      });
+    });
   });
 });