@ohhwells/bridge 0.1.36-next.48 → 0.1.36-next.49

package/dist/index.js

@@ -5866,6 +5866,9 @@ function collectEditableNodes() {
       const url = raw.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
       return { key: el.dataset.ohwKey ?? "", type: "bg-image", text: url };
     }
+    if (el.dataset.ohwEditable === "video") {
+      return { key: el.dataset.ohwKey ?? "", type: "video", text: getVideoEl(el)?.src ?? "" };
+    }
     if (el.dataset.ohwEditable === "link") {
       return { key: el.dataset.ohwKey ?? "", type: "link", text: getLinkHref(el) };
     }
@@ -5880,8 +5883,62 @@ function collectEditableNodes() {
     if (!key) return;
     nodes.push({ key, type: "link", text: getLinkHref(el) });
   });
+  document.querySelectorAll('[data-ohw-editable="video"]').forEach((el) => {
+    const key = el.dataset.ohwKey ?? "";
+    const video = getVideoEl(el);
+    if (!key || !video) return;
+    nodes.push({ key: `${key}${VIDEO_AUTOPLAY_SUFFIX}`, type: "video-setting", text: String(video.autoplay) });
+    nodes.push({ key: `${key}${VIDEO_MUTED_SUFFIX}`, type: "video-setting", text: String(video.muted) });
+  });
   return nodes;
 }
