wrap animations in rAF, add test, decrease animation duration

ampproject · Mar 11, 2020 · 86ab5c4 · 86ab5c4
1 parent 24e11b4
commit 86ab5c4
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 21 deletions.
diff --git a/css/amp-story-player-iframe.css b/css/amp-story-player-iframe.css
@@ -41,7 +41,7 @@ main {
 
 .i-amphtml-story-player-loaded iframe {
   opacity: 1;
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .story-player-iframe:nth-child(1),

diff --git a/src/amp-story-player.js b/src/amp-story-player.js
@@ -48,8 +48,8 @@ const IframePosition = {
  * @enum {number}
  */
 const SwipingState = {
-  SWIPING_TO_NEXT: 0,
-  SWIPING_TO_PREVIOUS: 1,
+  SWIPING_TO_LEFT: 0,
+  SWIPING_TO_RIGHT: 1,
 };
 
 /** @const {number} */
@@ -205,8 +205,8 @@ export class AmpStoryPlayer {
             this.onTouchMove_(data);
           });
 
-          messaging.registerHandler('touchend', (event, data) => {
-            this.onTouchEnd_(data);
+          messaging.registerHandler('touchend', () => {
+            this.onTouchEnd_();
           });
 
           messaging.registerHandler('selectDocument', (event, data) => {
@@ -362,9 +362,11 @@ export class AmpStoryPlayer {
    * @private
    */
   updateIframePosition_(iframeIdx, position) {
-    const iframe = this.iframes_[iframeIdx];
-    resetStyles(iframe, ['transform', 'transition']);
-    iframe.setAttribute('i-amphtml-iframe-position', position);
+    requestAnimationFrame(() => {
+      const iframe = this.iframes_[iframeIdx];
+      resetStyles(iframe, ['transform', 'transition']);
+      iframe.setAttribute('i-amphtml-iframe-position', position);
+    });
   }
 
   /**
@@ -546,13 +548,13 @@ export class AmpStoryPlayer {
     if (gesture.last === true) {
       const delta = Math.abs(deltaX);
 
-      if (this.swipingState_ === SwipingState.SWIPING_TO_NEXT) {
+      if (this.swipingState_ === SwipingState.SWIPING_TO_LEFT) {
         delta > TOGGLE_THRESHOLD_PX && this.getSecondaryIframe_()
           ? this.next_()
           : this.resetIframeStyles_();
       }
 
-      if (this.swipingState_ === SwipingState.SWIPING_TO_PREVIOUS) {
+      if (this.swipingState_ === SwipingState.SWIPING_TO_RIGHT) {
         delta > TOGGLE_THRESHOLD_PX && this.getSecondaryIframe_()
           ? this.previous_()
           : this.resetIframeStyles_();
@@ -573,11 +575,15 @@ export class AmpStoryPlayer {
       this.stories_[this.currentIdx_][IFRAME_IDX]
     ];
 
-    resetStyles(currentIframe, ['transform', 'transition']);
+    requestAnimationFrame(() => {
+      resetStyles(currentIframe, ['transform', 'transition']);
+    });
 
     const secondaryIframe = this.getSecondaryIframe_();
     if (secondaryIframe) {
-      resetStyles(secondaryIframe, ['transform', 'transition']);
+      requestAnimationFrame(() => {
+        resetStyles(secondaryIframe, ['transform', 'transition']);
+      });
     }
   }
 
@@ -588,7 +594,7 @@ export class AmpStoryPlayer {
    */
   getSecondaryIframe_() {
     const nextStoryIdx =
-      this.swipingState_ === SwipingState.SWIPING_TO_NEXT
+      this.swipingState_ === SwipingState.SWIPING_TO_LEFT
         ? this.currentIdx_ + 1
         : this.currentIdx_ - 1;
 
@@ -608,30 +614,34 @@ export class AmpStoryPlayer {
     let secondaryTranslate;
 
     if (deltaX < 0) {
-      this.swipingState_ = SwipingState.SWIPING_TO_NEXT;
+      this.swipingState_ = SwipingState.SWIPING_TO_LEFT;
       secondaryTranslate = `translate3d(calc(100% + ${deltaX}px), 0, 0)`;
     } else {
-      this.swipingState_ = SwipingState.SWIPING_TO_PREVIOUS;
+      this.swipingState_ = SwipingState.SWIPING_TO_RIGHT;
       secondaryTranslate = `translate3d(calc(${deltaX}px - 100%), 0, 0)`;
     }
 
     const story = this.stories_[this.currentIdx_];
     const iframe = this.iframes_[story[IFRAME_IDX]];
     const translate = `translate3d(${deltaX}px, 0, 0)`;
 
-    setStyles(iframe, {
-      transform: translate,
-      transition: 'none',
+    requestAnimationFrame(() => {
+      setStyles(iframe, {
+        transform: translate,
+        transition: 'none',
+      });
     });
 
     const secondaryIframe = this.getSecondaryIframe_();
     if (!secondaryIframe) {
       return;
     }
 
-    setStyles(secondaryIframe, {
-      transform: secondaryTranslate,
-      transition: 'none',
+    requestAnimationFrame(() => {
+      setStyles(secondaryIframe, {
+        transform: secondaryTranslate,
+        transition: 'none',
+      });
     });
   }
 

diff --git a/test/unit/test-amp-story-player.js b/test/unit/test-amp-story-player.js
@@ -208,4 +208,17 @@ describes.realWin('AmpStoryPlayer', {amp: false}, env => {
     expect(iframes[0].getAttribute('i-amphtml-iframe-position')).to.eql('-1');
     expect(iframes[1].getAttribute('i-amphtml-iframe-position')).to.eql('0');
   });
+
+  it('should not navigate when swiping last story', async () => {
+    buildStoryPlayer(2);
+    await manager.loadPlayers();
+
+    swipeLeft();
+    swipeLeft();
+    swipeLeft();
+
+    const iframes = playerEl.shadowRoot.querySelectorAll('iframe');
+    expect(iframes[0].getAttribute('i-amphtml-iframe-position')).to.eql('-1');
+    expect(iframes[1].getAttribute('i-amphtml-iframe-position')).to.eql('0');
+  });
 });