🐛 [Story Preview] Support the max-video-preview meta tag (ampproject#38554)

* Iitial logic to parse max-video-preview meta tag

* Create getPreviewDurationSeconds_() helper method

* Finish maxVideoPreview logic, with unfinished comments

* Lint

* Simplify setupAutoAdvanceForPreview_() logic

* Lint

* Lint

* Finish auto-advance-after tests

Author: coreymasanto

extensions/amp-story/1.0/amp-story-page.js

@@ -367,31 +367,63 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   setupAutoAdvanceForPreview_() {
-    let previewSecondsPerPage = parseInt(
-      this.viewer_.getParam('previewSecondsPerPage'),
-      10
-    );
-    if (isNaN(previewSecondsPerPage) || previewSecondsPerPage <= 0) {
-      previewSecondsPerPage = DEFAULT_PREVIEW_AUTO_ADVANCE_DURATION_S;
-    }
-    this.element.setAttribute(
-      'auto-advance-after',
-      previewSecondsPerPage + 's'
-    );
+    let autoAdvanceAfter = this.getAutoAdvanceAfterSeconds_();
 
     const firstVideo = this.getFirstAmpVideo_();
-    if (firstVideo) {
-      whenUpgradedToCustomElement(firstVideo)
-        .then(() => firstVideo.getImpl())
-        .then((videoImpl) => {
-          this.loadPromise(firstVideo).then(() => {
-            const duration = videoImpl.getDuration();
-            const tooShort = duration < previewSecondsPerPage;
-            const videoEl = firstVideo.querySelector('video');
-            videoEl.loop ||= tooShort;
-          });
-        });
+    if (!firstVideo) {
+      this.element.setAttribute('auto-advance-after', autoAdvanceAfter + 's');
+      return;
     }
+
+    const maxPrev = this.getMaxVideoPreview_();
+    if (maxPrev > 0) {
+      // Comply with max-video-preview, but never to lengthen the page preview
+      autoAdvanceAfter = Math.min(maxPrev, autoAdvanceAfter);
+    } else if (maxPrev === 0) {
+      // TODO(masanto): Prevent video from playing when maxVideoPreview is 0
+    }
+    this.element.setAttribute('auto-advance-after', autoAdvanceAfter + 's');
+
+    whenUpgradedToCustomElement(firstVideo)
+      .then(() => firstVideo.getImpl())
+      .then((videoImpl) => {
+        this.loadPromise(firstVideo).then(() => {
+          const duration = videoImpl.getDuration();
+          const tooShort = duration < autoAdvanceAfter;
+          const videoEl = firstVideo.querySelector('video');
+          videoEl.loop ||= tooShort;
+        });
+      });
+  }
+
+  /**
+   * Calculates the duration of this page's preview based upon the
+   * 'previewSecondsPerPage' query parameter.
+   * @return {number} The number of seconds for which this page should be
+   *     previewed before advancing to the next page.
+   * @private
+   */
+  getAutoAdvanceAfterSeconds_() {
+    const previewSecondsStr = this.viewer_.getParam('previewSecondsPerPage');
+    const previewSecondsPerPage = parseInt(previewSecondsStr, 10);
+    return isNaN(previewSecondsPerPage) || previewSecondsPerPage <= 0
+      ? DEFAULT_PREVIEW_AUTO_ADVANCE_DURATION_S
+      : previewSecondsPerPage;
+  }
+
+  /**
+   * @return {number} The max-video-preview value, if it exists on the doc. A
+   *     positive value means that a maximum of <value> seconds may be used as
+   *     a video snippet for videos on this page in search results. A value of
+   *     0 means that a static image may be used. And a value of -1 means that
+   *     there is no limit to the video's preview length.
+   * @private
+   */
+  getMaxVideoPreview_() {
+    const robotsContent = this.getAmpDoc().getMetaByName('robots');
+    const maxVideoPreviewRegex = /max-video-preview[^,]*/;
+    const maxVideoPreviewStr = robotsContent?.match(maxVideoPreviewRegex)[0];
+    return parseInt(maxVideoPreviewStr?.split(':')[1], 10);
   }
 
   /**

extensions/amp-story/1.0/test/test-amp-story-page.js

@@ -26,6 +26,7 @@ const extensions = ['amp-story:1.0', 'amp-audio'];
 
 describes.realWin('amp-story-page', {amp: {extensions}}, (env) => {
   let win;
+  let ampDoc;
   let element;
   let html;
   let gridLayerEl;
@@ -76,7 +77,8 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => {
 
     element = win.document.createElement('amp-story-page');
     gridLayerEl = win.document.createElement('amp-story-grid-layer');
-    element.getAmpDoc = () => new AmpDocSingle(win);
+    ampDoc = new AmpDocSingle(win);
+    element.getAmpDoc = () => ampDoc;
     const signals = new Signals();
     element.signals = () => signals;
     element.appendChild(gridLayerEl);
@@ -805,4 +807,88 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => {
       });
     });
   });
+
+  describe('auto-advance-after', async () => {
+    beforeEach(() => {
+      env.sandbox.stub(ampDoc, 'isPreview').returns(true);
+      expect(element.getAttribute('auto-advance-after')).to.be.equal(null);
+    });
+
+    it(
+      'should use the default advancement value when auto-advance-after is ' +
+        'unspecified',
+      () => {
+        page.buildCallback();
+
+        expect(element.getAttribute('auto-advance-after')).to.be.equal('5s');
+      }
+    );
+
+    it('should use the specified previewSecondsPerPage value', () => {
+      const viewer = Services.viewerForDoc(element);
+      stubWithArg(viewer, 'getParam', 'previewSecondsPerPage', '3');
+
+      page.buildCallback();
+
+      expect(element.getAttribute('auto-advance-after')).to.be.equal('3s');
+    });
+
+    it('should ignore max-video-preview when the page has no video', () => {
+      const viewer = Services.viewerForDoc(element);
+      stubWithArg(viewer, 'getParam', 'previewSecondsPerPage', '3');
+      stubWithArg(ampDoc, 'getMetaByName', 'robots', 'max-video-preview: 2');
+
+      page.buildCallback();
+
+      expect(element.getAttribute('auto-advance-after')).to.be.equal('3s');
+    });
+
+    it(
+      'should override the previewSecondsPerPage value with the ' +
+        'max-video-preview value',
+      () => {
+        const viewer = Services.viewerForDoc(element);
+        stubWithArg(viewer, 'getParam', 'previewSecondsPerPage', '3');
+        stubWithArg(ampDoc, 'getMetaByName', 'robots', 'max-video-preview: 2');
+        appendAmpVideo();
+
+        page.buildCallback();
+
+        expect(element.getAttribute('auto-advance-after')).to.be.equal('2s');
+      }
+    );
+
+    it('should be unaffected by a max-video-preview value of -1', () => {
+      const viewer = Services.viewerForDoc(element);
+      stubWithArg(viewer, 'getParam', 'previewSecondsPerPage', '3');
+      stubWithArg(ampDoc, 'getMetaByName', 'robots', 'max-video-preview: -1');
+      appendAmpVideo();
+
+      page.buildCallback();
+
+      expect(element.getAttribute('auto-advance-after')).to.be.equal('3s');
+    });
+
+    it('should be unaffected by a max-video-preview value of 0', () => {
+      const viewer = Services.viewerForDoc(element);
+      stubWithArg(viewer, 'getParam', 'previewSecondsPerPage', '3');
+      stubWithArg(ampDoc, 'getMetaByName', 'robots', 'max-video-preview: 0');
+      appendAmpVideo();
+
+      page.buildCallback();
+
+      expect(element.getAttribute('auto-advance-after')).to.be.equal('3s');
+    });
+
+    function stubWithArg(object, functionName, arg, returnValue) {
+      env.sandbox.stub(object, functionName).withArgs(arg).returns(returnValue);
+    }
+
+    /**
+     * Appends an AMP video to the document
+     */
+    function appendAmpVideo() {
+      gridLayerEl.appendChild(win.document.createElement('amp-video'));
+    }
+  });
 });