From 5766fdb7577defff0c5c2ff1069e93853f3c8b18 Mon Sep 17 00:00:00 2001
From: Andre <s.andre1989@gmail.com>
Date: Sat, 21 Mar 2026 19:42:08 +0100
Subject: [PATCH] Fix: AudioManager zeigt jetzt alle Dateien an
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../comfyui_audiocraft/web/js/audioManager.js | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/comfyui-audio/comfyui_audiocraft/web/js/audioManager.js b/comfyui-audio/comfyui_audiocraft/web/js/audioManager.js
index 1a7a177..39988ff 100644
--- a/comfyui-audio/comfyui_audiocraft/web/js/audioManager.js
+++ b/comfyui-audio/comfyui_audiocraft/web/js/audioManager.js
@@ -15,15 +15,11 @@ app.registerExtension({
                 const files = message.files || [];
 
                 if (this._managerWidget) {
-                    // Update existing widget content
                     this._managerContainer.innerHTML = "";
                     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 {
                     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);
 
                     this._managerContainer = container;
@@ -31,11 +27,12 @@ app.registerExtension({
                         serialize: 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);
             };
         }
@@ -45,30 +42,37 @@ app.registerExtension({
 function buildContent(container, summary, files) {
     const header = document.createElement("div");
     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);
 
     if (files.length === 0) return;
 
     for (const f of files) {
         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");
         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");
         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");
         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(
             `/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 = () => {
@@ -76,13 +80,16 @@ function buildContent(container, summary, files) {
                 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;
             };
         };
@@ -90,6 +97,7 @@ function buildContent(container, summary, files) {
         row.appendChild(name);
         row.appendChild(size);
         row.appendChild(playBtn);
+        row.appendChild(dlBtn);
         container.appendChild(row);
     }
 }