Add lazy playback support

plugins/aem-assets-plugin/blocks/video/video.css

@@ -21,7 +21,7 @@ main>.section.video-container {
   overflow: hidden;
   background-color: #53565a;
   width: 100%;
-  height: 2160px;
+  height: calc(100vh - var(--nav-height));
 }
 
 .video-hero .video-hero-content {

plugins/aem-assets-plugin/blocks/video/video.js

@@ -562,21 +562,23 @@ export default async function decorate(block) {
   // Check for progressive class
   const isProgressive = block.classList.contains('progressive');
 
-  // Only load VideoJS if not progressive
   if (!isProgressive) {
-    if (block.classList.contains('delayed')) {
-      if (typeof window.DELAYED_PHASE !== 'undefined') {
-        if (window.DELAYED_PHASE) {
-          loadVideoJs();
-        } else {
-          const delayedPhaseHandler = async () => {
-            document.removeEventListener('delayed-phase', delayedPhaseHandler);
-            await loadVideoJs();
-          };
-          document.addEventListener('delayed-phase', delayedPhaseHandler);
-        }
+    let vjsLoadingPhase;
+    if (block.classList.contains('lazy')) {
+      vjsLoadingPhase = 'lazy';
+    } else if (block.classList.contains('delayed')) {
+      vjsLoadingPhase = 'delayed';
+    }
+
+    if (vjsLoadingPhase) {
+      if (window.LOADING_PHASE === vjsLoadingPhase) {
+        loadVideoJs();
       } else {
-        setTimeout(loadVideoJs, 3000);
+        const vjsLoadingPhaseHandler = async () => {
+          document.removeEventListener(`${vjsLoadingPhase}-phase`, vjsLoadingPhaseHandler);
+          await loadVideoJs();
+        };
+        document.addEventListener(`${vjsLoadingPhase}-phase`, vjsLoadingPhaseHandler);
       }
     } else {
       await loadVideoJs();

scripts/delayed.js

@@ -1,3 +1,3 @@
 document.dispatchEvent(new Event('delayed-phase'));
-Window.DELAYED_PHASE = true;
+Window.LOADING_PHASE = 'delayed';
 // add delayed functionality here

scripts/scripts.js

@@ -194,9 +194,9 @@ async function loadEager(doc) {
     decorateMain(main);
     document.body.classList.add('appear');
     await loadSection(main.querySelector('.section'), waitForFirstImage);
-    // Artificial Delay eager loading of the page for 2 seconds - for demo only
+    // Artificial Delay eager loading of the page for 1 seconds - for demo only
     await new Promise((resolve) => {
-      setTimeout(resolve, 2000);
+      setTimeout(resolve, 1000);
     });
   }
 
@@ -217,6 +217,8 @@ async function loadEager(doc) {
  * @param {Element} doc The container element
  */
 async function loadLazy(doc) {
+  document.dispatchEvent(new Event('lazy-phase'));
+  window.LOADING_PHASE = 'lazy';
   const main = doc.querySelector('main');
   await loadSections(main);
 
@@ -237,7 +239,7 @@ async function loadLazy(doc) {
  */
 function loadDelayed() {
   // eslint-disable-next-line import/no-cycle
-  window.setTimeout(() => import('./delayed.js'), 3000);
+  window.setTimeout(() => import('./delayed.js'), 5000);
   // load anything that can be postponed to the latest here
 }