ampproject · processprocess · Apr 18, 2022 · Mar 28, 2022 · Mar 28, 2022 · Mar 28, 2022
diff --git a/build-system/test-configs/dep-check-config.js b/build-system/test-configs/dep-check-config.js
@@ -227,6 +227,10 @@ exports.rules = [
       // TODO(ccordry): remove this after createShadowRootWithStyle is moved to src
       'extensions/amp-story-auto-ads/0.1/amp-story-auto-ads.js->extensions/amp-story/1.0/utils.js',
       'extensions/amp-story-auto-ads/0.1/story-ad-ui.js->extensions/amp-story/1.0/utils.js',
+
+      // Story captions
+      'extensions/amp-story-captions/0.1/amp-story-captions.js->extensions/amp-story/1.0/utils.js',
+
       // Story education
       'extensions/amp-story-education/0.1/amp-story-education.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-education/0.1/amp-story-education.js->extensions/amp-story/1.0/utils.js',

diff --git a/examples/amp-story/amp-story-captions.html b/examples/amp-story/amp-story-captions.html
@@ -11,6 +11,7 @@
   <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
   <script async custom-element="amp-story-captions" src="https://cdn.ampproject.org/v0/amp-story-captions-0.1.js"></script>
   <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
   <style amp-custom>
     .bottom {
       align-content: end;
@@ -31,6 +32,10 @@
     .page2 {
       background-color: #fff;
     }
+
+    amp-story-captions {
+      /* font-size: 2px !important; */
+    }
   </style>
 </head>
 <body>
@@ -74,6 +79,42 @@
       </amp-story-grid-layer>
     </amp-story-page>
 
+    <amp-story-page id="page-captions-preset-default" 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-preset-default">
+          <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">Default preset example.</div>
+          <div class="static-text">This element is always above captions and never overlaps.</div>
+          <amp-story-captions style-preset="default" id="captions-preset-default" 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-captions-preset-appear" 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-preset-appear">
+          <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">Appear preset example.</div>
+          <div class="static-text">This element is always above captions and never overlaps.</div>
+          <amp-story-captions style-preset="appear" style="--story-captions-font-size: .8em; --story-captions-font-family: 'Shadows Into Light'" id="captions-preset-appear" 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"

diff --git a/extensions/amp-story-captions/0.1/amp-story-captions-presets.css b/extensions/amp-story-captions/0.1/amp-story-captions-presets.css
@@ -0,0 +1,48 @@
+@import '../../amp-story/1.0/amp-story-shadow-reset.css';
+
+/* default */
+
+.amp-story-captions-default .amp-story-captions-cue-wrapper {
+  font-size: calc(2.5 * var(--story-page-vh, 8px)) !important;
+  font-family: 'Roboto', sans-serif !important;
+  margin: 1em 0 !important;
+  display: flex !important;
+  justify-content: center !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  width: 100% !important;
+}
+
+.amp-story-captions-default .amp-story-captions-cue {
+  text-align: center !important;
+  color: #fff !important;
+  border-radius: .94em !important;
+  padding: 0.35em 0.94em !important;
+  background-color: hsla(0, 0%, 10%, 0.6) !important;
+  max-width: calc(var(--story-page-vw) * 92) !important;
+}
+
+.amp-story-captions-default .amp-story-captions-future {
+  color: #fff !important;
+}
+
+/* fade in */
+
+.amp-story-captions-appear .amp-story-captions-cue-wrapper  {
+  font-size: var(--story-captions-font-size, calc(2.5 * var(--story-page-vh, 8px))) !important;
+  font-family: var(--story-captions-font-family, 'Roboto'), 'Roboto', sans-serif !important;
+}
+
+.amp-story-captions-appear .amp-story-captions-cue {
+  color: #fff !important;
+  text-shadow: .06em .06em black !important;
+}
+
+.amp-story-captions-appear .amp-story-captions-cue span {
+  transition: opacity .3s cubic-bezier(0.3, 0, 0, 1) !important;
+  opacity: 1 !important;
+}
+
+.amp-story-captions-appear .amp-story-captions-cue span.amp-story-captions-future {
+  opacity: .1 !important;
+}
diff --git a/extensions/amp-story-captions/0.1/amp-story-captions.css b/extensions/amp-story-captions/0.1/amp-story-captions.css
@@ -1,19 +1,3 @@
-/**
- * Copyright 2021 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-captions {
   white-space: pre-wrap;
 }

diff --git a/extensions/amp-story-captions/0.1/amp-story-captions.js b/extensions/amp-story-captions/0.1/amp-story-captions.js
@@ -1,3 +1,4 @@
+import * as Preact from '#core/dom/jsx';
 import {Layout_Enum, isLayoutSizeDefined} from '#core/dom/layout';
 import {toArray} from '#core/types/array';
 
@@ -6,6 +7,14 @@ import {listen} from '#utils/event-helper';
 import {TrackRenderer} from './track-renderer';
 
 import {CSS} from '../../../build/amp-story-captions-0.1.css';
+import {CSS as PRESETS_CSS} from '../../../build/amp-story-captions-presets-0.1.css';
+import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
+
+/**
+ * List of valid preset values.
+ * @const {Array<string>}
+ */
+const presetValues = ['default', 'appear'];
 
 export class AmpStoryCaptions extends AMP.BaseElement {
   /** @param {!AmpElement} element */
@@ -27,8 +36,16 @@ export class AmpStoryCaptions extends AMP.BaseElement {
 
   /** @override */
   buildCallback() {
-    this.container_ = this.element.ownerDocument.createElement('div');
-    this.element.appendChild(this.container_);
+    this.container_ = <div />;
+    // Check if style-preset is defined and valid.
+    // If valid it renders in shadow dom with preset syles.
+    const preset = this.element.getAttribute('style-preset');
+    if (presetValues.includes(preset)) {
+      this.container_.classList.add(`amp-story-captions-${preset}`);
+      createShadowRootWithStyle(this.element, this.container_, PRESETS_CSS);
+    } else {
+      this.element.appendChild(this.container_);
+    }
   }
 
   /** @override */
@@ -57,7 +74,10 @@ export class AmpStoryCaptions extends AMP.BaseElement {
     );
   }
 
-  /** Creates new track renderers for current textTracks. */
+  /**
+   * Creates new track renderers for current textTracks.
+   * @private
+   */
   updateTracks_() {
     while (this.trackRenderers_.length) {
       this.trackRenderers_.pop().dispose();

diff --git a/extensions/amp-story-captions/0.1/test/test-amp-story-captions.js b/extensions/amp-story-captions/0.1/test/test-amp-story-captions.js
@@ -45,12 +45,7 @@ describes.realWin(
       win.document.body.appendChild(element);
     });
 
-    it('should contain be empty when built', async () => {
-      await element.whenBuilt();
-      expect(element.querySelector('div').textContent).to.equal('');
-    });
-
-    it('update on cuechange', async () => {
+    async function setUpVideoWithCaptions() {
       await element.whenBuilt();
       const impl = await element.getImpl();
 
@@ -80,6 +75,16 @@ describes.realWin(
       expect(element.querySelector('div').textContent).to.equal(
         'first caption'
       );
+      return video;
+    }
+
+    it('should be empty when built', async () => {
+      await element.whenBuilt();
+      expect(element.querySelector('div').textContent).to.equal('');
+    });
+
+    it('update on cuechange', async () => {
+      const video = await setUpVideoWithCaptions();
 
       video.currentTime = 0.5;
       await new Promise((resolve) => {
@@ -89,5 +94,17 @@ describes.realWin(
         'second caption'
       );
     });
+
+    it('should apply preset when attribute is present and value is valid', async () => {
+      element.setAttribute('style-preset', 'default');
+      await setUpVideoWithCaptions();
+      expect(element.querySelector('.amp-story-captions-default')).to.exist;
+    });
+
+    it('should not apply preset when attribute value is invalid', async () => {
+      element.setAttribute('style-preset', 'dflt');
+      await setUpVideoWithCaptions();
+      expect(element.querySelector('.amp-story-captions-default')).to.be.null;
+    });
   }
 );
diff --git a/extensions/amp-story-captions/0.1/test/validator-amp-story-captions.html b/extensions/amp-story-captions/0.1/test/validator-amp-story-captions.html
@@ -23,7 +23,7 @@
         <amp-video src="https://example.com/video.mp4" poster="https://example.com/poster.png" width="1080" height="1920" layout="responsive" crossorigin autoplay captions-id="captions">
           <track kind="subtitles" src="https://example.com/captions.vtt" srclang="en" default>
         </amp-video>
-        <amp-story-captions id="captions" layout="fixed-height" height="300"></amp-story-captions>
+        <amp-story-captions id="captions" layout="fixed-height" height="300" style-preset="default"></amp-story-captions>
       </amp-story-grid-layer>
     </amp-story-page>
   </amp-story>

diff --git a/extensions/amp-story-captions/0.1/test/validator-amp-story-captions.out b/extensions/amp-story-captions/0.1/test/validator-amp-story-captions.out
@@ -24,7 +24,7 @@ PASS
 |          <amp-video src="https://example.com/video.mp4" poster="https://example.com/poster.png" width="1080" height="1920" layout="responsive" crossorigin autoplay captions-id="captions">
 |            <track kind="subtitles" src="https://example.com/captions.vtt" srclang="en" default>
 |          </amp-video>
-|          <amp-story-captions id="captions" layout="fixed-height" height="300"></amp-story-captions>
+|          <amp-story-captions id="captions" layout="fixed-height" height="300" style-preset="default"></amp-story-captions>
 |        </amp-story-grid-layer>
 |      </amp-story-page>
 |    </amp-story>

diff --git a/extensions/amp-story-captions/0.1/track-renderer.js b/extensions/amp-story-captions/0.1/track-renderer.js
@@ -41,6 +41,7 @@ export class TrackRenderer {
     /** @private {!Element} */
     this.element_ = container.ownerDocument.createElement('div');
     container.appendChild(this.element_);
+    this.element_.classList.add('amp-story-captions-cue-wrapper');
 
     /** @private {!Array<number>} */
     this.cueTimestamps_ = [];
@@ -74,6 +75,7 @@ export class TrackRenderer {
     this.cueTimestamps_.length = 0;
     toArray(this.track_.activeCues).forEach((cue) => {
       const cueElement = this.element_.ownerDocument.createElement('div');
+      cueElement.classList.add('amp-story-captions-cue');
       const html = cue.getCueAsHTML();
       let section = this.element_.ownerDocument.createElement('span');
       cueElement.appendChild(section);

diff --git a/extensions/amp-story-captions/validator-amp-story-captions.protoascii b/extensions/amp-story-captions/validator-amp-story-captions.protoascii
@@ -44,4 +44,9 @@ tags: {  # <amp-story-captions>
   child_tags: {
     mandatory_num_child_tags: 0
   }
+  attrs: {
+    name: "style-preset"
+    value: "default"
+    value: "appear"
+  }
 }