From 8cd5dd518a3321c93ed0e9a5aff6eef04fe26b41 Mon Sep 17 00:00:00 2001 From: ScreenTinker Date: Tue, 21 Apr 2026 15:57:40 -0500 Subject: [PATCH] Playlist: add up/down reorder buttons Adds accessible up/down arrow buttons alongside the existing drag-to- reorder handle on each playlist item. Touch users (and keyboard users) now have a reliable way to re-order without relying on HTML5 drag-drop, which is effectively unusable on mobile. First/last items have the respective arrow disabled. Uses the same /reorder API the drag handler uses, so behavior stays consistent. flex-wrap on the item container prevents control overflow on narrow screens. Co-Authored-By: Claude Opus 4.7 --- frontend/js/views/playlists.js | 38 ++++++++++++++++++++++++++++++---- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/frontend/js/views/playlists.js b/frontend/js/views/playlists.js index 7295dbf..cf001a3 100644 --- a/frontend/js/views/playlists.js +++ b/frontend/js/views/playlists.js @@ -294,7 +294,7 @@ function renderItems(items) { } itemsEl.innerHTML = items.map((item, i) => ` -
+
${i + 1}
${item.thumbnail_path @@ -311,9 +311,17 @@ function renderItems(items) { sec
- +
+ + + +
`).join(''); @@ -348,6 +356,28 @@ function renderItems(items) { }); }); + // Up/down reorder (touch-friendly alternative to drag) + itemsEl.querySelectorAll('.item-move').forEach(btn => { + btn.addEventListener('click', async (e) => { + if (btn.disabled) return; + const itemId = parseInt(e.currentTarget.dataset.itemId, 10); + const dir = e.currentTarget.dataset.dir; + const order = Array.from(itemsEl.querySelectorAll('.playlist-item')) + .map(el => parseInt(el.dataset.itemId, 10)); + const idx = order.indexOf(itemId); + const swap = dir === 'up' ? idx - 1 : idx + 1; + if (swap < 0 || swap >= order.length) return; + [order[idx], order[swap]] = [order[swap], order[idx]]; + try { + const updated = await api.reorderPlaylistItems(currentPlaylistId, order); + renderItems(updated); + refreshAfterMutation(); + } catch (err) { + showToast(err.message, 'error'); + } + }); + }); + // Drag-to-reorder setupDragReorder(itemsEl); }