@rogieking/figui3 8.9.24 → 8.9.26

package/fig-editor.js

@@ -1706,6 +1706,7 @@ class FigFillPicker extends HTMLElement {
   #rafIds = new Set();
   #ownedBlobUrls = new Set();
   #videoPosterCapturing = null;
+  #videoPosterSrc = null;
 
   constructor() {
     super();
@@ -1958,7 +1959,6 @@ class FigFillPicker extends HTMLElement {
       }
       this.#webcamPosterStream = stream;
       this.#updateSwatch();
-      this.#emitInput();
     };
 
     const attempt = async () => {
@@ -2135,8 +2135,12 @@ class FigFillPicker extends HTMLElement {
         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) {
+        if (parsed.video.poster != null && parsed.video.poster !== "") {
+          this.#videoPosterSrc = this.#video.url;
+        } else if (this.#video.url !== prevUrl) {
           this.#revokeVideoPoster();
+        } else {
+          this.#discardStaleVideoPoster();
         }
       }
       this.#applyParsedWebcam(parsed);
@@ -2158,6 +2162,7 @@ class FigFillPicker extends HTMLElement {
         this.#video.url = valueAttr.trim();
         this.#video.missing = false;
         if (this.#video.url !== prevUrl) this.#revokeVideoPoster();
+        else this.#discardStaleVideoPoster();
       }
     }
   }
@@ -2258,9 +2263,9 @@ class FigFillPicker extends HTMLElement {
       this.#dialog.anchor = this.anchorElement || this.#trigger;
     }
 
+    this.#switchTab(this.#fillType, { emit: false });
     this.#valueAtOpen = JSON.stringify(this.value);
     this.#lastChangeValue = this.#valueAtOpen;
-    this.#switchTab(this.#fillType, { emit: false });
 
     if (this.#swatch) this.#swatch.setAttribute("selected", "true");
 
@@ -2609,7 +2614,7 @@ class FigFillPicker extends HTMLElement {
       });
     }
 
