diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index ec0a27da..41199466 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -1025,7 +1025,6 @@ video:-webkit-full-screen {
.task-control-icons {
display: flex;
justify-content: center;
- padding-bottom: 10px;
}
.task-control-icons img {
diff --git a/tubearchivist/static/progress.js b/tubearchivist/static/progress.js
index e26002c2..36e7ede8 100644
--- a/tubearchivist/static/progress.js
+++ b/tubearchivist/static/progress.js
@@ -33,42 +33,56 @@ function buildMessage(responseData, dataOrigin) {
let messages = responseData.filter(function (value) {
return value.group.startsWith(dataOrigin);
}, dataOrigin);
- let notificationDiv = document.getElementById('notifications');
- let nots = notificationDiv.childElementCount;
- notificationDiv.innerHTML = '';
+ let notifications = document.getElementById('notifications');
+ let currentNotifications = notifications.childElementCount;
for (let i = 0; i < messages.length; i++) {
const messageData = messages[i];
- let messageBox = document.createElement('div');
- let progress = messageData?.progress * 100 || 0;
- messageBox.classList.add(messageData['level'], 'notification');
- messageBox.innerHTML = `
-
${messageData.title}
- ${messageData.messages.join('
')}
`;
- let taskControlIcons = document.createElement('div');
- taskControlIcons.classList = 'task-control-icons';
- if ('api-stop' in messageData) {
- taskControlIcons.appendChild(buildStopIcon(messageData.id));
+ if (!document.getElementById(messageData.id)) {
+ let messageBox = buildPlainBox(messageData);
+ notifications.appendChild(messageBox);
}
- if ('api-kill' in messageData) {
- taskControlIcons.appendChild(buildKillIcon(messageData.id));
- }
- if (taskControlIcons.hasChildNodes()) {
- messageBox.appendChild(taskControlIcons);
- }
- messageBox.innerHTML = `${messageBox.innerHTML}`;
- notificationDiv.appendChild(messageBox);
+ updateMessageBox(messageData);
if (messageData.group.startsWith('download:')) {
animateIcons(messageData.group);
}
}
- if (nots > 0 && messages.length === 0) {
+ clearNotifications(responseData);
+ if (currentNotifications > 0 && messages.length === 0) {
location.reload();
}
-
return messages;
}
+function buildPlainBox(messageData) {
+ let messageBox = document.createElement('div');
+ messageBox.classList.add(messageData.level, 'notification');
+ messageBox.id = messageData.id;
+ messageBox.innerHTML = `
+
+
+
+ `;
+ return messageBox;
+}
+
+function updateMessageBox(messageData) {
+ let messageBox = document.getElementById(messageData.id);
+ let children = messageBox.children;
+ children[0].textContent = messageData.title;
+ children[1].innerHTML = messageData.messages.join('
');
+ if (
+ !messageBox.querySelector('#stop-icon') &&
+ messageData['api-stop'] &&
+ messageData.command !== 'STOP'
+ ) {
+ children[2].appendChild(buildStopIcon(messageData.id));
+ }
+ if (messageData.progress) {
+ children[3].style.width = `${messageData.progress * 100 || 0}%`;
+ }
+}
+
function animateIcons(group) {
let rescanIcon = document.getElementById('rescan-icon');
let dlIcon = document.getElementById('download-icon');
@@ -111,3 +125,14 @@ function buildKillIcon(taskId) {
killIcon.setAttribute('onclick', 'killTask(this)');
return killIcon;
}
+
+function clearNotifications(responseData) {
+ let allIds = Array.from(responseData, x => x.id);
+ let allBoxes = document.getElementsByClassName('notification');
+ for (let i = 0; i < allBoxes.length; i++) {
+ const notificationBox = allBoxes[i];
+ if (!allIds.includes(notificationBox.id)) {
+ notificationBox.remove();
+ }
+ }
+}
diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index b39551b7..9ffd7594 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -232,14 +232,14 @@ function stopTask(icon) {
let taskId = icon.getAttribute('data');
let apiEndpoint = `/api/task-id/${taskId}/`;
apiRequest(apiEndpoint, 'POST', { command: 'stop' });
- document.getElementById('stop-icon').remove();
+ icon.remove();
}
function killTask(icon) {
let taskId = icon.getAttribute('data');
let apiEndpoint = `/api/task-id/${taskId}/`;
apiRequest(apiEndpoint, 'POST', { command: 'kill' });
- document.getElementById('kill-icon').remove();
+ icon.remove();
}
// settings page buttons