From 52f22c1f16db453fe92fd27890ea63a3f5130f9f Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Fri, 17 Jan 2020 10:10:56 -0500
Subject: [PATCH 01/13] wip

---
 src/amp-story-embed-manager.js | 99 ++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/amp-story-embed-manager.js

diff --git a/src/amp-story-embed-manager.js b/src/amp-story-embed-manager.js
new file mode 100644
index 000000000000..dabbf2163e00
--- /dev/null
+++ b/src/amp-story-embed-manager.js
@@ -0,0 +1,99 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {AmpStoryEmbed} from './amp-story-embed';
+
+/** @const {string} */
+const SCROLL_THROTTLE_MS = 500;
+
+export class AmpStoryEmbedManager {
+  /**
+   * Fallback for when IntersectionObserver is not supported. Calls layoutCallback
+   * on the embed when it is close to the viewport.
+   * @param {!AmpStoryEmbed} embedImpl
+   */
+  layoutFallback_(embedImpl) {
+    let tick = true;
+
+    self.addEventListener('scroll', () => {
+      if (!tick) {
+        return;
+      }
+
+      setTimeout(() => {
+        tick = true;
+
+        this.layoutIfVisible_(embedImpl);
+      }, SCROLL_THROTTLE_MS);
+
+      tick = false;
+    });
+
+    // Calls it once it in case scroll event never fires.
+    this.layoutIfVisible_(embedImpl);
+  }
+
+  /**
+   * Checks if embed is close to the viewport and calls layoutCallback when it is.
+   * @param {!AmpStoryEmbed} embedImpl
+   */
+  layoutIfVisible_(embedImpl) {
+    const embedTop = embedImpl.getElement()./*OK*/ getBoundingClientRect().top;
+    if (self./*OK*/ innerHeight * 2 > embedTop) {
+      embedImpl.layoutCallback();
+    }
+  }
+
+  /**
+   * Calls layoutCallback on the embed when it is close to the viewport.
+   * @param {!AmpStoryEmbed} embedImpl
+   * @visibleForTesting
+   */
+  layoutEmbed(embedImpl) {
+    if (IntersectionObserver && self === self.parent) {
+      const intersectingCallback = entries => {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) {
+            return;
+          }
+          embedImpl.layoutCallback();
+        });
+      };
+
+      const observer = new IntersectionObserver(intersectingCallback, {
+        rootMargin: '100%',
+      });
+      observer.observe(embedImpl.getElement());
+      return;
+    }
+
+    this.layoutFallback_(embedImpl);
+  }
+
+  /**
+   * Builds and layouts the embeds when appropiate.
+   */
+  loadEmbeds() {
+    const doc = self.document;
+    const embeds = doc.getElementsByTagName('amp-story-embed');
+    for (let i = 0; i < embeds.length; i++) {
+      const embedEl = embeds[i];
+      const embedImpl = new AmpStoryEmbed(self, embedEl);
+      embedImpl.buildCallback();
+      this.layoutEmbed(embedImpl);
+    }
+  }
+}

From 6994980da02874e4158b31d5be1d74124f13f093 Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Fri, 10 Jan 2020 15:25:16 -0500
Subject: [PATCH 02/13] add messaging, implements build/layoutcallbacks

---
 examples/amp-story/embed.html |  24 ++----
 package.json                  |   1 +
 src/amp-story-embed.js        | 140 ++++++++++++++++++++++++++++++----
 yarn.lock                     |   5 ++
 4 files changed, 138 insertions(+), 32 deletions(-)

diff --git a/examples/amp-story/embed.html b/examples/amp-story/embed.html
index 413ffa353d92..63229c22fc71 100644
--- a/examples/amp-story/embed.html
+++ b/examples/amp-story/embed.html
@@ -6,6 +6,10 @@
       body {
         font-family: sans-serif;
       }
+      amp-story-embed {
+        position: absolute;
+        top: 1500px;
+      }
     </style>
     <style injected>
       .amp-story-embed {
@@ -40,25 +44,13 @@
   <body>
     <h1>This is a NON-AMP page that embeds a story below:</h1>
     <amp-story-embed>
-      <a href="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/"
-          data-poster-portrait-src="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/promo3x4.jpg"
-          class="story">
-        <span class="title">A local’s guide to what to eat and do in New York City</span>
-      </a>
-      <a href="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/"
-          data-poster-portrait-src="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/promo3x4.jpg"
-          class="story">
-        <span class="title">A local’s guide to what to eat and do in Miami</span>
-      </a>
-      <a href="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/"
-          data-poster-portrait-src="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/promo3x4.jpg"
+      <a href="https://stamp-demo.firebaseapp.com/examples/amp-story/artezan/kitchen-stories/index.html"
           class="story">
-        <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+        <span class="title">Kitchen</span>
       </a>
-      <a href="https://www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/"
-          data-poster-portrait-src="https://washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-do-and-eat-in-rome/img/promo3x4.jpg"
+      <a href="./body-painting/index.html"
           class="story">
-        <span class="title">A local’s guide to what to eat and do in Rome</span>
+        <span class="title">Body Painting</span>
       </a>
     </amp-story-embed>
   </body>
diff --git a/package.json b/package.json
index 6a62eec7767b..bd5d5ee67b56 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@ampproject/animations": "0.2.0",
     "@ampproject/worker-dom": "0.23.2",
+    "@ampproject/viewer-messaging": "1.1.0",
     "dompurify": "2.0.7",
     "moment": "2.24.0",
     "preact": "10.2.1",
diff --git a/src/amp-story-embed.js b/src/amp-story-embed.js
index 96556596581e..ccfbae7c3a2e 100644
--- a/src/amp-story-embed.js
+++ b/src/amp-story-embed.js
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {Messaging} from '@ampproject/viewer-messaging';
+import {parseUrlDeprecated} from './url';
 import {setStyle} from './style';
 import {toArray} from './types';
 
@@ -31,6 +33,58 @@ const CSS = `
   main { display: flex; flex-direction: row; height: 100%; }
   .i-amphtml-story-embed-loaded iframe { opacity: 1; }`;
 
+/** @const {string} */
+const TAG = '[AMP-STORY-EMBED]';
+
+/**
+ * Logging.
+ */
+function log() {
+  const var_args = toArray(arguments);
+  var_args.unshift(TAG);
+  console /*OK*/.log
+    .apply(console, var_args);
+}
+
+/**
+ * Gets encoded url for viewer usage.
+ * @param {string} href
+ * @return {!Location}
+ */
+function getEncodedUrl(href) {
+  const params = {
+    visibilityState: 'inactive',
+    origin: parseUrlDeprecated(self.location.href).origin,
+  };
+  log('Params: ' + JSON.stringify(params));
+
+  let inputUrl = href + '?amp_js_v=0.1#' + encodeUrl(params);
+  if (self.location.hash && self.location.hash.length > 1) {
+    inputUrl += '&' + self.location.hash.substring(1);
+  }
+  return parseUrlDeprecated(inputUrl);
+}
+
+/**
+ * Encodes string of URL parameters.
+ * @param {!Object} params
+ * @return {string}
+ */
+function encodeUrl(params) {
+  let encodedParams = '';
+  for (const name in params) {
+    const value = params[name];
+    if (value === null || value === undefined) {
+      continue;
+    }
+    if (encodedParams.length > 0) {
+      encodedParams += '&';
+    }
+    encodedParams += encodeURIComponent(name) + '=' + encodeURIComponent(value);
+  }
+  return encodedParams;
+}
+
 /**
  * Note that this is a vanilla JavaScript class and should not depend on AMP
  * services, as v0.js is not expected to be loaded in this context.
@@ -61,6 +115,9 @@ export class AmpStoryEmbed {
 
     /** @private {?HTMLIframeElement} */
     this.iframeEl_ = null;
+
+    /** @private {boolean} */
+    this.isLaidOut_ = false;
   }
 
   /** @public */
@@ -69,8 +126,9 @@ export class AmpStoryEmbed {
 
     this.initializeShadowRoot_();
 
-    // TODO: Build all child iframes.
-    this.buildIframe_(0);
+    this.stories_.forEach(story => {
+      this.buildIframe_(story);
+    });
   }
 
   /** @private */
@@ -88,11 +146,10 @@ export class AmpStoryEmbed {
   }
 
   /**
-   * @param {number} index
+   * @param {!Element} story
    * @private
    */
