Merge branch 'stage' into marqpreload

creativecloud/blocks/interactive-metadata/interactive-metadata.css

@@ -1,4 +1,3 @@
-
 :root {
   --prompt-input-fill: #262626;
   --prompt-btn-fill: #323232;
@@ -12,12 +11,14 @@
   --prompt-input-fill-light: #D5D5D5;
 }
 
-.interactive-enabled .foreground .image > p:first-child {
+.interactive-enabled .foreground .image > p:first-child,
+.interactive-enabled .foreground .asset > p:first-child  {
   display: none;
   margin: 0;
 }
 
-.interactive-enabled .foreground.container .image {
+.interactive-enabled .foreground.container .image,
+.interactive-enabled .foreground.container .asset  {
   flex-direction: column;
 }
 
@@ -44,7 +45,8 @@
   aspect-ratio: 1;
 }
 
-.interactive-enabled .foreground .image .enticement-container {
+.interactive-enabled .foreground .image .enticement-container,
+.interactive-enabled .foreground .asset .enticement-container {
   display: block;
   height: 28px;
   font-weight: bold;
@@ -53,18 +55,21 @@
   margin: 0 0 16px;
 }
 
-.interactive-enabled.mobile-hide-enticement .foreground .image .enticement-container {
+.interactive-enabled.mobile-hide-enticement .foreground .image .enticement-container,
+.interactive-enabled.mobile-hide-enticement .foreground .asset .enticement-container {
   display: none;
 }
 
-.interactive-enabled .foreground .image .enticement-message {
+.interactive-enabled .foreground .image .enticement-message,
+.interactive-enabled .foreground .asset .enticement-message {
   display: block;
   max-width: 30ch;
   font-size: 28px;
   line-height: 35px;
 }
 
-.interactive-enabled .foreground .image .enticement-svg {
+.interactive-enabled .foreground .image .enticement-svg,
+.interactive-enabled .foreground .asset .enticement-svg {
   display: block;
   position: relative;
   width: 49px;
@@ -76,13 +81,15 @@
   margin: 0;
 }
 
-[dir="rtl"] .interactive-enabled .foreground .image .enticement-svg {
+[dir="rtl"] .interactive-enabled .foreground .image .enticement-svg,
+[dir="rtl"] .interactive-enabled .foreground .asset .enticement-svg {
   left: 30px;
   right: auto;
   transform: scaleX(-1);
 }
 
-.interactive-enabled .foreground .image > p > img[src*='svg'] {
+.interactive-enabled .foreground .image > p > img[src*='svg'],
+.interactive-enabled .foreground .asset > p > img[src*='svg'] {
   display: block;
 }
 
@@ -269,11 +276,13 @@
   .interactive-enabled.mobile-heading-top  h4,
   .interactive-enabled.mobile-heading-top  h5,
   .interactive-enabled.mobile-heading-top  h6,
-  .interactive-enabled .foreground .image .mobile-heading-top {
+  .interactive-enabled .foreground .image .mobile-heading-top,
+  .interactive-enabled .foreground .asset .mobile-heading-top {
     display: none;
   }
 
-  .interactive-enabled.mobile-heading-top .foreground .image .mobile-heading-top {
+  .interactive-enabled.mobile-heading-top .foreground .image .mobile-heading-top,
+  .interactive-enabled.mobile-heading-top .foreground .asset .mobile-heading-top {
     display: block;
     margin-bottom: 24px;
     font-size: 36px;
@@ -283,15 +292,18 @@
 }
 
 @media screen and (min-width: 600px) {
-  .interactive-enabled .foreground .image .mobile-heading-top {
+  .interactive-enabled .foreground .image .mobile-heading-top,
+  .interactive-enabled .foreground .asset .mobile-heading-top {
     display: none;
   }
 
-  .interactive-enabled .foreground.container .image > p:first-child {
+  .interactive-enabled .foreground.container .image > p:first-child,
+  .interactive-enabled .foreground.container .asset > p:first-child {
     display: none;
   }
 
-  .interactive-enabled .foreground .image {
+  .interactive-enabled .foreground .image,
+  .interactive-enabled .foreground .asset {
     position: relative;
     border-radius: 16px;
     margin-inline-start: 0;
@@ -310,7 +322,10 @@
 
   .interactive-enabled .foreground.container .image .interactive-holder > picture img,
   .interactive-enabled .foreground.container .image .interactive-holder > picture,
-  .interactive-enabled .foreground.container .image .interactive-holder > video {
+  .interactive-enabled .foreground.container .image .interactive-holder > video,
+  .interactive-enabled .foreground.container .asset .interactive-holder > picture img,
+  .interactive-enabled .foreground.container .asset .interactive-holder > picture,
+  .interactive-enabled .foreground.container .asset .interactive-holder > video {
     border-radius: 16px;
   }
 
@@ -324,7 +339,8 @@
     background: none;
   }
 
-  .interactive-enabled .foreground.container .image .enticement-container {
+  .interactive-enabled .foreground.container .image .enticement-container,
+  .interactive-enabled .foreground.container .asset .enticement-container {
     display: block;
     position: relative;
     width: var(--grid-container-width);
@@ -333,12 +349,14 @@
     margin: 0 0 24px;
   }
 
-  [dir="rtl"] .interactive-enabled .foreground.container .image .enticement-container {
+  [dir="rtl"] .interactive-enabled .foreground.container .image .enticement-container,
+  [dir="rtl"] .interactive-enabled .foreground.container .asset .enticement-container {
     right: auto;
     left: 30px;
   }
 
-  [dir="rtl"] .interactive-enabled .foreground.container .image .enticement-container .enticement-svg {
+  [dir="rtl"] .interactive-enabled .foreground.container .image .enticement-container .enticement-svg,
+  [dir="rtl"] .interactive-enabled .foreground.container .asset .enticement-container .enticement-svg {
     right: auto;
     left: 30px;
     transform: scaleX(-1);
@@ -381,7 +399,7 @@
   }
 
   .aside.interactive-enabled .foreground.container div.image,
-  .marquee.interactive-enabled .foreground.container div.image {
+  .marquee.interactive-enabled .foreground.container div.asset {
     max-width: 570px;
     margin-inline-start: 60px;
   }
@@ -402,7 +420,8 @@
     margin: 36px 0 0 60px;
   }
 
-  .interactive-enabled .foreground .image .enticement-svg {
+  .interactive-enabled .foreground .image .enticement-svg,
+  .interactive-enabled .foreground .asset .enticement-svg {
     display: flex;
     flex-direction: row-reverse;
     justify-content: start;
@@ -434,5 +453,3 @@
     flex-direction: row-reverse;
   }
 }
-
-

creativecloud/blocks/interactive-metadata/interactive-metadata.js

@@ -6,7 +6,7 @@ export function getImgSrc(pic) {
   let source = '';
   if (viewport === 'mobile') source = pic.querySelector('source[type="image/webp"]:not([media])');
   else source = pic.querySelector('source[type="image/webp"][media]');
-  return source.srcset;
+  return source?.srcset;
 }
 
 function getNextStepIndex(stepInfo) {
@@ -93,15 +93,18 @@ async function createDisplayImg(target, replaceEl, src, alt) {
   target.classList.remove('show-video');
 }
 
-async function createDisplayVideo(target, video, src) {
+async function createDisplayVideo(target, video, src, poster = '') {
   const { pathname, hash } = new URL(src);
   const attrs = { src: pathname, playsinline: '', autoplay: '', muted: '', type: 'video/mp4' };
-  if (hash?.includes('autoplay1')) video.removeAttribute('loop');
+  if (poster !== '') attrs.poster = poster;
+  if (hash?.includes('autoplay1')) video?.removeAttribute('loop');
   else attrs.loop = '';
-  Object.keys(attrs).forEach((attr) => video.setAttribute(attr, attrs[attr]));
+  Object.keys(attrs).forEach((attr) => video?.setAttribute(attr, attrs[attr]));
   try {
-    video.load();
-    await video.play();
+    video?.load();
+    video.oncanplaythrough = async () => {
+      await video.play();
+    };
   } catch (err) { return; }
   target.classList.add('show-video');
   target.classList.remove('show-image');
@@ -128,7 +131,8 @@ export async function handleImageTransition(stepInfo, transitionCfg = {}) {
     await createDisplayImg(stepInfo.target, trgtPic, picSrc, displayPics[imgIdx].alt);
   } else if (displayVideos.length) {
     const vidIdx = (displayPath < displayVideos.length) ? displayPath : 0;
-    await createDisplayVideo(stepInfo.target, trgtVideo, displayVideos[vidIdx].href);
+    const posterImg = displayVideos[vidIdx].getAttribute('data-video-poster') ? displayVideos[vidIdx].getAttribute('data-video-poster') : '';
+    await createDisplayVideo(stepInfo.target, trgtVideo, displayVideos[vidIdx].href, posterImg);
   }
 }
 
@@ -201,18 +205,28 @@ function decorateMobileHeading(intEnb) {
   if (!h) return;
   const htxt = h.textContent;
   const hTxtTop = createTag('div', { class: 'mobile-heading-top' }, htxt);
-  intEnb.querySelector('.image').prepend(hTxtTop);
+  intEnb.querySelector('.image, .asset').prepend(hTxtTop);
 }
 
 function createInteractiveArea(el, pic) {
-  const iArea = createTag('div', { class: 'interactive-holder show-image' });
+  const iArea = createTag('div', { class: 'interactive-holder' });
   const newPic = pic.cloneNode(true);
   const p = createTag('p', {}, newPic);
   el.querySelector(':scope > div > div').prepend(p);
-  pic.querySelector('img').src = getImgSrc(pic);
+  const imgElem = pic.querySelector('img');
+  let assetElem = '';
+  if (imgElem) {
+    imgElem.src = getImgSrc(pic);
+    assetElem = createTag('video');
+    iArea.classList.add('show-image');
+  } else {
+    assetElem = createTag('picture');
+    const img = createTag('img');
+    assetElem.append(img);
+    iArea.classList.add('show-video');
+  }
   [...pic.querySelectorAll('source')].forEach((s) => s.remove());
-  const video = createTag('video');
-  iArea.append(pic, video);
+  iArea.append(pic, assetElem);
   const clsLayer = createTag('div', { class: 'layer layer-placeholder show-layer' });
   iArea.append(clsLayer);
   if (el.classList.contains('light')) iArea.classList.add('light');
@@ -228,7 +242,7 @@ async function getTargetArea(el) {
     intEnb.classList.add('interactive-enabled');
     await intEnbReendered(intEnb);
   } catch (err) { return null; }
-  const assets = intEnb.querySelectorAll('.asset picture, .image picture');
+  const assets = intEnb.querySelectorAll('.asset picture, .image picture, .asset a.video, .image a.video');
   const container = assets[assets.length - 1].closest('p');
   const iArea = createInteractiveArea(el, assets[assets.length - 1]);
   const assetArea = intEnb.querySelector('.asset, .image');
@@ -260,6 +274,7 @@ function getWorkFlowInformation(el) {
     'workflow-generate-select': ['generate', 'selector-tray', 'start-over'],
     'workflow-generate-selector': ['generate', 'selector-tray', 'generate', 'start-over'],
     'workflow-generate-triple-selector': ['generate', 'selector-tray', 'generate', 'selector-tray', 'generate', 'selector-tray', 'start-over'],
+    'workflow-startover': ['start-over', 'start-over'],
   };
   const wfNames = Object.keys(intWorkFlowConfig);
   [...el.classList].forEach((cn) => { if (cn.match('workflow-')) wfName = cn; });

creativecloud/scripts/scripts.js

@@ -124,7 +124,6 @@ const locales = {
 };
 
 const stageDomainsMap = {
-  'www.adobe.com': 'www.stage.adobe.com',
   'business.adobe.com': 'business.stage.adobe.com',
   'helpx.adobe.com': 'helpx.stage.adobe.com',
   'blog.adobe.com': 'blog.stage.adobe.com',

creativecloud/scripts/utils.js

@@ -97,7 +97,7 @@ function getDecorateAreaFn() {
         import(`${getConfig().codeRoot}/deps/interactive-marquee-changebg/changeBgMarquee.js`);
         break;
       }
-      case firstBlock?.classList.contains('marquee'): {
+      case firstBlock?.classList.contains('marquee') || firstBlock?.classList.contains('hero-marquee'): {
         // Load image eagerly for specific breakpoint
         const viewport = defineDeviceByScreenSize();
         const bgImages = firstBlock.querySelectorAll('div').length > 1 ? firstBlock.querySelector('div') : null;