Add Save Queue feature #4110

deluan · 2025-05-23T23:28:37Z

Summary

add SaveQueueDialog component with tests
open SaveQueueDialog from PlayerToolbar and integrate in dialogs system
manage save queue state via actions and reducers
expose new translation for saving the queue

Testing

make format lint test
npm run lint
npm run check-formatting
npm run test:ci
npm run type-check

gemini-code-assist

Hello @deluan, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

Hello team, Gemini here with a summary of this pull request. This PR introduces a new feature that allows users to save their current playback queue as a new playlist. This is a great addition for users who want to preserve their listening sessions or create playlists on the fly from what they are currently playing. The changes involve adding a new dialog component, integrating it into the existing dialog system and player toolbar, and setting up the necessary Redux actions and reducers to manage its state and interact with the backend API to create the playlist and add the tracks.

Highlights

UI Component: Save Queue Dialog: Introduces a new SaveQueueDialog component that prompts the user for a playlist name and handles the saving logic.
Player Toolbar Integration: Adds a new 'Save Queue' button with a save icon (RiSaveLine) to the PlayerToolbar to trigger the dialog.
State Management: Implements new Redux actions (SAVE_QUEUE_OPEN, SAVE_QUEUE_CLOSE) and a dedicated reducer (saveQueueDialogReducer) to manage the visibility state of the Save Queue dialog.
Backend Interaction: Uses the dataProvider to first create a new playlist and then add the tracks from the current queue to that playlist.
Testing: Includes unit tests for the new SaveQueueDialog component to ensure its functionality, including playlist creation and track saving.

Changelog

Click here to see the changelog

ui/src/App.jsx
- Registers the new saveQueueDialogReducer with the Redux store (lines 25, 66).
ui/src/actions/dialogs.js
- Adds new action types SAVE_QUEUE_OPEN and SAVE_QUEUE_CLOSE (lines 11, 12).
- Adds action creators openSaveQueueDialog and closeSaveQueueDialog (lines 82-87).
ui/src/audioplayer/PlayerToolbar.jsx
- Imports necessary hooks and components (useDispatch, IconButton, RiSaveLine, openSaveQueueDialog) (lines 2, 5, 6, 8).
- Adds a new IconButton with a save icon that dispatches openSaveQueueDialog when clicked (lines 33-39).
ui/src/dialogs/Dialogs.jsx
- Imports the new SaveQueueDialog component (line 5).
- Includes SaveQueueDialog in the list of rendered dialogs (line 10).
ui/src/dialogs/SaveQueueDialog.jsx
- Adds the new SaveQueueDialog component definition (lines 1-102).
- Uses Redux hooks to access dialog state and player queue (lines 16, 17).
- Manages local state for the playlist name (line 18).
- Implements handleClose to close the dialog and reset state (lines 23-30).
- Implements handleSave to create the playlist and add tracks using dataProvider (lines 32-54).
- Includes UI elements for the dialog using Material UI components (lines 66-101).
- Adds translation keys for dialog title and input label (lines 74, 84).
- Disables the save button when the name is empty (line 94).
ui/src/dialogs/SaveQueueDialog.test.jsx
- Adds unit tests for the SaveQueueDialog component (lines 1-74).
- Tests the successful creation of a playlist and saving of queue tracks (lines 34-67).
- Tests that the save button is disabled when the input name is empty (lines 69-73).
ui/src/dialogs/index.js
- Exports the new SaveQueueDialog component (line 4).
ui/src/i18n/en.json
- Adds a new translation key resources.playlist.actions.saveQueue for the dialog title (line 195).
ui/src/reducers/dialogReducer.js
- Adds new action types SAVE_QUEUE_OPEN and SAVE_QUEUE_CLOSE (lines 16, 17).
- Adds the new saveQueueDialogReducer to manage the dialog's open state (lines 175-188).

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Queue plays a sweet song,
Save it now, make it a list,
Music lives forever.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request effectively introduces the 'Save Queue' feature, including a new dialog, Redux state management, and UI integration in the player toolbar. The code is generally well-structured, and the functionality is clearly implemented with accompanying tests. Great job on adding this useful feature!

I have a couple of suggestions for further refinement, primarily around user experience and navigation consistency within a Single Page Application context. I'm defaulting to common React/JavaScript best practices as no specific style guide was provided.

Summary of Findings

Navigation Method: The use of window.location.href for navigation in SaveQueueDialog.jsx might be inconsistent with SPA best practices. Consider using a router-based navigation method if available.
UX: Loading State: The SaveQueueDialog.jsx could benefit from a visual loading indicator during the save operation to improve user feedback.
Event Propagation in handleClose: In SaveQueueDialog.jsx, handleClose uses e.stopPropagation(). While often useful, it might be worth confirming if it's strictly necessary here, as it can sometimes make debugging event flows harder if overused. (Severity: low, not commented directly due to review settings).
Empty Queue Behavior: The dialog allows creating an empty playlist if the queue is empty. This seems like reasonable behavior, but it's good to confirm this is the intended outcome. (Severity: low, not commented directly due to review settings).

