✨ [amp-story-captions] Support container layout in amp-story-captions…

… component (#37120)

* Support container layout to amp-story-captions.

* Update Layout to Layout_Enum after merge with main.

* Add document about the caveat to use container layout in amp-story-captions component

examples/amp-story/amp-story-captions.html

@@ -50,12 +50,47 @@
       </amp-story-grid-layer>
       <amp-story-grid-layer template="vertical" class="bottom">
         <div class="scrim">
+          <div class="static-text">This element is always above captions.</div>
           <amp-story-captions id="captions" layout="fixed-height" height="100"></amp-story-captions>
           <div class="static-text">This element is always below captions and never overlaps.</div>
         </div>
       </amp-story-grid-layer>
     </amp-story-page>
+
+    <amp-story-page id="page-container" auto-advance-after="video-container">
+      <amp-story-grid-layer template="fill">
+        <amp-video id="video-container"
+            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
+            width="1280" height="720" layout="responsive" autoplay captions-id="captions-container">
+          <track kind="subtitles" src="captions-for-container-layout.vtt" srclang="en" default>
+        </amp-video>
+      </amp-story-grid-layer>
+      <amp-story-grid-layer template="vertical" class="bottom">
+        <div class="scrim">
+          <div class="static-text">This element is always above captions and never overlaps.</div>
+          <amp-story-captions id="captions-container" layout="container"></amp-story-captions>
+          <div class="static-text">This element is always below captions and never overlaps.</div>
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
+
+    <amp-story-page id="page-fill" auto-advance-after="video-fill">
+      <amp-story-grid-layer template="fill">
+        <amp-video id="video-fill"
+            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
+            width="1280" height="720" layout="responsive" autoplay captions-id="captions-fill">
+          <track kind="subtitles" src="captions-for-container-layout.vtt" srclang="en" default>
+        </amp-video>
+      </amp-story-grid-layer>
+      <amp-story-grid-layer template="vertical" class="bottom">
+        <div class="scrim">
+          <div class="static-text">This element is always above captions and never overlaps.</div>
+          <amp-story-captions id="captions-fill" layout="fill"></amp-story-captions>
+          <div class="static-text">This element is always below captions and never overlaps.</div>
+        </div>
+      </amp-story-grid-layer>
+    </amp-story-page>
   </amp-story>
 </body>
 
-</html>
+</html>

examples/amp-story/captions-for-container-layout.vtt

@@ -0,0 +1,9 @@
+WEBVTT
+
+00:00:00.000 --> 01:00:00.000 align:start position:0%
+at<00:00:00.290><c> the</c><00:00:00.470><c> left</c><00:00:00.710><c> we</c><00:00:00.889><c> can</c><00:00:01.190><c> see</c><00:00:01.250><c> though</c><00:00:02.210><c> we</c><00:00:02.450><c> can</c><00:00:02.660><c> see</c>
+the<00:00:03.080><c> at</c><00:00:03.800><c> the</c><00:00:04.040><c> right</c><00:00:04.250><c> we</c><00:00:04.610><c> can</c><00:00:04.790><c> see</c><00:00:04.850><c> the</c><00:00:05.150><c> hats</c>
+knowledge<00:00:06.830><c> and</c><00:00:07.130><c> everything</c><00:00:07.880><c> is</c><00:00:08.060><c> safe</c>
+perfectly<00:00:08.170><c> safe</c><00:00:08.500><c> emo</c><00:00:09.779><c> emo</c>
+
+

extensions/amp-story-captions/0.1/amp-story-captions.js

@@ -1,4 +1,4 @@
-import {applyFillContent, isLayoutSizeDefined} from '#core/dom/layout';
+import {Layout_Enum, isLayoutSizeDefined} from '#core/dom/layout';
 import {toArray} from '#core/types/array';
 
 import {listen} from '#utils/event-helper';
@@ -29,12 +29,11 @@ export class AmpStoryCaptions extends AMP.BaseElement {
   buildCallback() {
     this.container_ = this.element.ownerDocument.createElement('div');
     this.element.appendChild(this.container_);
-    applyFillContent(this.container_, /* replacedContent */ true);
   }
 
   /** @override */
   isLayoutSupported(layout) {
-    return isLayoutSizeDefined(layout);
+    return isLayoutSizeDefined(layout) || layout === Layout_Enum.CONTAINER;
   }
 
   /**

extensions/amp-story-captions/0.1/amp-story-captions.md

@@ -0,0 +1,5 @@
+# amp-story-captions
+
+The `amp-story-captions` component allows custom video or audio [caption](https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) rendering. See https://github.com/ampproject/amphtml/issues/34016 for the design.
+
+Note that `container` layout in this component is different to all other components because the HTML tree does not determine the size. Instead, the text height of the dynamically loaded captions determine the size. Thus it may cause CLS issue if the caption content changes while playing the video or audio.

extensions/amp-story-captions/0.1/track-renderer.js

@@ -1,5 +1,4 @@
 import {removeChildren, removeElement} from '#core/dom';
-import {setStyles} from '#core/dom/style';
 import {toArray} from '#core/types/array';
 
 import {listen} from '#utils/event-helper';
@@ -75,13 +74,6 @@ export class TrackRenderer {
     this.cueTimestamps_.length = 0;
     toArray(this.track_.activeCues).forEach((cue) => {
       const cueElement = this.element_.ownerDocument.createElement('div');
-      setStyles(cueElement, {
-        'position': 'absolute',
-        'bottom': 0,
-        'left': 0,
-        'right': 0,
-      });
-
       const html = cue.getCueAsHTML();
       let section = this.element_.ownerDocument.createElement('span');
       cueElement.appendChild(section);

extensions/amp-story-captions/validator-amp-story-captions.protoascii

@@ -32,6 +32,7 @@ tags: {  # <amp-story-captions>
   spec_url: "https://amp.dev/documentation/components/amp-story-captions"
   mandatory_ancestor: "AMP-STORY"
   amp_layout: {
+    supported_layouts: CONTAINER
     supported_layouts: FILL
     supported_layouts: FIXED
     supported_layouts: FIXED_HEIGHT