@rogieking/figui3 8.9.21 → 8.9.23

package/fig-editor.js

@@ -29,6 +29,18 @@ function figEditorCssUrl(url) {
   return `url("${String(url).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`;
 }
 
+function figEditorLooksLikeVideoUrl(raw) {
+  const text = String(raw ?? "").trim();
+  if (!text || text.startsWith("{") || text.startsWith("#")) return false;
+  if (text.startsWith("data:video/")) return true;
+  try {
+    const path = new URL(text, "https://fig.local").pathname;
+    return /\.(mp4|webm|mov|m4v|ogv)$/i.test(path);
+  } catch {
+    return /\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(text);
+  }
+}
+
 function figEditorCreateIcon(name, options = {}) {
   const icon = document.createElement("fig-icon");
   if (name) icon.setAttribute("name", name);
@@ -1692,6 +1704,7 @@ class FigFillPicker extends HTMLElement {
   #boundTriggerKeydown = null;
   #rafIds = new Set();
   #ownedBlobUrls = new Set();
+  #videoPosterCapturing = null;
 
   constructor() {
     super();
@@ -1721,6 +1734,7 @@ class FigFillPicker extends HTMLElement {
       this.#setupTrigger();
       this.#parseValue();
       this.#updateSwatch();
+      this.#ensureVideoPoster();
     });
   }
 
@@ -2117,8 +2131,12 @@ class FigFillPicker extends HTMLElement {
       }
       if (parsed.image) this.#image = { ...this.#image, ...parsed.image };
       if (parsed.video) {
+        const prevUrl = this.#video.url;
         this.#video = { ...this.#video, ...parsed.video };
         this.#video.missing = !this.#video.url;
+        if (this.#video.url !== prevUrl && parsed.video.poster == null) {
+          this.#revokeVideoPoster();
+        }
       }
       this.#applyParsedWebcam(parsed);
 
@@ -2128,10 +2146,17 @@ class FigFillPicker extends HTMLElement {
         this.#customData[parsed.type] = rest;
       }
     } catch (e) {
-      // If not JSON, treat as hex color
       if (valueAttr.startsWith("#")) {
         this.#fillType = "solid";
         this.#color = this.#hexToHSV(valueAttr);
+        return;
+      }
+      if (figEditorLooksLikeVideoUrl(valueAttr)) {
+        const prevUrl = this.#video.url;
+        this.#fillType = "video";
+        this.#video.url = valueAttr.trim();
+        this.#video.missing = false;
+        if (this.#video.url !== prevUrl) this.#revokeVideoPoster();
       }
     }
   }
