temporarily disable messaging, add separate iframe css file

build-system/tasks/css.js

@@ -59,6 +59,11 @@ const cssEntryPoints = [
     outJs: 'amp-story-player.css.js',
     outCss: 'amp-story-player-v0.css',
   },
+  {
+    path: 'amp-story-player-iframe.css',
+    outJs: 'amp-story-player-iframe.css.js',
+    outCss: 'amp-story-player-iframe-v0.css',
+  },
 ];
 
 /**

css/amp-story-player-iframe.css

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+:host {
+  all: initial;
+  display: block;
+  border-radius: 0 !important;
+  width: 360px;
+  height: 600px;
+  overflow: auto;
+}
+
+.story-player-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-player-loaded iframe {
+  opacity: 1;
+}

css/amp-story-player.css

@@ -29,6 +29,10 @@ amp-story-player a:first-of-type {
   display: block;
 }
 
+amp-story-player a:not(:first-of-type) {
+  visibility: hidden;
+}
+
 amp-story-player::after {
   content: " ";
   position: absolute;

examples/amp-story/player.html

@@ -37,8 +37,7 @@
     <h1>This is a NON-AMP page that embeds a story below:</h1>
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras viverra neque ex, sit amet varius sem maximus sed. Suspendisse potenti. Donec erat purus, sagittis sit amet tincidunt ut, maximus sit amet massa. Maecenas venenatis fringilla dui vitae vestibulum. Fusce imperdiet euismod lobortis. Nullam sagittis nunc at tristique mattis. In sodales consectetur mollis. Maecenas sollicitudin, ex vel tempor rutrum, turpis eros interdum enim, sit amet volutpat tortor dolor at ipsum. Nam posuere velit vel urna vulputate interdum. Aenean eu vulputate lorem. Praesent nec nunc sodales, egestas orci sed, hendrerit mauris. Ut blandit turpis non erat sagittis, quis fermentum odio feugiat.</div>
     <amp-story-player style="width: 360px; height: 600px;">
-        <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/"
+        <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/"
             style="--story-player-poster: url('https://www-washingtonpost-com.cdn.ampproject.org/i/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>

src/amp-story-player.js

@@ -22,6 +22,8 @@ import {
   parseUrlWithA,
   removeFragment,
 } from './url';
+// Source for this constant is css/amp-story-player-iframe.css
+import {cssText} from '../build/amp-story-player-iframe.css';
 import {dict} from './utils/object';
 import {findIndex} from './utils/array';
 import {setStyle} from './style';
@@ -34,13 +36,6 @@ const LoadStateClass = {
   ERROR: 'i-amphtml-story-player-error',
 };
 
-/** @const {string} */
-const CSS = `
-  :host { all: initial; display: block; border-radius: 0 !important; width: 360px; height: 600px; overflow: auto; }
-  .story-player-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-player-loaded iframe { opacity: 1; }`;
-
 /**
  * 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.
@@ -112,7 +107,7 @@ export class AmpStoryPlayer {
 
     // Inject default styles
     const styleEl = this.doc_.createElement('style');
-    styleEl.textContent = CSS;
+    styleEl.textContent = cssText;
     shadowRoot.appendChild(styleEl);
     shadowRoot.appendChild(this.rootEl_);
   }
@@ -134,6 +129,9 @@ export class AmpStoryPlayer {
     this.initializeLoadingListeners_(iframeEl);
     this.rootEl_.appendChild(iframeEl);
 
+    // TODO(Enriqe): enable messaging when multiple documents are supported.
+    return;
+
     this.initializeHandshake_(story, iframeEl).then(
       messaging => {
         const iframeIdx = findIndex(
@@ -208,9 +206,10 @@ export class AmpStoryPlayer {
    * @private
    */
   layoutIframe_(story, iframe) {
-    const {href} = this.getEncodedLocation_(story.href);
+    // TODO(Enriqe): enable messaging when multiple documents are supported.
+    // const {href} = this.getEncodedLocation_(story.href);
 
-    iframe.setAttribute('src', href);
+    iframe.setAttribute('src', story.href);
   }
 
   /**