✨ [Panning media] Prevent returning infinity in zoom (#33073)

* handle infinite zoom * Type and comment. * Remove whitespace. * const for small integer
ampproject · Mar 16, 2021 · 977dd5b · 977dd5b
1 parent dab790a
commit 977dd5b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/examples/amp-story/amp-story-panning-media.html b/examples/amp-story/amp-story-panning-media.html
@@ -41,9 +41,10 @@
             >
               <amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
             </amp-story-panning-media>
-          </amp-story-grid-layer>       
+          </amp-story-grid-layer>
         </amp-story-page>
 
+        <!-- painting and painting zoom in example -->
         <amp-story-page id="stars-2">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media 
@@ -66,7 +67,14 @@
             >
               <amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
             </amp-story-panning-media>
-          </amp-story-grid-layer>        
+          </amp-story-grid-layer>
+          <amp-story-grid-layer template="fill">
+            <amp-story-panning-media
+              layout="fill"
+              zoom='0'
+            >
+              <amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
+            </amp-story-panning-media>
         </amp-story-page>
 
         <amp-story-page id="stars-3">
@@ -76,7 +84,7 @@
               group-id='stars-group-1'
               x="-10%"
               y="0%"
-              zoom='2'
+              zoom='0'
             >
               <amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
             </amp-story-panning-media>
@@ -87,15 +95,12 @@
               group-id='stars-group-2'
               x="-15%"
               y="0%"
-              zoom='1.5'
+              zoom='0'
             >
               <amp-img layout="fill" width="2992" height="2550" src="img/stars.png"></amp-img>
             </amp-story-panning-media>
           </amp-story-grid-layer>
-        </amp-story-page>
 
-        <!-- painting example -->
-        <amp-story-page id="painting-1">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media
               layout="fill"
@@ -105,7 +110,8 @@
           </amp-story-grid-layer>
         </amp-story-page>
 
-        <amp-story-page id="painting-2">
+        <!-- painting example -->
+        <amp-story-page id="painting-1">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media
               layout="fill"
@@ -117,7 +123,7 @@
           </amp-story-grid-layer>
         </amp-story-page>     
 
-        <amp-story-page id="painting-3">
+        <amp-story-page id="painting-2">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media
               layout="fill"
@@ -128,7 +134,7 @@
           </amp-story-grid-layer>
         </amp-story-page> 
 
-        <amp-story-page id="painting-4">
+        <amp-story-page id="painting-3">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media
               layout="fill"
@@ -140,7 +146,7 @@
           </amp-story-grid-layer>
         </amp-story-page>  
 
-        <amp-story-page id="painting-5">
+        <amp-story-page id="painting-4">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media
               layout="fill"
@@ -151,7 +157,7 @@
           </amp-story-grid-layer>
         </amp-story-page>  
 
-        <amp-story-page id="painting-6">
+        <amp-story-page id="painting-5">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media
               layout="fill"
@@ -161,9 +167,9 @@
               <amp-img layout="fill" width="4000" height="3059" src="img/conservatory-coords.jpg"></amp-img>
             </amp-story-panning-media>
           </amp-story-grid-layer>
-        </amp-story-page>      
+        </amp-story-page>
 
-        <amp-story-page id="painting-7">
+        <amp-story-page id="painting-6">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media
               layout="fill"
@@ -174,7 +180,7 @@
           </amp-story-grid-layer>
         </amp-story-page> 
 
-        <amp-story-page id="painting-8">
+        <amp-story-page id="painting-7">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media
               layout="fill"
@@ -186,7 +192,7 @@
           </amp-story-grid-layer>
         </amp-story-page>   
 
-        <amp-story-page id="painting-9">
+        <amp-story-page id="painting-8">
           <amp-story-grid-layer template="fill">
             <amp-story-panning-media
               layout="fill"

diff --git a/extensions/amp-story-panning-media/0.1/amp-story-panning-media.js b/extensions/amp-story-panning-media/0.1/amp-story-panning-media.js
@@ -33,6 +33,12 @@ const TAG = 'AMP_STORY_PANNING_MEDIA';
 /** @const {string}  */
 const DURATION_MS = 1000;
 
+/**
+ * A small number used to calculate zooming out to 0.
+ * @const {number}
+ */
+const MIN_INTEGER = -100000;
+
 /**
  * Position values used to animate between components.
  * x: (optional) Percentage between [-50; 50]
@@ -84,8 +90,11 @@ export class AmpStoryPanningMedia extends AMP.BaseElement {
     this.animateTo_ = {
       x: parseFloat(this.element_.getAttribute('x')) || 0,
       y: parseFloat(this.element_.getAttribute('y')) || 0,
-      zoom: parseFloat(this.element_.getAttribute('zoom')) || 1,
+      zoom: this.element_.hasAttribute('zoom')
+        ? parseFloat(this.element_.getAttribute('zoom'))
+        : 1,
     };
+
     return Services.storyStoreServiceForOrNull(this.win).then(
       (storeService) => {
         this.storeService_ = storeService;
@@ -227,11 +236,22 @@ export class AmpStoryPanningMedia extends AMP.BaseElement {
     const {x, y, zoom} = this.animationState_;
     return this.mutateElement(() => {
       setImportantStyles(this.ampImgEl_, {
-        transform: `translate3d(${x}%, ${y}%, ${(zoom - 1) / zoom}px)`,
+        transform: `translate3d(${x}%, ${y}%, ${this.calculateZoom_(zoom)}px)`,
       });
     });
   }
 
+  /**
+   * Calculates zoom for translate3d and ensures the number is finite.
+   * @private
+   * @param {number} zoom
+   * @return {number}
+   */
+  calculateZoom_(zoom) {
+    const calculatedZoom = (zoom - 1) / zoom;
+    return isFinite(calculatedZoom) ? calculatedZoom : MIN_INTEGER;
+  }
+
   /**
    * @private
    * @return {string} the page id