MWPW-147299 How-to MP4 Videos (#2411)

adobecom · Jun 10, 2024 · f5e66e0 · f5e66e0
1 parent e63812e
commit f5e66e0
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 13 deletions.
diff --git a/libs/blocks/how-to/how-to.css b/libs/blocks/how-to/how-to.css
@@ -51,54 +51,77 @@ html[dir="rtl"] .how-to ol > li::before {
   grid-area: heading;
 }
 
-.how-to-image {
+.how-to-media {
   grid-area: image;
   align-self: center;
   justify-self: center;
   min-height: 100%;
   order: 3;
 }
 
-.how-to-image-large {
+.how-to-media-large {
   height: auto;
   min-height: auto;
 }
 
-.how-to-image img {
+.how-to-media img {
   max-height: 100%;
 }
 
 /* tablet up */
 @media screen and (min-width: 600px) {
-  .how-to .foreground {
+  .how-to .foreground:not(.has-video) {
     column-gap: var(--spacing-m);
     grid-template-rows: 1fr;
     grid-template-areas:
       "heading heading"
       "list list"
   }
 
-  .how-to .foreground.has-image {
+  .how-to .foreground.has-image:not(.has-video) {
     grid-template-areas:
       "heading image"
       "list list"
   }
 
-  .how-to.large-image .foreground,
-  .how-to.large-image .foreground.has-image {
+  .how-to.large-image .foreground:not(.has-video),
+  .how-to.large-image .foreground.has-image:not(.has-video),
+  .how-to.large-media .foreground:not(.has-video),
+  .how-to.large-media .foreground.has-image:not(.has-video)  {
     grid-template-rows: 1fr;
     grid-auto-rows: min-content;
     grid-template-areas:
       "heading heading"
       "list image"
   }
 
-  .how-to-image {
+  .how-to-media {
     order: unset;
     height: 0;
   }
 
-  .how-to.large-image .how-to-image {
+  .how-to.large-image .how-to-media,
+  .how-to.large-media .how-to-media {
     height: auto;
   }
 }
+
+/* Desktop video  */
+@media screen and (min-width: 1200px) {
+  .how-to .foreground.has-video {
+    column-gap: var(--spacing-m);
+    grid-template-rows: 1fr;
+    grid-template-areas:
+      "heading heading"
+      "list list"
+  }
+
+  .how-to.large-image .foreground.has-video,
+  .how-to.large-media .foreground.has-video  {
+    grid-template-rows: 1fr;
+    grid-auto-rows: min-content;
+    grid-template-areas:
+      "heading heading"
+      "list image"
+  }
+}
diff --git a/libs/blocks/how-to/how-to.js b/libs/blocks/how-to/how-to.js
@@ -47,6 +47,7 @@ const setJsonLd = (heading, description, mainImage, stepsLd) => {
 };
 
 const getImage = (el) => el.querySelector('picture') || el.querySelector('a[href$=".svg"');
+const getVideo = (el) => el.querySelector('a[href*=".mp4"]');
 
 const getHowToInfo = (el) => {
   const infoDiv = el.querySelector(':scope > div > div');
@@ -59,6 +60,7 @@ const getHowToInfo = (el) => {
   }
 
   const image = getImage(infoDiv.lastElementChild);
+  const video = getVideo(infoDiv.lastElementChild);
 
   const desc = infoDiv.childElementCount > 2 || (infoDiv.childElementCount === 2 && !image)
     ? infoDiv.children[1]
@@ -73,6 +75,7 @@ const getHowToInfo = (el) => {
     heading,
     desc,
     mainImage: image,
+    mainVideo: video,
   };
 };
 
@@ -116,19 +119,24 @@ const getHowToSteps = (el) => {
 export default function init(el) {
   el.classList.add('con-block');
   const isSeo = el.classList.contains('seo');
-  const isLargeImage = el.classList.contains('large-image');
+  const isLargeMedia = el.classList.contains('large-image') || el.classList.contains('large-media');
 
-  const { desc, heading, mainImage } = getHowToInfo(el);
+  const { desc, heading, mainImage, mainVideo } = getHowToInfo(el);
   const { steps, images } = getHowToSteps(el);
 
   const orderedList = document.createElement('ol');
   if (steps) orderedList.append(...steps);
 
   if (mainImage) {
-    const imageClass = `how-to-image${isLargeImage ? ' how-to-image-large' : ''}`;
+    const imageClass = `how-to-media${isLargeMedia ? ' how-to-media-large' : ''}`;
     el.append(createTag('div', { class: imageClass }, mainImage));
   }
 
+  if (mainVideo) {
+    const videoClass = `how-to-media${isLargeMedia ? ' how-to-media-large' : ''}`;
+    el.append(createTag('div', { class: videoClass }, mainVideo));
+  }
+
   if (isSeo) {
     const stepsLd = steps.map((step, idx) => getStepLd(idx + 1, heading.id, images[idx], step));
     setJsonLd(heading?.textContent, desc?.textContent, mainImage, stepsLd);
@@ -137,6 +145,7 @@ export default function init(el) {
   const rows = el.querySelectorAll(':scope > div');
   const foreground = createTag('div', { class: 'foreground' });
   if (mainImage) foreground.classList.add('has-image');
+  if (mainVideo) foreground.classList.add('has-video');
   rows.forEach((row) => { foreground.appendChild(row); });
   foreground.appendChild(orderedList);
   el.appendChild(foreground);

diff --git a/test/blocks/how-to/how-to.test.js b/test/blocks/how-to/how-to.test.js
@@ -98,4 +98,11 @@ describe('How To', () => {
     const howToList = document.querySelector('#test4 ol');
     expect(howToList).to.exist;
   });
+
+  it('Renders a video', async () => {
+    const howTo = document.querySelector('#test5');
+    init(howTo);
+    const howToList = document.querySelector('#test5 a');
+    expect(howToList).to.exist;
+  });
 });
diff --git a/test/blocks/how-to/mocks/body.html b/test/blocks/how-to/mocks/body.html
@@ -88,4 +88,28 @@ <h2 id="how-to-do-some-other-cool-thing">How to do some other cool thing</h2>
       <p>Download your new file.</p>
     </div>
   </div>
-</div>
+
+  <div>
+    <div id="test5" class="how-to seo large-media">
+      <div>
+        <div data-valign="middle">
+          <h3 id="how-to-compress-a-pdf-online-with-schema">How to compress a PDF online (with schema)</h3>
+          <p>Follow these easy steps to compress a large PDF file online:</p>
+          <p><a href="/drafts/gunn/media_16965312b3a8d7a1d48a1d510584dc5e8a0f1e085.mp4">https://main--milo--adobecom.hlx.page/drafts/gunn/media_16965312b3a8d7a1d48a1d510584dc5e8a0f1e085.mp4</a></p>
+        </div>
+      </div>
+      <div>
+        <div data-valign="middle">
+          <ul>
+            <li>Select the PDF file you want to make smaller.</li>
+            <li>After uploading, Acrobat will automatically reduce the PDF size.<br>
+              <picture>
+                <source type="image/webp" srcset="" media="(min-width: 400px)">
+                <img loading="lazy" alt="" type="image/png" src="./mock.png" width="1068" height="972">
+              </picture>
+            </li>
+            <li>Download your <strong>compressed PDF</strong> file or sign in to share it. Yay!</li>
+          </ul>
+        </div>
+      </div>
+    </div>