-  buildIframe_(index) {
-    const story = this.stories_[index];
+  buildIframe_(story) {
     this.iframeEl_ = this.doc_.createElement('iframe');
     setStyle(
       this.iframeEl_,
@@ -102,6 +159,37 @@ export class AmpStoryEmbed {
     this.iframeEl_.classList.add('story');
     this.initializeLoadingListeners_();
     this.rootEl_.appendChild(this.iframeEl_);
+    this.initializeHandshake_(story);
+  }
+
+  /**
+   * @param {!Element} story
+   * @private
+   */
+  initializeHandshake_(story) {
+    const frameOrigin = getEncodedUrl(story.href).origin;
+
+    Messaging.waitForHandshakeFromDocument(
+      self,
+      this.iframeEl_.contentWindow,
+      frameOrigin
+    ).then(
+      messaging => {
+        // TODO(Enriqe): Appropiately set visibility to stories.
+        messaging.sendRequest('visibilitychange', {state: 'visible'}, true);
+        messaging.setDefaultHandler(() => {
+          // TODO(Enriqe): Set default handler.
+        });
+        messaging.registerHandler('moreInfoLinkUrl', () => {
+          // TODO(Enriqe): Get publisher defined `moreInfoLinkUrl` (could come
+          // from an attribute in the <amp-story-embed> element.
+          return Promise.resolve('');
+        });
+      },
+      err => {
+        log(err);
+      }
+    );
   }
 
   /** @private  */
@@ -123,23 +211,32 @@ export class AmpStoryEmbed {
   }
 
   /**
-   * @return {!Promise}
    * @public
    */
   layoutCallback() {
-    // TODO: Layout all child iframes.
-    return this.layoutIframe_(0);
+    if (this.isLaidOut_) {
+      return;
+    }
+
+    const iframes = toArray(this.rootEl_.querySelectorAll('iframe'));
+    this.stories_.forEach((story, idx) => {
+      this.layoutIframe_(story, iframes[idx]);
+    });
+    this.isLaidOut_ = true;
   }
 
   /**
-   * @param {number} index
-   * @return {!Promise}
+   * @param {!Element} story
+   * @param {!Element} iframe
    * @private
    */
-  layoutIframe_(index) {
-    const story = this.stories_[index];
-    this.iframeEl_.setAttribute('src', story.href);
-    return Promise.resolve();
+  layoutIframe_(story, iframe) {
+    this.stories_ = toArray(this.element_.querySelectorAll('a'));
+
+    const url = getEncodedUrl(story.href).href;
+    log('AMP URL = ', url);
+
+    iframe.setAttribute('src', url);
   }
 }
 
@@ -150,7 +247,18 @@ self.onload = () => {
     const embed = embeds[i];
     const embedImpl = new AmpStoryEmbed(self, embed);
     embedImpl.buildCallback();
-    // TODO(Enriqe): add intersection observer that triggers layoutCallback().
-    embedImpl.layoutCallback();
+
+    const intersectingCallback = entries => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) {
+          return;
+        }
+        embedImpl.layoutCallback();
+      });
+    };
+    const observer = new IntersectionObserver(intersectingCallback, {
+      threshold: 0.5,
+    });
+    observer.observe(embed);
   }
 };
diff --git a/yarn.lock b/yarn.lock
index 72623f3b541c..67d28a609cc6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,6 +12,11 @@
   resolved "https://registry.yarnpkg.com/@ampproject/worker-dom/-/worker-dom-0.23.2.tgz#9b27a6b96125ddca58ebef302d7d05dc6080d689"
   integrity sha512-+L2MCofSaFqTyGlp5FxqoH2JuiuHJkxVuLyim2RpMsnj9CVcfNlCdNwn2KqROw9kFnJp8gnZ7c8voqwD6yDwEg==
 
+"@ampproject/viewer-messaging@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/viewer-messaging/-/viewer-messaging-1.1.0.tgz#404f92c5754bac61014ed2272dd5e87174b9af84"
+  integrity sha512-SoR1dGl2Pl8eJlyGCU/9Gz/orOggmW/13wUh7NnuGvDYqLdlhnRBzvEGqEAlq/fQKel9ZM6RNtu85Jw8WC3K2Q==
+
 "@ava/babel-plugin-throws-helper@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@ava/babel-plugin-throws-helper/-/babel-plugin-throws-helper-4.0.0.tgz#8f5b45b7a0a79c6f4032de2101e0c221847efb62"

From 034e43a16be2a94e588cf2e8036de451b0e16f14 Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Tue, 14 Jan 2020 18:14:55 -0500
Subject: [PATCH 03/13] prerender 2n viewports away, add IO fallback, remove
 logging, defer layout logic.

---
 examples/amp-story/embed.html |  30 +++--
 src/amp-story-embed.js        | 219 ++++++++++++++++++----------------
 2 files changed, 134 insertions(+), 115 deletions(-)

diff --git a/examples/amp-story/embed.html b/examples/amp-story/embed.html
index 63229c22fc71..4f2ef31ade3e 100644
--- a/examples/amp-story/embed.html
+++ b/examples/amp-story/embed.html
@@ -8,7 +8,7 @@
       }
       amp-story-embed {
         position: absolute;
-        top: 1500px;
+        top: 3000px;
       }
     </style>
     <style injected>
@@ -44,14 +44,26 @@
   <body>
     <h1>This is a NON-AMP page that embeds a story below:</h1>
     <amp-story-embed>
-      <a href="https://stamp-demo.firebaseapp.com/examples/amp-story/artezan/kitchen-stories/index.html"
-          class="story">
-        <span class="title">Kitchen</span>
-      </a>
-      <a href="./body-painting/index.html"
-          class="story">
-        <span class="title">Body Painting</span>
-      </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/"
+            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/img/promo3x4.jpg"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in New York City</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/"
+            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-miami/img/promo3x4.jpg"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in Miami</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/"
+            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-mexico-city/img/promo3x4.jpg"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in Mexico City</span>
+        </a>
+        <a href="https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-rome/"
+            data-poster-portrait-src="https://www-washingtonpost-com.cdn.ampproject.org/v/s/washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-do-and-eat-in-rome/img/promo3x4.jpg"
+            class="story">
+          <span class="title">A local’s guide to what to eat and do in Rome</span>
+        </a>
     </amp-story-embed>
   </body>
 </html>
diff --git a/src/amp-story-embed.js b/src/amp-story-embed.js
index ccfbae7c3a2e..24bbba7e6b2b 100644
--- a/src/amp-story-embed.js
+++ b/src/amp-story-embed.js
@@ -15,7 +15,7 @@
  */
 
 import {Messaging} from '@ampproject/viewer-messaging';
-import {parseUrlDeprecated} from './url';
+import {parseUrlWithA, serializeQueryString} from './url';
 import {setStyle} from './style';
 import {toArray} from './types';
 
@@ -26,6 +26,9 @@ const LoadStateClass = {
   ERROR: 'i-amphtml-story-embed-error',
 };
 
