Fix video CLS netting +10 lighthouse points (#2750)

* MWPW-155412: Fix video CLS netting +10 lighthouse points (#2724) * fix cls by adding the videoEl without a source * adapt the video hover and in view port play * Remove no-lazy and return earlier * Fix linting issue * Consolidate duplicated logic * Move functions into the init function * Move root margin and use optional chaining * Only query for the videoEl once * Add default hash at in the right spot * Fix the figure/video interaction * Remove unused export statement * Keep the previous defaults
adobecom · Sep 3, 2024 · 8df386c · 8df386c
1 parent 318f2e8
commit 8df386c
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 133 deletions.
diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
@@ -1,22 +1,16 @@
-import { createIntersectionObserver } from '../../utils/utils.js';
-import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
+import { turnAnchorIntoVideo } from '../../utils/decorate.js';
 
-const ROOT_MARGIN = 1000;
-
-const loadAdobeTv = (a) => {
+export default function init(a) {
+  a.classList.add('hide-video');
   const bgBlocks = ['aside', 'marquee', 'hero-marquee'];
   if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
     a.classList.add('hide');
-    const { href, hash, dataset } = a;
-    const attrs = getVideoAttrs(hash || 'autoplay', dataset);
-    const video = `<video ${attrs}>
-          <source src="${href}" type="video/mp4" />
-        </video>`;
     if (!a.parentNode) return;
-    a.insertAdjacentHTML('afterend', video);
-    const videoElem = document.body.querySelector(`source[src="${href}"]`)?.parentElement;
-    applyHoverPlay(videoElem);
-    a.remove();
+    turnAnchorIntoVideo({
+      src: a.href,
+      anchorTag: a,
+      hash: a.hash || 'autoplay',
+    });
   } else {
     const embed = `<div class="milo-video">
       <iframe src="${a.href}" class="adobetv" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no" allow="encrypted-media" title="Adobe Video Publishing Cloud Player" loading="lazy">
@@ -25,17 +19,4 @@ const loadAdobeTv = (a) => {
     a.insertAdjacentHTML('afterend', embed);
     a.remove();
   }
-};
-
-export default function init(a) {
-  a.classList.add('hide-video');
-  if (a.textContent.includes('no-lazy')) {
-    loadAdobeTv(a);
-  } else {
-    createIntersectionObserver({
-      el: a,
-      options: { rootMargin: `${ROOT_MARGIN}px` },
-      callback: loadAdobeTv,
-    });
-  }
 }
diff --git a/libs/blocks/figure/figure.js b/libs/blocks/figure/figure.js
@@ -1,4 +1,5 @@
-import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
+import { applyHoverPlay, turnAnchorIntoVideo } from '../../utils/decorate.js';
+import { createTag } from '../../utils/utils.js';
 
 function buildCaption(pEl) {
   const figCaptionEl = document.createElement('figcaption');
@@ -15,23 +16,21 @@ function htmlToElement(html) {
 }
 
 function decorateVideo(clone, figEl) {
-  let video = clone.querySelector('video');
-  const videoLink = clone.querySelector('a[href*=".mp4"]');
-  if (videoLink) {
-    const { href, hash, dataset } = videoLink;
-    const attrs = getVideoAttrs(hash, dataset);
-    const videoElem = `<video ${attrs}>
-      <source src="${href}" type="video/mp4" />
-    </video>`;
-
-    videoLink.insertAdjacentHTML('afterend', videoElem);
-    videoLink.remove();
-    video = clone.querySelector('video');
-  }
-  if (video) {
-    video.removeAttribute('data-mouseevent');
-    applyHoverPlay(video);
-    figEl.prepend(video);
+  const videoTag = clone.querySelector('video');
+  const anchorTag = clone.querySelector('a[href*=".mp4"]');
+  if (anchorTag) turnAnchorIntoVideo({ src: anchorTag.href, anchorTag });
+  if (videoTag) {
+    videoTag.removeAttribute('data-mouseevent');
+    if (videoTag.dataset?.videoSource) {
+      videoTag.appendChild(
+        createTag('source', {
+          src: videoTag.dataset?.videoSource,
+          type: 'video/mp4',
+        }),
+      );
+    }
+    applyHoverPlay(videoTag);
+    figEl.prepend(videoTag);
   }
 }
 

diff --git a/libs/blocks/video/video.js b/libs/blocks/video/video.js
@@ -1,10 +1,10 @@
-import { createIntersectionObserver, getConfig } from '../../utils/utils.js';
-import { applyHoverPlay, getVideoAttrs, applyInViewPortPlay } from '../../utils/decorate.js';
+import { getConfig } from '../../utils/utils.js';
+import { turnAnchorIntoVideo } from '../../utils/decorate.js';
 
-const ROOT_MARGIN = 1000;
-
-const loadVideo = (a) => {
-  const { pathname, hash, dataset } = a;
+export default function init(a) {
+  a.classList.add('hide-video');
+  if (!a.parentNode) return;
+  const { pathname } = a;
   let videoPath = `.${pathname}`;
   if (pathname.match('media_.*.mp4')) {
     const { codeRoot } = getConfig();
@@ -14,28 +14,8 @@ const loadVideo = (a) => {
     const mediaFilename = pathname.split('/').pop();
     videoPath = `${root}${mediaFilename}`;
   }
-
-  const attrs = getVideoAttrs(hash, dataset);
-  const video = `<video ${attrs}>
-        <source src="${videoPath}" type="video/mp4" />
-      </video>`;
-  if (!a.parentNode) return;
-  a.insertAdjacentHTML('afterend', video);
-  const videoElem = document.body.querySelector(`source[src="${videoPath}"]`)?.parentElement;
-  applyHoverPlay(videoElem);
-  applyInViewPortPlay(videoElem);
-  a.remove();
-};
-
-export default function init(a) {
-  a.classList.add('hide-video');
-  if (a.textContent.includes('no-lazy')) {
-    loadVideo(a);
-  } else {
-    createIntersectionObserver({
-      el: a,
-      options: { rootMargin: `${ROOT_MARGIN}px` },
-      callback: loadVideo,
-    });
-  }
+  turnAnchorIntoVideo({
+    src: videoPath,
+    anchorTag: a,
+  });
 }
diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js
@@ -1,4 +1,4 @@
-import { createTag } from './utils.js';
+import { createTag, createIntersectionObserver } from './utils.js';
 
 export function decorateButtons(el, size) {
   const buttons = el.querySelectorAll('em a, strong a, p > a strong');
@@ -112,8 +112,6 @@ export async function decorateBlockBg(block, node, { useHandleFocalpoint = false
     const allVP = [['mobile-only'], ['tablet-only'], ['desktop-only']];
     const viewports = childCount === 2 ? binaryVP : allVP;
     [...node.children].forEach((child, i) => {
-      const videoLink = child.querySelector('a[href*=".mp4"]');
-      if (videoLink && !videoLink.hash) videoLink.hash = 'autoplay';
       if (childCount > 1) child.classList.add(...viewports[i]);
       const pic = child.querySelector('picture');
       if (useHandleFocalpoint && pic
@@ -199,7 +197,7 @@ export function getImgSrc(pic) {
   return source?.srcset ? `poster='${source.srcset}'` : '';
 }
 
-export function getVideoAttrs(hash, dataset) {
+function getVideoAttrs(hash, dataset) {
   const isAutoplay = hash?.includes('autoplay');
   const isAutoplayOnce = hash?.includes('autoplay1');
   const playOnHover = hash?.includes('hoverplay');
@@ -257,7 +255,7 @@ export function handleObjectFit(bgRow) {
   });
 }
 
-export function getVideoIntersectionObserver() {
+function getVideoIntersectionObserver() {
   if (!window?.videoIntersectionObs) {
     window.videoIntersectionObs = new window.IntersectionObserver((entries) => {
       entries.forEach((entry) => {
@@ -278,7 +276,7 @@ export function getVideoIntersectionObserver() {
   return window.videoIntersectionObs;
 }
 
-export function applyInViewPortPlay(video) {
+function applyInViewPortPlay(video) {
   if (!video) return;
   if (video.hasAttribute('data-play-viewport')) {
     const observer = getVideoIntersectionObserver();
@@ -308,3 +306,21 @@ export function decorateMultiViewport(el) {
   }
   return foreground;
 }
+
+export function turnAnchorIntoVideo({ src, anchorTag, hash }) {
+  const { dataset, parentElement } = anchorTag;
+  const attrs = getVideoAttrs(hash || anchorTag.hash, dataset);
+  const video = `<video ${attrs} data-video-source=${src}></video>`;
+  anchorTag.insertAdjacentHTML('afterend', video);
+  const videoEl = parentElement.querySelector('video');
+  createIntersectionObserver({
+    el: parentElement,
+    options: { rootMargin: '1000px' },
+    callback: () => {
+      videoEl?.appendChild(createTag('source', { src, type: 'video/mp4' }));
+    },
+  });
+  applyHoverPlay(videoEl);
+  applyInViewPortPlay(videoEl);
+  anchorTag.remove();
+}
diff --git a/test/blocks/adobetv/adobetv.test.js b/test/blocks/adobetv/adobetv.test.js
@@ -6,17 +6,6 @@ document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/adobetv/adobetv.js');
 
 describe('adobetv autoblock', () => {
-  it('decorates no-lazy video', async () => {
-    const block = document.querySelector('.video.no-lazy');
-    const a = block.querySelector('a');
-    a.textContent = 'no-lazy';
-    block.append(a);
-
-    init(a);
-    const video = await waitForElement('.video.no-lazy iframe');
-    expect(video).to.exist;
-  });
-
   it('creates video block', async () => {
     const wrapper = document.body.querySelector('.adobe-tv');
     const a = wrapper.querySelector(':scope > a');

diff --git a/test/blocks/adobetv/mocks/body.html b/test/blocks/adobetv/mocks/body.html
@@ -1,5 +1,5 @@
 <main>
-  <div class="video no-lazy">
+  <div class="video">
     <a href="https://video.tv.adobe.com/v/3410934t1">
       https://video.tv.adobe.com/v/3410934t1
     </a>

diff --git a/test/blocks/marquee/marquee.test.js b/test/blocks/marquee/marquee.test.js
@@ -1,8 +1,8 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
-import { waitForElement } from '../../helpers/waitfor.js';
-import { setConfig } from '../../../libs/utils/utils.js';
+import { waitFor, waitForElement } from '../../helpers/waitfor.js';
+import { setConfig, loadStyle } from '../../../libs/utils/utils.js';
 import { loadMnemonicList } from '../../../libs/blocks/marquee/marquee.js';
 
 const locales = { '': { ietf: 'en-US', tk: 'hah7vzn.css' } };
@@ -16,6 +16,15 @@ const video = await readFile({ path: './mocks/video.html' });
 const multipleIcons = await readFile({ path: './mocks/multiple-icons.html' });
 
 describe('marquee', () => {
+  before(async () => {
+    await new Promise((resolve) => {
+      loadStyle('../../../../libs/styles/styles.css', resolve);
+    });
+    await new Promise((resolve) => {
+      loadStyle('../../../../libs/blocks/marquee/marquee.css', resolve);
+    });
+  });
+
   const marquees = document.querySelectorAll('.marquee');
   marquees.forEach((marquee) => {
     init(marquee);
@@ -69,7 +78,9 @@ describe('marquee', () => {
       init(marquee);
       videoBLock(document.querySelector('#single-background a[href*=".mp4"]'));
       const videoEl = await waitForElement('#single-background .background video');
-      expect(videoEl).to.exist;
+      const intersectionObserverAddsSource = () => videoEl.querySelector('source');
+      await waitFor(intersectionObserverAddsSource);
+      expect(videoEl.querySelector('source')).to.exist;
       document.getElementById('single-background').remove();
     });
 
@@ -78,7 +89,9 @@ describe('marquee', () => {
       init(marquee);
       document.querySelectorAll('#multiple-background a[href*=".mp4"]').forEach((videoLink) => videoBLock(videoLink));
       await waitForElement('#multiple-background .background video');
-      expect(marquee.querySelectorAll('.background video').length).to.equal(1);
+      const intersectionObserverAddsSource = () => document.querySelector('.background video source');
+      await waitFor(intersectionObserverAddsSource);
+      expect(marquee.querySelectorAll('.background video source').length).to.equal(1);
       document.getElementById('multiple-background').remove();
     });
 

diff --git a/test/blocks/video/mocks/body.html b/test/blocks/video/mocks/body.html
@@ -4,7 +4,7 @@
   }
 </style>
 <main>
-  <div class="video no-lazy">
+  <div class="video">
     <a href="https://main--blog--adobecom.hlx.page/media_17927691d22fe4e1bd058e94762a224fdc57ebb7b.mp4">
       https://main--blog--adobecom.hlx.page/media_17927691d22fe4e1bd058e94762a224fdc57ebb7b.mp4
     </a>