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();
}