+/** @const {string} */
+const SCROLL_THROTTLE_MS = 500;
+
 /** @const {string} */
 const CSS = `
   :host { all: initial; display: block; border-radius: 0 !important; width: 405px; height: 720px; overflow: auto; }
@@ -33,58 +36,6 @@ const CSS = `
   main { display: flex; flex-direction: row; height: 100%; }
   .i-amphtml-story-embed-loaded iframe { opacity: 1; }`;
 
-/** @const {string} */
-const TAG = '[AMP-STORY-EMBED]';
-
-/**
- * Logging.
- */
-function log() {
-  const var_args = toArray(arguments);
-  var_args.unshift(TAG);
-  console /*OK*/.log
-    .apply(console, var_args);
-}
-
-/**
- * Gets encoded url for viewer usage.
- * @param {string} href
- * @return {!Location}
- */
-function getEncodedUrl(href) {
-  const params = {
-    visibilityState: 'inactive',
-    origin: parseUrlDeprecated(self.location.href).origin,
-  };
-  log('Params: ' + JSON.stringify(params));
-
-  let inputUrl = href + '?amp_js_v=0.1#' + encodeUrl(params);
-  if (self.location.hash && self.location.hash.length > 1) {
-    inputUrl += '&' + self.location.hash.substring(1);
-  }
-  return parseUrlDeprecated(inputUrl);
-}
-
-/**
- * Encodes string of URL parameters.
- * @param {!Object} params
- * @return {string}
- */
-function encodeUrl(params) {
-  let encodedParams = '';
-  for (const name in params) {
-    const value = params[name];
-    if (value === null || value === undefined) {
-      continue;
-    }
-    if (encodedParams.length > 0) {
-      encodedParams += '&';
-    }
-    encodedParams += encodeURIComponent(name) + '=' + encodeURIComponent(value);
-  }
-  return encodedParams;
-}
-
 /**
  * Note that this is a vanilla JavaScript class and should not depend on AMP
  * services, as v0.js is not expected to be loaded in this context.
@@ -101,6 +52,18 @@ export class AmpStoryEmbed {
       'Missing configuration.'
     );
 
+    /** @private {!Window} */
+    this.win_ = win;
+
+    /** @private {?Element} */
+    this.cachedA_ = null;
+
+    /** @private {number} */
+    this.iframeIdCounter_ = 0;
+
+    /** @private {!Object<string, Messaging>} */
+    this.messagingFor_ = {};
+
     /** @private {!Element} */
     this.element_ = element;
 
@@ -113,9 +76,6 @@ export class AmpStoryEmbed {
     /** @private {?Element} */
     this.rootEl_ = null;
 
-    /** @private {?HTMLIframeElement} */
-    this.iframeEl_ = null;
-
     /** @private {boolean} */
     this.isLaidOut_ = false;
   }
@@ -126,9 +86,8 @@ export class AmpStoryEmbed {
 
     this.initializeShadowRoot_();
 
-    this.stories_.forEach(story => {
-      this.buildIframe_(story);
-    });
+    // TODO(Enriqe): Build all child iframes.
+    this.buildIframe_(this.stories_[0]);
   }
 
   /** @private */
@@ -150,59 +109,66 @@ export class AmpStoryEmbed {
    * @private
    */
   buildIframe_(story) {
-    this.iframeEl_ = this.doc_.createElement('iframe');
+    const iframeEl = this.doc_.createElement('iframe');
     setStyle(
-      this.iframeEl_,
+      iframeEl,
       'backgroundImage',
       story.getAttribute('data-poster-portrait-src')
     );
-    this.iframeEl_.classList.add('story');
-    this.initializeLoadingListeners_();
-    this.rootEl_.appendChild(this.iframeEl_);
-    this.initializeHandshake_(story);
+    iframeEl.setAttribute('id', 'i' + this.iframeIdCounter_++);
+    iframeEl.classList.add('story');
+
+    this.initializeLoadingListeners_(iframeEl);
+    this.rootEl_.appendChild(iframeEl);
+
+    this.initializeHandshake_(story, iframeEl).then(
+      messaging => {
+        this.messagingFor_[iframeEl.id] = messaging;
+
+        // TODO(Enriqe): Appropiately set visibility to stories.
+        this.messagingFor_[iframeEl.id].sendRequest(
+          'visibilitychange',
+          {state: 'visible'},
+          true
+        );
+      },
+      err => {
+        console /*OK*/
+          .log({err});
+      }
+    );
   }
 
   /**
    * @param {!Element} story
+   * @param {!Element} iframeEl
+   * @return {Promise<Messaging>}
    * @private
    */
-  initializeHandshake_(story) {
-    const frameOrigin = getEncodedUrl(story.href).origin;
+  initializeHandshake_(story, iframeEl) {
+    const frameOrigin = this.getEncodedUrl_(story.href).origin;
 
-    Messaging.waitForHandshakeFromDocument(
-      self,
-      this.iframeEl_.contentWindow,
+    return Messaging.waitForHandshakeFromDocument(
+      this.win_,
+      iframeEl.contentWindow,
       frameOrigin
-    ).then(
-      messaging => {
-        // TODO(Enriqe): Appropiately set visibility to stories.
-        messaging.sendRequest('visibilitychange', {state: 'visible'}, true);
-        messaging.setDefaultHandler(() => {
-          // TODO(Enriqe): Set default handler.
-        });
-        messaging.registerHandler('moreInfoLinkUrl', () => {
-          // TODO(Enriqe): Get publisher defined `moreInfoLinkUrl` (could come
-          // from an attribute in the <amp-story-embed> element.
-          return Promise.resolve('');
-        });
-      },
-      err => {
-        log(err);
-      }
     );
   }
 
-  /** @private  */
-  initializeLoadingListeners_() {
+  /**
+   * @param {!Element} iframeEl
+   * @private
+   */
+  initializeLoadingListeners_(iframeEl) {
     this.rootEl_.classList.add(LoadStateClass.LOADING);
 
-    this.iframeEl_.onload = () => {
+    iframeEl.onload = () => {
       this.rootEl_.classList.remove(LoadStateClass.LOADING);
       this.element_.classList.remove(LoadStateClass.LOADING);
       this.rootEl_.classList.add(LoadStateClass.LOADED);
       this.element_.classList.add(LoadStateClass.LOADED);
     };
-    this.iframeEl_.onerror = () => {
+    iframeEl.onerror = () => {
       this.rootEl_.classList.remove(LoadStateClass.LOADING);
       this.element_.classList.remove(LoadStateClass.LOADING);
       this.rootEl_.classList.add(LoadStateClass.ERROR);
@@ -219,9 +185,9 @@ export class AmpStoryEmbed {
     }
 
     const iframes = toArray(this.rootEl_.querySelectorAll('iframe'));
-    this.stories_.forEach((story, idx) => {
-      this.layoutIframe_(story, iframes[idx]);
-    });
+    // TODO(Enriqe): Layout all child iframes.
+    this.layoutIframe_(this.stories_[0], iframes[0]);
+
     this.isLaidOut_ = true;
   }
 
@@ -233,10 +199,34 @@ export class AmpStoryEmbed {
   layoutIframe_(story, iframe) {
     this.stories_ = toArray(this.element_.querySelectorAll('a'));
 
-    const url = getEncodedUrl(story.href).href;
-    log('AMP URL = ', url);
+    const {href} = this.getEncodedUrl_(story.href);
 
-    iframe.setAttribute('src', url);
+    iframe.setAttribute('src', href);
+  }
+
+  /**
+   * Gets encoded url for viewer usage.
+   * @param {string} href
+   * @return {!Location}
+   * @private
+   */
+  getEncodedUrl_(href) {
+    const {location} = this.win_;
+    if (!this.cachedA_) {
+      this.cachedA_ = this.doc_.createElement('a');
+    }
+    const url = parseUrlWithA(this.cachedA_, location.href);
+    const params = {
+      visibilityState: 'inactive',
+      origin: url.origin,
+    };
+
+    let inputUrl = href + '?amp_js_v=0.1#' + serializeQueryString(params);
+    const {hash} = location;
+    if (hash && hash.length > 1) {
+      inputUrl += '&' + hash.substring(1);
+    }
+    return parseUrlWithA(this.cachedA_, inputUrl);
   }
 }
 
@@ -248,17 +238,34 @@ self.onload = () => {
     const embedImpl = new AmpStoryEmbed(self, embed);
     embedImpl.buildCallback();
 
-    const intersectingCallback = entries => {
-      entries.forEach(entry => {
-        if (!entry.isIntersecting) {
-          return;
+    if (IntersectionObserver && self === self.parent) {
+      const intersectingCallback = entries => {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) {
+            return;
+          }
+          embedImpl.layoutCallback();
+        });
+      };
+
+      const observer = new IntersectionObserver(intersectingCallback, {
+        rootMargin: '200%',
+      });
+      observer.observe(embed);
+    } else {
+      let tick = false;
+      self.addEventListener('scroll', () => {
+        if (!tick) {
+          setTimeout(() => {
+            const embedTop = embed.getBoundingClientRect().top;
+            tick = false;
+            if (self.innerHeight * 2 > embedTop) {
+              embedImpl.layoutCallback();
+            }
+          }, SCROLL_THROTTLE_MS);
         }
-        embedImpl.layoutCallback();
+        tick = true;
       });
-    };
-    const observer = new IntersectionObserver(intersectingCallback, {
-      threshold: 0.5,
-    });
-    observer.observe(embed);
+    }
   }
 };

From 9abbbb36d3465b3b7e9b8ae5a5905a499189feef Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Wed, 15 Jan 2020 19:04:08 -0500
Subject: [PATCH 04/13] pull logic to functions, make url logic more robust.

---
 build-system/tasks/presubmit-checks.js |   1 +
 examples/amp-story/embed.html          |   2 +-
 src/amp-story-embed.js                 | 168 ++++++++++++++++---------
 3 files changed, 110 insertions(+), 61 deletions(-)

diff --git a/build-system/tasks/presubmit-checks.js b/build-system/tasks/presubmit-checks.js
index c7d92faafaaf..d7b465813cdc 100644
--- a/build-system/tasks/presubmit-checks.js
+++ b/build-system/tasks/presubmit-checks.js
@@ -366,6 +366,7 @@ const forbiddenTerms = {
       'src/service/navigation.js',
       'src/service/url-impl.js',
       'dist.3p/current/integration.js',
+      'src/amp-story-embed.js',
     ],
   },
   '\\.sendMessage\\(': {
diff --git a/examples/amp-story/embed.html b/examples/amp-story/embed.html
index 4f2ef31ade3e..139266371aec 100644
--- a/examples/amp-story/embed.html
+++ b/examples/amp-story/embed.html
@@ -17,7 +17,7 @@
         height: 720px;
       }
 
-      .story {
+      .story-embed-iframe {
         background-size: cover;
         display: block;
         position: relative;
diff --git a/src/amp-story-embed.js b/src/amp-story-embed.js
index 24bbba7e6b2b..9064faca8ed2 100644
--- a/src/amp-story-embed.js
+++ b/src/amp-story-embed.js
@@ -15,7 +15,8 @@
  */
 
 import {Messaging} from '@ampproject/viewer-messaging';
-import {parseUrlWithA, serializeQueryString} from './url';
+import {addParamsToUrl, parseUrlWithA} from './url';
+import {dict} from './utils/object';
 import {setStyle} from './style';
 import {toArray} from './types';
 
@@ -26,13 +27,16 @@ const LoadStateClass = {
   ERROR: 'i-amphtml-story-embed-error',
 };
 
+/** @const {string} */
+const IFRAME_ID_ATTR_NAME = 'story-embed-iframe-id';
+
 /** @const {string} */
 const SCROLL_THROTTLE_MS = 500;
 
 /** @const {string} */
 const CSS = `
   :host { all: initial; display: block; border-radius: 0 !important; width: 405px; height: 720px; overflow: auto; }