-    if (tabName === "video") this.#applyDefaultVideo();
+    if (tabName === "video") this.#applyDefaultVideo({ emit: false });
     if (tabName === "webcam") {
       this.#webcam.live = this.#webcamMode() === "live";
       this.#webcamStart?.(this.#webcam.deviceId);
@@ -4299,10 +4304,17 @@ class FigFillPicker extends HTMLElement {
     preview.addEventListener("loaded", (e) => {
       const src = e.detail?.src || preview.src;
       if (!src) return;
+      const changed = src !== this.#image.url;
       this.#image.url = src;
       this.#updateImagePreview(preview);
       this.#updateSwatch();
-      this.#emitInput();
+      if (changed) this.#emitInput();
+      this.dispatchEvent(
+        new CustomEvent("loaded", {
+          bubbles: true,
+          detail: e.detail ?? { src },
+        }),
+      );
     });
 
     preview.addEventListener("change", () => {
@@ -4462,7 +4474,7 @@ class FigFillPicker extends HTMLElement {
     container.replaceChildren(header, preview);
 
     this.#setupVideoEvents(container);
-    this.#applyDefaultVideo();
+    this.#applyDefaultVideo({ emit: false });
   }
 
   #revokeVideoPoster() {
@@ -4471,12 +4483,28 @@ class FigFillPicker extends HTMLElement {
       this.#ownedBlobUrls.delete(this.#video.poster);
     }
     this.#video.poster = null;
+    this.#videoPosterSrc = null;
+  }
+
+  #discardStaleVideoPoster() {
+    if (!this.#video.poster) return;
+    if (this.#videoPosterSrc && this.#videoPosterSrc === this.#video.url) return;
+    this.#revokeVideoPoster();
+  }
+
+  #syncVideoPreview() {
+    const preview = this.#dialog?.querySelector(
+      ".fig-fill-picker-video-preview",
+    );
+    if (preview) this.#updateVideoPreviewStyle(preview);
   }
 
-  #applyDefaultVideo({ emit = true } = {}) {
+  #applyDefaultVideo({ emit = false } = {}) {
     if (this.#video.url) {
       this.#video.missing = false;
+      this.#discardStaleVideoPoster();
       if (!this.#video.poster) this.#captureVideoPoster(this.#video.url);
+      else this.#syncVideoPreview();
       return;
     }
     const fallback = this.getAttribute("default-video");
@@ -4486,10 +4514,7 @@ class FigFillPicker extends HTMLElement {
     }
     this.#video.url = fallback;
     this.#video.missing = false;
-    const preview = this.#dialog?.querySelector(
-      ".fig-fill-picker-video-preview",
-    );
-    if (preview) this.#updateVideoPreviewStyle(preview);
+    this.#syncVideoPreview();
     this.#captureVideoPoster(fallback);
     if (emit) this.#emitInput();
   }
@@ -4497,7 +4522,9 @@ class FigFillPicker extends HTMLElement {
   #ensureVideoPoster() {
     if (this.#fillType !== "video") return;
     const src = this.#video.url;
-    if (!src || this.#video.poster) return;
+    if (!src) return;
+    this.#discardStaleVideoPoster();
+    if (this.#video.poster) return;
     this.#captureVideoPoster(src);
   }
 
@@ -4572,8 +4599,10 @@ class FigFillPicker extends HTMLElement {
       if (!blob || this.#video.url !== src) return;
       this.#revokeVideoPoster();
       this.#video.poster = URL.createObjectURL(blob);
+      this.#videoPosterSrc = src;
       this.#ownedBlobUrls.add(this.#video.poster);
       this.#updateSwatch();
+      this.#syncVideoPreview();
       if (emit) this.#emitInput();
     } catch {
       // Cross-origin or decode failures leave the swatch empty until a poster exists.
@@ -4603,12 +4632,20 @@ class FigFillPicker extends HTMLElement {
     preview.addEventListener("loaded", (e) => {
       const src = e.detail?.src || preview.src;
       if (!src) return;
+      const changed = src !== this.#video.url;
+      if (changed) this.#revokeVideoPoster();
       this.#video.url = src;
       this.#video.missing = false;
       this.#updateVideoPreviewStyle(preview);
       this.#captureVideoPoster(src);
       this.#updateSwatch();
-      this.#emitInput();
+      if (changed) this.#emitInput();
+      this.dispatchEvent(
+        new CustomEvent("loaded", {
+          bubbles: true,
+          detail: e.detail ?? { src },
+        }),
+      );
     });
 
     preview.addEventListener("change", () => {

package/fig.js

@@ -9476,6 +9476,16 @@ class FigInputFill extends HTMLElement {
         this.#emitChange();
       });
 
+      this.#fillPicker.addEventListener("loaded", (e) => {
+        e.stopPropagation();
+        this.dispatchEvent(
+          new CustomEvent("loaded", {
+            bubbles: true,
+            detail: e.detail,
+          }),
+        );
+      });
+
       this.#fillPicker.addEventListener("webcamstream", (e) => {
         this.dispatchEvent(
           new CustomEvent("webcamstream", {
@@ -9773,7 +9783,10 @@ class FigInputFill extends HTMLElement {
   #webcamValue() {
     return {
       live: this.#webcam.live !== false,
-      snapshot: this.#webcam.snapshot ?? null,
+      snapshot:
+        this.#webcam.snapshot ??
+        this.#fillPicker?.value?.webcam?.snapshot ??
+        null,
       deviceId: this.#webcam.deviceId ?? null,
       scaleMode: this.#webcam.scaleMode || "fill",
       scale: this.#webcam.scale ?? 50,
@@ -12992,6 +13005,23 @@ class FigMedia extends HTMLElement {
         detail,
       }),
     );
+    if (
+      (media.tagName === "IMG" && event.type === "load") ||
+      (media.tagName === "VIDEO" && event.type === "loadeddata")
+    ) {
+      this.dispatchEvent(
+        new CustomEvent("loaded", {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          detail: {
+            src: detail.src,
+            file: this.#file,
+            media,
+          },
+        }),
+      );
+    }
   }
 
   #handleMediaPlay() {

package/package.json

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