Unload resources in carousel.

ampproject · Feb 19, 2016 · ba33ca2 · ba33ca2
1 parent 4729ad4
commit ba33ca2
Show file tree

Hide file tree

Showing 8 changed files with 284 additions and 1 deletion.
diff --git a/examples/carousel.amp.html b/examples/carousel.amp.html
@@ -0,0 +1,169 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP #0</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <style amp-custom>
+    body {
+      font-family: 'Questrial', Arial;
+    }
+  </style>
+
+
+  <script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
+  <script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
+  <script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
+  <script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
+  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
+  <script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>
+  <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
+  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
+  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+</head>
+<body>
+  <amp-carousel width=400 height=300 layout=responsive type=slides controls>
+
+    <div>hello world</div>
+
+    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" layout=fill>
+    </amp-img>
+
+    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" width=400 height=300 layout=responsive>
+    </amp-img>
+
+    <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" width=400 height=300 layout=responsive>
+    </amp-img>
+
+    <amp-soundcloud height=300
+        layout="fixed-height"
+        data-trackid="243169232">
+    </amp-soundcloud>
+
+    <amp-youtube
+        data-videoid="mGENRKrdoGY"
+        width="400" height="300">
+    </amp-youtube>
+
+    <amp-anim
+        src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no"
+        width="400" height="300">
+      <amp-img placeholder
+          src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no-k"
+          width="400" height="300">
+        </amp-img>
+    </amp-anim>
+
+    <amp-audio src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3">
+    </amp-audio>
+
+    <amp-brightcove
+        data-account="906043040001"
+        data-video-id="1401169490001"
+        data-player="180a5658-8be8-4f33-8eba-d562ab41b40c"
+        layout="responsive" width="480" height="270">
+    </amp-brightcove>
+
+    <amp-vimeo
+        data-videoid="27246366"
+        width="500"
+        height="281">
+    </amp-vimeo>
+
+    <amp-dailymotion
+        data-videoid="x3rdtfy"
+        width="500"
+        height="281">
+    </amp-dailymotion>
+
+    <amp-vine
+        data-vineid="MdKjXez002d"
+        width="381"
+        height="381"
+        layout="responsive">
+    </amp-vine>
+
+    <amp-video
+        src="video/The-Audience-Is-Programming.mp4"
+        width="358"
+        height="204"
+        layout="responsive"
+        controls>
+    </amp-video>
+
+  </amp-carousel>
+
+  <amp-carousel width=auto height=300 controls>
+
+    <div>hello world</div>
+
+    <amp-img src="https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n" width=400 height=300>
+    </amp-img>
+
+    <amp-img src="https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n" width=400 height=300>
+    </amp-img>
+
+    <amp-img src="https://lh3.googleusercontent.com/Z4gtm5Bkxyv21Z2PtbTf95Clb9AE4VTR6olbBKYrenM=w400-h300-no-n" width=400 height=300>
+    </amp-img>
+
+    <amp-soundcloud height=300
+        layout="fixed-height"
+        data-trackid="243169232">
+    </amp-soundcloud>
+
+    <amp-youtube
+        data-videoid="mGENRKrdoGY"
+        width="400" height="300">
+    </amp-youtube>
+
+    <amp-anim
+        src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no"
+        width="400" height="300">
+      <amp-img placeholder
+          src="https://lh3.googleusercontent.com/qNn8GDz8Jfd-s9lt3Nc4lJeLjVyEaqGJTk1vuCUWazCmAeOBVjSWDD0SMTU7x0zhVe5UzOTKR0n-kN4SXx7yElvpKYvCMaRyS_g-jydhJ_cEVYmYPiZ_j1Y9de43mlKxU6s06uK1NAlpbSkL_046amEKOdgIACICkuWfOBwlw2hUDfjPOWskeyMrcTu8XOEerCLuVqXugG31QC345hz3lUyOlkdT9fMYVUynSERGNzHba7bXMOxKRe3izS5DIWUgJs3oeKYqA-V8iqgCvneD1jj0Ff68V_ajm4BDchQubBJU0ytXVkoWh27ngeEHubpnApOS6fcGsjPxeuMjnzAUtoTsiXz2FZi1mMrxrblJ-kZoAq1DJ95cnoqoa2CYq3BTgq2E8BRe2paNxLJ5GXBCTpNdXMpVJc6eD7ceijQyn-2qanilX-iK3ChbOq0uBHMvsdoC_LsFOu5KzbbNH71vM3DPkvDGmHJmF67Vj8sQ6uBrLnzpYlCyN4-Y9frR8zugDcqX5Q=w400-h300-no-k"
+          width="400" height="300">
+        </amp-img>
+    </amp-anim>
+
+    <amp-audio src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3">
+    </amp-audio>
+
+    <amp-brightcove
+        data-account="906043040001"
+        data-video-id="1401169490001"
+        data-player="180a5658-8be8-4f33-8eba-d562ab41b40c"
+        layout="responsive" width="300" height="300">
+    </amp-brightcove>
+
+    <amp-vimeo
+        data-videoid="27246366"
+        width="300"
+        height="300">
+    </amp-vimeo>
+
+    <amp-dailymotion
+        data-videoid="x3rdtfy"
+        width="300"
+        height="300">
+    </amp-dailymotion>
+
+    <amp-vine
+        data-vineid="MdKjXez002d"
+        width="300"
+        height="300">
+    </amp-vine>
+
+    <amp-video
+        src="video/The-Audience-Is-Programming.mp4"
+        width="300"
+        height="300"
+        controls>
+    </amp-video>
+
+  </amp-carousel>
+
+</html>
diff --git a/extensions/amp-anim/0.1/amp-anim.js b/extensions/amp-anim/0.1/amp-anim.js
@@ -105,7 +105,13 @@ class AmpAnim extends AMP.BaseElement {
       return Promise.resolve();
     }
     this.img_.setAttribute('src', src);