-  .story { height: 100%; width: 100%; flex: 0 0 100%; border: 0; opacity: 0; transition: opacity 500ms ease; }
+  .story-embed-iframe { height: 100%; width: 100%; flex: 0 0 100%; border: 0; opacity: 0; transition: opacity 500ms ease; }
   main { display: flex; flex-direction: row; height: 100%; }
   .i-amphtml-story-embed-loaded iframe { opacity: 1; }`;
 
@@ -55,9 +59,6 @@ export class AmpStoryEmbed {
     /** @private {!Window} */
     this.win_ = win;
 
-    /** @private {?Element} */
-    this.cachedA_ = null;
-
     /** @private {number} */
     this.iframeIdCounter_ = 0;
 
@@ -70,6 +71,9 @@ export class AmpStoryEmbed {
     /** @private {!Document} */
     this.doc_ = win.document;
 
+    /** @private {!Element} */
+    this.cachedA_ = this.doc_.createElement('a');
+
     /** @private {!Array<!HTMLAnchorElement>} */
     this.stories_ = [];
 
@@ -80,6 +84,14 @@ export class AmpStoryEmbed {
     this.isLaidOut_ = false;
   }
 
+  /**
+   * @public
+   * @return {!Element}
+   */
+  getElement() {
+    return this.element_;
+  }
+
   /** @public */
   buildCallback() {
     this.stories_ = toArray(this.element_.querySelectorAll('a'));
@@ -115,22 +127,19 @@ export class AmpStoryEmbed {
       'backgroundImage',
       story.getAttribute('data-poster-portrait-src')
     );
-    iframeEl.setAttribute('id', 'i' + this.iframeIdCounter_++);
-    iframeEl.classList.add('story');
+    iframeEl.setAttribute(IFRAME_ID_ATTR_NAME, 'i' + this.iframeIdCounter_++);
+    iframeEl.classList.add('story-embed-iframe');
 
     this.initializeLoadingListeners_(iframeEl);
     this.rootEl_.appendChild(iframeEl);
 
     this.initializeHandshake_(story, iframeEl).then(
       messaging => {
-        this.messagingFor_[iframeEl.id] = messaging;
+        const iframeId = iframeEl[IFRAME_ID_ATTR_NAME];
+        this.messagingFor_[iframeId] = messaging;
 
         // TODO(Enriqe): Appropiately set visibility to stories.
-        this.messagingFor_[iframeEl.id].sendRequest(
-          'visibilitychange',
-          {state: 'visible'},
-          true
-        );
+        this.displayStory_(iframeId);
       },
       err => {
         console /*OK*/
@@ -197,8 +206,6 @@ export class AmpStoryEmbed {
    * @private
    */
   layoutIframe_(story, iframe) {
-    this.stories_ = toArray(this.element_.querySelectorAll('a'));
-
     const {href} = this.getEncodedUrl_(story.href);
 
     iframe.setAttribute('src', href);
@@ -212,60 +219,101 @@ export class AmpStoryEmbed {
    */
   getEncodedUrl_(href) {
     const {location} = this.win_;
-    if (!this.cachedA_) {
-      this.cachedA_ = this.doc_.createElement('a');
-    }
     const url = parseUrlWithA(this.cachedA_, location.href);
-    const params = {
-      visibilityState: 'inactive',
-      origin: url.origin,
-    };
 
-    let inputUrl = href + '?amp_js_v=0.1#' + serializeQueryString(params);
-    const {hash} = location;
-    if (hash && hash.length > 1) {
-      inputUrl += '&' + hash.substring(1);
-    }
+    const params = dict({
+      'amp_js_v': '0.1',
+      'visibilityState': 'inactive',
+      'origin': url.origin,
+    });
+
+    let inputUrl = addParamsToUrl(href, params);
+    inputUrl = inputUrl.replace('amp_js_v=0.1', 'amp_js_v=0.1#');
+
     return parseUrlWithA(this.cachedA_, inputUrl);
   }
+
+  /**
+   * Sends a message to the story document to make it visible.
+   *
+   * @private
+   * @param {string} iframeId
+   */
+  displayStory_(iframeId) {
+    this.messagingFor_[iframeId].sendRequest(
+      'visibilitychange',
+      {state: 'visible'},
+      true
+    );
+  }
 }
 
-self.onload = () => {
+/**
+ * Fallback for when IntersectionObserver is not supported. Calls layoutCallback
+ * on the embed when it is close to the viewport.
+ * @param {!AmpStoryEmbed} embedImpl
+ */
+function layoutFallback(embedImpl) {
+  let tick = true;
+
+  self.addEventListener('scroll', () => {
+    if (!tick) {
+      return;
+    }
+
+    setTimeout(() => {
+      tick = true;
+
+      const embedTop = embedImpl.getElement()./*OK*/ getBoundingClientRect()
+        .top;
+      if (self./*OK*/ innerHeight * 2 > embedTop) {
+        embedImpl.layoutCallback();
+      }
+    }, SCROLL_THROTTLE_MS);
+
+    tick = false;
+  });
+}
+
+/**
+ * Calls layoutCallback on the embed when it is close to the viewport.
+ * @param {!AmpStoryEmbed} embedImpl
+ */
+function layoutEmbed(embedImpl) {
+  if (IntersectionObserver && self === self.parent) {
+    const intersectingCallback = entries => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) {
+          return;
+        }
+        embedImpl.layoutCallback();
+      });
+    };
+
+    const observer = new IntersectionObserver(intersectingCallback, {
+      rootMargin: '100%',
+    });
+    observer.observe(embedImpl.getElement());
+    return;
+  }
+
+  layoutFallback(embedImpl);
+}
+
+/**
+ * Builds and layouts the embeds when appropiate.
+ */
+function loadEmbeds() {
   const doc = self.document;
   const embeds = doc.getElementsByTagName('amp-story-embed');
   for (let i = 0; i < embeds.length; i++) {
-    const embed = embeds[i];
-    const embedImpl = new AmpStoryEmbed(self, embed);
+    const embedEl = embeds[i];
+    const embedImpl = new AmpStoryEmbed(self, embedEl);
     embedImpl.buildCallback();
-
-    if (IntersectionObserver && self === self.parent) {
-      const intersectingCallback = entries => {
-        entries.forEach(entry => {
-          if (!entry.isIntersecting) {
-            return;
-          }
-          embedImpl.layoutCallback();
-        });
-      };
-
-      const observer = new IntersectionObserver(intersectingCallback, {
-        rootMargin: '200%',
-      });
-      observer.observe(embed);
-    } else {
-      let tick = false;
-      self.addEventListener('scroll', () => {
-        if (!tick) {
-          setTimeout(() => {
-            const embedTop = embed.getBoundingClientRect().top;
-            tick = false;
-            if (self.innerHeight * 2 > embedTop) {
-              embedImpl.layoutCallback();
-            }
-          }, SCROLL_THROTTLE_MS);
-        }
-        tick = true;
-      });
-    }
+    layoutEmbed(embedImpl);
   }
+}
+
+self.onload = () => {
+  loadEmbeds();
 };

From b70375e5802b780301aca1e179a825a2ed52ae35 Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Thu, 16 Jan 2020 14:22:20 -0500
Subject: [PATCH 05/13] adds basic unit tests

---
 src/amp-story-embed.js            | 31 +++++++++++---
 test/unit/test-amp-story-embed.js | 70 +++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+), 6 deletions(-)
 create mode 100644 test/unit/test-amp-story-embed.js

diff --git a/src/amp-story-embed.js b/src/amp-story-embed.js
index 9064faca8ed2..6d913200fc4a 100644
--- a/src/amp-story-embed.js
+++ b/src/amp-story-embed.js
@@ -92,6 +92,14 @@ export class AmpStoryEmbed {
     return this.element_;
   }
 
+  /**
+   * @visibleForTesting
+   * @return {!Element}
+   */
+  getRoot() {
+    return this.rootEl_;
+  }
+
   /** @public */
   buildCallback() {
     this.stories_ = toArray(this.element_.querySelectorAll('a'));
@@ -264,22 +272,33 @@ function layoutFallback(embedImpl) {
     setTimeout(() => {
       tick = true;
 
-      const embedTop = embedImpl.getElement()./*OK*/ getBoundingClientRect()
-        .top;
-      if (self./*OK*/ innerHeight * 2 > embedTop) {
-        embedImpl.layoutCallback();
-      }
+      layoutIfVisible(embedImpl);
     }, SCROLL_THROTTLE_MS);
 
     tick = false;
   });
+
+  // Calls it once it in case scroll event never fires.
+  layoutIfVisible(embedImpl);
+}
+
+/**
+ * Checks if embed is close to the viewport and calls layoutCallback when it is.
+ * @param {!AmpStoryEmbed} embedImpl
+ */
+function layoutIfVisible(embedImpl) {
+  const embedTop = embedImpl.getElement()./*OK*/ getBoundingClientRect().top;
+  if (self./*OK*/ innerHeight * 2 > embedTop) {
+    embedImpl.layoutCallback();
+  }
 }
 
 /**
  * Calls layoutCallback on the embed when it is close to the viewport.
  * @param {!AmpStoryEmbed} embedImpl
+ * @visibleForTesting
  */
-function layoutEmbed(embedImpl) {
+export function layoutEmbed(embedImpl) {
   if (IntersectionObserver && self === self.parent) {
     const intersectingCallback = entries => {
       entries.forEach(entry => {
diff --git a/test/unit/test-amp-story-embed.js b/test/unit/test-amp-story-embed.js
new file mode 100644
index 000000000000..78bef572c99a
--- /dev/null
+++ b/test/unit/test-amp-story-embed.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {AmpStoryEmbed, layoutEmbed} from '../../src/amp-story-embed';
+
+describe('amp-story-embed', () => {
+  describes.realWin('AmpStoryEmbed', {amp: false}, env => {
+    let win;
+    let storyEmbed;
+    let embedEl;
+    let url;
+
+    function buildStoryEmbed() {
+      embedEl = win.document.createElement('amp-story-embed');
+      const storyAnchor = win.document.createElement('a');
+      url =
+        'https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/?testParam=true';
+      storyAnchor.setAttribute('href', url);
+      embedEl.appendChild(storyAnchor);
+      storyEmbed = new AmpStoryEmbed(win, embedEl);
+      win.document.body.appendChild(embedEl);
+    }
+
+    beforeEach(() => {
+      win = env.win;
+      buildStoryEmbed();
+    });
+
+    it('should build an iframe for each story', () => {
+      storyEmbed.buildCallback();
+      layoutEmbed(storyEmbed);
+
+      const shadowRoot = storyEmbed.getRoot();
+      expect(shadowRoot.children.length).to.equal(1);
+    });
+
+    it('should correctly append params at the end of the story url', () => {
+      storyEmbed.buildCallback();
+      layoutEmbed(storyEmbed);
+
+      const shadowRoot = storyEmbed.getRoot();
+      expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
+        url + '?amp_js_v=0.1#&visibilityState=inactive&origin=about%3Asrcdoc'
+      );
+    });
+
+    it('should correctly append params at the end of a story url with existing params', () => {
+      storyEmbed.buildCallback();
+      layoutEmbed(storyEmbed);
+
+      const shadowRoot = storyEmbed.getRoot();
+      expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
+        url + '&amp_js_v=0.1#&visibilityState=inactive&origin=about%3Asrcdoc'
+      );
+    });
+  });
+});

From 76aa895cf6076d837b2e4d4d8a02e50d5b52735f Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Thu, 16 Jan 2020 15:11:37 -0500
Subject: [PATCH 06/13] add viewer messaging as a dependency

---
 build-system/compile/sources.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/build-system/compile/sources.js b/build-system/compile/sources.js
index cc9f758f1891..20e29b25ff9a 100644
--- a/build-system/compile/sources.js
+++ b/build-system/compile/sources.js
@@ -49,6 +49,8 @@ const COMMON_GLOBS = [
   'node_modules/web-activities/activity-ports.js',
   'node_modules/@ampproject/animations/package.json',
   'node_modules/@ampproject/animations/dist/animations.mjs',
+  'node_modules/@ampproject/viewer-messaging/package.json',
+  'node_modules/@ampproject/viewer-messaging/messaging.js',
   'node_modules/@ampproject/worker-dom/package.json',
   'node_modules/@ampproject/worker-dom/dist/amp/main.mjs',
   'node_modules/preact/package.json',

From 0f128af6679fb16ed92d44065285e32f665069d6 Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Thu, 16 Jan 2020 15:30:53 -0500
Subject: [PATCH 07/13] fix test

---
 test/unit/test-amp-story-embed.js | 85 ++++++++++++++++---------------
 1 file changed, 43 insertions(+), 42 deletions(-)

diff --git a/test/unit/test-amp-story-embed.js b/test/unit/test-amp-story-embed.js
index 78bef572c99a..2c6841408e66 100644
--- a/test/unit/test-amp-story-embed.js
+++ b/test/unit/test-amp-story-embed.js
@@ -16,55 +16,56 @@
 
 import {AmpStoryEmbed, layoutEmbed} from '../../src/amp-story-embed';
 
-describe('amp-story-embed', () => {
-  describes.realWin('AmpStoryEmbed', {amp: false}, env => {
-    let win;
-    let storyEmbed;
-    let embedEl;
-    let url;
+describes.realWin('AmpStoryEmbed', {amp: false}, env => {
+  let win;
+  let storyEmbed;
+  let embedEl;
+  let url;
 
-    function buildStoryEmbed() {
-      embedEl = win.document.createElement('amp-story-embed');
-      const storyAnchor = win.document.createElement('a');
-      url =
-        'https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/?testParam=true';
-      storyAnchor.setAttribute('href', url);
-      embedEl.appendChild(storyAnchor);
-      storyEmbed = new AmpStoryEmbed(win, embedEl);
-      win.document.body.appendChild(embedEl);
-    }
+  function buildStoryEmbed() {
+    embedEl = win.document.createElement('amp-story-embed');
+    const storyAnchor = win.document.createElement('a');
+    url =
+      'https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/';
+    storyAnchor.setAttribute('href', url);
+    embedEl.appendChild(storyAnchor);
+    storyEmbed = new AmpStoryEmbed(win, embedEl);
+    win.document.body.appendChild(embedEl);
+  }
 
-    beforeEach(() => {
-      win = env.win;
-      buildStoryEmbed();
-    });
+  beforeEach(() => {
+    win = env.win;
+    buildStoryEmbed();
+  });
+
+  it('should build an iframe for each story', () => {
+    storyEmbed.buildCallback();
+    layoutEmbed(storyEmbed);
 
-    it('should build an iframe for each story', () => {
-      storyEmbed.buildCallback();
-      layoutEmbed(storyEmbed);
+    const shadowRoot = storyEmbed.getRoot();
+    expect(shadowRoot.children.length).to.equal(1);
+  });
 
-      const shadowRoot = storyEmbed.getRoot();
-      expect(shadowRoot.children.length).to.equal(1);
-    });
+  it('should correctly append params at the end of the story url', () => {
+    storyEmbed.buildCallback();
+    layoutEmbed(storyEmbed);
 
-    it('should correctly append params at the end of the story url', () => {
-      storyEmbed.buildCallback();
-      layoutEmbed(storyEmbed);
+    const shadowRoot = storyEmbed.getRoot();
+    expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
+      url + '?amp_js_v=0.1#&visibilityState=inactive&origin=about%3Asrcdoc'
+    );
+  });
 
-      const shadowRoot = storyEmbed.getRoot();
-      expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
-        url + '?amp_js_v=0.1#&visibilityState=inactive&origin=about%3Asrcdoc'
-      );
-    });
+  it('should correctly append params at the end of a story url with existing params', () => {
+    url += '?testParam=true';
+    embedEl.firstElementChild.setAttribute('href', url);
 
-    it('should correctly append params at the end of a story url with existing params', () => {
-      storyEmbed.buildCallback();
-      layoutEmbed(storyEmbed);
+    storyEmbed.buildCallback();
+    layoutEmbed(storyEmbed);
 
-      const shadowRoot = storyEmbed.getRoot();
-      expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
-        url + '&amp_js_v=0.1#&visibilityState=inactive&origin=about%3Asrcdoc'
-      );
-    });
+    const shadowRoot = storyEmbed.getRoot();
+    expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
+      url + '&amp_js_v=0.1#&visibilityState=inactive&origin=about%3Asrcdoc'
+    );
   });
 });

From 8a6706db6539693f0547e263a8956b4e407105d6 Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Fri, 17 Jan 2020 14:44:52 -0500
Subject: [PATCH 08/13] split into files, fix url fragment param, update test

---
 src/amp-story-embed-manager.js    |  94 ++++++++++++-------
 src/amp-story-embed.js            | 147 ++++++++----------------------
 test/unit/test-amp-story-embed.js |  30 +++---
 3 files changed, 114 insertions(+), 157 deletions(-)

diff --git a/src/amp-story-embed-manager.js b/src/amp-story-embed-manager.js
index dabbf2163e00..bf9130a79d36 100644
--- a/src/amp-story-embed-manager.js
+++ b/src/amp-story-embed-manager.js
@@ -21,49 +21,32 @@ const SCROLL_THROTTLE_MS = 500;
 
 export class AmpStoryEmbedManager {
   /**
-   * Fallback for when IntersectionObserver is not supported. Calls layoutCallback
-   * on the embed when it is close to the viewport.
-   * @param {!AmpStoryEmbed} embedImpl
+   * @param {!Window} win
+   * @constructor
    */
-  layoutFallback_(embedImpl) {
-    let tick = true;
-
-    self.addEventListener('scroll', () => {
-      if (!tick) {
-        return;
-      }
-
-      setTimeout(() => {
-        tick = true;
-
-        this.layoutIfVisible_(embedImpl);
-      }, SCROLL_THROTTLE_MS);
-
-      tick = false;
-    });
+  constructor(win) {
+    /** @private {!Window} */
+    this.win_ = win;
 
-    // Calls it once it in case scroll event never fires.
-    this.layoutIfVisible_(embedImpl);
+    /** @private {?AmpStoryEmbed} */
+    this.currentEmbed_ = null;
   }
 
   /**
-   * Checks if embed is close to the viewport and calls layoutCallback when it is.
-   * @param {!AmpStoryEmbed} embedImpl
+   * @public
+   * @return {!AmpStoryEmbed}
    */
-  layoutIfVisible_(embedImpl) {
-    const embedTop = embedImpl.getElement()./*OK*/ getBoundingClientRect().top;
-    if (self./*OK*/ innerHeight * 2 > embedTop) {
-      embedImpl.layoutCallback();
-    }
+  getEmbed() {
+    return this.currentEmbed_;
   }
 
   /**
    * Calls layoutCallback on the embed when it is close to the viewport.
    * @param {!AmpStoryEmbed} embedImpl
-   * @visibleForTesting
+   * @private
    */
-  layoutEmbed(embedImpl) {
-    if (IntersectionObserver && self === self.parent) {
+  layoutEmbed_(embedImpl) {
+    if (IntersectionObserver && this.win_ === this.win_.parent) {
       const intersectingCallback = entries => {
         entries.forEach(entry => {
           if (!entry.isIntersecting) {
@@ -83,17 +66,58 @@ export class AmpStoryEmbedManager {
     this.layoutFallback_(embedImpl);
   }
 
+  /**
+   * Fallback for when IntersectionObserver is not supported. Calls
+   * layoutCallback on the embed when it is close to the viewport.
+   * @param {!AmpStoryEmbed} embedImpl
+   * @private
+   */
+  layoutFallback_(embedImpl) {
+    let tick = true;
+
+    this.win_.addEventListener('scroll', () => {
+      if (!tick) {
+        return;
+      }
+
+      setTimeout(() => {
+        tick = true;
+
+        this.layoutIfVisible_(embedImpl);
+      }, SCROLL_THROTTLE_MS);
+
+      tick = false;
+    });
+
+    // Calls it once it in case scroll event never fires.
+    this.layoutIfVisible_(embedImpl);
+  }
+
+  /**
+   * Checks if embed is close to the viewport and calls layoutCallback when it
+   * is.
+   * @param {!AmpStoryEmbed} embedImpl
+   * @private
+   */
+  layoutIfVisible_(embedImpl) {
+    const embedTop = embedImpl.getElement()./*OK*/ getBoundingClientRect().top;
+    if (this.win_./*OK*/ innerHeight * 2 > embedTop) {
+      embedImpl.layoutCallback();
+    }
+  }
+
   /**
    * Builds and layouts the embeds when appropiate.
+   * @public
    */
   loadEmbeds() {
-    const doc = self.document;
+    const doc = this.win_.document;
     const embeds = doc.getElementsByTagName('amp-story-embed');
     for (let i = 0; i < embeds.length; i++) {
       const embedEl = embeds[i];
-      const embedImpl = new AmpStoryEmbed(self, embedEl);
-      embedImpl.buildCallback();
-      this.layoutEmbed(embedImpl);
+      this.currentEmbed_ = new AmpStoryEmbed(this.win_, embedEl);
+      this.currentEmbed_.buildCallback();
+      this.layoutEmbed_(this.currentEmbed_);
     }
   }
 }
diff --git a/src/amp-story-embed.js b/src/amp-story-embed.js
index 6d913200fc4a..38d5f66fa282 100644
--- a/src/amp-story-embed.js
+++ b/src/amp-story-embed.js
@@ -14,9 +14,16 @@
  * limitations under the License.
  */
 
+import {AmpStoryEmbedManager} from './amp-story-embed-manager';
 import {Messaging} from '@ampproject/viewer-messaging';
-import {addParamsToUrl, parseUrlWithA} from './url';
+import {
+  addParamsToUrl,
+  getFragment,
+  parseUrlWithA,
+  removeFragment,
+} from './url';
 import {dict} from './utils/object';
+import {findIndex} from './utils/array';
 import {setStyle} from './style';
 import {toArray} from './types';
 
@@ -27,12 +34,6 @@ const LoadStateClass = {
   ERROR: 'i-amphtml-story-embed-error',
 };
 
-/** @const {string} */
-const IFRAME_ID_ATTR_NAME = 'story-embed-iframe-id';
-
-/** @const {string} */
-const SCROLL_THROTTLE_MS = 500;
-
 /** @const {string} */
 const CSS = `
   :host { all: initial; display: block; border-radius: 0 !important; width: 405px; height: 720px; overflow: auto; }
