Use local videojs scripts

.eslintignore

@@ -1 +1,2 @@
-helix-importer-ui
+helix-importer-ui
+blocks/video/videojs

blocks/video/video.js

@@ -1,9 +1,8 @@
 import { decorateIcons, loadScript, loadCSS } from '../../scripts/aem.js';
 
-const VIDEO_JS_SCRIPT = 'https://vjs.zencdn.net/8.3.0/video.min.js';
-const VIDEO_JS_CSS = 'https://vjs.zencdn.net/8.3.0/video-js.min.css';
-const SCRIPT_LOAD_DELAY = 3000;
-let videoJsScriptPromise;
+const VIDEO_JS_SCRIPT = '/blocks/video/videojs/video.min.js';
+const VIDEO_JS_CSS = '/blocks/video/videojs/video-js.min.css';
+const VIDEO_JS_LOAD_EVENT = 'videojs-loaded';
 
 function getDeviceSpecificVideoUrl(videoUrl) {
   const { userAgent } = navigator;
@@ -37,7 +36,7 @@ function parseConfig(block) {
 
   if (block.classList.contains('inline')) {
     const cards = [...block.children].map((child) => {
-      const posterImage = child.querySelector(' picture');
+      const posterImage = child.querySelector('picture');
       const videoUrl = child.querySelector('div:first-child a').href;
       const title = child.querySelector('h1, h2, h3')?.textContent;
       const description = child.querySelector('div:nth-child(2) > p')?.textContent;
@@ -67,18 +66,56 @@ function parseConfig(block) {
   };
 }
 
-async function loadVideoJs() {
-  if (videoJsScriptPromise) {
-    await videoJsScriptPromise;
-    return;
-  }
+async function waitForVideoJs() {
+  return new Promise((resolve) => {
+    const scriptTag = document.querySelector(`head > script[src="${VIDEO_JS_SCRIPT}"]`);
+    const cssLink = document.querySelector(`head > link[href="${VIDEO_JS_CSS}"]`);
+    const isJsLoaded = scriptTag && scriptTag.dataset.loaded;
+    const isCSSLoaded = cssLink && cssLink.dataset.loaded;
+    if (!isJsLoaded || !isCSSLoaded) {
+      const successHandler = () => {
+        document.removeEventListener(VIDEO_JS_LOAD_EVENT, successHandler);
+        resolve();
+      };
+
+      document.addEventListener(VIDEO_JS_LOAD_EVENT, successHandler);
+      return;
+    }
+
+    resolve();
+  });
+}
+
+function loadVideoJs() {
+  const loadScripts = async () => {
+    let scriptTag = document.querySelector(`head > script[src="${VIDEO_JS_SCRIPT}"]`);
+    let cssLink = document.querySelector(`head > link[href="${VIDEO_JS_CSS}"]`);
+    if (scriptTag && cssLink) {
+      return;
+    }
+
+    await Promise.all([
+      loadCSS(VIDEO_JS_CSS),
+      loadScript(VIDEO_JS_SCRIPT),
+    ]);
 
-  videoJsScriptPromise = Promise.all([
-    loadCSS(VIDEO_JS_CSS),
-    loadScript(VIDEO_JS_SCRIPT),
-  ]);
+    scriptTag = document.querySelector(`head > script[src="${VIDEO_JS_SCRIPT}"]`);
+    cssLink = document.querySelector(`head > link[href="${VIDEO_JS_CSS}"]`);
 
-  await videoJsScriptPromise;
+    scriptTag.dataset.loaded = true;
+    cssLink.dataset.loaded = true;
+    document.dispatchEvent(new Event(VIDEO_JS_LOAD_EVENT));
+  };
+
+  if (window.DELAYED_PHASE) {
+    loadScripts();
+  } else {
+    const delayedPhaseHandler = async () => {
+      document.removeEventListener('delayed-phase', delayedPhaseHandler);
+      await loadScripts();
+    };
+    document.addEventListener('delayed-phase', delayedPhaseHandler);
+  }
 }
 
 function createPlayButton(container, player) {
@@ -218,28 +255,18 @@ function setupPlayer(url, videoContainer, config) {
 }
 
 async function decorateVideoPlayer(url, videoContainer, config) {
-  async function loadPlayer() {
-    await loadVideoJs();
-
-    const posterImage = videoContainer.querySelector('picture');
-    const player = setupPlayer(url, videoContainer, config);
-    player.on('loadeddata', () => {
-      if (posterImage) {
-        posterImage.style.display = 'none';
-      }
-    });
-  }
-
   if (config.posterImage) {
     videoContainer.append(config.posterImage);
-
-    // Defer loading video.js to avoid blocking the main thread
-    setTimeout(async () => {
-      await loadPlayer();
-    }, SCRIPT_LOAD_DELAY);
-  } else {
-    await loadPlayer();
   }
+
+  await waitForVideoJs();
+  const player = setupPlayer(url, videoContainer, config);
+  player.on('loadeddata', () => {
+    const posterImage = videoContainer.querySelector('picture');
+    if (posterImage) {
+      posterImage.style.display = 'none';
+    }
+  });
 }
 
 async function decorateVideoCard(container, config) {
@@ -273,7 +300,7 @@ async function decorateVideoCard(container, config) {
 
   container.append(article);
 
-  await decorateVideoPlayer(config.videoUrl, videoContainer, {
+  decorateVideoPlayer(config.videoUrl, videoContainer, {
     autoplay: config.isAutoPlay,
     hasCustomPlayButton: true,
     fill: true,
@@ -312,7 +339,7 @@ async function decorateHeroBlock(block, config) {
   block.innerHTML = '';
   block.append(container);
 
-  await decorateVideoPlayer(config.videoUrl, container, {
+  decorateVideoPlayer(config.videoUrl, container, {
     autoplay: config.isAutoPlay,
     hasCustomPlayButton: true,
     fill: true,
@@ -363,7 +390,7 @@ function handleEscapeKey(event) {
 }
 
 async function openModal(config) {
-  await loadVideoJs();
+  await waitForVideoJs();
 
   const dialog = document.querySelector('.video-modal-dialog');
   const container = dialog.querySelector('.video-container');
@@ -452,6 +479,7 @@ async function decorateVideoModal(block, config) {
 }
 
 export default async function decorate(block) {
+  loadVideoJs();
   const config = parseConfig(block);
 
   if (config.type === 'hero') {

scripts/delayed.js

@@ -5,3 +5,5 @@ import { sampleRUM } from './aem.js';
 sampleRUM('cwv');
 
 // add more delayed functionality here
+document.dispatchEvent(new Event('delayed-phase'));
+Window.DELAYED_PHASE = true;