rename story-embed to story-player (#26538)

ampproject · Jan 29, 2020 · 5c5e6ac · 5c5e6ac
1 parent e1e266b
commit 5c5e6ac
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 67 deletions.
diff --git a/build-system/compile/bundles.config.js b/build-system/compile/bundles.config.js
@@ -144,13 +144,13 @@ exports.jsBundles = {
       includePolyfills: false,
     },
   },
-  'amp-story-embed.js': {
+  'amp-story-player.js': {
     srcDir: './src/',
-    srcFilename: 'amp-story-embed.js',
+    srcFilename: 'amp-story-player.js',
     destDir: './dist',
     minifiedDestDir: './dist',
     options: {
-      minifiedName: 'amp-story-embed-v0.js',
+      minifiedName: 'amp-story-player-v0.js',
       includePolyfills: false,
     },
   },

diff --git a/build-system/tasks/helpers.js b/build-system/tasks/helpers.js
@@ -213,7 +213,7 @@ async function compileAllJs(watch, minify) {
     doBuildJs(jsBundles, 'recaptcha.js', {watch, minify}),
     doBuildJs(jsBundles, 'amp-viewer-host.max.js', {watch, minify}),
     doBuildJs(jsBundles, 'video-iframe-integration.js', {watch, minify}),
-    doBuildJs(jsBundles, 'amp-story-embed.js', {watch, minify}),
+    doBuildJs(jsBundles, 'amp-story-player.js', {watch, minify}),
     doBuildJs(jsBundles, 'amp-inabox-host.js', {watch, minify}),
     doBuildJs(jsBundles, 'amp-shadow.js', {watch, minify}),
     doBuildJs(jsBundles, 'amp-inabox.js', {watch, minify}),

diff --git a/build-system/tasks/presubmit-checks.js b/build-system/tasks/presubmit-checks.js
@@ -359,7 +359,7 @@ const forbiddenTerms = {
       'src/service/navigation.js',
       'src/service/url-impl.js',
       'dist.3p/current/integration.js',
-      'src/amp-story-embed.js',
+      'src/amp-story-player.js',
     ],
   },
   '\\.sendMessage\\(': {

diff --git a/examples/amp-story/embed.html → examples/amp-story/player.html b/examples/amp-story/embed.html → examples/amp-story/player.html
@@ -1,23 +1,23 @@
 <html>
   <head>
-    <title>Story Embed (Non-AMP)</title>
-    <script async src="../../dist/amp-story-embed.js"></script>
+    <title>Story Player (Non-AMP)</title>
+    <script async src="../../dist/amp-story-player.js"></script>
     <style page>
       body {
         font-family: sans-serif;
       }
-      amp-story-embed {
+      amp-story-player {
         position: absolute;
         top: 3000px;
       }
     </style>
     <style injected>
-      .amp-story-embed {
+      .amp-story-player {
         width: 405px;
         height: 720px;
       }
 
-      .story-embed-iframe {
+      .story-player-iframe {
         background-size: cover;
         display: block;
         position: relative;
@@ -43,7 +43,7 @@
   </head>
   <body>
     <h1>This is a NON-AMP page that embeds a story below:</h1>
-    <amp-story-embed>
+    <amp-story-player>
         <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">
@@ -64,6 +64,6 @@ <h1>This is a NON-AMP page that embeds a story below:</h1>
             class="story">
           <span class="title">A local’s guide to what to eat and do in Rome</span>
         </a>
-    </amp-story-embed>
+    </amp-story-player>
   </body>
 </html>
diff --git a/src/OWNERS b/src/OWNERS
@@ -15,7 +15,7 @@
       owners: [{name: 'ampproject/wg-analytics'}],
     },
     {
-      pattern: '{amp-story-embed,amp-story-embed-manager}.js',
+      pattern: '{amp-story-player,amp-story-player-manager}.js',
       owners: [{name: 'newmuis'}, {name: 'gmajoulet'}, {name: 'enriqe'}],
     },
   ],

diff --git a/src/amp-story-embed-manager.js → src/amp-story-player-manager.js b/src/amp-story-embed-manager.js → src/amp-story-player-manager.js
@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import {AmpStoryEmbed} from './amp-story-embed';
+import {AmpStoryPlayer} from './amp-story-player';
 import {throttle} from './utils/rate-limit';
 
 /** @const {string} */
 const SCROLL_THROTTLE_MS = 500;
 
-export class AmpStoryEmbedManager {
+export class AmpStoryPlayerManager {
   /**
    * @param {!Window} win
    * @constructor
@@ -31,13 +31,13 @@ export class AmpStoryEmbedManager {
   }
 
   /**
-   * Calls layoutCallback on the embed when it is close to the viewport.
-   * @param {!AmpStoryEmbed} embedImpl
+   * Calls layoutCallback on the player when it is close to the viewport.
+   * @param {!AmpStoryPlayer} playerImpl
    * @private
    */
-  layoutEmbed_(embedImpl) {
+  layoutPlayer_(playerImpl) {
     if (!this.win_.IntersectionObserver || this.win_ !== this.win_.parent) {
-      this.layoutFallback_(embedImpl);
+      this.layoutFallback_(playerImpl);
       return;
     }
 
@@ -46,62 +46,63 @@ export class AmpStoryEmbedManager {
         if (!entry.isIntersecting) {
           return;
         }
-        embedImpl.layoutCallback();
+        playerImpl.layoutCallback();
       });
     };
 
     const observer = new IntersectionObserver(intersectingCallback, {
       rootMargin: '100%',
     });
-    observer.observe(embedImpl.getElement());
+    observer.observe(playerImpl.getElement());
   }
 
   /**
    * Fallback for when IntersectionObserver is not supported. Calls
-   * layoutCallback on the embed when it is close to the viewport.
-   * @param {!AmpStoryEmbed} embedImpl
+   * layoutCallback on the player when it is close to the viewport.
+   * @param {!AmpStoryPlayer} playerImpl
    * @private
    */
-  layoutFallback_(embedImpl) {
-    // TODO(Enriqe): pause embeds when scrolling away from viewport.
+  layoutFallback_(playerImpl) {
+    // TODO(Enriqe): pause players when scrolling away from viewport.
     this.win_.addEventListener(
       'scroll',
       throttle(
         this.win_,
-        this.layoutIfVisible_.bind(this, embedImpl),
+        this.layoutIfVisible_.bind(this, playerImpl),
         SCROLL_THROTTLE_MS
       )
     );
 
     // Calls it once it in case scroll event never fires.
-    this.layoutIfVisible_(embedImpl);
+    this.layoutIfVisible_(playerImpl);
   }
 
   /**
-   * Checks if embed is close to the viewport and calls layoutCallback when it
+   * Checks if player is close to the viewport and calls layoutCallback when it
    * is.
-   * @param {!AmpStoryEmbed} embedImpl
+   * @param {!AmpStoryPlayer} playerImpl
    * @private
    */
-  layoutIfVisible_(embedImpl) {
-    const embedTop = embedImpl.getElement()./*OK*/ getBoundingClientRect().top;
-    if (this.win_./*OK*/ innerHeight * 2 > embedTop) {
-      embedImpl.layoutCallback();
+  layoutIfVisible_(playerImpl) {
+    const playerTop = playerImpl.getElement()./*OK*/ getBoundingClientRect()
+      .top;
+    if (this.win_./*OK*/ innerHeight * 2 > playerTop) {
+      playerImpl.layoutCallback();
     }
   }
 
   /**
-   * Builds and layouts the embeds when appropiate.
+   * Builds and layouts the players when appropiate.
    * @public
    */
-  loadEmbeds() {
+  loadPlayers() {
     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 embed = new AmpStoryEmbed(this.win_, embedEl);
-      embed.buildCallback();
-      this.layoutEmbed_(embed);
+    const players = doc.getElementsByTagName('amp-story-player');
+    for (let i = 0; i < players.length; i++) {
+      const playerEl = players[i];
+      const player = new AmpStoryPlayer(this.win_, playerEl);
+      player.buildCallback();
+      this.layoutPlayer_(player);
     }
   }
 }
diff --git a/src/amp-story-embed.js → src/amp-story-player.js b/src/amp-story-embed.js → src/amp-story-player.js
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {AmpStoryEmbedManager} from './amp-story-embed-manager';
+import {AmpStoryPlayerManager} from './amp-story-player-manager';
 import {Messaging} from '@ampproject/viewer-messaging';
 import {
   addParamsToUrl,
@@ -29,23 +29,23 @@ import {toArray} from './types';
 
 /** @enum {string} */
 const LoadStateClass = {
-  LOADING: 'i-amphtml-story-embed-loading',
-  LOADED: 'i-amphtml-story-embed-loaded',
-  ERROR: 'i-amphtml-story-embed-error',
+  LOADING: 'i-amphtml-story-player-loading',
+  LOADED: 'i-amphtml-story-player-loaded',
+  ERROR: 'i-amphtml-story-player-error',
 };
 
 /** @const {string} */
 const CSS = `
   :host { all: initial; display: block; border-radius: 0 !important; width: 405px; height: 720px; overflow: auto; }
-  .story-embed-iframe { height: 100%; width: 100%; flex: 0 0 100%; border: 0; opacity: 0; transition: opacity 500ms ease; }
+  .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-embed-loaded iframe { opacity: 1; }`;
+  .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.
  */
-export class AmpStoryEmbed {
+export class AmpStoryPlayer {
   /**
    * @param {!Window} win
    * @param {!Element} element
@@ -128,7 +128,7 @@ export class AmpStoryEmbed {
       'backgroundImage',
       story.getAttribute('data-poster-portrait-src')
     );
-    iframeEl.classList.add('story-embed-iframe');
+    iframeEl.classList.add('story-player-iframe');
     this.iframes_.push(iframeEl);
 
     this.initializeLoadingListeners_(iframeEl);
@@ -258,6 +258,6 @@ export class AmpStoryEmbed {
 }
 
 self.onload = () => {
-  const manager = new AmpStoryEmbedManager(self);
-  manager.loadEmbeds();
+  const manager = new AmpStoryPlayerManager(self);
+  manager.loadPlayers();
 };
diff --git a/test/unit/test-amp-story-embed.js → test/unit/test-amp-story-player.js b/test/unit/test-amp-story-embed.js → test/unit/test-amp-story-player.js
@@ -14,39 +14,39 @@
  * limitations under the License.
  */
 
-import {AmpStoryEmbedManager} from '../../src/amp-story-embed-manager';
+import {AmpStoryPlayerManager} from '../../src/amp-story-player-manager';
 
-describes.realWin('AmpStoryEmbed', {amp: false}, env => {
+describes.realWin('AmpStoryPlayer', {amp: false}, env => {
   let win;
-  let embedEl;
+  let playerEl;
   let url;
   let manager;
 
-  function buildStoryEmbed() {
-    embedEl = win.document.createElement('amp-story-embed');
+  function buildStoryPlayer() {
+    playerEl = win.document.createElement('amp-story-player');
     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);
-    win.document.body.appendChild(embedEl);
-    manager = new AmpStoryEmbedManager(win);
+    playerEl.appendChild(storyAnchor);
+    win.document.body.appendChild(playerEl);
+    manager = new AmpStoryPlayerManager(win);
   }
 
   beforeEach(() => {
     win = env.win;
-    buildStoryEmbed();
+    buildStoryPlayer();
   });
 
   it('should build an iframe for each story', () => {
-    manager.loadEmbeds();
+    manager.loadPlayers();
 
-    expect(embedEl.shadowRoot.querySelector('iframe')).to.exist;
+    expect(playerEl.shadowRoot.querySelector('iframe')).to.exist;
   });
 
   it('should correctly append params at the end of the story url', () => {
-    manager.loadEmbeds();
-    const storyIframe = embedEl.shadowRoot.querySelector('iframe');
+    manager.loadPlayers();
+    const storyIframe = playerEl.shadowRoot.querySelector('iframe');
 
     expect(storyIframe.getAttribute('src')).to.equals(
       url + '?amp_js_v=0.1#visibilityState=inactive&origin=about%3Asrcdoc'
@@ -55,10 +55,10 @@ describes.realWin('AmpStoryEmbed', {amp: false}, env => {
 
   it('should correctly append params at the end of a story url with existing params', () => {
     url += '?testParam=true#myhash=hashValue';
-    embedEl.firstElementChild.setAttribute('href', url);
+    playerEl.firstElementChild.setAttribute('href', url);
 
-    manager.loadEmbeds();
-    const storyIframe = embedEl.shadowRoot.querySelector('iframe');
+    manager.loadPlayers();
+    const storyIframe = playerEl.shadowRoot.querySelector('iframe');
 
     expect(storyIframe.getAttribute('src')).to.equals(
       url + '&amp_js_v=0.1#visibilityState=inactive&origin=about%3Asrcdoc'