+function isMediaEditable(el) {
+  const t = el.dataset.ohwEditable;
+  return t === "image" || t === "bg-image" || t === "video";
+}
+var MEDIA_SELECTOR = '[data-ohw-editable="image"], [data-ohw-editable="bg-image"], [data-ohw-editable="video"]';
+var NON_MEDIA_SELECTOR = '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"])';
+function getVideoEl(el) {
+  return el instanceof HTMLVideoElement ? el : el.querySelector("video");
+}
+var VIDEO_AUTOPLAY_SUFFIX = "__ohw_autoplay";
+var VIDEO_MUTED_SUFFIX = "__ohw_muted";
+function isBackgroundVideo(video) {
+  return video.autoplay && video.muted;
+}
+function syncVideoPlayback(video) {
+  const background = isBackgroundVideo(video);
+  video.controls = !background;
+  if (video.autoplay) void video.play().catch(() => {
+  });
+  else video.pause();
+}
+function applyVideoSrc(video, url) {
+  const { autoplay, muted } = video;
+  video.src = url;
+  video.loop = true;
+  video.playsInline = true;
+  video.autoplay = autoplay;
+  video.muted = muted;
+  video.load();
+  syncVideoPlayback(video);
+}
+function applyVideoSettingNode(key, val) {
+  const isAutoplay = key.endsWith(VIDEO_AUTOPLAY_SUFFIX);
+  const isMuted = key.endsWith(VIDEO_MUTED_SUFFIX);
+  if (!isAutoplay && !isMuted) return false;
+  const suffixLen = (isAutoplay ? VIDEO_AUTOPLAY_SUFFIX : VIDEO_MUTED_SUFFIX).length;
+  const baseKey = key.slice(0, key.length - suffixLen);
+  const on = val === "true";
+  document.querySelectorAll(`[data-ohw-key="${baseKey}"]`).forEach((el) => {
+    const video = getVideoEl(el);
+    if (!video) return;
+    if (isAutoplay) video.autoplay = on;
+    else video.muted = on;
+    syncVideoPlayback(video);
+  });
+  return true;
+}
 function applyLinkByKey(key, val) {
   document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
     if (el.dataset.ohwEditable === "link") applyLinkHref(el, val);
@@ -6870,6 +6927,7 @@ function OhhwellsBridge() {
       const imageLoads = [];
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
+        if (applyVideoSettingNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
           if (el.dataset.ohwEditable === "image") {
             const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -6883,6 +6941,15 @@ function OhhwellsBridge() {
           } else if (el.dataset.ohwEditable === "bg-image") {
             const next = `url('${val}')`;
             if (el.style.backgroundImage !== next) el.style.backgroundImage = next;
+          } else if (el.dataset.ohwEditable === "video") {
+            const video = getVideoEl(el);
+            if (video && video.src !== val) {
+              applyVideoSrc(video, val);
+              imageLoads.push(new Promise((resolve) => {
+                video.onloadeddata = () => resolve();
+                video.onerror = () => resolve();
+              }));
+            }
           } else if (el.dataset.ohwEditable === "link") {
             applyLinkHref(el, val);
           } else if (el.innerHTML !== val) {
@@ -6931,6 +6998,7 @@ function OhhwellsBridge() {
       try {
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
+          if (applyVideoSettingNode(key, val)) continue;
           document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
             if (el.dataset.ohwEditable === "image") {
               const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -6938,6 +7006,9 @@ function OhhwellsBridge() {
             } else if (el.dataset.ohwEditable === "bg-image") {
               const next = `url('${val}')`;
               if (el.style.backgroundImage !== next) el.style.backgroundImage = next;
+            } else if (el.dataset.ohwEditable === "video") {
+              const video = getVideoEl(el);
+              if (video && video.src !== val) applyVideoSrc(video, val);
             } else if (el.dataset.ohwEditable === "link") {
               applyLinkHref(el, val);
             } else if (el.innerHTML !== val) {
@@ -7041,8 +7112,9 @@ function OhhwellsBridge() {
       [data-ohw-editable] {
         display: block;
       }
-      [data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]) { cursor: text !important; }
+      [data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]) { cursor: text !important; }
       [data-ohw-editable="image"], [data-ohw-editable="image"] *,
+      [data-ohw-editable="video"], [data-ohw-editable="video"] *,
       [data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
       [data-ohw-editable="link"], [data-ohw-editable="link"] * { cursor: pointer !important; }
       [data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]) {
@@ -7109,7 +7181,7 @@ function OhhwellsBridge() {
           });
           return;
         }
-        if (editable.dataset.ohwEditable === "image" || editable.dataset.ohwEditable === "bg-image") {
+        if (isMediaEditable(editable)) {
           e.preventDefault();
           e.stopPropagation();
           postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "" });
@@ -7212,7 +7284,7 @@ function OhhwellsBridge() {
       if (!editable) return;
       const selected = selectedElRef.current;
       if (selected && (selected === editable || selected.contains(editable))) return;
-      if (editable.dataset.ohwEditable !== "image" && editable.dataset.ohwEditable !== "bg-image" && !editable.hasAttribute("contenteditable")) {
+      if (!isMediaEditable(editable) && !editable.hasAttribute("contenteditable")) {
         const hoverTarget = editable.closest("[data-ohw-href-key]") ?? editable;
         if (hoverTarget.hasAttribute("data-ohw-href-key")) {
           clearHrefKeyHover(hoverTarget);
@@ -7240,7 +7312,7 @@ function OhhwellsBridge() {
       if (!editable) return;
       const related = e.relatedTarget instanceof Element ? e.relatedTarget : null;
       if (related?.closest("[data-ohw-drag-handle-container], [data-ohw-item-interaction]")) return;
-      if (editable.dataset.ohwEditable !== "image" && editable.dataset.ohwEditable !== "bg-image") {
+      if (!isMediaEditable(editable)) {
         const hoverTarget = editable.closest("[data-ohw-href-key]") ?? editable;
         if (hoverTarget.hasAttribute("data-ohw-href-key")) {
           if (!related?.closest("[data-ohw-href-key]")) {
@@ -7290,11 +7362,16 @@ function OhhwellsBridge() {
       const r2 = getVisibleRect(imgEl);
       const hasTextOverlap = forceTextOverlap ?? false;
       hoveredImageHasTextOverlapRef.current = hasTextOverlap;
+      const video = imgEl.dataset.ohwEditable === "video" ? getVideoEl(imgEl) : null;
       postToParentRef.current({
         type: "ow:image-hover",
         key: imgEl.dataset.ohwKey ?? "",
+        // Lets the parent pick the file-picker `accept`, overlay label/icon and drop
+        // mime-check without a parallel ow:video-* message channel.
+        elementType: imgEl.dataset.ohwEditable ?? "image",
         rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
         hasTextOverlap,
+        ...video ? { videoAutoplay: video.autoplay, videoMuted: video.muted } : {},
         ...isDragOver ? { isDragOver: true } : {}
       });
       const track = imgEl.closest("[data-ohw-hover-pause]");
@@ -7302,7 +7379,7 @@ function OhhwellsBridge() {
     };
     const findImageAtPoint = (clientX, clientY, fromParentViewport) => {
       const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
-      const images = Array.from(document.querySelectorAll('[data-ohw-editable="image"], [data-ohw-editable="bg-image"]'));
+      const images = Array.from(document.querySelectorAll(MEDIA_SELECTOR));
       const matches = [];
       for (let i = images.length - 1; i >= 0; i--) {
         const el = images[i];
@@ -7318,7 +7395,9 @@ function OhhwellsBridge() {
         if (x >= r2.left && x <= r2.left + r2.width && y >= r2.top && y <= r2.top + r2.height) matches.push(el);
       }
       if (matches.length === 0) return null;
-      const imageTypeMatches = matches.filter((el) => el.dataset.ohwEditable === "image");
+      const imageTypeMatches = matches.filter(
+        (el) => el.dataset.ohwEditable === "image" || el.dataset.ohwEditable === "video"
+      );
       const candidatePool = imageTypeMatches.length > 0 ? imageTypeMatches : matches;
       const smallest = candidatePool.reduce((best, el) => {
         const br = getVisibleRect(best);
@@ -7396,7 +7475,7 @@ function OhhwellsBridge() {
         }
         const isStateCardImage = !!imgEl.closest("[data-ohw-editable-state]");
         const textEditable = Array.from(
-          document.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])')
+          document.querySelectorAll(NON_MEDIA_SELECTOR)
         ).find((el) => {
           const er = el.getBoundingClientRect();
           return x >= er.left && x <= er.right && y >= er.top && y <= er.bottom;
@@ -7477,7 +7556,7 @@ function OhhwellsBridge() {
         }
         const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
         const textEl = Array.from(
-          document.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])')
+          document.querySelectorAll(NON_MEDIA_SELECTOR)
         ).find((el) => {
           const er = el.getBoundingClientRect();
           return x >= er.left && x <= er.right && y >= er.top && y <= er.bottom;
@@ -7602,7 +7681,9 @@ function OhhwellsBridge() {
       if (!el) return;
       const file = e.dataTransfer?.files?.[0];
       if (file) {
-        if (file.type.startsWith("image/")) {
+        const wantsVideo = el.dataset.ohwEditable === "video";
+        const accepted = wantsVideo ? file.type.startsWith("video/") : file.type.startsWith("image/");
+        if (accepted) {
           const key = el.dataset.ohwKey ?? "";
           const { name, type: mimeType } = file;
           const r2 = el.getBoundingClientRect();
@@ -7618,6 +7699,30 @@ function OhhwellsBridge() {
       resumeAnimTracks();
       postToParentRef.current({ type: "ow:image-unhover" });
     };
+    const handleVideoSettings = (e) => {
+      if (e.data?.type !== "ow:video-settings") return;
+      const { key, autoplay, muted } = e.data;
+      document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
+        const video = getVideoEl(el);
+        if (!video) return;
+        if (typeof autoplay === "boolean") video.autoplay = autoplay;
+        if (typeof muted === "boolean") video.muted = muted;
+        syncVideoPlayback(video);
+        postToParentRef.current({
+          type: "ow:change",
+          nodes: [
+            { key: `${key}${VIDEO_AUTOPLAY_SUFFIX}`, text: String(video.autoplay) },
+            { key: `${key}${VIDEO_MUTED_SUFFIX}`, text: String(video.muted) }
+          ]
+        });
+        postToParentRef.current({
+          type: "ow:video-settings-applied",
+          key,
+          autoplay: video.autoplay,
+          muted: video.muted
+        });
+      });
+    };
     const handleImageUrl = (e) => {
       if (e.data?.type !== "ow:image-url") return;
       const { key, url } = e.data;
@@ -7669,6 +7774,19 @@ function OhhwellsBridge() {
               requestAnimationFrame(() => onReady());
             }
           }
+        } else if (el.dataset.ohwEditable === "video") {
+          const video = getVideoEl(el);
+          if (video) {
+            found = true;
+            const onReady = () => {
+              video.onloadeddata = null;
+              video.onerror = null;
+              notify();
+            };
+            video.onloadeddata = onReady;
+            video.onerror = onReady;
+            applyVideoSrc(video, url);
+          }
         }
       });
       if (!found) notify();
@@ -7735,12 +7853,16 @@ function OhhwellsBridge() {
           sectionsJson = val;
           continue;
         }
+        if (applyVideoSettingNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
           if (el.dataset.ohwEditable === "image") {
             const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
             if (img) img.src = val;
           } else if (el.dataset.ohwEditable === "bg-image") {
             el.style.backgroundImage = `url('${val}')`;
+          } else if (el.dataset.ohwEditable === "video") {
+            const video = getVideoEl(el);
+            if (video && video.src !== val) applyVideoSrc(video, val);
           } else if (el.dataset.ohwEditable === "link") {
             applyLinkHref(el, val);
           } else {
@@ -8001,7 +8123,7 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:click-at") return;
       const { clientX, clientY } = e.data;
       const allImages = Array.from(
-        document.querySelectorAll('[data-ohw-editable="image"], [data-ohw-editable="bg-image"]')
+        document.querySelectorAll(MEDIA_SELECTOR)
       ).filter((el) => !!el.closest("[data-ohw-editable-state]"));
       const stateCardImage = allImages.find((el) => {
         const ownerCard = el.closest("[data-ohw-editable-state]");
@@ -8020,9 +8142,7 @@ function OhhwellsBridge() {
         return;
       }
       const textEditable = Array.from(
-        document.querySelectorAll(
-          '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])'
-        )
+        document.querySelectorAll(NON_MEDIA_SELECTOR)
       ).find((el) => {
         const r2 = el.getBoundingClientRect();
         return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
@@ -8050,6 +8170,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handleClearSchedulingWidget);
     window.addEventListener("message", handleRemoveSchedulingSection);
     window.addEventListener("message", handleImageUrl);
+    window.addEventListener("message", handleVideoSettings);
     window.addEventListener("message", handleAnimLock);
     window.addEventListener("message", handleCanvasHeight);
     window.addEventListener("message", handleParentScroll);
@@ -8097,6 +8218,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleClearSchedulingWidget);
       window.removeEventListener("message", handleRemoveSchedulingSection);
       window.removeEventListener("message", handleImageUrl);
+      window.removeEventListener("message", handleVideoSettings);
       window.removeEventListener("message", handleAnimLock);
       window.removeEventListener("message", handleCanvasHeight);
       window.removeEventListener("message", handleParentScroll);