[Release] Stage to Main (adobecom#2990)

mokimo · Oct 3, 2024 · ee9d4a1 · ee9d4a1
2 parents 668448b + 9b05053
commit ee9d4a1
Show file tree

Hide file tree

Showing 60 changed files with 2,935 additions and 1,662 deletions.
diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js
@@ -1,22 +1,15 @@
-import { createIntersectionObserver } from '../../utils/utils.js';
-import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
+import { decorateAnchorVideo } 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();
+    decorateAnchorVideo({
+      src: a.href,
+      anchorTag: a,
+    });
   } 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 +18,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, decorateAnchorVideo } from '../../utils/decorate.js';
+import { createTag } from '../../utils/utils.js';
 
 function buildCaption(pEl) {
   const figCaptionEl = document.createElement('figcaption');
@@ -15,23 +16,22 @@ 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 && !anchorTag.hash) anchorTag.hash = '#autoplay';
+  if (anchorTag) decorateAnchorVideo({ 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/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js
@@ -90,6 +90,7 @@ export const CONFIG = {
                   error: (e) => lanaLog({ message: 'Profile Menu error', e, tags: 'errorType=error,module=universalnav' }),
                 },
               },
+              ...getConfig().unav?.profile?.config,
             },
           },
           callbacks: {
@@ -1083,7 +1084,7 @@ export default async function init(block) {
     content,
     block,
   });
-  gnav.init();
+  await gnav.init();
   block.setAttribute('daa-im', 'true');
   const mepMartech = mep?.martech || '';
   block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`);

diff --git a/libs/blocks/marquee/marquee.js b/libs/blocks/marquee/marquee.js
@@ -88,7 +88,7 @@ function decorateSplit(el, foreground, media) {
 
   let mediaCreditInner;
   const txtContent = media?.lastChild?.textContent?.trim();
-  if (txtContent?.match(/^http.*\.mp4/)) return;
+  if (txtContent?.match(/^http.*\.mp4/) || media?.lastChild?.tagName === 'VIDEO') return;
   if (txtContent) {
     mediaCreditInner = createTag('p', { class: 'body-s' }, txtContent);
   } else if (media.lastElementChild?.tagName !== 'PICTURE') {
@@ -99,7 +99,7 @@ function decorateSplit(el, foreground, media) {
     const mediaCredit = createTag('div', { class: 'media-credit container' }, mediaCreditInner);
     el.appendChild(mediaCredit);
     el.classList.add('has-credit');
-    media?.lastChild.remove();
+    media?.lastChild?.remove();
   }
 }
 

diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css
@@ -475,7 +475,7 @@ div[class*="-up"] .media .foreground > .media-row {
   }
 }
 
-.media.in-modal > .container.foreground > .media-row {
+.media.in-modal:not(.space-between) > .container.foreground > .media-row {
   display: grid;
   gap: 0;
 }
@@ -503,7 +503,7 @@ div[class*="-up"] .media .foreground > .media-row {
 }
 
 @media (orientation: landscape) {
-  .media.in-modal > .container.foreground > .media-row {
+  .media.in-modal:not(.space-between) > .container.foreground > .media-row {
     grid-template-columns: 1fr 1fr;
   }
 

diff --git a/libs/blocks/video/video.js b/libs/blocks/video/video.js
@@ -1,10 +1,13 @@
-import { createIntersectionObserver, getConfig } from '../../utils/utils.js';
-import { applyHoverPlay, getVideoAttrs, applyInViewPortPlay } from '../../utils/decorate.js';
+import { getConfig } from '../../utils/utils.js';
+import { decorateAnchorVideo } 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) {
+    a.remove();
+    return;
+  }
+  const { pathname } = a;
   let videoPath = `.${pathname}`;
   if (pathname.match('media_.*.mp4')) {
     const { codeRoot } = getConfig();
@@ -14,28 +17,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,
-    });
-  }
+  decorateAnchorVideo({
+    src: videoPath,
+    anchorTag: a,
+  });
 }
diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js