Huge updates

assets/scripts/gallery-init.js

@@ -3,7 +3,36 @@ document.addEventListener('DOMContentLoaded', () => {
     console.error('[gallery-init] BiggerPicture not found. Check script path.');
     return;
   }
+    const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'm4v', 'ogv'];
 
+    const isVideo = (href) => {
+	if (!href) return false;
+	href = href.toLowerCase();
+	return VIDEO_EXTENSIONS.some(ext => href.endsWith('.' + ext));
+    };
+
+    // 1b) Convert MP4 links into inline <video> players
+    // Convert video links into inline <video> players BUT keep the <a>
+    const videoLinks = document.querySelectorAll('a[href]');
+    videoLinks.forEach(a => {
+	const href = a.getAttribute("href");
+	if (!isVideo(href)) return;
+
+	const video = document.createElement("video");
+	video.controls = true;
+	video.preload = "metadata";
+	video.style.maxWidth = "100%";
+	video.style.borderRadius = "6px";
+
+	const source = document.createElement("source");
+	source.src = href;
+	source.type = "video/" + href.split('.').pop(); // guesses correct mime
+	video.appendChild(source);
+
+	// Replace the link with the inline video
+	a.parentNode.replaceChild(video, a);
+    });
+    
   // 1) Wrap Org-exported images so they’re clickable
   const imgs = document.querySelectorAll('.figure img, img.org-svg');
   imgs.forEach((img) => {
@@ -39,7 +68,10 @@ document.addEventListener('DOMContentLoaded', () => {
   // 3) Build galleries per content container
   const containers = document.querySelectorAll('main, article, .content, body');
   containers.forEach((container) => {
-    const links = Array.from(container.querySelectorAll('.figure a, a:has(img.org-svg)'));
+      //const links = Array.from(container.querySelectorAll('.figure a, a:has(img.org-svg)'));
+      const links = Array.from(container.querySelectorAll(
+'.figure a, a:has(img.org-svg), a[href$=".mp4"], a[href$=".webm"], a[href$=".mov"], a[href$=".m4v"], a[href$=".ogv"]'
+      ));
     if (!links.length) return;
 
     // Start the lightbox on click
@@ -69,7 +101,37 @@ document.addEventListener('DOMContentLoaded', () => {
           },
 
           // Called once after open and on every slide change
-          onOpen(containerEl)  { setupRotation(containerEl); enhanceSVG(containerEl); },
+            //onOpen(containerEl)  { setupRotation(containerEl); enhanceSVG(containerEl); }
+	    onOpen(containerEl) {
+		const linkEl = bp.currItem;
+		const href = linkEl?.href || "";
+
+		if (href.endsWith(".mp4")) {
+		    // Turn off image rotation (not applicable for video)
+		    teardownRotation();
+
+		    const htmlLayer = containerEl.querySelector(".bp-html");
+		    const imgLayer  = containerEl.querySelector(".bp-img");
+
+		    if (!htmlLayer) return;
+
+		    // Hide the default image layer
+		    if (imgLayer) imgLayer.style.display = "none";
+
+		    // Insert video player
+		    htmlLayer.innerHTML = `
+          <video controls autoplay style="max-width:95vw; max-height:95vh">
+            <source src="${href}" type="video/mp4">
+          </video>
+        `;
+
+		    return; // Do not run image/SVG enhancements
+		}
+
+		// Image behaviour
+		setupRotation(containerEl);
+		enhanceSVG(containerEl);
+	    }	    ,
           onUpdate(containerEl){ setupRotation(containerEl); enhanceSVG(containerEl); }
         });
       });