Merge Readiness

The pull request is well on its way to being mergeable. The core functionality is implemented effectively. Addressing the medium severity comments regarding navigation and loading state would enhance the user experience and ensure consistency with SPA patterns. I am unable to approve the pull request myself, but I recommend considering these changes before merging. Other reviewers should also take a look.

ui/src/dialogs/SaveQueueDialog.jsx

github-actions · 2025-05-23T23:37:01Z

Signed-off-by: Deluan <deluan@navidrome.org>

Copilot

Pull Request Overview

This PR adds a new Save Queue feature that allows users to save their current queue as a playlist.

Implements SaveQueueDialog with save and cancel behavior and integrates it in the dialogs system.
Updates Redux reducers to manage the save queue state and adds associated actions.
Integrates the save queue functionality in the PlayerToolbar and adds tests and i18n updates.

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
ui/src/reducers/dialogReducer.js	Adds support for SAVE_QUEUE_OPEN/CLOSE actions in a new reducer.
ui/src/i18n/en.json	Adds a new translation string for the save queue.
ui/src/dialogs/index.js	Exports the newly created SaveQueueDialog.
ui/src/dialogs/SaveQueueDialog.test.jsx	Implements tests to validate save queue dialog behavior.
ui/src/dialogs/SaveQueueDialog.jsx	Implements the SaveQueueDialog component with save, cancel, and Enter key support.
ui/src/dialogs/Dialogs.jsx	Integrates the SaveQueueDialog into the dialog system.
ui/src/common/CollapsibleComment.jsx	Optimizes comment splitting with useMemo.
ui/src/audioplayer/PlayerToolbar.test.jsx	Adds tests to ensure proper behavior for the save queue button.
ui/src/audioplayer/PlayerToolbar.jsx	Adds the save queue button and integrates the open dialog action.
ui/src/actions/dialogs.js	Defines actions for opening and closing the save queue dialog.
ui/src/App.jsx	Integrates the saveQueueDialog reducer into the application store.

ui/src/dialogs/SaveQueueDialog.jsx

Signed-off-by: Deluan <deluan@navidrome.org>

fmkhaliifa2 · 2025-06-17T01:16:02Z

Thanks

ui: add save queue to playlist

1b03bb6

deluan added the codex label May 23, 2025 — with ChatGPT Codex Connector

gemini-code-assist bot reviewed May 23, 2025

View reviewed changes

gemini-code-assist bot suggested changes May 23, 2025

View reviewed changes

ui/src/dialogs/SaveQueueDialog.jsx Outdated Show resolved Hide resolved

ui/src/dialogs/SaveQueueDialog.jsx Outdated Show resolved Hide resolved

deluan marked this pull request as draft May 23, 2025 23:32

deluan added 5 commits May 23, 2025 21:24

fix(ui): improve toolbar layout

42c737e

Signed-off-by: Deluan <deluan@navidrome.org>

fix(ui): add loading state to save queue dialog

bfdf8bb

Signed-off-by: Deluan <deluan@navidrome.org>

fix(ui): refresh playlist after saving queue

1e496d9

Signed-off-by: Deluan <deluan@navidrome.org>

fix lint

ef3e1be

Signed-off-by: Deluan <deluan@navidrome.org>

remove duplication in PlayerToolbar and add tests

b5ddd77

Signed-off-by: Deluan <deluan@navidrome.org>

deluan requested a review from Copilot May 24, 2025 01:55

Copilot AI reviewed May 24, 2025

View reviewed changes

ui/src/dialogs/SaveQueueDialog.jsx Show resolved Hide resolved

deluan marked this pull request as ready for review May 24, 2025 02:00

fix(i18n): update save queue text for clarity in English and Portuguese

d7d547d

Signed-off-by: Deluan <deluan@navidrome.org>

deluan merged commit 514aceb into master May 24, 2025
10 checks passed

deluan deleted the 32gsma-codex/add-button-to-create-new-playlist branch May 24, 2025 02:04

BrewTestBot mentioned this pull request May 29, 2025

navidrome 0.56.0 Homebrew/homebrew-core#225049

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add Save Queue feature #4110

Add Save Queue feature #4110

Uh oh!

deluan commented May 23, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

fmkhaliifa2 commented Jun 17, 2025

Uh oh!

Uh oh!

Uh oh!

Add Save Queue feature #4110

Add Save Queue feature #4110

Uh oh!

Conversation

deluan commented May 23, 2025

Summary

Testing

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Changelog

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Summary of Findings

Merge Readiness

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented May 23, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

fmkhaliifa2 commented Jun 17, 2025

Uh oh!

Uh oh!