Update promo admin media blocks

assets/custom/css/app.css

@@ -1 +1,2 @@
 *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}img{pointer-events:none}.text-scrollable{scrollbar-width:none;-ms-overflow-style:none}.text-scrollable::-webkit-scrollbar{display:none}.circle .x-icon{opacity:0}.circle:hover .x-icon{opacity:1}[data-css=fade-tb]{mask-image:linear-gradient(#0000 0%,#000 15% 85%,#0000 100%);-webkit-mask-image:linear-gradient(#0000 0%,#000 15% 85%,#0000 100%);mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}.current .mail-item{background-color:#3d3d3dc9}[data-module=""]{outline:10px solid red}[data-module=btn]>div>div>div>div{text-shadow:0 1.3em #fff;transition:transform .3s ease-in-out}[data-module=btn]:hover>div>div>div>div{transform:translateY(-1.3em)}[data-module=link]{transition:opacity .1s ease-in-out}[data-module=link] div>div{text-shadow:0 1.3em #fff;transition:transform .3s ease-in-out}[data-module=link]:hover{opacity:.6!important}[data-module=link]:hover div>div{transform:translateY(-.65em)}[data-module=apple-icon]:focus [data-txt]{position:relative}[data-module=apple-icon]:focus [data-txt]:before{content:"";position:absolute;z-index:-1;background-color:#0059d0;border-radius:.3em;width:120%;height:120%;top:-10%;left:-10%}[data-module=notification-w]{--notification-height:98%}[data-module=notification-w]>div:nth-child(2){transform:translateY(calc(-1*var(--notification-height)));z-index:2}[data-module=notification-w]>div:nth-child(3){transform:translateY(calc(-2*var(--notification-height)));z-index:3}[data-module=notification-w]:hover{--notification-height:98%}[data-module=notification-w]:hover>div:nth-child(2){z-index:2;transform:translateY(0)}[data-module=notification-w]:hover>div:nth-child(3){z-index:3;transform:translateY(0)}[data-module=notification]{transition:transform .3s cubic-bezier(.22,1,.36,1)}
+.app-item.video[data-adaptive-video-window]{--nodedc-video-source-aspect:1.777778;--nodedc-video-height:620px;--nodedc-video-max-height:72svh;--nodedc-video-max-width:70vw;--nodedc-video-render-height:min(var(--nodedc-video-height),var(--nodedc-video-max-height));aspect-ratio:auto;width:min(var(--nodedc-video-max-width),calc(var(--nodedc-video-render-height)*var(--nodedc-video-source-aspect)));height:auto}.app-item.video[data-adaptive-video-window] .video-size[data-adaptive-video]{aspect-ratio:var(--nodedc-video-source-aspect);display:block;width:100%;height:auto;max-height:var(--nodedc-video-render-height)}.app-item.video[data-adaptive-video-window] .video-size[data-adaptive-video]>video.video{display:block;width:100%;height:100%;object-fit:cover}.video-screen [data-media-handle]{display:block;width:100%;height:100%}.video-screen [data-media-handle]>img,.video-screen [data-media-handle]>video{display:block;width:100%;height:100%;object-fit:cover}@media screen and (max-width:767px){.app-item.video[data-adaptive-video-window]{--nodedc-video-max-height:58svh;--nodedc-video-max-width:95vw}}

assets/custom/css/out.css

@@ -1 +1,2 @@
 *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}img{pointer-events:none}.text-scrollable{scrollbar-width:none;-ms-overflow-style:none}.text-scrollable::-webkit-scrollbar{display:none}.circle .x-icon{opacity:0}.circle:hover .x-icon{opacity:1}[data-css=fade-tb]{mask-image:linear-gradient(#0000 0%,#000 15% 85%,#0000 100%);-webkit-mask-image:linear-gradient(#0000 0%,#000 15% 85%,#0000 100%);mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}.current .mail-item{background-color:#3d3d3dc9}[data-module=""]{outline:10px solid red}[data-module=btn]>div>div>div>div{text-shadow:0 1.3em #fff;transition:transform .3s ease-in-out}[data-module=btn]:hover>div>div>div>div{transform:translateY(-1.3em)}[data-module=link]{transition:opacity .1s ease-in-out}[data-module=link] div>div{text-shadow:0 1.3em #fff;transition:transform .3s ease-in-out}[data-module=link]:hover{opacity:.6!important}[data-module=link]:hover div>div{transform:translateY(-.65em)}[data-module=apple-icon]:focus [data-txt]{position:relative}[data-module=apple-icon]:focus [data-txt]:before{content:"";position:absolute;z-index:-1;background-color:#0059d0;border-radius:.3em;width:120%;height:120%;top:-10%;left:-10%}[data-module=notification-w]{--notification-height:98%}[data-module=notification-w]>div:nth-child(2){transform:translateY(calc(-1*var(--notification-height)));z-index:2}[data-module=notification-w]>div:nth-child(3){transform:translateY(calc(-2*var(--notification-height)));z-index:3}[data-module=notification-w]:hover{--notification-height:98%}[data-module=notification-w]:hover>div:nth-child(2){z-index:2;transform:translateY(0)}[data-module=notification-w]:hover>div:nth-child(3){z-index:3;transform:translateY(0)}[data-module=notification]{transition:transform .3s cubic-bezier(.22,1,.36,1)}[data-start=closed]{pointer-events:none;visibility:hidden}[data-module=app]:not([data-start=closed]){transform:scale(0)translateY(200%)}[data-module=folder-wrap]>*{transform:scale(0)}[data-module=list] a{opacity:0}[data-success],[data-failure]{display:none}[data-module=alpha]{opacity:0}
+.app-item.video[data-adaptive-video-window]{--nodedc-video-source-aspect:1.777778;--nodedc-video-height:620px;--nodedc-video-max-height:72svh;--nodedc-video-max-width:70vw;--nodedc-video-render-height:min(var(--nodedc-video-height),var(--nodedc-video-max-height));aspect-ratio:auto;width:min(var(--nodedc-video-max-width),calc(var(--nodedc-video-render-height)*var(--nodedc-video-source-aspect)));height:auto}.app-item.video[data-adaptive-video-window] .video-size[data-adaptive-video]{aspect-ratio:var(--nodedc-video-source-aspect);display:block;width:100%;height:auto;max-height:var(--nodedc-video-render-height)}.app-item.video[data-adaptive-video-window] .video-size[data-adaptive-video]>video.video{display:block;width:100%;height:100%;object-fit:cover}.video-screen [data-media-handle]{display:block;width:100%;height:100%}.video-screen [data-media-handle]>img,.video-screen [data-media-handle]>video{display:block;width:100%;height:100%;object-fit:cover}@media screen and (max-width:767px){.app-item.video[data-adaptive-video-window]{--nodedc-video-max-height:58svh;--nodedc-video-max-width:95vw}}

assets/custom/js/interaction-overrides.js

@@ -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);
   });
 })();