[amp-story-player] Entry point skeleton code and bundle

build-system/compile/bundles.config.js

@@ -145,6 +145,16 @@ exports.jsBundles = {
       includePolyfills: false,
     },
   },
+  'amp-story-entry-point.js': {
+    srcDir: './src/amp-story-player/amp-story-entry-point/',
+    srcFilename: 'amp-story-entry-point.js',
+    destDir: './dist',
+    minifiedDestDir: './dist',
+    options: {
+      minifiedName: 'amp-story-entry-point-v0.js',
+      includePolyfills: false,
+    },
+  },
   'amp-story-player.js': {
     srcDir: './src/amp-story-player/',
     srcFilename: 'amp-story-player.js',

build-system/tasks/css.js

@@ -60,6 +60,11 @@ const cssEntryPoints = [
     // than the JS file to avoid loading CSS as JS
     outCss: 'video-autoplay-out.css',
   },
+  {
+    path: 'amp-story-entry-point.css',
+    outJs: 'amp-story-entry-point.css.js',
+    outCss: 'amp-story-entry-point-v0.css',
+  },
   {
     // Publisher imported CSS for `src/amp-story-player/amp-story-player.js`.
     path: 'amp-story-player.css',

build-system/tasks/helpers.js

@@ -174,6 +174,7 @@ async function compileAllJs(options) {
     doBuildJs(jsBundles, 'recaptcha.js', options),
     doBuildJs(jsBundles, 'amp-viewer-host.max.js', options),
     doBuildJs(jsBundles, 'video-iframe-integration.js', options),
+    doBuildJs(jsBundles, 'amp-story-entry-point.js', options),
     doBuildJs(jsBundles, 'amp-story-player.js', options),
     doBuildJs(jsBundles, 'amp-inabox-host.js', options),
     doBuildJs(jsBundles, 'amp-shadow.js', options),

build-system/tasks/presubmit-checks.js

@@ -357,7 +357,7 @@ const forbiddenTerms = {
       'dist.3p/current/integration.js',
       'extensions/amp-access/0.1/amp-login-done.js',
       'extensions/amp-viewer-integration/0.1/examples/amp-viewer-host.js',
-      'src/amp-story-player/amp-story-player-manager.js',
+      'src/amp-story-player/amp-story-component-manager.js',
       'src/runtime.js',
       'src/log.js',
       'src/web-worker/web-worker.js',

css/amp-story-entry-point.css

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+amp-story-entry-point {
+  position: relative;
+  display: block;
+}

src/amp-story-player/amp-story-player-manager.js → src/amp-story-player/amp-story-component-manager.js

@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
+import {AmpStoryEntryPoint} from './amp-story-entry-point/amp-story-entry-point-impl';
 import {AmpStoryPlayer} from './amp-story-player-impl';
 import {initLogConstructor} from '../log';
 import {throttle} from '../utils/rate-limit';
 
 /** @const {string} */
 const SCROLL_THROTTLE_MS = 500;
 
-export class AmpStoryPlayerManager {
+export class AmpStoryComponentManager {
   /**
    * @param {!Window} win
    * @constructor
@@ -32,13 +33,13 @@ export class AmpStoryPlayerManager {
   }
 
   /**
-   * Calls layoutCallback on the player when it is close to the viewport.
-   * @param {!AmpStoryPlayer} playerImpl
+   * Calls layoutCallback on the element when it is close to the viewport.
+   * @param {!AmpStoryPlayer|!AmpStoryEntryPoint} elImpl
    * @private
    */
-  layoutPlayer_(playerImpl) {
+  layoutEl_(elImpl) {
     if (!this.win_.IntersectionObserver || this.win_ !== this.win_.parent) {
-      this.layoutFallback_(playerImpl);
+      this.layoutFallback_(elImpl);
       return;
     }
 
@@ -47,48 +48,47 @@ export class AmpStoryPlayerManager {
         if (!entry.isIntersecting) {
           return;
         }
-        playerImpl.layoutCallback();
+        elImpl.layoutCallback();
       });
     };
 
     const observer = new IntersectionObserver(intersectingCallback, {
       rootMargin: '100%',
     });
-    observer.observe(playerImpl.getElement());
+    observer.observe(elImpl.getElement());
   }
 
   /**
    * Fallback for when IntersectionObserver is not supported. Calls
-   * layoutCallback on the player when it is close to the viewport.
-   * @param {!AmpStoryPlayer} playerImpl
+   * layoutCallback on the element when it is close to the viewport.
+   * @param {!AmpStoryPlayer|!AmpStoryEntryPoint} elImpl
    * @private
    */
-  layoutFallback_(playerImpl) {
-    // TODO(Enriqe): pause players when scrolling away from viewport.
+  layoutFallback_(elImpl) {
+    // TODO(Enriqe): pause elements when scrolling away from viewport.
     this.win_.addEventListener(
       'scroll',
       throttle(
         this.win_,
-        this.layoutIfVisible_.bind(this, playerImpl),
+        this.layoutIfVisible_.bind(this, elImpl),
         SCROLL_THROTTLE_MS
       )
     );
 
     // Calls it once it in case scroll event never fires.
-    this.layoutIfVisible_(playerImpl);
+    this.layoutIfVisible_(elImpl);
   }
 
   /**
-   * Checks if player is close to the viewport and calls layoutCallback when it
+   * Checks if element is close to the viewport and calls layoutCallback when it
    * is.
-   * @param {!AmpStoryPlayer} playerImpl
+   * @param {!AmpStoryPlayer|!AmpStoryEntryPoint} elImpl
    * @private
    */
-  layoutIfVisible_(playerImpl) {
-    const playerTop = playerImpl.getElement()./*OK*/ getBoundingClientRect()
-      .top;
-    if (this.win_./*OK*/ innerHeight * 2 > playerTop) {
-      playerImpl.layoutCallback();
+  layoutIfVisible_(elImpl) {
+    const elTop = elImpl.getElement()./*OK*/ getBoundingClientRect().top;
+    if (this.win_./*OK*/ innerHeight * 2 > elTop) {
+      elImpl.layoutCallback();
     }
   }
 
@@ -104,7 +104,24 @@ export class AmpStoryPlayerManager {
       const playerEl = players[i];
       const player = new AmpStoryPlayer(this.win_, playerEl);
       player.buildCallback();
-      this.layoutPlayer_(player);
+      this.layoutEl_(player);
+    }
+  }
+
+  /**
+   * Builds and layouts entry points.
+   * @public
+   */
+  loadEntryPoints() {
+    const doc = this.win_.document;
+    const entryPoints = doc.getElementsByTagName('amp-story-entry-point');
+    initLogConstructor();
+
+    for (let i = 0; i < entryPoints.length; i++) {
+      const entryPointEl = entryPoints[i];
+      const entryPoint = new AmpStoryEntryPoint(this.win_, entryPointEl);
+      entryPoint.buildCallback();
+      this.layoutEl_(entryPoint);
     }
   }
 }

src/amp-story-player/amp-story-entry-point/amp-story-entry-point-impl.js

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+
+// Source for this constant is css/amp-story-entry-point.css
+import {cssText} from '../../../build/amp-story-entry-point.css';
+
+/**
+ * <amp-story-entry-point> component for embedding stories and launching them in
+ * the <amp-story-player>.
+ *
+ * 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.
+ */
+export class AmpStoryEntryPoint {
+  /**
+   * @param {!Window} win
+   * @param {!Element} element
+   * @constructor
+   */
+  constructor(win, element) {
+    /** @private {!Window} */
+    this.win_ = win;
+
+    /** @private {!Element} */
+    this.element_ = element;
+
+    /** @private {!Document} */
+    this.doc_ = this.win_.document;
+
+    /** @private {boolean} */
+    this.isBuilt_ = false;
+
+    /** @private {boolean} */
+    this.isLaidOut_ = false;
+
+    /** @private {?Element} */
+    this.rootEl_ = null;
+  }
+
+  /** @public */
+  buildCallback() {
+    if (this.isBuilt_) {
+      return;
+    }
+
+    this.initializeShadowRoot_();
+
+    this.isBuilt_ = true;
+  }
+
+  /** @public */
+  layoutCallback() {
+    if (this.isLaidOut_) {
+      return;
+    }
+
+    this.isLaidOut_ = true;
+  }
+
+  /** @private */
+  initializeShadowRoot_() {
+    this.rootEl_ = this.doc_.createElement('main');
+
+    // Create shadow root
+    const shadowRoot = this.element_.attachShadow({mode: 'open'});
+
+    // Inject default styles
+    const styleEl = this.doc_.createElement('style');
+    styleEl.textContent = cssText;
+    shadowRoot.appendChild(styleEl);
+    shadowRoot.appendChild(this.rootEl_);
+  }
+
+  /**
+   * @public
+   * @return {!Element}
+   */
+  getElement() {
+    return this.element_;
+  }
+}

src/amp-story-player/amp-story-entry-point/amp-story-entry-point.js

@@ -0,0 +1,22 @@
+/**
+ * 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 {AmpStoryComponentManager} from '../amp-story-component-manager';
+
+self.onload = () => {
+  const manager = new AmpStoryComponentManager(self);
+  manager.loadEntryPoints();
+};

src/amp-story-player/amp-story-player.js

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import {AmpStoryComponentManager} from './amp-story-component-manager';
 import {AmpStoryPlayer} from './amp-story-player-impl';
-import {AmpStoryPlayerManager} from './amp-story-player-manager';
 
 self.onload = () => {
-  const manager = new AmpStoryPlayerManager(self);
+  const manager = new AmpStoryComponentManager(self);
   manager.loadPlayers();
 };
 

test/unit/test-amp-story-player.js

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import {AmpStoryComponentManager} from '../../src/amp-story-player/amp-story-component-manager';
 import {
   AmpStoryPlayer,
   IFRAME_IDX,
 } from '../../src/amp-story-player/amp-story-player-impl';
-import {AmpStoryPlayerManager} from '../../src/amp-story-player/amp-story-player-manager';
 import {Messaging} from '@ampproject/viewer-messaging';
 import {toArray} from '../../src/types';
 
@@ -53,7 +53,7 @@ describes.realWin('AmpStoryPlayer', {amp: false}, (env) => {
       playerEl.appendChild(storyAnchor);
     }
     win.document.body.appendChild(playerEl);
-    manager = new AmpStoryPlayerManager(win);
+    manager = new AmpStoryComponentManager(win);
 
     env.sandbox
       .stub(Messaging, 'waitForHandshakeFromDocument')