✨ 📖 [AMP Story Audio Sticker] Documentation and validator tests (#39184)

* Audio sticker skeleton code: clicking on the element would unmute the story and hide the element * Remove validator test and spaces in css file * Add dependency * Update z-index * Update extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.css Co-authored-by: Matias Szylkowski <mszylkowski@google.com> * Cleaning up extension and css code * fix * Remove unnecessary CSS and update the example. * Fix z-index * Remove validator * Add the sticker container and tap hint * Fix whitespace * lint * String concat in jsx * Default stickers and switching between different states * Remove duplicate buildCallback * Use CSS to execute animation delay instead. Have a new helper function to get default sticker * Change default size to small * Fix lint * Fix unit test * refactors * Move amp-img src setting to buildcallback * Fixes * Fix * Update extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.js Co-authored-by: Matias Szylkowski <mszylkowski@google.com> * lint * Add animation and styles to sticker * Rename css variable * Replace borders with box-shadow. Use sticker-style instead. Replace mouse and touch events with platform-agnostic events: pointerdown and pointerup * Fix unit test and merge with main. * Replace unnecessary classes and event listeners with CSS selectors. Remove RGB color checks. * Allow developers to set the CSS variables directly, instead of taking it as element attributes and do the checks * Replace box-shadow with filter drop-shadow This is to create a dropshadow that conforms to the shape. * Ensure transitions work on both scaling down and up. * minor fixes * Make color variables global. Combine two animations into one. * Remove comment * Use inset: 0 instead. * Highlight mute button only when the sticker is clicked * unit test * Get system UI in the click handler instead of layout callback to prevent system UI from not built yet. Remove SYSTEM_UI_IS_BUILT state from store service * Trivial simplification * Update extensions/amp-story/1.0/amp-story-system-layer.css Co-authored-by: Matias Szylkowski <mszylkowski@google.com> * Update extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.js Co-authored-by: Matias Szylkowski <mszylkowski@google.com> * Fix lint * Sticker documentation and validator * Try validator * Update with validator-generated .out file. * Manually fix validator * Simplify validators Show premade effects as tables in documentation * Remove player tags * Fix validator rules * Change sticker name and disallow most child tags * Fix unit test * Add validator test case for not in grid layer --------- Co-authored-by: Matias Szylkowski <mszylkowski@google.com>
ampproject · Aug 1, 2023 · d1301d7 · d1301d7
1 parent 28a8827
commit d1301d7
Show file tree

Hide file tree

Showing 9 changed files with 387 additions and 12 deletions.
diff --git a/examples/amp-story/amp-story-audio-sticker.html b/examples/amp-story/amp-story-audio-sticker.html
@@ -7,7 +7,6 @@
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <title>Key Highlights of AMP Conf 2018</title>
 
-  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
   <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.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-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
@@ -127,7 +126,7 @@
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
         </amp-story-grid-layer>>
       </amp-story-page>
@@ -147,8 +146,8 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
-          <amp-story-audio-sticker size="large" sticker="cat-sticker"></amp-story-audio-sticker>
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker="headphone-cat"></amp-story-audio-sticker>
         </amp-story-grid-layer>>
       </amp-story-page>
 
@@ -167,9 +166,9 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker sticker="loud-speaker"></amp-story-audio-sticker>
-        </amp-story-grid-layer>>
+        </amp-story-grid-layer>
       </amp-story-page>
 
       <amp-story-page id="page-4" title="Lorem ipsum dolor sit amet">
@@ -187,9 +186,9 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
-        </amp-story-grid-layer>>
+        </amp-story-grid-layer>
       </amp-story-page>
 
       <amp-story-page id="page-5" title="Lorem ipsum dolor sit amet">
@@ -207,7 +206,7 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker sticker-style="outline">
             <amp-story-audio-sticker-pretap>
               <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
@@ -234,7 +233,7 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker size="large" sticker-style="dropshadow">
             <amp-story-audio-sticker-pretap>
               <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>

diff --git a/extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.js b/extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.js
@@ -39,7 +39,7 @@ const DEFAULT_STICKERS = {
     pretapUrl: ASSET_URL_PREFIX + 'audio-cloud-pretap.png',
     posttapUrl: ASSET_URL_PREFIX + 'audio-cloud-posttap.png',
   },
-  'cat-sticker': {
+  'headphone-cat': {
     width: '282',
     height: '226',
     pretapUrl: ASSET_URL_PREFIX + 'cat-sticker-pretap.png',
@@ -64,7 +64,7 @@ const DEFAULT_STICKERS = {
  * 2) the custom sticker data is not provided completely.
  * @const {string}
  */
-const FALLBACK_DEFAULT_STICKER = 'cat-sticker';
+const FALLBACK_DEFAULT_STICKER = 'headphone-cat';
 
 export class AmpStoryAudioSticker extends AMP.BaseElement {
   /** @param {!AmpElement} element */

diff --git a/...ons/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.html b/...ons/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="ampconf.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Key Highlights of AMP Conf 2018</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.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-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
+
+  <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>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+        publisher-logo-src="./img/amplogo.png"
+        poster-portrait-src="./img/overview.jpg">
+      <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+        <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/...ions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.out b/...ions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.out
@@ -0,0 +1,31 @@
+FAIL
+|  <!doctype html>
+|  <html ⚡ lang="en">
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="ampconf.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <title>Key Highlights of AMP Conf 2018</title>
+|
+|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.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-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
+|
+|    <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>
+|  </head>
+|    <body>
+|      <amp-story standalone id="cats"
+|          title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+|          publisher-logo-src="./img/amplogo.png"
+|          poster-portrait-src="./img/overview.jpg">
+|        <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+|          <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+>>         ^~~~~~~~~
+amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.html:22:8 The parent tag of tag 'amp-story-audio-sticker' is 'amp-story-page', but it can only be 'amp-story-grid-layer'. (see https://amp.dev/documentation/components/amp-story-audio-sticker)
+>>         ^~~~~~~~~
+amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker-no-grid-layer.html:22:8 Tag 'amp-story-audio-sticker' is disallowed as child of tag 'amp-story-page'. Child tag must be one of ['amp-analytics', 'amp-pixel', 'amp-story-animation', 'amp-story-auto-analytics', 'amp-story-cta-layer', 'amp-story-grid-layer', 'amp-story-page-attachment', 'amp-story-page-outlink', 'amp-story-shopping-attachment']. (see https://amp.dev/documentation/components/amp-story)
+|        </amp-story-page>
+|      </amp-story>
+|    </body>
+|  </html>
diff --git a/extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.html b/extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="ampconf.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Key Highlights of AMP Conf 2018</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.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-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
+
+  <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>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+        publisher-logo-src="./img/amplogo.png"
+        poster-portrait-src="./img/overview.jpg">
+
+      <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+        </amp-story-grid-layer>>
+      </amp-story-page>
+
+      <amp-story-page id="page-2" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker="headphone-cat"></amp-story-audio-sticker>
+        </amp-story-grid-layer>>
+      </amp-story-page>
+
+      <amp-story-page id="page-3" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker sticker="loud-speaker"></amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-4" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-5" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker sticker-style="outline">
+            <amp-story-audio-sticker-pretap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-pretap>
+            <amp-story-audio-sticker-posttap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-posttap>
+          </amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-6" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker-style="dropshadow">
+            <amp-story-audio-sticker-pretap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-pretap>
+            <amp-story-audio-sticker-posttap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-posttap>
+          </amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.out b/extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.out
@@ -0,0 +1,74 @@
+PASS
+|  <!doctype html>
+|  <html ⚡ lang="en">
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="ampconf.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <title>Key Highlights of AMP Conf 2018</title>
+|
+|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.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-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
+|
+|    <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>
+|  </head>
+|    <body>
+|      <amp-story standalone id="cats"
+|          title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+|          publisher-logo-src="./img/amplogo.png"
+|          poster-portrait-src="./img/overview.jpg">
+|
+|        <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-2" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker size="large" sticker="headphone-cat"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-3" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker sticker="loud-speaker"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-4" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-5" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker sticker-style="outline">
+|              <amp-story-audio-sticker-pretap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-pretap>
+|              <amp-story-audio-sticker-posttap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-posttap>
+|            </amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-6" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker size="large" sticker-style="dropshadow">
+|              <amp-story-audio-sticker-pretap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-pretap>
+|              <amp-story-audio-sticker-posttap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-posttap>
+|            </amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|      </amp-story>
+|    </body>
+|  </html>