amp-story-captions (ampproject#35682)

* amp-video-captions initial * organize examples * rename amp-video-captions to amp-story-captions * add validator rules * fix example * delete documentation * lint * add test * review and merge fix * nits + more layouts. * Lint. Co-authored-by: Ziga Ham <zigaham@google.com>
henel677 · Sep 9, 2021 · 4529382 · 4529382
1 parent defbd26
commit 4529382
Show file tree

Hide file tree

Showing 13 changed files with 981 additions and 0 deletions.
diff --git a/build-system/compile/bundles.config.extensions.json b/build-system/compile/bundles.config.extensions.json
@@ -998,6 +998,14 @@
     "version": "0.1",
     "latestVersion": "0.1"
   },
+  {
+    "name": "amp-story-captions",
+    "version": "0.1",
+    "latestVersion": "0.1",
+    "options": {
+      "hasCss": true
+    }
+  },
   {
     "name": "amp-story-dev-tools",
     "version": "0.1",

diff --git a/examples/amp-story/amp-story-captions.html b/examples/amp-story/amp-story-captions.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>amp-story with amp-story-captions</title>
+  <link rel="canonical" href="example.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <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>
+  <style amp-custom>
+    .bottom {
+      align-content: end;
+      padding: 0;
+    }
+
+    .scrim {
+      background: linear-gradient(to bottom, transparent, #000);
+      color: #fff;
+      font-size: calc(5 * var(--story-page-vw));
+      padding: 32px;
+    }
+
+    amp-story-captions {
+      margin-bottom: 16px;
+    }
+
+    .page2 {
+      background-color: #fff;
+    }
+  </style>
+</head>
+<body>
+  <amp-story
+      standalone
+      title="Demo Story"
+      publisher="AMP Story"
+      publisher-logo-src="example.com/logo.png"
+      poster-portrait-src="example.com/poster.jpg">
+    <amp-story-page id="page1" auto-advance-after="video">
+      <amp-story-grid-layer template="fill">
+        <amp-video id="video"
+            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
+            width="1280" height="720" layout="responsive" autoplay captions-id="captions">
+          <track kind="subtitles" src="captions.vtt" srclang="en" default>
+        </amp-video>
+      </amp-story-grid-layer>
+      <amp-story-grid-layer template="vertical" class="bottom">
+        <div class="scrim">
+          <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>
+</body>
+
+</html>