diff --git a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png index 49c6536d4..d6c21bb98 100644 Binary files a/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png and b/browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.png differ diff --git a/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png b/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png index 694f33c40..c9fa7fca3 100644 Binary files a/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png and b/browser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png index ba8c6f041..cfc5dca7d 100644 Binary files a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png and b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png differ diff --git a/src/components/rightSidePanel/parameters/WidgetItem.vue b/src/components/rightSidePanel/parameters/WidgetItem.vue index 85069f890..6a2eca748 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 fbe645859..c1450632b 100644 --- a/src/extensions/core/uploadAudio.ts +++ b/src/extensions/core/uploadAudio.ts @@ -1,6 +1,5 @@ import { MediaRecorder as ExtendableMediaRecorder } from 'extendable-media-recorder' -import { useChainCallback } from '@/composables/functional/useChainCallback' import { useNodeDragAndDrop } from '@/composables/node/useNodeDragAndDrop' import { useNodeFileInput } from '@/composables/node/useNodeFileInput' import { useNodePaste } from '@/composables/node/useNodePaste' @@ -25,6 +24,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 +65,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,26 +128,18 @@ 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)) } } - audioUIWidget.onRemove = useChainCallback( - audioUIWidget.onRemove, - () => { - if (!audioUIWidget.element) return - audioUIWidget.element.pause() - audioUIWidget.element.src = '' - audioUIWidget.element.remove() - } - ) + let value = '' + audioUIWidget.options.getValue = () => value + audioUIWidget.options.setValue = (v) => (value = v) return { widget: audioUIWidget } } @@ -156,10 +158,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,18 +187,18 @@ 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. - if (audioWidget.value) { - onAudioWidgetUpdate() - } + onAudioWidgetUpdate() + audioWidget.callback = onAudioWidgetUpdate // Load saved audio file widget values if restoring from workflow @@ -202,9 +206,7 @@ app.registerExtension({ node.onGraphConfigured = function () { // @ts-expect-error fixme ts strict error onGraphConfigured?.apply(this, arguments) - if (audioWidget.value) { - onAudioWidgetUpdate() - } + onAudioWidgetUpdate() } const handleUpload = async (files: File[]) => { @@ -328,7 +330,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 ff47510e6..e97e7fecb 100644 --- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue +++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue @@ -155,7 +155,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 7b46670d2..000000000 --- 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 bf69add86..b351d7f25 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 @@