From 7f4b71471d5094b1a56086d3e1a0be1f2384ddf8 Mon Sep 17 00:00:00 2001 From: Austin Mroz Date: Tue, 20 Jan 2026 20:02:55 -0800 Subject: [PATCH 1/3] Fix doubled player on VHS LoadAudio in vue --- .../rightSidePanel/parameters/WidgetItem.vue | 2 +- src/extensions/core/uploadAudio.ts | 52 +++++--- .../vueNodes/components/NodeWidgets.vue | 2 +- .../widgets/components/WidgetAudioUI.vue | 61 ---------- .../components/audio/AudioPreviewPlayer.vue | 111 +++--------------- .../composables/useWidgetRenderer.test.ts | 69 +++++------ .../widgets/registry/widgetRegistry.ts | 16 +-- .../vueNodes/widgets/utils/audioUtils.ts | 12 -- 8 files changed, 81 insertions(+), 244 deletions(-) delete mode 100644 src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue diff --git a/src/components/rightSidePanel/parameters/WidgetItem.vue b/src/components/rightSidePanel/parameters/WidgetItem.vue index 85069f89095..6a2eca74873 100644 --- a/src/components/rightSidePanel/parameters/WidgetItem.vue +++ b/src/components/rightSidePanel/parameters/WidgetItem.vue @@ -43,7 +43,7 @@ const favoritedWidgetsStore = useFavoritedWidgetsStore() const isEditing = ref(false) const widgetComponent = computed(() => { - const component = getComponent(widget.type, widget.name) + const component = getComponent(widget.type) return component || WidgetLegacy }) diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts index fbe6458594d..0da70af99a1 100644 --- a/src/extensions/core/uploadAudio.ts +++ b/src/extensions/core/uploadAudio.ts @@ -25,6 +25,17 @@ import { getNodeByLocatorId } from '@/utils/graphTraversalUtil' import { api } from '../../scripts/api' import { app } from '../../scripts/app' +function updateUIWidget( + audioUIWidget: DOMWidget, + url: string = '' +) { + audioUIWidget.element.src = url + audioUIWidget.value = url + audioUIWidget.callback?.(url) + if (url) audioUIWidget.element.classList.remove('empty-audio-widget') + else audioUIWidget.element.classList.add('empty-audio-widget') +} + async function uploadFile( audioWidget: IStringWidget, audioUIWidget: DOMWidget, @@ -55,10 +66,10 @@ async function uploadFile( } if (updateNode) { - audioUIWidget.element.src = api.apiURL( - getResourceURL(...splitFilePath(path)) + updateUIWidget( + audioUIWidget, + api.apiURL(getResourceURL(...splitFilePath(path))) ) - audioWidget.value = path // Manually trigger the callback to update VueNodes audioWidget.callback?.(path) @@ -118,24 +129,25 @@ app.registerExtension({ const audios = output.audio if (!audios?.length) return const audio = audios[0] - audioUIWidget.element.src = api.apiURL( - getResourceURL( - audio.subfolder ?? '', - audio.filename ?? '', - audio.type - ) + const resourceUrl = getResourceURL( + audio.subfolder ?? '', + audio.filename ?? '', + audio.type ) - audioUIWidget.element.classList.remove('empty-audio-widget') + updateUIWidget(audioUIWidget, api.apiURL(resourceUrl)) } } + let value = '' + audioUIWidget.options.getValue = () => value + audioUIWidget.options.setValue = (v) => (value = v) + audioUIWidget.onRemove = useChainCallback( audioUIWidget.onRemove, () => { if (!audioUIWidget.element) return audioUIWidget.element.pause() - audioUIWidget.element.src = '' - audioUIWidget.element.remove() + updateUIWidget(audioUIWidget) } ) @@ -156,10 +168,12 @@ app.registerExtension({ (w) => w.name === 'audioUI' ) as unknown as DOMWidget const audio = output.audio[0] - audioUIWidget.element.src = api.apiURL( - getResourceURL(audio.subfolder ?? '', audio.filename ?? '', audio.type) + const resourceUrl = getResourceURL( + audio.subfolder ?? '', + audio.filename ?? '', + audio.type ) - audioUIWidget.element.classList.remove('empty-audio-widget') + updateUIWidget(audioUIWidget, api.apiURL(resourceUrl)) } } }) @@ -183,12 +197,12 @@ app.registerExtension({ const audioUIWidget = node.widgets.find( (w) => w.name === 'audioUI' ) as unknown as DOMWidget - audioUIWidget.options.canvasOnly = true const onAudioWidgetUpdate = () => { if (typeof audioWidget.value !== 'string') return - audioUIWidget.element.src = api.apiURL( - getResourceURL(...splitFilePath(audioWidget.value)) + updateUIWidget( + audioUIWidget, + api.apiURL(getResourceURL(...splitFilePath(audioWidget.value))) ) } // Initially load default audio file to audioUIWidget. @@ -328,7 +342,7 @@ app.registerExtension({ URL.revokeObjectURL(audioUIWidget.element.src) } - audioUIWidget.element.src = URL.createObjectURL(audioBlob) + updateUIWidget(audioUIWidget, URL.createObjectURL(audioBlob)) isRecording = false diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue index 9975ec86408..926eb170415 100644 --- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue +++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue @@ -152,7 +152,7 @@ const processedWidgets = computed((): ProcessedWidget[] => { if (!shouldRenderAsVue(widget)) continue const vueComponent = - getComponent(widget.type, widget.name) || + getComponent(widget.type) || (widget.isDOMWidget ? WidgetDOM : WidgetLegacy) const { slotMetadata, options } = widget diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue deleted file mode 100644 index 7b46670d218..00000000000 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue +++ /dev/null @@ -1,61 +0,0 @@ - - - diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue index bf69add86ce..b351d7f258a 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue @@ -1,17 +1,13 @@