diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index dbf76f90..03de4ed5 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -395,6 +395,10 @@ button:hover {
position: relative; /* needed for modal */
}
+#notifications {
+ position: relative;
+}
+
.notifications {
text-align: center;
width: 80%;
@@ -473,7 +477,8 @@ video:-webkit-full-screen {
align-items: center;
}
-.video-progress-bar {
+.video-progress-bar,
+.notification-progress-bar {
position: absolute;
background-color: var(--accent-font-dark);
height: 7px;
@@ -1044,6 +1049,7 @@ video:-webkit-full-screen {
/* status message */
.notification {
+ position: relative;
background-color: var(--highlight-bg);
text-align: center;
padding: 30px 0 15px 0;
diff --git a/tubearchivist/static/progress.js b/tubearchivist/static/progress.js
index 87f5e192..c2d51a92 100644
--- a/tubearchivist/static/progress.js
+++ b/tubearchivist/static/progress.js
@@ -5,16 +5,9 @@
'use strict';
-checkMessages();
+/* globals apiRequest animate */
-// page map to notification status
-const messageTypes = {
- download: ['message:download', 'message:add', 'message:rescan', 'message:playlistscan'],
- channel: ['message:subchannel'],
- channel_id: ['message:playlistscan'],
- playlist: ['message:subplaylist'],
- setting: ['message:setting'],
-};
+checkMessages();
// start to look for messages
function checkMessages() {
@@ -25,82 +18,63 @@ function checkMessages() {
}
}
-// get messages for page on timer
function getMessages(dataOrigin) {
- fetch('/progress/')
- .then(response => response.json())
- .then(responseData => {
- const messages = buildMessage(responseData, dataOrigin);
- if (messages.length > 0) {
- // restart itself
- setTimeout(() => getMessages(dataOrigin), 500);
- }
- });
+ let apiEndpoint = '/api/notification/';
+ let responseData = apiRequest(apiEndpoint, 'GET');
+ let messages = buildMessage(responseData, dataOrigin);
+ if (messages.length > 0) {
+ // restart itself
+ setTimeout(() => getMessages(dataOrigin), 500);
+ }
}
-// make div for all messages, return relevant
function buildMessage(responseData, dataOrigin) {
- // filter relevan messages
- let allMessages = responseData['messages'];
- let messages = allMessages.filter(function (value) {
- return messageTypes[dataOrigin].includes(value['status']);
+ // filter relevant messages
+ let messages = responseData.filter(function (value) {
+ return value.status.startsWith(dataOrigin);
}, dataOrigin);
- // build divs
let notificationDiv = document.getElementById('notifications');
let nots = notificationDiv.childElementCount;
notificationDiv.innerHTML = '';
+
for (let i = 0; i < messages.length; i++) {
- let messageData = messages[i];
- let messageStatus = messageData['status'];
+ const messageData = messages[i];
let messageBox = document.createElement('div');
- let title = document.createElement('h3');
- title.innerHTML = messageData['title'];
- let message = document.createElement('p');
- message.innerHTML = messageData['message'];
- messageBox.appendChild(title);
- messageBox.appendChild(message);
+ let progress = messageData?.progress * 100 || 0;
messageBox.classList.add(messageData['level'], 'notification');
+ messageBox.innerHTML = `
+
${messageData.title}
+ ${messageData.messages.join('
')}
+ `;
notificationDiv.appendChild(messageBox);
- if (messageStatus === 'message:download') {
- checkDownloadIcons();
+ if (messageData.status.startsWith('download:')) {
+ animateIcons(messageData.status);
}
}
- // reload page when no more notifications
if (nots > 0 && messages.length === 0) {
location.reload();
}
+
return messages;
}
-// check if download icons are needed
-function checkDownloadIcons() {
- let iconBox = document.getElementById('downloadControl');
- if (iconBox.childElementCount === 0) {
- let downloadIcons = buildDownloadIcons();
- iconBox.appendChild(downloadIcons);
+function animateIcons(status) {
+ let rescanIcon = document.getElementById('rescan-icon');
+ let dlIcon = document.getElementById('download-icon');
+ switch (status) {
+ case 'download:scan':
+ if (rescanIcon && !rescanIcon.classList.contains('rotate-img')) {
+ animate('rescan-icon', 'rotate-img');
+ }
+ break;
+
+ case 'download:run':
+ if (dlIcon && !dlIcon.classList.contains('bounce-img')) {
+ animate('download-icon', 'bounce-img');
+ }
+ break;
+
+ default:
+ break;
}
}
-
-// add dl control icons
-function buildDownloadIcons() {
- let downloadIcons = document.createElement('div');
- downloadIcons.classList = 'dl-control-icons';
- // stop icon
- let stopIcon = document.createElement('img');
- stopIcon.setAttribute('id', 'stop-icon');
- stopIcon.setAttribute('title', 'Stop Download Queue');
- stopIcon.setAttribute('src', '/static/img/icon-stop.svg');
- stopIcon.setAttribute('alt', 'stop icon');
- stopIcon.setAttribute('onclick', 'stopQueue()');
- // kill icon
- let killIcon = document.createElement('img');
- killIcon.setAttribute('id', 'kill-icon');
- killIcon.setAttribute('title', 'Kill Download Queue');
- killIcon.setAttribute('src', '/static/img/icon-close.svg');
- killIcon.setAttribute('alt', 'kill icon');
- killIcon.setAttribute('onclick', 'killQueue()');
- // stich together
- downloadIcons.appendChild(stopIcon);
- downloadIcons.appendChild(killIcon);
- return downloadIcons;
-}
diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index ff8e8cc5..8753d52f 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -250,6 +250,10 @@ function manualImport() {
let toReplace = document.getElementById('manual-import');
toReplace.innerHTML = '';
toReplace.appendChild(message);
+ setTimeout(function () {
+ location.replace('#notifications');
+ checkMessages();
+ }, 200);
}
function reEmbed() {
@@ -261,6 +265,10 @@ function reEmbed() {
let toReplace = document.getElementById('re-embed');
toReplace.innerHTML = '';
toReplace.appendChild(message);
+ setTimeout(function () {
+ location.replace('#notifications');
+ checkMessages();
+ }, 200);
}
function dbBackup() {
@@ -272,6 +280,10 @@ function dbBackup() {
let toReplace = document.getElementById('db-backup');
toReplace.innerHTML = '';
toReplace.appendChild(message);
+ setTimeout(function () {
+ location.replace('#notifications');
+ checkMessages();
+ }, 200);
}
function dbRestore(button) {
@@ -284,6 +296,10 @@ function dbRestore(button) {
let toReplace = document.getElementById(fileName);
toReplace.innerHTML = '';
toReplace.appendChild(message);
+ setTimeout(function () {
+ location.replace('#notifications');
+ checkMessages();
+ }, 200);
}
function fsRescan() {
@@ -295,6 +311,10 @@ function fsRescan() {
let toReplace = document.getElementById('fs-rescan');
toReplace.innerHTML = '';
toReplace.appendChild(message);
+ setTimeout(function () {
+ location.replace('#notifications');
+ checkMessages();
+ }, 200);
}
function resetToken() {