-
Notifications
You must be signed in to change notification settings - Fork 386
Vuenodes/audio widgets #5627
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vuenodes/audio widgets #5627
Conversation
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 10/09/2025, 11:58:57 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
* [ci] ignore playwright mcp directory * [feat] add AssetBrowserModal And all related sub components * [feat] reactive filter functions * [ci] clean up storybook config * [feat] add sematic AssetCard * [fix] i love lucide * [fix] AssetCard layout issues * [fix] add AssetBadge type * [fix] simplify useAssetBrowser * [fix] modal layout * [fix] simplify useAssetBrowserDialog * [fix] add tailwind back to storybook * [fix] better reponsive layout * [fix] missed i18n string * [fix] missing i18n translations * [fix] remove erroneous prevent on keyboard.space * [feat] add asset metadata validation utilities * [fix] remove erroneous test code * [fix] remove forced min and max width on AssetCard * [fix] import statement nits
### Summary Adds desktop dialog framework with data-driven dialog definitions. ### Changes - Data-driven dialog structure in `desktopDialogs.ts` - Dynamic dialog view component with i18n support - Button action types: openUrl, close, cancel - Button severity levels for styling (primary, secondary, danger, warn) - Fallback invalid dialog for error handling - i18n collection script updated for dialog strings
This pull request improves the selection toolbox behavior during node dragging by ensuring that it correctly responds to both LiteGraph and Vue node drag events. The main changes introduce a reactive drag state for Vue nodes in the layout store and update the selection toolbox composable and Vue node component to use this state. **Selection toolbox behavior improvements:** * Added a helper function and separate watchers in `useSelectionToolboxPosition.ts` to hide the selection toolbox when either LiteGraph or Vue nodes are being dragged. This ensures consistent UI feedback regardless of node type. [[1]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713L171-R172) [[2]](diffhunk://#diff-57a51ac5e656e64ae7fd276d71b115058631621755de33b1eb8e8a4731d48713R212-R224) **Vue node drag state management:** * Added a reactive `isDraggingVueNodes` property to the `LayoutStoreImpl` class, along with getter and setter methods to manage Vue node drag state. This allows other components to reactively track when Vue nodes are being dragged. [[1]](diffhunk://#diff-80d32fe0fb72730c16cf7259adef8b20732ff214df240b1d39ae516737beaf3bR133-R135) [[2]](diffhunk://#diff-80d32fe0fb72730c16cf7259adef8b20732ff214df240b1d39ae516737beaf3bR354-R367) * Updated `LGraphNode.vue` to set and clear the Vue node dragging state in the layout store during pointer down and up events, ensuring the selection toolbox is hidden while dragging Vue nodes. [[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R357-R360) [[2]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R376-R378) **Dependency updates:** * Imported the `layoutStore` in `LGraphNode.vue` to access the new drag state management methods. * Added missing `ref` import in `layoutStore.ts` to support the new reactive property. https://github.com/user-attachments/assets/d6e9c15e-63b5-4de2-9688-ebbc6a3be545 --------- Co-authored-by: GitHub Action <[email protected]>
Currently, we set persistence method in the auth store setup. This creates pattern of using the default on init (indexed DB) up until the firebase store is initialized and `setPersistence` is called. For devices that don't support indexed DB or have the connection aggresively terminated or cleared, like [Safari](https://comfy-org.sentry.io/issues/6879071102/?project=4509681221369857&query=is%3Aunresolved&referrer=issue-stream), this can create problems with maintaing auth persistence. Fix by setting persistence method in the initialization in main.ts ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5614-Move-VueFire-persistence-configuration-to-initialization-2716d73d3650817480e0c8feb1f37b9a) by [Unito](https://www.unito.io) --------- Co-authored-by: Claude <[email protected]>
This pull request improves the lazy loading behavior and caching strategy for images in the `LazyImage.vue` component. The most significant changes are focused on optimizing image rendering and resource management, as well as improving code clarity. **Lazy loading behavior improvements:** * Changed the `<img>` element to render only when `cachedSrc` is available, ensuring that images are not displayed before they are ready. * Updated watchers in `LazyImage.vue` to use clearer variable names (`shouldLoadVal` instead of `shouldLoad`) for better readability and maintainability. [[1]](diffhunk://#diff-3a1bfa7eb8cb26b04bea73f7b4b4e3c01e9d20a7eba6c3738fb47f96da1a7c95L80-R81) [[2]](diffhunk://#diff-3a1bfa7eb8cb26b04bea73f7b4b4e3c01e9d20a7eba6c3738fb47f96da1a7c95L96-R96) **Caching strategy enhancement:** * Modified the `fetch` call in `mediaCacheService.ts` to use `{ cache: 'force-cache' }`, which leverages the browser's cache more aggressively when loading media, potentially improving performance and reducing network requests. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5626-LazyImage-on-Safari-2716d73d365081eeb1d3c2a96be4d408) by [Unito](https://www.unito.io)
## Summary See https://typescript-eslint.io/blog/project-service/ for context. Creates a browser_tests specific tsconfig so that they can be linted. Does not add a package.json script to do the linting yet, but `pnpm exec eslint browser_tests` should work for now. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5633-lint-add-tsconfig-for-browser_tests-fix-existing-violations-2726d73d3650819d8ef2c4b0abc31e14) by [Unito](https://www.unito.io)
…ger (#5635) ## Summary - Updated frontend to align with backend changes in ComfyUI core PR #7555 - Changed manager startup argument from `--disable-manager` (opt-out) to `--enable-manager` (opt-in) - Manager is now disabled by default unless explicitly enabled ## Changes - Modified `useManagerState.ts` to check for `--enable-manager` flag presence - Inverted logic: manager is disabled when the flag is NOT present - Updated all related tests to reflect the new opt-in behavior - Fixed edge case where `systemStats` is null ## Related - Backend PR: comfyanonymous/ComfyUI#7555 ## Test Plan - [x] All unit tests pass - [x] Verified manager state logic with different flag combinations - [x] TypeScript type checking passes - [x] Linting passes 🤖 Generated with [Claude Code](https://claude.ai/code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5635-refactor-Change-manager-flag-from-disable-manager-to-enable-manager-2726d73d36508153a88bd9f152132b2a) by [Unito](https://www.unito.io)
## Summary Added comprehensive component test suite for WidgetImageCompare widget with 410 test assertions covering display, edge cases, and integration scenarios. ## Changes - **What**: Created [Vue Test Utils](https://vue-test-utils.vuejs.org/) test suite for [WidgetImageCompare component](src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue) using [Vitest](https://vitest.dev/) testing framework ## Review Focus Test coverage completeness for string vs object value handling, accessibility attribute propagation, and edge case robustness including malformed URLs and empty states. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5549-test-Add-component-test-for-image-compare-widget-26e6d73d365081189fe0d010f87d1eec) by [Unito](https://www.unito.io) --------- Co-authored-by: DrJKL <[email protected]>
## Summary Some users were authenticating successfully but their email addresses weren't being extracted from the Firebase token. This happened because we weren't explicitly requesting the email scope during OAuth authentication. While Firebase's default configuration includes basic profile info, it doesn't guarantee email access for all account types - particularly Google Workspace accounts with restrictive policies or users with privacy-conscious settings. [Github Scopes](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps) ## Changes Adding email scope for Google + Github social OAuth. ## Review Focus N/A ## Screenshots (if applicable) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5638-Explicitly-add-email-scope-for-social-auth-login-2726d73d3650817ab356fc9c04f8641b) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <[email protected]>
…alization and audio handling
…nd serialization support
… and serialization updates
src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
Show resolved
Hide resolved
src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
Show resolved
Hide resolved
src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
Outdated
Show resolved
Hide resolved
src/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue
Outdated
Show resolved
Hide resolved
src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
Outdated
Show resolved
Hide resolved
src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
Outdated
Show resolved
Hide resolved
src/renderer/extensions/vueNodes/widgets/composables/audio/useAudioRecorder.ts
Show resolved
Hide resolved
src/renderer/extensions/vueNodes/widgets/composables/audio/useTimer.ts
Outdated
Show resolved
Hide resolved
src/renderer/extensions/vueNodes/widgets/composables/audio/useAudioPlayback.ts
Show resolved
Hide resolved
…cleanup on unmount for useAudioRecorder
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
Updating Playwright Expectations |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
## What's Changed ### 🚀 Features - Implement DOMWidget for vue (#6006) - Implement drop-on-canvas + linkconnectoradapter consolidation (#5898) - Vuenodes/audio widgets (#5627) - Allow reordering of linked subgraph widgets (#5981) - Contextmenu Monkeypatch Standardization (#5977) - Fix/vue nodes snap to grid (#5973) - Select Vue Nodes After Drag (#5863) - fix Vue node widgets should be in disabled state if their slots are connected with a link (#5834) ### 🐛 Bug Fixes - [bugfix] Fix update-playwright-expectations workflow missing frontend build (#6005) - Fix: Reset size when collapsing (#6004) - fix: misc LOD polish (#6001) - Fix: Allow uncoloring Vue Nodes (#5991) - [ci] Fix detached HEAD state in Playwright update workflow (#5985) - Close zoom menu when toggling minimap visibility (#5974) ### 🔧 Maintenance - Devex: Improve dev server (#6002) - CI: Add concurrency checks to PR workflows (#6000) - [feat] Auto-remove New Browser Test Expectations label after workflow completes (#5998) - CI: Simplify update playwright expectations (maybe) (#5994) - Lint: Add tailwind linter (#5984) - [feat] Auto-remove claude-review label after CI review completes (#5983) - Fix CI: Remove explicit repository parameter causing non-reproducible test results (#5950) - refactor: Reorganize GitHub Actions for better reusability (#5949) - devex: Update CODEOWNERS (#5999) - Docs: Update agent instructions about style classes (#5990) - Style: Fix move cursors that should be grabs (#5989) - Workflow templates review (#5975) **Full Changelog**: v1.29.0...v1.29.1 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6012-1-29-1-2896d73d365081b08418f46934651c41) by [Unito](https://www.unito.io) Co-authored-by: arjansingh <[email protected]>
This pull request introduces a new audio playback widget for node UIs and integrates it into the node widget system. The main changes include the implementation of the `WidgetAudioUI` component, its registration in the widget registry, and updates to pass node data to the new widget. Additionally, some logging was added for debugging purposes. **Audio Widget Implementation and Integration:** * Added a new `WidgetAudioUI.vue` component that provides audio playback controls (play/pause, progress slider, volume, options) and loads audio files from the server based on node data. * Registered the new `WidgetAudioUI` component in the widget registry by importing it and adding an entry for the `audioUI` type. [[1]](diffhunk://#diff-c2a60954f7fdf638716fa1f83e437774d5250e9c99f3aa83c84a1c0e9cc5769bR21) [[2]](diffhunk://#diff-c2a60954f7fdf638716fa1f83e437774d5250e9c99f3aa83c84a1c0e9cc5769bR112-R115) * Updated `NodeWidgets.vue` to pass `nodeInfo` as the `node-data` prop to widgets of type `audioUI`, enabling the widget to access node-specific audio file information. **Debugging and Logging:** * Added logging of `nodeData` in `LGraphNode.vue` and `WidgetAudioUI.vue` to help with debugging and understanding the data structure. [[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R188-R189) [[2]](diffhunk://#diff-71cce190d74c6b5359288857ab9917caededb8cdf1a7e6377578b78aa32be2fcR1-R284) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5627-Vuenodes-audio-widgets-2716d73d365081fbbc06c1e6cf4ebf4d) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <[email protected]> Co-authored-by: Arjan Singh <[email protected]> Co-authored-by: filtered <[email protected]> Co-authored-by: Christian Byrne <[email protected]> Co-authored-by: Claude <[email protected]> Co-authored-by: Alexander Brown <[email protected]> Co-authored-by: Jin Yi <[email protected]> Co-authored-by: DrJKL <[email protected]> Co-authored-by: Robin Huang <[email protected]> Co-authored-by: github-actions <[email protected]>
## What's Changed ### 🚀 Features - Implement DOMWidget for vue (#6006) - Implement drop-on-canvas + linkconnectoradapter consolidation (#5898) - Vuenodes/audio widgets (#5627) - Allow reordering of linked subgraph widgets (#5981) - Contextmenu Monkeypatch Standardization (#5977) - Fix/vue nodes snap to grid (#5973) - Select Vue Nodes After Drag (#5863) - fix Vue node widgets should be in disabled state if their slots are connected with a link (#5834) ### 🐛 Bug Fixes - [bugfix] Fix update-playwright-expectations workflow missing frontend build (#6005) - Fix: Reset size when collapsing (#6004) - fix: misc LOD polish (#6001) - Fix: Allow uncoloring Vue Nodes (#5991) - [ci] Fix detached HEAD state in Playwright update workflow (#5985) - Close zoom menu when toggling minimap visibility (#5974) ### 🔧 Maintenance - Devex: Improve dev server (#6002) - CI: Add concurrency checks to PR workflows (#6000) - [feat] Auto-remove New Browser Test Expectations label after workflow completes (#5998) - CI: Simplify update playwright expectations (maybe) (#5994) - Lint: Add tailwind linter (#5984) - [feat] Auto-remove claude-review label after CI review completes (#5983) - Fix CI: Remove explicit repository parameter causing non-reproducible test results (#5950) - refactor: Reorganize GitHub Actions for better reusability (#5949) - devex: Update CODEOWNERS (#5999) - Docs: Update agent instructions about style classes (#5990) - Style: Fix move cursors that should be grabs (#5989) - Workflow templates review (#5975) **Full Changelog**: v1.29.0...v1.29.1 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6012-1-29-1-2896d73d365081b08418f46934651c41) by [Unito](https://www.unito.io) Co-authored-by: arjansingh <[email protected]>
This pull request introduces a new audio playback widget for node UIs and integrates it into the node widget system. The main changes include the implementation of the `WidgetAudioUI` component, its registration in the widget registry, and updates to pass node data to the new widget. Additionally, some logging was added for debugging purposes. **Audio Widget Implementation and Integration:** * Added a new `WidgetAudioUI.vue` component that provides audio playback controls (play/pause, progress slider, volume, options) and loads audio files from the server based on node data. * Registered the new `WidgetAudioUI` component in the widget registry by importing it and adding an entry for the `audioUI` type. [[1]](diffhunk://#diff-c2a60954f7fdf638716fa1f83e437774d5250e9c99f3aa83c84a1c0e9cc5769bR21) [[2]](diffhunk://#diff-c2a60954f7fdf638716fa1f83e437774d5250e9c99f3aa83c84a1c0e9cc5769bR112-R115) * Updated `NodeWidgets.vue` to pass `nodeInfo` as the `node-data` prop to widgets of type `audioUI`, enabling the widget to access node-specific audio file information. **Debugging and Logging:** * Added logging of `nodeData` in `LGraphNode.vue` and `WidgetAudioUI.vue` to help with debugging and understanding the data structure. [[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2R188-R189) [[2]](diffhunk://#diff-71cce190d74c6b5359288857ab9917caededb8cdf1a7e6377578b78aa32be2fcR1-R284) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5627-Vuenodes-audio-widgets-2716d73d365081fbbc06c1e6cf4ebf4d) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <[email protected]> Co-authored-by: Arjan Singh <[email protected]> Co-authored-by: filtered <[email protected]> Co-authored-by: Christian Byrne <[email protected]> Co-authored-by: Claude <[email protected]> Co-authored-by: Alexander Brown <[email protected]> Co-authored-by: Jin Yi <[email protected]> Co-authored-by: DrJKL <[email protected]> Co-authored-by: Robin Huang <[email protected]> Co-authored-by: github-actions <[email protected]>
## What's Changed ### 🚀 Features - Implement DOMWidget for vue (#6006) - Implement drop-on-canvas + linkconnectoradapter consolidation (#5898) - Vuenodes/audio widgets (#5627) - Allow reordering of linked subgraph widgets (#5981) - Contextmenu Monkeypatch Standardization (#5977) - Fix/vue nodes snap to grid (#5973) - Select Vue Nodes After Drag (#5863) - fix Vue node widgets should be in disabled state if their slots are connected with a link (#5834) ### 🐛 Bug Fixes - [bugfix] Fix update-playwright-expectations workflow missing frontend build (#6005) - Fix: Reset size when collapsing (#6004) - fix: misc LOD polish (#6001) - Fix: Allow uncoloring Vue Nodes (#5991) - [ci] Fix detached HEAD state in Playwright update workflow (#5985) - Close zoom menu when toggling minimap visibility (#5974) ### 🔧 Maintenance - Devex: Improve dev server (#6002) - CI: Add concurrency checks to PR workflows (#6000) - [feat] Auto-remove New Browser Test Expectations label after workflow completes (#5998) - CI: Simplify update playwright expectations (maybe) (#5994) - Lint: Add tailwind linter (#5984) - [feat] Auto-remove claude-review label after CI review completes (#5983) - Fix CI: Remove explicit repository parameter causing non-reproducible test results (#5950) - refactor: Reorganize GitHub Actions for better reusability (#5949) - devex: Update CODEOWNERS (#5999) - Docs: Update agent instructions about style classes (#5990) - Style: Fix move cursors that should be grabs (#5989) - Workflow templates review (#5975) **Full Changelog**: v1.29.0...v1.29.1 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6012-1-29-1-2896d73d365081b08418f46934651c41) by [Unito](https://www.unito.io) Co-authored-by: arjansingh <[email protected]>
This pull request introduces a new audio playback widget for node UIs and integrates it into the node widget system. The main changes include the implementation of the
WidgetAudioUI
component, its registration in the widget registry, and updates to pass node data to the new widget. Additionally, some logging was added for debugging purposes.Audio Widget Implementation and Integration:
WidgetAudioUI.vue
component that provides audio playback controls (play/pause, progress slider, volume, options) and loads audio files from the server based on node data.WidgetAudioUI
component in the widget registry by importing it and adding an entry for theaudioUI
type. [1] [2]NodeWidgets.vue
to passnodeInfo
as thenode-data
prop to widgets of typeaudioUI
, enabling the widget to access node-specific audio file information.Debugging and Logging:
nodeData
inLGraphNode.vue
andWidgetAudioUI.vue
to help with debugging and understanding the data structure. [1] [2]┆Issue is synchronized with this Notion page by Unito