✨ [AMP Story Audio Sticker] add the sticker container and tap hint (#…

…38744) * 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 <[email protected]> * 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 --------- Co-authored-by: Matias Szylkowski <[email protected]>
ampproject · Apr 21, 2023 · 74060fa · 74060fa
1 parent 81747b1
commit 74060fa
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 21 deletions.
diff --git a/examples/amp-story/amp-story-audio-sticker.html b/examples/amp-story/amp-story-audio-sticker.html
@@ -65,16 +65,6 @@
       object-fit: contain;
       width: 4.25rem;
     }
-    .sticker {
-      height: 3rem;
-      width: 3rem;
-    }
-    .container {
-      position: relative;
-      width: 180px;
-      height: 180px;
-      overflow: hidden;
-    }
     .byline {
       letter-spacing: 1.28px;
       padding-bottom: 7.88vh;
@@ -103,12 +93,16 @@
     amp-ad[template="image-template"] img {
       object-fit: cover;
     }
-
     ::cue {
       background-color: rgba(0, 0, 0, 0.75);
       font-size: 24px;
       line-height: 1.5;
     }
+    amp-story-audio-sticker {
+      height: 10rem;
+      width: 10rem;
+      border: 1px solid white; /* Optional: Add a border to the container for visualization */
+    }
   </style>
 </head>
   <body>
@@ -133,13 +127,13 @@ <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 class="sticker">
+          <amp-story-audio-sticker>
             <amp-img width="100" height="100" layout="responsive" src="https://media.tenor.com/oK5AJr1cvF4AAAAi/high-volume-speaker-symbols.gif">
           </amp-story-audio-sticker>
         </amp-story-grid-layer>>
       </amp-story-page>
 
-      <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+      <amp-story-page id="page-2" title="Lorem ipsum dolor sit amet">
         <amp-story-grid-layer template="fill">
           <amp-video autoplay loop
             width="400"
@@ -155,7 +149,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-audio-sticker class="sticker">
+          <amp-story-audio-sticker size="small">
             <amp-img width="100" height="100" layout="responsive" src="https://media.tenor.com/oK5AJr1cvF4AAAAi/high-volume-speaker-symbols.gif">
           </amp-story-audio-sticker>
         </amp-story-grid-layer>>

diff --git a/extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.css b/extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.css
@@ -1,15 +1,59 @@
-amp-story-audio-sticker {
+.i-amphtml-amp-story-audio-sticker-component {
+  display: flex !important;
+  flex-direction: column !important;
+  flex-wrap: wrap !important;
+  align-items: center !important;
+  align-content: flex-start !important;
+  justify-content: flex-start !important;
+}
+
+.i-amphtml-amp-story-audio-sticker-tap-hint {
+  width: 110px !important;
+  height: 38.33px !important;
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="110" height="39" viewBox="0 0 110 39" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_b_2402_31756)"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32H19.75L24.2 37.9333C24.6 38.4667 25.4 38.4667 25.8 37.9333L30.25 32H94C102.837 32 110 24.8366 110 16C110 7.16344 102.837 0 94 0H16Z" fill="#4D4D4D" fill-opacity="0.4"/></g><defs><filter id="filter0_b_2402_31756" x="-15" y="-15" width="140" height="68.3333" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="7.5"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2402_31756"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2402_31756" result="shape"/></filter></defs></svg>') !important;
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  margin-bottom: 4px !important;
+}
+
+.i-amphtml-amp-story-audio-sticker-tap-hint span {
+  margin-bottom: 6px !important;
+}
+
+.i-amphtml-amp-story-audio-sticker-container {
+  position: relative !important;
   overflow: hidden !important;
 }
 
-amp-story[muted] amp-story-audio-sticker {
-  pointer-events: auto !important;
+.i-amphtml-amp-story-audio-sticker-container.large {
+  width: 180px !important;
+  height: 180px !important;
 }
 
-amp-story:not([muted]) amp-story-audio-sticker {
-  display: none  !important;
+.i-amphtml-amp-story-audio-sticker-container.small {
+  width: 120px !important;
+  height: 120px !important;
+}
+
+amp-story-audio-sticker {
+  max-width: 100% !important; /* Set the maximum width of the image to 100% to ensure it fits within the container */
+  max-height: 100% !important; /* Set the maximum height of the image to 100% to ensure it fits within the container */
+  margin: auto !important; /* Center the image horizontally and vertically within the container */
 }
 
 amp-story-audio-sticker * {
   pointer-events: none !important;
 }
+
+amp-story[muted] amp-story-audio-sticker {
+  pointer-events: auto !important;
+}
+
+amp-story:not([muted]) .i-amphtml-amp-story-audio-sticker-component {
+  display: none !important;
+}
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
@@ -1,3 +1,4 @@
+import * as Preact from '#core/dom/jsx';
 import {Layout_Enum} from '#core/dom/layout';
 
 import {Services} from '#service';
@@ -13,6 +14,27 @@ export class AmpStoryAudioSticker extends AMP.BaseElement {
     super(element);
   }
 
+  /** @override */
+  buildCallback() {
+    this.element.parentNode.appendChild(
+      <div class="i-amphtml-amp-story-audio-sticker-component">
+        <div class="i-amphtml-amp-story-audio-sticker-tap-hint">
+          <span>tap to unmute</span>
+        </div>
+        <div
+          class={
+            'i-amphtml-amp-story-audio-sticker-container' +
+            (this.element.getAttribute('size') === 'small'
+              ? ' small'
+              : ' large')
+          }
+        >
+          {this.element}
+        </div>
+      </div>
+    );
+  }
+
   /** @override */
   layoutCallback() {
     return Services.storyStoreServiceForOrNull(this.win).then(

diff --git a/extensions/amp-story-audio-sticker/0.1/test/test-amp-story-audio-sticker.js b/extensions/amp-story-audio-sticker/0.1/test/test-amp-story-audio-sticker.js
@@ -1,6 +1,8 @@
-import * as Preact from '#core/dom/jsx';
 import '../amp-story-audio-sticker';
 
+import * as Preact from '#core/dom/jsx';
+import {computedStyle} from '#core/dom/style';
+
 import {Services} from '#service';
 
 import {
@@ -18,6 +20,7 @@ describes.realWin(
   },
   (env) => {
     let win;
+    let doc;
     let storeService;
     let stickerEl;
     let stickerImpl;
@@ -26,6 +29,7 @@ describes.realWin(
 
     beforeEach(async () => {
       win = env.win;
+      doc = win.document;
 
       storeService = new AmpStoryStoreService(win);
       env.sandbox
@@ -43,18 +47,34 @@ describes.realWin(
         </amp-story>
       );
 
-      win.document.body.appendChild(storyEl);
+      doc.body.appendChild(storyEl);
       stickerEl = storyEl.querySelector('amp-story-audio-sticker');
       stickerImpl = await stickerEl.getImpl();
     });
 
+    it('should add all necessary sticker elements', async () => {
+      expect(doc.querySelector('.i-amphtml-amp-story-audio-sticker-component'))
+        .to.not.be.null;
+      expect(doc.querySelector('.i-amphtml-amp-story-audio-sticker-tap-hint'))
+        .to.not.be.null;
+      expect(
+        doc.querySelector('.i-amphtml-amp-story-audio-sticker-container.large')
+      ).to.not.be.null;
+    });
+
     it('should unmute the story when clicking on the audio sticker', async () => {
       await stickerImpl.layoutCallback();
 
       stickerEl.click();
       await nextTick();
 
       expect(storeService.get(StateProperty.MUTED_STATE)).to.equal(false);
+      expect(
+        computedStyle(
+          win,
+          doc.querySelector('.i-amphtml-amp-story-audio-sticker-component')
+        ).getPropertyValue('display')
+      ).equal('none');
     });
   }
 );