mapl/DungeonCrawler
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: AudioManager zeigt jetzt alle Dateien an

Browse source 
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>
This commit is contained in:
Andre 2026-03-21 19:42:08 +01:00
parent 5b326e2de6
commit 5766fdb757
1 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
comfyui-audio/comfyui_audiocraft/web/js/audioManager.js
View file

@ -15,15 +15,11 @@ app.registerExtension({
const files = message.files || []; const files = message.files || [];
if (this._managerWidget) { if (this._managerWidget) {
// Update existing widget content
this._managerContainer.innerHTML = ""; this._managerContainer.innerHTML = "";
buildContent(this._managerContainer, summary, files); buildContent(this._managerContainer, summary, files);
const h = Math.min(60 + files.length * 22, 500);
this._managerWidget.computeSize = () => [this.size[0], h];
this.setSize([this.size[0], h + 80]);
} else { } else {
const container = document.createElement("div"); const container = document.createElement("div");
container.style.cssText = "padding:4px;overflow-y:auto;max-height:450px;"; container.style.cssText = "padding:4px;overflow-y:auto;";
buildContent(container, summary, files); buildContent(container, summary, files);
this._managerContainer = container; this._managerContainer = container;
@ -31,11 +27,12 @@ app.registerExtension({
serialize: false, serialize: false,
hideOnZoom: false, hideOnZoom: false,
}); });
const h = Math.min(60 + files.length * 22, 500);
this._managerWidget.computeSize = () => [this.size[0], h];
this.setSize([this.size[0], h + 80]);
} }
// 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); app.graph.setDirtyCanvas(true);
}; };
} }
@ -45,30 +42,37 @@ app.registerExtension({
function buildContent(container, summary, files) { function buildContent(container, summary, files) {
const header = document.createElement("div"); const header = document.createElement("div");
header.textContent = summary; header.textContent = summary;
header.style.cssText = "font-weight:bold;margin-bottom:6px;color:#fff;font-size:12px;"; header.style.cssText = "font-weight:bold;margin-bottom:8px;color:#fff;font-size:13px;padding:4px;background:#333;border-radius:4px;";
container.appendChild(header); container.appendChild(header);
if (files.length === 0) return; if (files.length === 0) return;
for (const f of files) { for (const f of files) {
const row = document.createElement("div"); const row = document.createElement("div");
row.style.cssText = "display:flex;justify-content:space-between;padding:2px 0;font-size:11px;color:#ccc;border-bottom:1px solid #333;align-items:center;"; 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"); const name = document.createElement("span");
name.textContent = f.name; name.textContent = f.name;
name.style.cssText = "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:8px;"; name.style.cssText = "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:6px;";
const size = document.createElement("span"); const size = document.createElement("span");
size.textContent = f.size_mb + " MB"; size.textContent = f.size_mb + " MB";
size.style.cssText = "color:#8cf;min-width:60px;text-align:right;margin-right:8px;"; size.style.cssText = "color:#8cf;min-width:55px;text-align:right;margin-right:6px;font-size:10px;";
const playBtn = document.createElement("button"); const playBtn = document.createElement("button");
playBtn.textContent = "\u25B6"; playBtn.textContent = "\u25B6";
playBtn.style.cssText = "background:#444;border:none;color:#8f8;cursor:pointer;padding:1px 6px;border-radius:3px;font-size:10px;"; 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( const audioSrc = api.apiURL(
`/view?filename=${encodeURIComponent(f.name)}&subfolder=audio&type=output` `/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; let currentAudio = null;
playBtn.onclick = () => { playBtn.onclick = () => {
@ -76,13 +80,16 @@ function buildContent(container, summary, files) {
currentAudio.pause(); currentAudio.pause();
currentAudio = null; currentAudio = null;
playBtn.textContent = "\u25B6"; playBtn.textContent = "\u25B6";
playBtn.style.color = "#8f8";
return; return;
} }
currentAudio = new Audio(audioSrc); currentAudio = new Audio(audioSrc);
currentAudio.play(); currentAudio.play();
playBtn.textContent = "\u25A0"; playBtn.textContent = "\u25A0";
playBtn.style.color = "#f88";
currentAudio.onended = () => { currentAudio.onended = () => {
playBtn.textContent = "\u25B6"; playBtn.textContent = "\u25B6";
playBtn.style.color = "#8f8";
currentAudio = null; currentAudio = null;
}; };
}; };
@ -90,6 +97,7 @@ function buildContent(container, summary, files) {
row.appendChild(name); row.appendChild(name);
row.appendChild(size); row.appendChild(size);
row.appendChild(playBtn); row.appendChild(playBtn);
row.appendChild(dlBtn);
container.appendChild(row); container.appendChild(row);
} }
} }