MWPW-157618: How-to block video support for mp4 and adobetv (#3029)

* How-to Video Support AdobeTV and mp4 * Adding observer * Test files * Removing chaining * How to updates * Returning an object * Update libs/blocks/how-to/how-to.css Co-authored-by: Ryan Parrish <churchofslidin@gmail.com> * Rolling back errors * Removing parent --------- Co-authored-by: Ryan Parrish <churchofslidin@gmail.com>
adobecom · Oct 22, 2024 · de2469b · de2469b
1 parent 9bd25e6
commit de2469b
Show file tree

Hide file tree

Showing 6 changed files with 79 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: var( --spacing-l-static);
     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,
@@ -124,4 +130,8 @@ html[dir="rtl"] .how-to ol > li::before {
       "heading heading"
       "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,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 getVideo = (el) => el.querySelector('video') || el.querySelector('.milo-video');
 
 const getHowToInfo = (el) => {
   const infoDiv = el.querySelector(':scope > div > div');
@@ -112,7 +112,7 @@ const getHowToSteps = (el) => {
     { steps: [], images: {} },
   );
 
-  el.children[1].remove();
+  el.children[1]?.remove();
   return steps;
 };
 
@@ -133,7 +133,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/libs/styles/styles.css b/libs/styles/styles.css
@@ -51,6 +51,7 @@
   --spacing-xxxl: 80px;
 
   /* Static Spacing */
+  --spacing-l-static: 48px;
   --spacing-xl-static: 56px;
   --spacing-xxl-static: 80px;
   --spacing-xxxl-static: 104px;

diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
@@ -333,7 +333,7 @@ export function decorateAnchorVideo({ src = '', anchorTag }) {
   anchorTag.insertAdjacentHTML('afterend', video);
   const videoEl = parentElement.querySelector('video');
   createIntersectionObserver({
-    el: parentElement,
+    el: videoEl,
     options: { rootMargin: '1000px' },
     callback: () => {
       videoEl?.appendChild(createTag('source', { src, type: 'video/mp4' }));

diff --git a/test/blocks/how-to/how-to.test.js b/test/blocks/how-to/how-to.test.js
@@ -1,7 +1,11 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
+import { setConfig } from '../../../libs/utils/utils.js';
 
+setConfig({});
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+const { default: videoinit } = await import('../../../libs/blocks/video/video.js');
+const { default: adobetv } = await import('../../../libs/blocks/adobetv/adobetv.js');
 const { default: init } = await import('../../../libs/blocks/how-to/how-to.js');
 
 const expectedTest1Script = '{"@context":"http://schema.org","@type":"HowTo","name":"How to compress a PDF online (with schema)","description":"Follow these easy steps to compress a large PDF file online:","publisher":{"@type":"Organization","name":"Adobe","logo":{"@type":"ImageObject","url":"https://www.adobe.com/content/dam/cc/icons/Adobe_Corporate_Horizontal_Red_HEX.svg"}},"step":[{"@type":"HowToStep","url":"http://localhost:2000/?wtr-session-id=3ttlurFnGTxR4QflqCL7t#how-to-compress-a-pdf-online-with-schema","name":"Step 1","itemListElement":[{"@type":"HowToDirection","text":"Select the PDF file you want to make smaller."}]},{"@type":"HowToStep","url":"http://localhost:2000/?wtr-session-id=3ttlurFnGTxR4QflqCL7t#how-to-compress-a-pdf-online-with-schema","name":"Step 2","image":"http://localhost:2000/mock.png","itemListElement":[{"@type":"HowToDirection","text":"After uploading, Acrobat will automatically reduce the PDF size."}]},{"@type":"HowToStep","url":"http://localhost:2000/?wtr-session-id=3ttlurFnGTxR4QflqCL7t#how-to-compress-a-pdf-online-with-schema","name":"Step 3","itemListElement":[{"@type":"HowToDirection","text":"Download your compressed PDF file or sign in to share it. Yay!"}]}],"@image":{"@type":"ImageObject","url":"http://localhost:2000/assets/img/compress-pdf-how-to-400x240.svg"}}';
@@ -99,10 +103,19 @@ describe('How To', () => {
     expect(howToList).to.exist;
   });
 
-  it('Renders a video', async () => {
-    const howTo = document.querySelector('#test5');
+  it('Mp4 Link video', async () => {
+    const howTo = document.getElementById('test6');
+    videoinit(howTo.querySelector('a'));
     init(howTo);
-    const howToList = document.querySelector('#test5 a');
-    expect(howToList).to.exist;
+    const video = howTo.querySelector('video');
+    expect(video).to.exist;
+  });
+
+  it('Adobe TV Link video', async () => {
+    const howTo = document.getElementById('test5');
+    adobetv(howTo.querySelector('a'));
+    init(howTo);
+    const video = howTo.querySelector('.milo-video');
+    expect(video).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,51 @@ <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 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>
+      <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>
 
-  <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>
+          <li>Download your <strong>compressed PDF</strong> file or sign in to share it. Yay!</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div id="test6" 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 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>