Merge pull request #131 from adobe/stage

Deploy Stage to prod

hlx_statics/blocks/carousel/carousel.js

@@ -4,6 +4,7 @@ import { createTag, decorateButtons, removeEmptyPTags, applyWidthOverride, apply
  * @param {Element} block The carousel block element
  */
 export default async function decorate(block) {
+  block.setAttribute('daa-lh', carousel);
   removeEmptyPTags(block);
   decorateButtons(block);
 

hlx_statics/blocks/hero/hero.js

@@ -27,7 +27,14 @@ export default async function decorate(block) {
   decorateLightOrDark(block, true);
   // H1 decoration
   block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => {
-    h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL', 'spectrum-Heading--serif');
+    const fontFamily = block?.parentElement?.parentElement?.getAttribute('data-font-family');
+    if (fontFamily) {
+      h.style.fontFamily = fontFamily;
+      h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL');
+    } else {
+      h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL', 'spectrum-Heading--serif');
+    }
+
   });
 
   block.querySelectorAll('picture source').forEach((picture) => {

hlx_statics/blocks/mini-resource-card/mini-resource-card.js

@@ -41,6 +41,7 @@ function getMiniResourceCard(linkHref, heading, text) {
  * @param {Element} block The mini-resource-card block element
  */
 export default async function decorate(block) {
+    block.setAttribute('daa-lh', 'mini resource card');
     const grid_div = createTag('div', {class: 'card-container'});
     block.querySelectorAll('.mini-resource-card > div').forEach((resource) => {
         removeEmptyPTags(resource);

hlx_statics/blocks/site-hero/site-hero.js

@@ -17,7 +17,13 @@ export default async function decorate(block) {
 
   block.classList.add('spectrum--dark');
   block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => {
-    h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL', 'spectrum-Heading--serif');
+    const fontFamily = block?.parentElement?.parentElement?.getAttribute('data-font-family');
+    if (fontFamily) {
+      h.style.fontFamily = fontFamily;
+      h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL');
+    } else {
+      h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL', 'spectrum-Heading--serif');
+    }
     h.parentElement.classList.add('site-hero-content');
     h.parentElement.append(button_div);
   });

hlx_statics/blocks/video-carousel/video-carousel.css

@@ -90,6 +90,10 @@ main div.video-carousel .video-slide {
     flex: 1 0 100%;
 }
 
+main div.video-carousel .embed {
+    margin-top: 0px;
+}
+
 main div.video-carousel .video-slide-arrow {
     margin: auto;
     background-color: transparent; 

hlx_statics/blocks/video-carousel/video-carousel.js

@@ -11,6 +11,7 @@ import {
  * @param {Element} block The carousel block element
  */
 export default async function decorate(block) {
+  block.setAttribute('daa-lh', 'vidoe-carousel');
   removeEmptyPTags(block);
   decorateButtons(block);
 
@@ -38,7 +39,7 @@ export default async function decorate(block) {
   //load the video link.
   const a = block.querySelectorAll('a');
   for (let i=0; i < a.length; i++) {
-    loadEmbed(block, a[i]);
+    loadVideoURL(block, a[i]);
   }
 
   block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => {
@@ -153,24 +154,53 @@ export default async function decorate(block) {
     });
   });
 
-  function loadEmbed(block,a) {
+  // load the video url and append to the video element.
+  function loadVideoURL(block,a) {
     block.className = 'video-carousel';
     const link = a.href;
     const url = new URL(link);
-    a.insertAdjacentHTML('afterend', loadVideo(url));
+    a.insertAdjacentHTML('afterend', loadUrl(url));
     const videoElement = createTag('div', {class: 'video-element'});
     videoElement.innerHTML = a.parentElement.innerHTML;
     a.parentElement.parentElement.append(videoElement);
     a.parentElement.remove();
     videoElement.querySelector('a').remove();
   };
 
-  function loadVideo (url) {
-    const html = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
-      <video loading="lazy" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" autoplay="true" preload="metadata" playsinline muted>
-        <source src="${url}" />
-      </video>
-    </div>`;
+  function loadUrl (url) {
+    let html;
+    const embed = url.pathname;
+    // Check if the URL is a youtube link.
+    const usp = new URLSearchParams(url.search);
+    let vid = encodeURIComponent(usp.get('v'));
+    const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/(watch\?v=|embed\/)|youtu\.be\/)/;
+    if (url.origin.includes('youtu.be')) {
+      vid = url.pathname.split('/')[1];
+    }
+    // allow autoplay to be specified in the section metadata.
+    const autoPlay = block?.parentElement?.parentElement?.getAttribute('data-autoplay');
+
+    if (youtubeRegex.test(url)) {
+      let dataSource = "https://www.youtube.com";
+      dataSource += vid ? "/embed/" + vid + "?rel=0&v=" + vid : embed;
+      // if autoplay is true, append autoplay to the datasource.
+      dataSource = autoPlay === "true" ? dataSource + "&autoplay=1&mute=1" : dataSource;
+      // Render the youtube link through iframe within right container of one of the video carousel slide.
+      html = `<div style="left: 0; width: 560px; height: 320px; position: relative; ">
+      <img loading="lazy" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
+        src="https://i.ytimg.com/vi_webp/${vid}/maxresdefault.webp">
+          <iframe data-src="${dataSource}" allow="autoplay; encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" title="Content from Youtube" loading="lazy"></iframe>
+      </img>
+     </div>`;
+    } else {
+      // Render the url link through video tag within right container of one of the video carousel slide.
+      // if autoplay is true, add autoplay attribute to the video tag.
+      html = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
+        <video loading="lazy" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" ${autoPlay === 'true' ? `autoplay="true"` : ""} preload="metadata" playsinline muted>
+          <source src="${url}" />
+        </video>
+      </div>`;
+    }
     return html;
   };