@@ -59,12 +60,12 @@ export class AmpStoryEmbed {
     /** @private {!Window} */
     this.win_ = win;
 
-    /** @private {number} */
-    this.iframeIdCounter_ = 0;
-
-    /** @private {!Object<string, Messaging>} */
+    /** @private {!Object<number, Messaging>} */
     this.messagingFor_ = {};
 
+    /** @private {!Array<!Element>} */
+    this.iframes_ = [];
+
     /** @private {!Element} */
     this.element_ = element;
 
@@ -135,19 +136,23 @@ export class AmpStoryEmbed {
       'backgroundImage',
       story.getAttribute('data-poster-portrait-src')
     );
-    iframeEl.setAttribute(IFRAME_ID_ATTR_NAME, 'i' + this.iframeIdCounter_++);
     iframeEl.classList.add('story-embed-iframe');
+    this.iframes_.push(iframeEl);
 
     this.initializeLoadingListeners_(iframeEl);
     this.rootEl_.appendChild(iframeEl);
 
     this.initializeHandshake_(story, iframeEl).then(
       messaging => {
-        const iframeId = iframeEl[IFRAME_ID_ATTR_NAME];
-        this.messagingFor_[iframeId] = messaging;
+        const iframeIdx = findIndex(
+          this.iframes_,
+          iframe => iframe === iframeEl
+        );
+
+        this.messagingFor_[iframeIdx] = messaging;
 
         // TODO(Enriqe): Appropiately set visibility to stories.
-        this.displayStory_(iframeId);
+        this.displayStory_(iframeIdx);
       },
       err => {
         console /*OK*/
@@ -159,11 +164,11 @@ export class AmpStoryEmbed {
   /**
    * @param {!Element} story
    * @param {!Element} iframeEl
-   * @return {Promise<Messaging>}
+   * @return {!Promise<!Messaging>}
    * @private
    */
   initializeHandshake_(story, iframeEl) {
-    const frameOrigin = this.getEncodedUrl_(story.href).origin;
+    const frameOrigin = this.getEncodedLocation_(story.href).origin;
 
     return Messaging.waitForHandshakeFromDocument(
       this.win_,
@@ -181,13 +186,11 @@ export class AmpStoryEmbed {
 
     iframeEl.onload = () => {
       this.rootEl_.classList.remove(LoadStateClass.LOADING);
-      this.element_.classList.remove(LoadStateClass.LOADING);
       this.rootEl_.classList.add(LoadStateClass.LOADED);
       this.element_.classList.add(LoadStateClass.LOADED);
     };
     iframeEl.onerror = () => {
       this.rootEl_.classList.remove(LoadStateClass.LOADING);
-      this.element_.classList.remove(LoadStateClass.LOADING);
       this.rootEl_.classList.add(LoadStateClass.ERROR);
       this.element_.classList.add(LoadStateClass.ERROR);
     };
@@ -201,9 +204,8 @@ export class AmpStoryEmbed {
       return;
     }
 
-    const iframes = toArray(this.rootEl_.querySelectorAll('iframe'));
     // TODO(Enriqe): Layout all child iframes.
-    this.layoutIframe_(this.stories_[0], iframes[0]);
+    this.layoutIframe_(this.stories_[0], this.iframes_[0]);
 
     this.isLaidOut_ = true;
   }
@@ -214,7 +216,7 @@ export class AmpStoryEmbed {
    * @private
    */
   layoutIframe_(story, iframe) {
-    const {href} = this.getEncodedUrl_(story.href);
+    const {href} = this.getEncodedLocation_(story.href);
 
     iframe.setAttribute('src', href);
   }
@@ -225,7 +227,7 @@ export class AmpStoryEmbed {
    * @return {!Location}
    * @private
    */
-  getEncodedUrl_(href) {
+  getEncodedLocation_(href) {
     const {location} = this.win_;
     const url = parseUrlWithA(this.cachedA_, location.href);
 
@@ -235,20 +237,27 @@ export class AmpStoryEmbed {
       'origin': url.origin,
     });
 
-    let inputUrl = addParamsToUrl(href, params);
-    inputUrl = inputUrl.replace('amp_js_v=0.1', 'amp_js_v=0.1#');
+    const fragmentParam = getFragment(href);
+    const noFragmentUrl = removeFragment(href);
+    let inputUrl = addParamsToUrl(noFragmentUrl, params);
+
+    // Prepend fragment of original url.
+    const prependFragment = match => {
+      // Remove the last '&' after amp_js_v=0.1 and replace with a '#'.
+      return fragmentParam + match.slice(0, -1) + '#';
+    };
+    inputUrl = inputUrl.replace(/[?&]amp_js_v=0.1&/, prependFragment);
 
     return parseUrlWithA(this.cachedA_, inputUrl);
   }
 
   /**
    * Sends a message to the story document to make it visible.
-   *
    * @private
-   * @param {string} iframeId
+   * @param {number} iframeIdx
    */
-  displayStory_(iframeId) {
-    this.messagingFor_[iframeId].sendRequest(
+  displayStory_(iframeIdx) {
+    this.messagingFor_[iframeIdx].sendRequest(
       'visibilitychange',
       {state: 'visible'},
       true
@@ -256,83 +265,7 @@ export class AmpStoryEmbed {
   }
 }
 
-/**
- * Fallback for when IntersectionObserver is not supported. Calls layoutCallback
- * on the embed when it is close to the viewport.
- * @param {!AmpStoryEmbed} embedImpl
- */
-function layoutFallback(embedImpl) {
-  let tick = true;
-
-  self.addEventListener('scroll', () => {
-    if (!tick) {
-      return;
-    }
-
-    setTimeout(() => {
-      tick = true;
-
-      layoutIfVisible(embedImpl);
-    }, SCROLL_THROTTLE_MS);
-
-    tick = false;
-  });
-
-  // Calls it once it in case scroll event never fires.
-  layoutIfVisible(embedImpl);
-}
-
-/**
- * Checks if embed is close to the viewport and calls layoutCallback when it is.
- * @param {!AmpStoryEmbed} embedImpl
- */
-function layoutIfVisible(embedImpl) {
-  const embedTop = embedImpl.getElement()./*OK*/ getBoundingClientRect().top;
-  if (self./*OK*/ innerHeight * 2 > embedTop) {
-    embedImpl.layoutCallback();
-  }
-}
-
-/**
- * Calls layoutCallback on the embed when it is close to the viewport.
- * @param {!AmpStoryEmbed} embedImpl
- * @visibleForTesting
- */
-export function layoutEmbed(embedImpl) {
-  if (IntersectionObserver && self === self.parent) {
-    const intersectingCallback = entries => {
-      entries.forEach(entry => {
-        if (!entry.isIntersecting) {
-          return;
-        }
-        embedImpl.layoutCallback();
-      });
-    };
-
-    const observer = new IntersectionObserver(intersectingCallback, {
-      rootMargin: '100%',
-    });
-    observer.observe(embedImpl.getElement());
-    return;
-  }
-
-  layoutFallback(embedImpl);
-}
-
-/**
- * Builds and layouts the embeds when appropiate.
- */
-function loadEmbeds() {
-  const doc = self.document;
-  const embeds = doc.getElementsByTagName('amp-story-embed');
-  for (let i = 0; i < embeds.length; i++) {
-    const embedEl = embeds[i];
-    const embedImpl = new AmpStoryEmbed(self, embedEl);
-    embedImpl.buildCallback();
-    layoutEmbed(embedImpl);
-  }
-}
-
 self.onload = () => {
-  loadEmbeds();
+  const manager = new AmpStoryEmbedManager(self);
+  manager.loadEmbeds();
 };
diff --git a/test/unit/test-amp-story-embed.js b/test/unit/test-amp-story-embed.js
index 2c6841408e66..cb8c92e99afd 100644
--- a/test/unit/test-amp-story-embed.js
+++ b/test/unit/test-amp-story-embed.js
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import {AmpStoryEmbed, layoutEmbed} from '../../src/amp-story-embed';
+import {AmpStoryEmbedManager} from '../../src/amp-story-embed-manager';
 
 describes.realWin('AmpStoryEmbed', {amp: false}, env => {
   let win;
-  let storyEmbed;
   let embedEl;
   let url;
+  let manager;
 
   function buildStoryEmbed() {
     embedEl = win.document.createElement('amp-story-embed');
@@ -29,8 +29,8 @@ describes.realWin('AmpStoryEmbed', {amp: false}, env => {
       'https://www-washingtonpost-com.cdn.ampproject.org/v/s/www.washingtonpost.com/graphics/2019/lifestyle/travel/amp-stories/a-locals-guide-to-what-to-eat-and-do-in-new-york-city/';
     storyAnchor.setAttribute('href', url);
     embedEl.appendChild(storyAnchor);
-    storyEmbed = new AmpStoryEmbed(win, embedEl);
     win.document.body.appendChild(embedEl);
+    manager = new AmpStoryEmbedManager(win);
   }
 
   beforeEach(() => {
@@ -39,33 +39,33 @@ describes.realWin('AmpStoryEmbed', {amp: false}, env => {
   });
 
   it('should build an iframe for each story', () => {
-    storyEmbed.buildCallback();
-    layoutEmbed(storyEmbed);
-
+    manager.loadEmbeds();
+    const storyEmbed = manager.getEmbed();
     const shadowRoot = storyEmbed.getRoot();
+
     expect(shadowRoot.children.length).to.equal(1);
   });
 
   it('should correctly append params at the end of the story url', () => {
-    storyEmbed.buildCallback();
-    layoutEmbed(storyEmbed);
-
+    manager.loadEmbeds();
+    const storyEmbed = manager.getEmbed();
     const shadowRoot = storyEmbed.getRoot();
+
     expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
-      url + '?amp_js_v=0.1#&visibilityState=inactive&origin=about%3Asrcdoc'
+      url + '?amp_js_v=0.1#visibilityState=inactive&origin=about%3Asrcdoc'
     );
   });
 
   it('should correctly append params at the end of a story url with existing params', () => {
-    url += '?testParam=true';
+    url += '?testParam=true#myhash=hashValue';
     embedEl.firstElementChild.setAttribute('href', url);
 
-    storyEmbed.buildCallback();
-    layoutEmbed(storyEmbed);
-
+    manager.loadEmbeds();
+    const storyEmbed = manager.getEmbed();
     const shadowRoot = storyEmbed.getRoot();
+
     expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
-      url + '&amp_js_v=0.1#&visibilityState=inactive&origin=about%3Asrcdoc'
+      url + '&amp_js_v=0.1#visibilityState=inactive&origin=about%3Asrcdoc'
     );
   });
 });

From a08022658dab84a44ed351b27bd5d20d7cc439e2 Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Thu, 23 Jan 2020 11:55:49 -0500
Subject: [PATCH 09/13] clean up

---
 src/amp-story-embed-manager.js    | 48 ++++++++++++-------------------
 src/amp-story-embed.js            |  8 ------
 test/unit/test-amp-story-embed.js | 14 ++++-----
 3 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/src/amp-story-embed-manager.js b/src/amp-story-embed-manager.js
index bf9130a79d36..23564b3f839d 100644
--- a/src/amp-story-embed-manager.js
+++ b/src/amp-story-embed-manager.js
@@ -27,17 +27,6 @@ export class AmpStoryEmbedManager {
   constructor(win) {
     /** @private {!Window} */
     this.win_ = win;
-
-    /** @private {?AmpStoryEmbed} */
-    this.currentEmbed_ = null;
-  }
-
-  /**
-   * @public
-   * @return {!AmpStoryEmbed}
-   */
-  getEmbed() {
-    return this.currentEmbed_;
   }
 
   /**
@@ -46,24 +35,24 @@ export class AmpStoryEmbedManager {
    * @private
    */
   layoutEmbed_(embedImpl) {
-    if (IntersectionObserver && this.win_ === this.win_.parent) {
-      const intersectingCallback = entries => {
-        entries.forEach(entry => {
-          if (!entry.isIntersecting) {
-            return;
-          }
-          embedImpl.layoutCallback();
-        });
-      };
-
-      const observer = new IntersectionObserver(intersectingCallback, {
-        rootMargin: '100%',
-      });
-      observer.observe(embedImpl.getElement());
+    if (!IntersectionObserver || this.win_ !== this.win_.parent) {
+      this.layoutFallback_(embedImpl);
       return;
     }
 
-    this.layoutFallback_(embedImpl);
+    const intersectingCallback = entries => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting) {
+          return;
+        }
+        embedImpl.layoutCallback();
+      });
+    };
+
+    const observer = new IntersectionObserver(intersectingCallback, {
+      rootMargin: '100%',
+    });
+    observer.observe(embedImpl.getElement());
   }
 
   /**
@@ -75,6 +64,7 @@ export class AmpStoryEmbedManager {
   layoutFallback_(embedImpl) {
     let tick = true;
 
+    // TODO(Enriqe): pause embeds when scrolling away from viewport.
     this.win_.addEventListener('scroll', () => {
       if (!tick) {
         return;
@@ -115,9 +105,9 @@ export class AmpStoryEmbedManager {
     const embeds = doc.getElementsByTagName('amp-story-embed');
     for (let i = 0; i < embeds.length; i++) {
       const embedEl = embeds[i];
-      this.currentEmbed_ = new AmpStoryEmbed(this.win_, embedEl);
-      this.currentEmbed_.buildCallback();
-      this.layoutEmbed_(this.currentEmbed_);
+      const embed = new AmpStoryEmbed(this.win_, embedEl);
+      embed.buildCallback();
+      this.layoutEmbed_(embed);
     }
   }
 }
diff --git a/src/amp-story-embed.js b/src/amp-story-embed.js
index 38d5f66fa282..8d39090878dd 100644
--- a/src/amp-story-embed.js
+++ b/src/amp-story-embed.js
@@ -93,14 +93,6 @@ export class AmpStoryEmbed {
     return this.element_;
   }
 
-  /**
-   * @visibleForTesting
-   * @return {!Element}
-   */
-  getRoot() {
-    return this.rootEl_;
-  }
-
   /** @public */
   buildCallback() {
     this.stories_ = toArray(this.element_.querySelectorAll('a'));
diff --git a/test/unit/test-amp-story-embed.js b/test/unit/test-amp-story-embed.js
index cb8c92e99afd..592bcab03dc5 100644
--- a/test/unit/test-amp-story-embed.js
+++ b/test/unit/test-amp-story-embed.js
@@ -40,18 +40,15 @@ describes.realWin('AmpStoryEmbed', {amp: false}, env => {
 
   it('should build an iframe for each story', () => {
     manager.loadEmbeds();
-    const storyEmbed = manager.getEmbed();
-    const shadowRoot = storyEmbed.getRoot();
 
-    expect(shadowRoot.children.length).to.equal(1);
+    expect(embedEl.shadowRoot.querySelector('iframe')).to.exist;
   });
 
   it('should correctly append params at the end of the story url', () => {
     manager.loadEmbeds();
-    const storyEmbed = manager.getEmbed();
-    const shadowRoot = storyEmbed.getRoot();
+    const storyIframe = embedEl.shadowRoot.querySelector('iframe');
 
-    expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
+    expect(storyIframe.getAttribute('src')).to.equals(
       url + '?amp_js_v=0.1#visibilityState=inactive&origin=about%3Asrcdoc'
     );
   });
@@ -61,10 +58,9 @@ describes.realWin('AmpStoryEmbed', {amp: false}, env => {
     embedEl.firstElementChild.setAttribute('href', url);
 
     manager.loadEmbeds();
-    const storyEmbed = manager.getEmbed();
-    const shadowRoot = storyEmbed.getRoot();
+    const storyIframe = embedEl.shadowRoot.querySelector('iframe');
 
-    expect(shadowRoot.firstElementChild.getAttribute('src')).to.equals(
+    expect(storyIframe.getAttribute('src')).to.equals(
       url + '&amp_js_v=0.1#visibilityState=inactive&origin=about%3Asrcdoc'
     );
   });

From b4664351598fae7f1cfe34467f55419ab9cdf41d Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Thu, 23 Jan 2020 13:15:31 -0500
Subject: [PATCH 10/13] fix rebase

---
 yarn.lock | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 67d28a609cc6..ddb7fa8e0b5b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,16 +7,16 @@
   resolved "https://registry.yarnpkg.com/@ampproject/animations/-/animations-0.2.0.tgz#82b6b68b6fe0eacbcc95d3f0a82ddf19a0e2b316"
   integrity sha512-CiMdKK9eMa6eqhqZc9bq86nPdgbALY+E8rKgUPR7wf2wGUNTm/jtFZQ7fn4sj/oggn0wvadBokabErtl1m1KSw==
 
+"@ampproject/viewer-messaging@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/viewer-messaging/-/viewer-messaging-1.1.0.tgz#404f92c5754bac61014ed2272dd5e87174b9af84"
+  integrity sha512-SoR1dGl2Pl8eJlyGCU/9Gz/orOggmW/13wUh7NnuGvDYqLdlhnRBzvEGqEAlq/fQKel9ZM6RNtu85Jw8WC3K2Q==
+
 "@ampproject/worker-dom@0.23.2":
   version "0.23.2"
   resolved "https://registry.yarnpkg.com/@ampproject/worker-dom/-/worker-dom-0.23.2.tgz#9b27a6b96125ddca58ebef302d7d05dc6080d689"
   integrity sha512-+L2MCofSaFqTyGlp5FxqoH2JuiuHJkxVuLyim2RpMsnj9CVcfNlCdNwn2KqROw9kFnJp8gnZ7c8voqwD6yDwEg==
 
-"@ampproject/viewer-messaging@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/viewer-messaging/-/viewer-messaging-1.1.0.tgz#404f92c5754bac61014ed2272dd5e87174b9af84"
-  integrity sha512-SoR1dGl2Pl8eJlyGCU/9Gz/orOggmW/13wUh7NnuGvDYqLdlhnRBzvEGqEAlq/fQKel9ZM6RNtu85Jw8WC3K2Q==
-
 "@ava/babel-plugin-throws-helper@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@ava/babel-plugin-throws-helper/-/babel-plugin-throws-helper-4.0.0.tgz#8f5b45b7a0a79c6f4032de2101e0c221847efb62"

From 8e4689cc3381c3972845425d5a2d80d98bb15123 Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Thu, 23 Jan 2020 13:24:26 -0500
Subject: [PATCH 11/13] update owners for amp-story-embed-manager

---
 src/OWNERS | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/OWNERS b/src/OWNERS
index 17d1789ce7d7..bab66fd38166 100644
--- a/src/OWNERS
+++ b/src/OWNERS
@@ -15,7 +15,7 @@
       owners: [{name: 'ampproject/wg-analytics'}],
     },
     {
-      pattern: 'amp-story-embed.js',
+      pattern: '{amp-story-embed,amp-story-embed-manager}.js',
       owners: [{name: 'newmuis'}, {name: 'gmajoulet'}, {name: 'enriqe'}],
     },
   ],

From 9bcb6710528149cfaab11af67095946380aaf77f Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Thu, 23 Jan 2020 17:21:04 -0500
Subject: [PATCH 12/13] correctly check for IO

---
 src/amp-story-embed-manager.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/amp-story-embed-manager.js b/src/amp-story-embed-manager.js
index 23564b3f839d..0271323420ca 100644
--- a/src/amp-story-embed-manager.js
+++ b/src/amp-story-embed-manager.js
@@ -35,7 +35,7 @@ export class AmpStoryEmbedManager {
    * @private
    */
   layoutEmbed_(embedImpl) {
-    if (!IntersectionObserver || this.win_ !== this.win_.parent) {
+    if (!this.win_.IntersectionObserver || this.win_ !== this.win_.parent) {
       this.layoutFallback_(embedImpl);
       return;
     }

From 5dd71f706f5b358396125931118e2d5f0372d126 Mon Sep 17 00:00:00 2001
From: Enrique Marroquin <artezan@google.com>
Date: Tue, 28 Jan 2020 14:35:47 -0500
Subject: [PATCH 13/13] change for existing throttle

---
 src/amp-story-embed-manager.js | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/amp-story-embed-manager.js b/src/amp-story-embed-manager.js
index 0271323420ca..2fa9004980be 100644
--- a/src/amp-story-embed-manager.js
+++ b/src/amp-story-embed-manager.js
@@ -15,6 +15,7 @@
  */
 
 import {AmpStoryEmbed} from './amp-story-embed';
+import {throttle} from './utils/rate-limit';
 
 /** @const {string} */
 const SCROLL_THROTTLE_MS = 500;
@@ -62,22 +63,15 @@ export class AmpStoryEmbedManager {
    * @private
    */
   layoutFallback_(embedImpl) {
-    let tick = true;
-
     // TODO(Enriqe): pause embeds when scrolling away from viewport.
-    this.win_.addEventListener('scroll', () => {
-      if (!tick) {
-        return;
-      }
-
-      setTimeout(() => {
-        tick = true;
-
-        this.layoutIfVisible_(embedImpl);
-      }, SCROLL_THROTTLE_MS);
-
-      tick = false;
-    });
+    this.win_.addEventListener(
+      'scroll',
+      throttle(
+        this.win_,
+        this.layoutIfVisible_.bind(this, embedImpl),
+        SCROLL_THROTTLE_MS
+      )
+    );
 
     // Calls it once it in case scroll event never fires.
     this.layoutIfVisible_(embedImpl);