How-to Video Support AdobeTV and mp4

adobecom · Oct 10, 2024 · 0cf146c · 0cf146c
1 parent 1bdfd4a
commit 0cf146c
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 32 deletions.
diff --git a/libs/blocks/how-to/how-to.css b/libs/blocks/how-to/how-to.css
@@ -4,6 +4,7 @@
   padding: var(--spacing-xxl) 0;
   display: grid;
   grid-template-rows: 1fr;
+  align-items: center;
   grid-template-areas:
     "heading"
     "list"
@@ -59,6 +60,10 @@ html[dir="rtl"] .how-to ol > li::before {
   order: 3;
 }
 
+.how-to-media.how-to-media-large.video {
+  justify-self: auto;
+}
+
 .how-to-media-large {
   height: auto;
   min-height: auto;
@@ -109,11 +114,12 @@ html[dir="rtl"] .how-to ol > li::before {
 /* Desktop video  */
 @media screen and (min-width: 1200px) {
   .how-to .foreground.has-video {
-    column-gap: var(--spacing-m);
+    column-gap: 48px;
     grid-template-rows: 1fr;
+    grid-auto-rows: min-content;
     grid-template-areas:
       "heading heading"
-      "list list"
+      "list image";
   }
 
   .how-to.large-image .foreground.has-video,
@@ -122,6 +128,10 @@ html[dir="rtl"] .how-to ol > li::before {
     grid-auto-rows: min-content;
     grid-template-areas:
       "heading heading"
-      "list image"
+      "list image";
+  }
+
+  .how-to-media.how-to-media-large.video {
+    width: 588px;
   }
 }
diff --git a/libs/blocks/how-to/how-to.js b/libs/blocks/how-to/how-to.js
@@ -47,7 +47,19 @@ 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 getVideo = (el) => {
+  const video = el.querySelector('video');
+  if (video) {
+    const src = video.getAttribute('data-video-source');
+    video.appendChild(createTag('source', { src, type: 'video/mp4' }));
+    return video;
+  }
+  const adobeTV = el.querySelector('.milo-video');
+  if (adobeTV) {
+    return adobeTV;
+  }
+  return null;
+};
 
 const getHowToInfo = (el) => {
   const infoDiv = el.querySelector(':scope > div > div');
@@ -133,7 +145,7 @@ export default function init(el) {
   }
 
   if (mainVideo) {
-    const videoClass = `how-to-media${isLargeMedia ? ' how-to-media-large' : ''}`;
+    const videoClass = `how-to-media${isLargeMedia ? ' how-to-media-large video' : ''}`;
     el.append(createTag('div', { class: videoClass }, mainVideo));
   }
 

diff --git a/test/blocks/how-to/how-to.test.js b/test/blocks/how-to/how-to.test.js
@@ -1,5 +1,6 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
+import { delay, waitForElement } from '../../helpers/waitfor.js';
 
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/how-to/how-to.js');
@@ -99,10 +100,13 @@ describe('How To', () => {
     expect(howToList).to.exist;
   });
 
-  it('Renders a video', async () => {
-    const howTo = document.querySelector('#test5');
+  it('Renders a AdobeTV video', async () => {
+    const howTo = document.getElementById('test5');
+    const { default: adobeTV } = await import('../../../libs/blocks/adobetv/adobetv.js');
+    adobeTV(howTo.querySelector('a'));
+    await delay();
     init(howTo);
-    const howToList = document.querySelector('#test5 a');
-    expect(howToList).to.exist;
+    const iframe = howTo.querySelector('iframe');
+    expect(iframe).to.exist;
   });
 });
diff --git a/test/blocks/how-to/mocks/body.html b/test/blocks/how-to/mocks/body.html
@@ -70,7 +70,7 @@ <h2 id="how-to-do-some-other-cool-thing">How to do some other cool thing</h2>
       </div>
     </div>
   </div>
-  
+
   <div id="test4" class="how-to">
     <div>
       <div data-valign="middle">
@@ -88,28 +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 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 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="https://video.tv.adobe.com/v/3418386">https://video.tv.adobe.com/v/3418386</a></p>
       </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>
+      <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>
+</div>