starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[PR #5162] [CLOSED] feat: add drag-and-drop reordering to player queue #4450

New Issue
Closed
opened 2026-04-25 00:19:47 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:19:47 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/5162
Author: @alessandrocuzzocrea
Created: 4/1/2026
Status: ❌ Closed

Base: master ← Head: master

📝 Commits (1)

  • 186bac0 feat: add drag-and-drop reordering to player queue

📊 Changes

2 files changed (+55 additions, -3 deletions)

View changed files

📝 client/components/modals/player/QueueItemRow.vue (+3 -1)
📝 client/components/modals/player/QueueItemsModal.vue (+52 -2)

📄 Description

Brief summary

Add drag-and-drop reordering support to the player queue modal, allowing users to rearrange queued items by dragging them via a grip handle.

Which issue is fixed?

This is a new feature enhancement. There is no existing issue for this.

In-depth Description

Currently, users cannot reorder items in the player queue. This PR adds drag-and-drop reordering using vuedraggable.

Changes:

  • QueueItemsModal.vue: Wraps queue items in a <draggable> component with a transition-group for smooth animations. A local copy of the queue (queueItemsCopy) is maintained and synced to the Vuex store on reorder. Includes scoped styles for ghost (drop placeholder) and chosen (active drag) states.
  • QueueItemRow.vue: Adds a drag_indicator icon as a drag handle on the left side of each row. Accepts a new isDragging prop to toggle the cursor style between cursor-grab and cursor-grabbing.

Drag is constrained to the .drag-handle element so it doesn't interfere with existing click interactions (play, remove).

How have you tested this?

  • Opened the player queue modal and verified drag-and-drop reordering works correctly
  • Confirmed the reordered queue persists in the Vuex store and playback follows the new order
  • Verified that play and remove buttons still work as expected

Screenshots

https://github.com/user-attachments/assets/52d18c3d-2822-41a2-9b3e-cc52fb795364

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/5162 **Author:** [@alessandrocuzzocrea](https://github.com/alessandrocuzzocrea) **Created:** 4/1/2026 **Status:** ❌ Closed **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (1) - [`186bac0`](https://github.com/advplyr/audiobookshelf/commit/186bac0d45c5bb62e00a15f676c2c8201c0e2d85) feat: add drag-and-drop reordering to player queue ### 📊 Changes **2 files changed** (+55 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `client/components/modals/player/QueueItemRow.vue` (+3 -1) 📝 `client/components/modals/player/QueueItemsModal.vue` (+52 -2) </details> ### 📄 Description ## Brief summary Add drag-and-drop reordering support to the player queue modal, allowing users to rearrange queued items by dragging them via a grip handle. ## Which issue is fixed? This is a new feature enhancement. There is no existing issue for this. ## In-depth Description Currently, users cannot reorder items in the player queue. This PR adds drag-and-drop reordering using `vuedraggable`. **Changes:** - **`QueueItemsModal.vue`**: Wraps queue items in a `<draggable>` component with a `transition-group` for smooth animations. A local copy of the queue (`queueItemsCopy`) is maintained and synced to the Vuex store on reorder. Includes scoped styles for ghost (drop placeholder) and chosen (active drag) states. - **`QueueItemRow.vue`**: Adds a `drag_indicator` icon as a drag handle on the left side of each row. Accepts a new `isDragging` prop to toggle the cursor style between `cursor-grab` and `cursor-grabbing`. Drag is constrained to the `.drag-handle` element so it doesn't interfere with existing click interactions (play, remove). ## How have you tested this? - Opened the player queue modal and verified drag-and-drop reordering works correctly - Confirmed the reordered queue persists in the Vuex store and playback follows the new order - Verified that play and remove buttons still work as expected ## Screenshots https://github.com/user-attachments/assets/52d18c3d-2822-41a2-9b3e-cc52fb795364 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:19:47 +02:00
adam closed this issue 2026-04-25 00:19:47 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#4450
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?