MWPW-155943 Use correct image source for video when using poster Image (

#2703) * changes in utils * changes in utils view port * changes in view-port sizes * unit test cases * viewport for desktop * viewport for desktop * shifting the logic to decorate.js * lint error * lint error * unit tests * unit tests * unit tests * unit tests * unit tests * unit tests --------- Co-authored-by: Suhani <[email protected]> Co-authored-by: Suhani <[email protected]>
adobecom · Aug 20, 2024 · 03a0874 · 03a0874
1 parent f7608be
commit 03a0874
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 4 deletions.
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
@@ -172,12 +172,29 @@ export function decorateTextOverrides(el, options = ['-heading', '-body', '-deta
   });
 }
 
+function defineDeviceByScreenSize() {
+  const screenWidth = window.innerWidth;
+  if (screenWidth <= 600) {
+    return 'mobile';
+  }
+  return 'desktop';
+}
+
+export function getImgSrc(pic) {
+  let source = '';
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(pic, 'text/html');
+  if (defineDeviceByScreenSize() === 'mobile') source = doc.querySelector('source[type="image/webp"]:not([media])');
+  else source = doc.querySelector('source[type="image/webp"][media]');
+  return source?.srcset ? `poster='${source.srcset}'` : '';
+}
+
 export function getVideoAttrs(hash, dataset) {
   const isAutoplay = hash?.includes('autoplay');
   const isAutoplayOnce = hash?.includes('autoplay1');
   const playOnHover = hash?.includes('hoverplay');
   const playInViewport = hash?.includes('viewportplay');
-  const poster = dataset?.videoPoster ? `poster='${dataset.videoPoster}'` : '';
+  const poster = getImgSrc(dataset.videoPoster);
   const globalAttrs = `playsinline ${poster}`;
   const autoPlayAttrs = 'autoplay muted';
   const playInViewportAttrs = playInViewport ? 'data-play-viewport' : '';

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -533,7 +533,7 @@ export function decorateImageLinks(el) {
       const pic = img.closest('picture');
       const picParent = pic.parentElement;
       if (href.includes('.mp4')) {
-        const a = createTag('a', { href: url, 'data-video-poster': img.src });
+        const a = createTag('a', { href: url, 'data-video-poster': pic.outerHTML });
         a.innerHTML = url;
         pic.replaceWith(a);
       } else {

diff --git a/test/blocks/figure/mocks/body.html b/test/blocks/figure/mocks/body.html
@@ -157,7 +157,12 @@
       <!-- video poster link -->
       <div>
         <div>
-          <a href="link-to-video.mp4" data-video-poster="link-to-poster-image" class="video link-block hide-video">https://main--milo--adobecom.hlx.page/media_1e798d01c6ddc7e7eadc8f134d69e4f8d7193fdbb.mp4</a>
+          <a href="link-to-video.mp4" data-video-poster="<picture>
+            <source type=&quot;image/webp&quot; srcset=&quot;./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=2000&amp;amp;format=webply&amp;amp;optimize=medium&quot; media=&quot;(min-width: 600px)&quot;>
+            <source type=&quot;image/webp&quot; srcset=&quot;./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=750&amp;amp;format=webply&amp;amp;optimize=medium&quot;>
+            <source type=&quot;image/jpeg&quot; srcset=&quot;./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=2000&amp;amp;format=jpeg&amp;amp;optimize=medium&quot; media=&quot;(min-width: 600px)&quot;>
+            <img loading=&quot;lazy&quot; alt=&quot;generate&quot; src=&quot;./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=750&amp;amp;format=jpeg&amp;amp;optimize=medium&quot; width=&quot;1536&quot; height=&quot;518&quot;>
+          </picture>" class="video link-block">https://main--milo--adobecom.hlx.page/assets/video/media_1d716842793f4cea9b3b91827eaa8cc118ef1c1b6.mp4</a>
         </div>
       </div>
     </div>

diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
@@ -49,4 +49,13 @@
     <p>I'm not a blockhead.</p>
     <p>{{&nbsp;inkl. MwSt.}}</p>
   </div>
+  <!-- picture element with poster video -->
+  <div>
+    <picture>
+      <source type="image/webp" srcset="./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
+      <source type="image/webp" srcset="./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=750&amp;format=webply&amp;optimize=medium">
+      <source type="image/jpeg" srcset="./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=2000&amp;format=jpeg&amp;optimize=medium" media="(min-width: 600px)">
+      <img loading="lazy" alt="https://main--milo--adobecom.hlx.page/assets/video/media_1d716842793f4cea9b3b91827eaa8cc118ef1c1b6.mp4 | generate" src="./media_1570a87786799913a62c9987d0f837e22db8cac7f.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" width="1536" height="518">
+    </picture>
+  </div>
 </main>
diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
@@ -1,4 +1,4 @@
-import { readFile } from '@web/test-runner-commands';
+import { readFile, setViewport } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { waitFor, waitForElement } from '../helpers/waitfor.js';
@@ -68,6 +68,7 @@ describe('Utils', () => {
 
     describe('Configure Auto Block', () => {
       it('Disable auto block when #_dnb in url', async () => {
+        setViewport({ width: 600, height: 1500 });
         await waitForElement('.disable-autoblock');
         const disableAutoBlockLink = document.querySelector('.disable-autoblock');
         utils.decorateLinks(disableAutoBlockLink);