Add default custom asset

src/main/resources/assets/default-marketplace-script.js

@@ -0,0 +1,33 @@
+async function init(context, state) {
+    const asset = Array.isArray(context.assets) ? context.assets[0] : null;
+    if (!asset?.blob) {
+        return;
+    }
+    state.rotation = 0;
+    state.imageReady = false;
+    try {
+        state.image = await createImageBitmap(asset.blob);
+        state.imageReady = true;
+    } catch (error) {
+        state.imageError = error;
+    }
+}
+
+function tick(context, state) {
+    const { ctx, width, height, deltaMs } = context;
+    if (!ctx) {
+        return;
+    }
+    ctx.clearRect(0, 0, width, height);
+    const image = state?.image;
+    if (!image || !state.imageReady) {
+        return;
+    }
+    const size = Math.min(width, height) * 0.35;
+    state.rotation = (state.rotation + (deltaMs || 0) * 0.002) % (Math.PI * 2);
+    ctx.save();
+    ctx.translate(width / 2, height / 2);
+    ctx.rotate(state.rotation);
+    ctx.drawImage(image, -size / 2, -size / 2, size, size);
+    ctx.restore();
+}

src/main/resources/static/js/broadcast/renderer.js

@@ -21,6 +21,7 @@ export class BroadcastRenderer {
         this.scriptWorker = null;
         this.scriptWorkerReady = false;
         this.scriptErrorKeys = new Set();
+        this.scriptAttachmentCache = new Map();
 
         this.obsBrowser = !!globalThis.obsstudio;
         this.supportsAnimatedDecode =
@@ -487,12 +488,12 @@ export class BroadcastRenderer {
             payload: {
                 id: asset.id,
                 source: assetSource,
-                attachments: asset.scriptAttachments || [],
+                attachments: await this.resolveScriptAttachments(asset.scriptAttachments),
             },
         });
     }
 
-    updateScriptWorkerAttachments(asset) {
+    async updateScriptWorkerAttachments(asset) {
         if (!this.scriptWorker || !this.scriptWorkerReady || !asset?.id) {
             return;
         }
@@ -500,7 +501,7 @@ export class BroadcastRenderer {
             type: "updateAttachments",
             payload: {
                 id: asset.id,
-                attachments: asset.scriptAttachments || [],
+                attachments: await this.resolveScriptAttachments(asset.scriptAttachments),
             },
         });
     }
@@ -514,4 +515,35 @@ export class BroadcastRenderer {
             payload: { id: assetId },
         });
     }
+
+    async resolveScriptAttachments(attachments) {
+        if (!Array.isArray(attachments) || attachments.length === 0) {
+            return [];
+        }
+        const resolved = await Promise.all(
+            attachments.map(async (attachment) => {
+                if (!attachment?.url || !attachment.mediaType?.startsWith("image/")) {
+                    return attachment;
+                }
+                const cacheKey = attachment.id || attachment.url;
+                const cached = this.scriptAttachmentCache.get(cacheKey);
+                if (cached?.blob) {
+                    return { ...attachment, blob: cached.blob };
+                }
+                try {
+                    const response = await fetch(attachment.url);
+                    if (!response.ok) {
+                        throw new Error("Failed to fetch script attachment");
+                    }
+                    const blob = await response.blob();
+                    this.scriptAttachmentCache.set(cacheKey, { blob });
+                    return { ...attachment, blob };
+                } catch (error) {
+                    console.error("Unable to load script attachment", error);
+                    return attachment;
+                }
+            }),
+        );
+        return resolved;
+    }
 }