diff --git a/tubearchivist/home/templates/home/playlist.html b/tubearchivist/home/templates/home/playlist.html
index fa77820..f5893f7 100644
--- a/tubearchivist/home/templates/home/playlist.html
+++ b/tubearchivist/home/templates/home/playlist.html
@@ -4,6 +4,7 @@
Playlists
+
{% if running == "subscribing" %}
@@ -77,4 +78,5 @@
No playlists found...
{% endif %}
+
{% endblock content %}
\ No newline at end of file
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 1adf9be..36c3254 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -831,22 +831,22 @@ button:hover {
}
/* status message */
-.download-progress {
+.notification {
background-color: var(--highlight-bg);
text-align: center;
padding: 30px 0 15px 0;
margin-bottom: 1rem;
}
-.download-progress.info {
+.notification.info {
background-color: var(--highlight-bg);
}
-.download-progress.error {
+.notification.error {
background-color: var(--highlight-error);
}
-.download-progress.error h3 {
+.notification.error h3 {
color: #fff;
}
diff --git a/tubearchivist/static/progress.js b/tubearchivist/static/progress.js
index d69e0d6..21c4927 100644
--- a/tubearchivist/static/progress.js
+++ b/tubearchivist/static/progress.js
@@ -3,87 +3,86 @@
*
*/
+checkMessages()
-setTimeout(function(){
- checkMessage();
-}, 1000);
-
-// initial check for messages
-function checkMessage() {
- var req = new XMLHttpRequest();
- req.responseType = 'json';
- req.open('GET', '/downloads/progress', true);
- req.onload = function() {
- var dlProgress = req.response;
- // var dlStatus = dlProgress['status'];
- if (dlProgress['status']) {
- buildDownloadMessage(dlProgress);
- handleInterval();
- // if (dlStatus == 'downloading') {
- // buildDownloadIcons();
- // };
- };
- };
- req.send();
+// page map to notification status
+const messageTypes = {
+ "download": ["message:download", "message:add", "message:rescan"],
+ "channel": ["message:subchannel"],
+ "channel_id": ["message:playlistscan"],
+ "playlist": ["message:subplaylist"]
}
-// set interval until no more messages
-function handleInterval() {
- var watchDownload = setInterval(function() {
- var req = new XMLHttpRequest();
- req.responseType = 'json';
- req.open('GET', '/downloads/progress/', true);
- req.onload = function() {
- var dlProgress = req.response;
- if (dlProgress['status']) {
- buildDownloadMessage(dlProgress);
- } else {
- clearInterval(watchDownload);
- location.reload();
- };
+// start to look for messages
+function checkMessages() {
+ var notifications = document.getElementById("notifications");
+ if (notifications) {
+ var dataOrigin = notifications.getAttribute("data");
+ getMessages(dataOrigin);
+ }
+}
+
+// get messages for page on timer
+function getMessages(dataOrigin) {
+ fetch('/progress/').then(response => {
+ return response.json();
+ }).then(responseData => {
+ var messages = buildMessage(responseData, dataOrigin);
+ if (messages.length > 0) {
+ // restart itself
+ setTimeout(function() {
+ getMessages(dataOrigin);
+ }, 3000);
};
- req.send();
- }, 3000);
-};
+ });
+}
-// remove and set message
-function buildDownloadMessage(dlProgress) {
- var box = document.getElementById('downloadMessage');
- box.innerHTML = '';
- var dlStatus = dlProgress['status'];
- var dlTitle = dlProgress['title'];
- var dlMessage = dlProgress['message'];
- var dlLevel = dlProgress['level'];
- // animate
- if (dlStatus === 'rescan') {
- animate('rescan-icon', 'rotate-img');
- } else if (dlStatus === 'downloading') {
- animate('download-icon', 'bounce-img');
+// make div for all messages, return relevant
+function buildMessage(responseData, dataOrigin) {
+ var messages = responseData["messages"];
+ var notificationDiv = document.getElementById("notifications")
+ var nots = notificationDiv.childElementCount;
+ notificationDiv.innerHTML = "";
+ for (let i = 0; i < messages.length; i++) {
+ var messageData = messages[i];
+ var messageStatus = messageData["status"];
+ if (! messageTypes[dataOrigin].includes(messageStatus)) {
+ messages.splice(i);
+ continue
+ };
+ var messageBox = document.createElement("div");
+ var title = document.createElement("h3");
+ title.innerHTML = messageData["title"];
+ var message = document.createElement("p");
+ message.innerHTML = messageData["message"];
+ messageBox.appendChild(title);
+ messageBox.appendChild(message);
+ messageBox.classList.add(messageData["level"], "notification");
+ notificationDiv.appendChild(messageBox);
+ if (messageStatus === "message:download") {
+ checkDownloadIcons();
+ };
};
- // div box
- var box = document.getElementById('downloadMessage');
- var message = document.createElement('div');
- message.classList.add('download-progress');
- message.classList.add(dlLevel);
- message.id = 'progress';
- message.setAttribute('data', dlStatus);
- var title = document.createElement('h3');
- title.innerHTML = dlTitle;
- var messageText = document.createElement('p');
- messageText.innerHTML = dlMessage;
- message.appendChild(title);
- message.appendChild(messageText);
- box.appendChild(message);
- if (dlStatus == 'downloading' && dlLevel != 'error') {
- box.appendChild(buildDownloadIcons());
+ // reload on download page when no more notifications
+ if (nots > 0 && messages.length === 0 && dataOrigin === "download") {
+ location.reload();
};
-};
+ return messages
+}
+// check if download icons are needed
+function checkDownloadIcons() {
+ var iconBox = document.getElementById("downloadControl");
+ if (iconBox.childElementCount === 0) {
+ var downloadIcons = buildDownloadIcons();
+ iconBox.appendChild(downloadIcons);
+ };
+}
// add dl control icons
function buildDownloadIcons() {
- var iconBox = document.createElement('div');
- iconBox.classList = 'dl-control-icons';
+ var downloadIcons = document.createElement('div');
+ downloadIcons.classList = 'dl-control-icons';
// stop icon
var stopIcon = document.createElement('img');
stopIcon.setAttribute('id', "stop-icon");
@@ -99,8 +98,7 @@ function buildDownloadIcons() {
killIcon.setAttribute('alt', "kill icon");
killIcon.setAttribute('onclick', 'killQueue()');
// stich together
- iconBox.appendChild(stopIcon);
- iconBox.appendChild(killIcon);
-
- return iconBox
+ downloadIcons.appendChild(stopIcon);
+ downloadIcons.appendChild(killIcon);
+ return downloadIcons
}