radu/py-dj
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add remove from queue action and refactor models

Browse source
This commit is contained in:
Radu C. Martin 2025-04-15 18:17:41 +02:00
parent 2286d7a8d5
commit 4bd6ad85e3
5 changed files with 135 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

36
index.html
View file

@ -42,6 +42,7 @@
<th style="text-align: left; padding: 8px;">Artist</th>
<th style="text-align: left; padding: 8px;">Title</th>
<th style="text-align: right; padding: 8px;">Duration</th>
<th style="text-align: center; padding: 8px;">Actions</th>
</tr>
</thead>
<tbody id="queueBody">
@ -56,6 +57,12 @@ const s = Math.floor(seconds % 60).toString().padStart(2, '0');
return `${m}:${s}`;
}
const removeFromQueue = async (trackId) => {
await api(`/queue/${trackId}`, { method: "DELETE" });
updateQueue(); // Refresh queue after deletion
};
function updateProgress(position, duration) {
const progressBar = document.getElementById("progressBar");
const elapsedTime = document.getElementById("elapsedTime");
@ -117,22 +124,25 @@ if (track) {
};
queueSocket.onmessage = (event) => {
const queue = JSON.parse(event.data);
const queueBody = document.getElementById("queueBody");
queueBody.innerHTML = "";
const queue = JSON.parse(event.data);
const queueBody = document.getElementById("queueBody");
queueBody.innerHTML = "";
(queue.items || queue).forEach((track, index) => {
const row = document.createElement("tr");
(queue.items || queue).forEach((track, index) => {
const row = document.createElement("tr");
row.innerHTML = `
<td style="padding: 8px;">${index + 1}</td>
<td style="padding: 8px;">${track.artist}</td>
<td style="padding: 8px;">${track.title}</td>
<td style="padding: 8px; text-align: right;">${formatTime(track.duration)}</td>
`;
row.innerHTML = `
<td style="padding: 8px;">${index + 1}</td>
<td style="padding: 8px;">${track.artist}</td>
<td style="padding: 8px;">${track.title}</td>
<td style="padding: 8px; text-align: right;">${formatTime(track.duration)}</td>
<td style="padding: 8px; text-align: center;">
<button onclick="removeFromQueue('${track.id}')">🗑️</button>
</td>
`;
queueBody.appendChild(row);
});
queueBody.appendChild(row);
});
};
playerSocket.onerror = queueSocket.onerror = console.error;