@@ -4429,7 +4454,6 @@ class FigFillPicker extends HTMLElement {
       "aspect-ratio": "1/1",
       fit: "cover",
       checkerboard: "true",
-      autoplay: "true",
       controls: true,
       muted: "true",
       loop: "true",
@@ -4451,7 +4475,7 @@ class FigFillPicker extends HTMLElement {
   #applyDefaultVideo({ emit = true } = {}) {
     if (this.#video.url) {
       this.#video.missing = false;
-      if (!this.#video.poster) this.#captureVideoPoster(this.#video.url, { emit });
+      if (!this.#video.poster) this.#captureVideoPoster(this.#video.url);
       return;
     }
     const fallback = this.getAttribute("default-video");
@@ -4465,11 +4489,71 @@ class FigFillPicker extends HTMLElement {
       ".fig-fill-picker-video-preview",
     );
     if (preview) this.#updateVideoPreviewStyle(preview);
-    this.#captureVideoPoster(fallback, { emit });
+    this.#captureVideoPoster(fallback);
+    if (emit) this.#emitInput();
+  }
+
+  #ensureVideoPoster() {
+    if (this.#fillType !== "video") return;
+    const src = this.#video.url;
+    if (!src || this.#video.poster) return;
+    this.#captureVideoPoster(src);
   }
 
-  async #captureVideoPoster(src, { emit = true } = {}) {
-    if (!src) return;
+  async #videoFrameBitmap(video) {
+    if (typeof video.requestVideoFrameCallback === "function") {
+      await Promise.race([
+        new Promise((resolve) => video.requestVideoFrameCallback(() => resolve())),
+        new Promise((resolve) => setTimeout(resolve, 80)),
+      ]);
+    } else {
+      try {
+        await video.play();
+        video.pause();
+      } catch {
+        /* use the current decoded frame */
+      }
+    }
+    if (typeof createImageBitmap === "function") {
+      try {
+        return await createImageBitmap(video);
+      } catch {
+        /* tainted or undecoded — fall back to drawImage(video) */
+      }
+    }
+    return null;
+  }
+
+  async #blobFromVideoFrame(video) {
+    const bitmap = await this.#videoFrameBitmap(video);
+    const width = bitmap?.width || video.videoWidth;
+    const height = bitmap?.height || video.videoHeight;
+    if (!width || !height) {
+      bitmap?.close?.();
+      return null;
+    }
+    const canvas =
+      typeof OffscreenCanvas === "function"
+        ? new OffscreenCanvas(width, height)
+        : Object.assign(document.createElement("canvas"), { width, height });
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      bitmap?.close?.();
+      return null;
+    }
+    try {
+      ctx.drawImage(bitmap || video, 0, 0, width, height);
+    } finally {
+      bitmap?.close?.();
+    }
+    return canvas.convertToBlob
+      ? canvas.convertToBlob({ type: "image/jpeg", quality: 0.85 })
+      : new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.85));
+  }
+
+  async #captureVideoPoster(src, { emit = false } = {}) {
+    if (!src || this.#videoPosterCapturing === src) return;
+    this.#videoPosterCapturing = src;
     const video = document.createElement("video");
     video.muted = true;
     video.playsInline = true;
@@ -4483,14 +4567,8 @@ class FigFillPicker extends HTMLElement {
         video.src = src;
       });
       if (!video.videoWidth || !video.videoHeight) return;
