Update promo admin media blocks

2026-06-26 22:04:59 +03:00
parent fb1531f7c5
commit 82cdab07f2
43 changed files with 1901 additions and 1095 deletions
@@ -8,6 +8,10 @@
  const MIN_SCROLL_SPEED = 0.2;
  const MAX_SCROLL_SPEED = 2;
  const DEFAULT_SCROLL_SPEED = 0.55;
+  const ADAPTIVE_VIDEO_BOUND_FLAG = "__nodedcAdaptiveVideoBound";
+  const MEDIA_HANDLE_BOUND_FLAG = "__nodedcMediaHandleBound";
+  const IMAGE_EXTENSIONS = new Set(["avif", "gif", "jpeg", "jpg", "png", "svg", "webp"]);
+  const VIDEO_EXTENSIONS = new Set(["m4v", "mov", "mp4", "webm"]);

  function isDesktopPointer() {
    return window.matchMedia?.("(pointer: fine)").matches ?? true;
@@ -227,14 +231,106 @@
    document.querySelectorAll('[data-module="mail-list"]').forEach(bindMailListWheel);
  }

+  function mediaExtension(src) {
+    const cleanSrc = String(src || "").split(/[?#]/)[0];
+    const match = /\.([a-z0-9]+)$/i.exec(cleanSrc);
+    return match ? match[1].toLowerCase() : "";
+  }
+
+  function createMediaElement(src) {
+    const extension = mediaExtension(src);
+
+    if (IMAGE_EXTENSIONS.has(extension)) {
+      const image = document.createElement("img");
+      image.className = "video-el";
+      image.src = src;
+      image.alt = "";
+      image.loading = "lazy";
+      image.decoding = "async";
+      return image;
+    }
+
+    if (!VIDEO_EXTENSIONS.has(extension)) return null;
+
+    const video = document.createElement("video");
+    video.className = "video-el";
+    video.dataset.module = "video-handle";
+    video.src = src;
+    video.muted = true;
+    video.loop = true;
+    video.playsInline = true;
+    video.preload = "none";
+    video.setAttribute("playsinline", "true");
+    return video;
+  }
+
+  function hydrateMediaHandle(handle) {
+    if (!handle || handle[MEDIA_HANDLE_BOUND_FLAG]) return;
+
+    const src = handle.dataset.mediaSrc;
+    const media = createMediaElement(src);
+
+    if (!media) return;
+    handle[MEDIA_HANDLE_BOUND_FLAG] = true;
+    handle.textContent = "";
+    handle.append(media);
+  }
+
+  function hydrateMediaHandles() {
+    document.querySelectorAll("[data-media-handle]").forEach(hydrateMediaHandle);
+  }
+
+  function applyAdaptiveVideoAspect(video) {
+    const surface = video.closest("[data-adaptive-video]");
+    if (!surface || !video.videoWidth || !video.videoHeight) return;
+
+    const windowEl = video.closest("[data-adaptive-video-window]");
+    const sourceAspect = video.videoWidth / video.videoHeight;
+    const targets = windowEl ? [surface, windowEl] : [surface];
+
+    targets.forEach((target) => {
+      target.style.setProperty("--nodedc-video-source-aspect", sourceAspect.toFixed(6));
+    });
+  }
+
+  function bindAdaptiveVideo(video) {
+    if (!video || video[ADAPTIVE_VIDEO_BOUND_FLAG]) return;
+
+    video[ADAPTIVE_VIDEO_BOUND_FLAG] = true;
+    video.addEventListener("loadedmetadata", () => applyAdaptiveVideoAspect(video));
+    applyAdaptiveVideoAspect(video);
+  }
+
+  function bindAdaptiveVideos() {
+    document.querySelectorAll("[data-adaptive-video] video").forEach(bindAdaptiveVideo);
+  }
+
+  hydrateMediaHandles();
+
  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", bindInteractiveScroll, { once: true });
+    document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        hydrateMediaHandles();
+        bindInteractiveScroll();
+        bindAdaptiveVideos();
+      },
+      { once: true },
+    );
  } else {
+    hydrateMediaHandles();
    bindInteractiveScroll();
+    bindAdaptiveVideos();
  }

  window.addEventListener("load", () => {
+    hydrateMediaHandles();
    bindInteractiveScroll();
-    window.setTimeout(bindInteractiveScroll, 500);
+    bindAdaptiveVideos();
+    window.setTimeout(() => {
+      hydrateMediaHandles();
+      bindInteractiveScroll();
+      bindAdaptiveVideos();
+    }, 500);
  });
 })();