feat: video auto-block (#5)

Co-authored-by: Mark Daugherty <mdaugherty@adobe.com>

Author: markdaugherty

blocks/columns/columns.js

@@ -1,4 +1,4 @@
-export default function decorate(block) {
+export default async function decorate(block) {
   const cols = [...block.firstElementChild.children];
   block.classList.add(`columns-${cols.length}-cols`);
 

scripts/aem.js

@@ -586,18 +586,6 @@ function decorateBlocks(main) {
   main.querySelectorAll('div.section > div > div').forEach(decorateBlock);
 }
 
-/**
- * Loads a block named 'header' into header
- * @param {Element} header header element
- * @returns {Promise}
- */
-async function loadHeader(header) {
-  const headerBlock = buildBlock('header', '');
-  header.append(headerBlock);
-  decorateBlock(headerBlock);
-  return loadBlock(headerBlock);
-}
-
 /**
  * Loads a block named 'footer' into footer
  * @param footer footer element
@@ -677,7 +665,6 @@ export {
   loadBlock,
   loadCSS,
   loadFooter,
-  loadHeader,
   loadScript,
   loadSection,
   loadSections,

scripts/scripts.js

@@ -8,7 +8,7 @@ import {
   waitForFirstImage,
   loadSection,
   loadSections,
-  loadCSS,
+  loadCSS, decorateBlock, loadBlock,
 } from './aem.js';
 
 /**
@@ -30,6 +30,19 @@ function buildHeroBlock(main) {
   }
 }
 
+function buildVideoBlocks(main) {
+  const links = [...main.querySelectorAll('a')]
+    .filter((link) => link.href.includes('youtube') && !link.closest('.block'));
+
+  links.forEach((link) => {
+    const parent = link.parentElement;
+    const block = buildBlock('video', { elems: [link] });
+    parent.append(block);
+    decorateBlock(block);
+    loadBlock(block);
+  });
+}
+
 /**
  * load fonts.css and set a session storage flag
  */
@@ -67,6 +80,7 @@ function buildAutoBlocks(main) {
     }
 
     buildHeroBlock(main);
+    buildVideoBlocks(main);
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);