Andre
9e0e541d7e
Widget wird wiederverwendet statt neu erstellt. Audio-Source und Download-Link werden aktualisiert statt dupliziert. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
57 lines
2.5 KiB
JavaScript
57 lines
2.5 KiB
JavaScript
import { app } from "../../../scripts/app.js";
|
|
import { api } from "../../../scripts/api.js";
|
|
|
|
app.registerExtension({
|
|
name: "AudioCraft.AudioPreview",
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeData.name === "AudioPreview") {
|
|
const onExecuted = nodeType.prototype.onExecuted;
|
|
nodeType.prototype.onExecuted = function (message) {
|
|
onExecuted?.apply(this, arguments);
|
|
|
|
if (message?.audio) {
|
|
const audioInfo = message.audio[0];
|
|
const src = api.apiURL(
|
|
`/view?filename=${encodeURIComponent(audioInfo.filename)}&subfolder=${encodeURIComponent(audioInfo.subfolder || "")}&type=${audioInfo.type}`
|
|
);
|
|
|
|
// Reuse existing widget or create new one
|
|
if (this._audioWidget) {
|
|
// Update existing player
|
|
this._audioEl.src = src;
|
|
this._dlEl.href = src;
|
|
this._dlEl.download = audioInfo.filename;
|
|
this._dlEl.textContent = audioInfo.filename;
|
|
} else {
|
|
const container = document.createElement("div");
|
|
container.style.cssText = "padding:4px;";
|
|
|
|
const audio = document.createElement("audio");
|
|
audio.controls = true;
|
|
audio.style.width = "100%";
|
|
audio.src = src;
|
|
container.appendChild(audio);
|
|
|
|
const dl = document.createElement("a");
|
|
dl.href = src;
|
|
dl.download = audioInfo.filename;
|
|
dl.textContent = audioInfo.filename;
|
|
dl.style.cssText = "display:block;margin-top:2px;color:#8cf;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;";
|
|
container.appendChild(dl);
|
|
|
|
this._audioEl = audio;
|
|
this._dlEl = dl;
|
|
this._audioWidget = this.addDOMWidget("audio_preview", "dom", container, {
|
|
serialize: false,
|
|
hideOnZoom: false,
|
|
});
|
|
this._audioWidget.computeSize = () => [this.size[0], 70];
|
|
this.setSize([this.size[0], 150]);
|
|
}
|
|
|
|
app.graph.setDirtyCanvas(true);
|
|
}
|
|
};
|
|
}
|
|
},
|
|
});
|