-      const canvas = document.createElement("canvas");
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      canvas.getContext("2d").drawImage(video, 0, 0);
-      const blob = await new Promise((resolve) =>
-        canvas.toBlob(resolve, "image/jpeg", 0.85),
-      );
-      if (!blob) return;
+      const blob = await this.#blobFromVideoFrame(video);
+      if (!blob || this.#video.url !== src) return;
       this.#revokeVideoPoster();
       this.#video.poster = URL.createObjectURL(blob);
       this.#ownedBlobUrls.add(this.#video.poster);
@@ -4498,6 +4576,10 @@ class FigFillPicker extends HTMLElement {
       if (emit) this.#emitInput();
     } catch {
       // Cross-origin or decode failures leave the swatch empty until a poster exists.
+    } finally {
+      video.removeAttribute("src");
+      video.load();
+      if (this.#videoPosterCapturing === src) this.#videoPosterCapturing = null;
     }
   }
 
@@ -4523,7 +4605,6 @@ class FigFillPicker extends HTMLElement {
       this.#video.url = src;
       this.#video.missing = false;
       this.#updateVideoPreviewStyle(preview);
-      preview.play?.();
       this.#captureVideoPoster(src);
       this.#updateSwatch();
       this.#emitInput();
@@ -5186,6 +5267,7 @@ class FigFillPicker extends HTMLElement {
       case "value":
         this.#parseValue();
         this.#updateSwatch();
+        this.#ensureVideoPoster();
         if (this.#dialog?.open && !this.#isDraggingColor) {
           this.#refreshDialogUI();
           this.#lastChangeValue = JSON.stringify(this.value);

package/fig-lab.js

@@ -728,6 +728,25 @@ function figLabCssUrl(url) {
   return `url("${String(url).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`;
 }
 
+function figLabLooksLikeVideoUrl(raw) {
+  const text = String(raw ?? "").trim();
+  if (!text || text.startsWith("{") || text.startsWith("#")) return false;
+  if (text.startsWith("data:video/")) return true;
+  try {
+    const path = new URL(text, "https://fig.local").pathname;
+    return /\.(mp4|webm|mov|m4v|ogv)$/i.test(path);
+  } catch {
+    return /\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(text);
+  }
+}
+
+function figLabVideoFillFromUrl(url) {
+  return {
+    type: "video",
+    video: { url, scaleMode: "fill", scale: 50 },
+  };
+}
+
 function figLabParseFillValue(raw) {
   if (raw && typeof raw === "object") return raw;
   const text = String(raw ?? "").trim();
@@ -742,6 +761,7 @@ function figLabParseFillValue(raw) {
     const { color, alpha } = figLabParseSolidColor(text);
     return { type: "solid", color, alpha };
   }
+  if (figLabLooksLikeVideoUrl(text)) return figLabVideoFillFromUrl(text);
   return { type: "solid", color: "#D9D9D9", alpha: 1 };
 }
 

package/fig.js

@@ -8684,6 +8684,18 @@ function figCssUrl(url) {
   return `url("${String(url).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`;
 }
 
+function figLooksLikeVideoUrl(raw) {
+  const text = String(raw ?? "").trim();
+  if (!text || text.startsWith("{") || text.startsWith("#")) return false;
+  if (text.startsWith("data:video/")) return true;
+  try {
+    const path = new URL(text, "https://fig.local").pathname;
+    return /\.(mp4|webm|mov|m4v|ogv)$/i.test(path);
+  } catch {
+    return /\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(text);
+  }
+}
+
 function figHexToRGB(hex) {
   const h = hex.replace(/^#/, "");
   return {
@@ -9077,7 +9089,6 @@ class FigInputFill extends HTMLElement {
         }
       }
     } catch (e) {
-      // If not JSON, treat as hex color
       if (valueAttr.startsWith("#")) {
         this.#fillType = "solid";
         this.#solid.color = valueAttr.slice(0, 7);
@@ -9085,6 +9096,12 @@ class FigInputFill extends HTMLElement {
           const alphaHex = valueAttr.slice(7, 9);
           this.#solid.alpha = parseInt(alphaHex, 16) / 255;
         }
+        return;
+      }
+      if (figLooksLikeVideoUrl(valueAttr)) {
+        this.#fillType = "video";
+        this.#video.url = valueAttr.trim();
+        this.#video.missing = false;
       }
     }
   }
@@ -10631,8 +10648,17 @@ class FigInputGradient extends HTMLElement {
       .join(", ");
     const interp = gradientInterpolationClause(gradient);
     const interpolation = interp ? ` ${interp}` : "";
-    // Compact swatch always previews L→R, regardless of linear angle /
-    // radial / angular type (stop handles also use this axis when editing).
+    if (this.#editMode === "picker") {
+      switch (gradient.type) {
+        case "radial":
+          return `radial-gradient(circle at ${gradient.centerX}% ${gradient.centerY}%${interpolation}, ${stops})`;
+        case "angular":
+          return `conic-gradient(from ${gradient.angle}deg${interpolation}, ${stops})`;
+        default:
+          return `linear-gradient(${gradient.angle}deg${interpolation}, ${stops})`;
+      }
+    }
+    // Inline editor swatch previews L→R so stop handles share that axis.
     return `linear-gradient(to right${interpolation}, ${stops})`;
   }
 
@@ -10744,6 +10770,11 @@ class FigInputGradient extends HTMLElement {
         ...this.#gradient,
         ...detail.gradient,
       });
+      if (this.#editMode === "picker" && typeof detail.css === "string" && detail.css) {
+        this.#swatch?.setAttribute("background", detail.css);
+        this.#syncSwatchSize();
+        return;
+      }
       this.#syncSwatch();
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "8.9.21",
+  "version": "8.9.23",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",