Feature request: Change Macro icon to match Syrinscape icon

[scooper4711]

In the Syrinscape browser, you now display different icons based on if the element is a Sfx or a One-shot.

But when you create macro to play that element, it uses a generic speaker icon.

Please use the same icon for the macro that you use for the Syrinscape browser. Thanks!

[scooper4711]

I just pulled up the v12 Syrinscape Control module that this one is taking over for.
The v12 version, when you used it to create a macro, would use the icon that Syrinscape uses.

e.g. the image for the macro for "Ahhhha" was https://storage.syrinscape.com/media/dd/element/icon/8d961a6d69f3205c445c908516f91aa8.png

Please replicate the behavior from the v12 Syrin Control module and use the syrinscape icon for macros.

[scooper4711]

Until this is implemented, here's a quick macro to update the images.
Note that you have to update this to use your authentication token.
Also note that you need to have a browser plugin like Allow CORS: Access-Control-Allow-Origin - so this is NOT a long-term solution. Enable that plugin, run this script till all your icons are updated, then disable that plugin.

(async () => {
  // Helper: Get all Macro Folders
  const macroFolders = game.folders.filter(f => f.type === "Macro");
  if (!macroFolders.length) {
    ui.notifications.error("No macro folders found.");
    return;
  }

  // Prompt for folder
  const folderNames = macroFolders.map(f => f.name);
  let folderIndex = await new Promise(resolve => {
    new Dialog({
      title: "Select Macro Folder",
      content: `<form><div class="form-group"><label>Folder:</label><select id="folder-select">${folderNames.map((n, i) => `<option value="${i}">${n}</option>`)}</select></div></form>`,
      buttons: {
        ok: {
          label: "OK",
          callback: html => resolve(Number(html.find("#folder-select").val()))
        }
      },
      default: "ok",
      close: () => resolve(null)
    }).render(true);
  });

  if (folderIndex === null) return;
  const folder = macroFolders[folderIndex];

  // Regex to find syrinscapeControl.utils.playElement(<id>)
  const regex = /syrinscapeControl\.utils\.playElement\((\d+)\)/g;

  // For each macro in folder...
  for (const macro of folder.contents) {
    let match;
    if (macro.img.startsWith('https://storage.syrinscape.com')) continue;
    let elementId = null;
    while ((match = regex.exec(macro.command)) !== null) {
      elementId = match[1]; // Only use the first found per macro
      break;
    }
    if (!elementId) continue;

    // Query Syrinscape API
    try {
      const token='***INSERT YOUR SYRINSCAPE TOKEN***';
      const response = await fetch(`https://syrinscape.com/online/frontend-api/elements/${elementId}/`, {headers: {
      'Authorization': `Token ${token}`
    }});
      if (!response.ok) throw new Error("Syrinscape API error");
      const data = await response.json();
      console.log(data);
      // Try to get the artwork url from the API response
      // Adjust the property path as per Syrinscape's API structure
      let imgUrl = data.icon;
      if (!imgUrl) continue;

      // Update macro image
      await macro.update({ img: imgUrl });
      ui.notifications.info(`Macro "${macro.name}" updated with Syrinscape artwork "${imgUrl}".`);
    } catch (err) {
      console.error(`Failed to update macro "${macro.name}":`, err);
      ui.notifications.warn(`Failed to update macro "${macro.name}".`);
    }
  }

  ui.notifications.info("All macros processed.");
})();