Andre
5766fdb757
Node vergrößert sich dynamisch je nach Dateianzahl. Download-Button pro Datei hinzugefügt. Play-Button wird rot beim Abspielen. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
103 lines
4.1 KiB
JavaScript
103 lines
4.1 KiB
JavaScript
import { app } from "../../../scripts/app.js";
|
|
import { api } from "../../../scripts/api.js";
|
|
|
|
app.registerExtension({
|
|
name: "AudioCraft.AudioManager",
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeData.name === "AudioManager") {
|
|
const onExecuted = nodeType.prototype.onExecuted;
|
|
nodeType.prototype.onExecuted = function (message) {
|
|
onExecuted?.apply(this, arguments);
|
|
|
|
if (!message?.text) return;
|
|
|
|
const summary = message.text[0]?.content || "";
|
|
const files = message.files || [];
|
|
|
|
if (this._managerWidget) {
|
|
this._managerContainer.innerHTML = "";
|
|
buildContent(this._managerContainer, summary, files);
|
|
} else {
|
|
const container = document.createElement("div");
|
|
container.style.cssText = "padding:4px;overflow-y:auto;";
|
|
buildContent(container, summary, files);
|
|
|
|
this._managerContainer = container;
|
|
this._managerWidget = this.addDOMWidget("audio_manager", "dom", container, {
|
|
serialize: false,
|
|
hideOnZoom: false,
|
|
});
|
|
}
|
|
|
|
// Resize node to fit all files (26px per row + header + padding)
|
|
const listHeight = Math.min(40 + files.length * 26, 800);
|
|
this._managerWidget.computeSize = () => [this.size[0], listHeight];
|
|
this.setSize([Math.max(this.size[0], 500), listHeight + 80]);
|
|
app.graph.setDirtyCanvas(true);
|
|
};
|
|
}
|
|
},
|
|
});
|
|
|
|
function buildContent(container, summary, files) {
|
|
const header = document.createElement("div");
|
|
header.textContent = summary;
|
|
header.style.cssText = "font-weight:bold;margin-bottom:8px;color:#fff;font-size:13px;padding:4px;background:#333;border-radius:4px;";
|
|
container.appendChild(header);
|
|
|
|
if (files.length === 0) return;
|
|
|
|
for (const f of files) {
|
|
const row = document.createElement("div");
|
|
row.style.cssText = "display:flex;align-items:center;padding:3px 2px;font-size:11px;color:#ccc;border-bottom:1px solid #333;min-height:22px;";
|
|
|
|
const name = document.createElement("span");
|
|
name.textContent = f.name;
|
|
name.style.cssText = "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:6px;";
|
|
|
|
const size = document.createElement("span");
|
|
size.textContent = f.size_mb + " MB";
|
|
size.style.cssText = "color:#8cf;min-width:55px;text-align:right;margin-right:6px;font-size:10px;";
|
|
|
|
const playBtn = document.createElement("button");
|
|
playBtn.textContent = "\u25B6";
|
|
playBtn.title = "Abspielen";
|
|
playBtn.style.cssText = "background:#444;border:none;color:#8f8;cursor:pointer;padding:2px 8px;border-radius:3px;font-size:11px;margin-right:4px;";
|
|
|
|
const dlBtn = document.createElement("a");
|
|
const audioSrc = api.apiURL(
|
|
`/view?filename=${encodeURIComponent(f.name)}&subfolder=audio&type=output`
|
|
);
|
|
dlBtn.href = audioSrc;
|
|
dlBtn.download = f.name;
|
|
dlBtn.textContent = "\u2B07";
|
|
dlBtn.title = "Download";
|
|
dlBtn.style.cssText = "color:#8cf;text-decoration:none;font-size:13px;padding:0 4px;";
|
|
|
|
let currentAudio = null;
|
|
playBtn.onclick = () => {
|
|
if (currentAudio) {
|
|
currentAudio.pause();
|
|
currentAudio = null;
|
|
playBtn.textContent = "\u25B6";
|
|
playBtn.style.color = "#8f8";
|
|
return;
|
|
}
|
|
currentAudio = new Audio(audioSrc);
|
|
currentAudio.play();
|
|
playBtn.textContent = "\u25A0";
|
|
playBtn.style.color = "#f88";
|
|
currentAudio.onended = () => {
|
|
playBtn.textContent = "\u25B6";
|
|
playBtn.style.color = "#8f8";
|
|
currentAudio = null;
|
|
};
|
|
};
|
|
|
|
row.appendChild(name);
|
|
row.appendChild(size);
|
|
row.appendChild(playBtn);
|
|
row.appendChild(dlBtn);
|
|
container.appendChild(row);
|
|
}
|
|
}
|