diff --git a/public/controls.js b/public/controls.js index a73e85b..f6c50f9 100644 --- a/public/controls.js +++ b/public/controls.js @@ -110,9 +110,9 @@ // Playback mode button const modeLabels = { - "once": "once", - "repeat-all": "repeat", - "repeat-one": "single", + "once": "loop(off)", + "repeat-all": "loop(all)", + "repeat-one": "loop(one)", "shuffle": "shuffle" }; const modeOrder = ["once", "repeat-all", "repeat-one", "shuffle"]; diff --git a/public/styles.css b/public/styles.css index 4422778..96626b5 100644 --- a/public/styles.css +++ b/public/styles.css @@ -87,6 +87,8 @@ h3 { font-size: 0.8rem; color: #666; margin-bottom: 0.3rem; text-transform: uppe .slow-queue-cancel { background: none; border: none; color: #666; cursor: pointer; padding: 0 0.2rem; font-size: 0.7rem; opacity: 0; transition: opacity 0.15s; } .slow-queue-item:hover .slow-queue-cancel { opacity: 1; } .slow-queue-cancel:hover { color: #e44; } +.slow-queue-show-toggle { background: none; border: none; color: #68a; font-size: 0.7rem; padding: 0.3rem; cursor: pointer; width: 100%; text-align: center; } +.slow-queue-show-toggle:hover { color: #8af; text-decoration: underline; } .scan-progress { font-size: 0.7rem; color: #ea4; padding: 0.2rem 0.4rem; background: #2a2a1a; border-radius: 3px; margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } .scan-progress.hidden { display: none; } .scan-progress.complete { color: #4e8; background: #1a2a1a; } diff --git a/public/upload.js b/public/upload.js index 0743d7a..66dc597 100644 --- a/public/upload.js +++ b/public/upload.js @@ -256,12 +256,16 @@ return `${secs}s`; } + const QUEUE_PREVIEW_COUNT = 5; + let showAllQueue = false; + function updateSlowQueueDisplay(slowQueue, slowQueueNextIn) { const section = createSlowQueueSection(); const queuedItems = slowQueue.filter(i => i.status === "queued"); if (queuedItems.length === 0) { section.classList.add("hidden"); + showAllQueue = false; updateTasksEmpty(); return; } @@ -272,9 +276,13 @@ const timerEl = section.querySelector(".slow-queue-timer"); timerEl.textContent = `${queuedItems.length} queued ยท next in ${formatTime(slowQueueNextIn)}`; + // Determine how many items to show + const itemsToShow = showAllQueue ? queuedItems : queuedItems.slice(0, QUEUE_PREVIEW_COUNT); + const hiddenCount = queuedItems.length - itemsToShow.length; + // Group items by playlist const byPlaylist = new Map(); - for (const item of queuedItems) { + for (const item of itemsToShow) { const key = item.playlistId || "__none__"; if (!byPlaylist.has(key)) { byPlaylist.set(key, { name: item.playlistName, items: [] }); @@ -302,6 +310,15 @@ }).join(""); } + // Add show more/less button if needed + if (queuedItems.length > QUEUE_PREVIEW_COUNT) { + if (showAllQueue) { + html += ``; + } else { + html += ``; + } + } + listEl.innerHTML = html; // Add cancel handlers @@ -324,6 +341,15 @@ }; }); + // Add show more/less handler + const toggleBtn = listEl.querySelector(".slow-queue-show-toggle"); + if (toggleBtn) { + toggleBtn.onclick = () => { + showAllQueue = !showAllQueue; + updateSlowQueueDisplay(slowQueue, slowQueueNextIn); + }; + } + updateTasksEmpty(); }