-    this.loadPromise_ = loadPromise(this.img_);
+    this.loadPromise_ = loadPromise(this.img_)
+        .catch(error => {
+          if (!this.img_.getAttribute('src')) {
+            return;
+          }
+          throw error;
+        });
     return this.loadPromise_;
   }
 };

diff --git a/extensions/amp-carousel/0.1/carousel.js b/extensions/amp-carousel/0.1/carousel.js
@@ -184,6 +184,7 @@ export class AmpCarousel extends BaseCarousel {
       this.withinWindow_(oldPos, cell => {
         if (seen.indexOf(cell) == -1) {
           this.updateInViewport(cell, false);
+          this.schedulePause(cell);
         }
       });
     }

diff --git a/extensions/amp-carousel/0.1/slides.js b/extensions/amp-carousel/0.1/slides.js
@@ -209,6 +209,7 @@ export class AmpSlides extends BaseCarousel {
     this.updateInViewport(oldSlide, false);
     this.updateInViewport(newSlide, true);
     this.setControlsState();
+    this.schedulePause(oldSlide);
   }
 
   /**

diff --git a/gulpfile.js b/gulpfile.js
@@ -330,6 +330,7 @@ function buildExamples(watch) {
   buildExample('responsive.amp.html');
   buildExample('article-access.amp.html');
   buildExample('dailymotion.amp.html');
+  buildExample('carousel.amp.html');
   buildExample('csp.amp.html');
   buildExample('metadata-examples/article-json-ld.amp.html');
   buildExample('metadata-examples/article-microdata.amp.html');

diff --git a/src/base-element.js b/src/base-element.js
@@ -499,6 +499,14 @@ export class BaseElement {
     this.resources_.scheduleLayout(this.element, elements);
   }
 
+  /**
+   * @param {!Element|!Array<!Element>} elements
+   * @protected
+   */
+  schedulePause(elements) {
+    this.resources_.schedulePause(this.element, elements);
+  }
+
   /**
    * Schedule the preload request for the children element or elements
    * specified. Resource manager will perform the actual preload based on the

diff --git a/src/service/resources-impl.js b/src/service/resources-impl.js
@@ -384,6 +384,21 @@ export class Resources {
         elements_(subElements));
   }
 
+  /**
+   * Invokes `unload` on the elements' resource which in turn will invoke
+   * the `documentBecameInactive` callback on the custom element.
+   * @param {!Element} parentElement
+   * @param {!Element|!Array<!Element>} subElements
+   */
+  schedulePause(parentElement, subElements) {
+    const parentResource = this.getResourceForElement(parentElement);
+    subElements = elements_(subElements);
+
+    this.discoverResourcesForArray_(parentResource, subElements, resource => {
+      resource.unload();
+    });
+  }
+
   /**
    * Schedules preload for the specified sub-elements that are children of the
    * parent element. The parent element may choose to send this signal either

diff --git a/test/functional/test-resources.js b/test/functional/test-resources.js
@@ -210,6 +210,88 @@ describe('Resources', () => {
   });
 });
 
+describe('Resources schedulePause', () => {
+
+  let sandbox;
+  let resources;
+  let parent;
+  let children;
+  let child0;
+  let child1;
+  let child2;
+
+  function createElement() {
+    return {
+      tagName: 'amp-test',
+      isBuilt() {
+        return true;
+      },
+      isUpgraded() {
+        return true;
+      },
+      getAttribute() {
+        return null;
+      },
+      contains() {
+        return true;
+      },
+      classList: {
+        contains() {
+          return true;
+        }
+      },
+      documentInactiveCallback() {
+        return false;
+      }
+    };
+  }
+
+  function createElementWithResource(id) {
+    const element = createElement();
+    const resource = new Resource(id, element, resources);
+    resource.state_ = ResourceState_.LAYOUT_COMPLETE;
+    resource.element['__AMP__RESOURCE'] = resource;
+    return [element, resource];
+  }
+
+  beforeEach(() => {
+    sandbox = sinon.sandbox.create();
+    resources = new Resources(window);
+    const parentTuple = createElementWithResource(1);
+    parent = parentTuple[0];
+    child0 = document.createElement('div');
+    child1 = createElementWithResource(2)[0];
+    child2 = createElementWithResource(3)[0];
+    children = [child0, child1, child2];
+  });
+
+  it('should not throw with a single element', () => {
+    expect(() => {
+      resources.schedulePause(parent, child1);
+    }).to.not.throw();
+  });
+
+  it('should not throw with an array of elements', () => {
+    expect(() => {
+      resources.schedulePause(parent, [child1, child2]);
+    }).to.not.throw();
+  });
+
+  it('should be ok with non amp children', () => {
+    expect(() => {
+      resources.schedulePause(parent, children);
+    }).to.not.throw();
+  });
+
+  it('should call documentInactiveCallback on custom element', () => {
+    const stub1 = sandbox.stub(child1, 'documentInactiveCallback');
+    const stub2 = sandbox.stub(child2, 'documentInactiveCallback');
+
+    resources.schedulePause(parent, children);
+    expect(stub1.calledOnce).to.be.true;
+    expect(stub2.calledOnce).to.be.true;
+  });
+});
 
 describe('Resources discoverWork', () => {