rewrite of progress.js, now potentially better and flexible

tubearchivist/home/templates/home/channel.html

@@ -5,6 +5,7 @@
 <div class="title-bar">
     <h1>Channels</h1>
 </div>
+<div id="notifications" data="channel"></div>
 <div class="info-box info-box-2">
     <div class="icon-text">
         {% if running == "subscribing" %}
@@ -98,4 +99,5 @@
         <h2>No channels found...</h2>
     {% endif %}
 </div>
+<script type="text/javascript" src="{% static 'progress.js' %}"></script>
 {% endblock content %}

tubearchivist/home/templates/home/channel_id.html

@@ -66,6 +66,7 @@
         </div>
     </div>
 {% endif %}
+<div id="notifications" data="channel_id"></div>
 <div id="player" class="video-player"></div>
 <div class="sort">
     <p>Sort by <span class="settings-current">{{ sort_by }}</span>
@@ -142,4 +143,5 @@
         <h2>No videos found...</h2>
     {% endif %}
 </div>
+<script type="text/javascript" src="{% static 'progress.js' %}"></script>
 {% endblock content %}

tubearchivist/home/templates/home/downloads.html

@@ -4,7 +4,7 @@
 <div class="title-bar">
     <h1>Downloads</h1>
 </div>
-<div id="downloadMessage"></div>
+<div id="notifications" data="download"></div>
 <div id="downloadControl"></div>
 <div class="info-box info-box-3">
     <div class="icon-text">

tubearchivist/home/templates/home/playlist.html

@@ -4,6 +4,7 @@
 <div class="title-bar">
     <h1>Playlists</h1>
 </div>
+<div id="notifications" data="playlist"></div>
 <div class="info-box info-box-2">
     <div class="icon-text">
         {% if running == "subscribing" %}
@@ -77,4 +78,5 @@
         <h2>No playlists found...</h2>
     {% endif %}
 </div>
+<script type="text/javascript" src="{% static 'progress.js' %}"></script>
 {% endblock content %}

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

tubearchivist/static/progress.js

@@ -3,87 +3,86 @@
  * 
  */
 
+checkMessages()
 
-setTimeout(function(){
+// page map to notification status
-    checkMessage();
+const messageTypes = {
-}, 1000);
+    "download": ["message:download", "message:add", "message:rescan"],
-
+    "channel": ["message:subchannel"],
-// initial check for messages
+    "channel_id": ["message:playlistscan"],
-function checkMessage() {
+    "playlist": ["message:subplaylist"]
-    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();
 }
 
-// set interval until no more messages
+// start to look for messages
-function handleInterval() {
+function checkMessages() {
-    var watchDownload = setInterval(function() {
+    var notifications = document.getElementById("notifications");
-        var req = new XMLHttpRequest();
+    if (notifications) {
-        req.responseType = 'json';
+        var dataOrigin = notifications.getAttribute("data");
-        req.open('GET', '/downloads/progress/', true);
+        getMessages(dataOrigin);
-        req.onload = function() {
+    }
-            var dlProgress = req.response;
+}
-            if (dlProgress['status']) {
+
-                buildDownloadMessage(dlProgress);
+// get messages for page on timer
-            } else {
+function getMessages(dataOrigin) {
-                clearInterval(watchDownload);
+    fetch('/progress/').then(response => {
-                location.reload();
+        return response.json();
-            };
+    }).then(responseData => {
-        };
+        var messages = buildMessage(responseData, dataOrigin);
-        req.send();
+        if (messages.length > 0) {
+            // restart itself
+            setTimeout(function() {
+                getMessages(dataOrigin);
             }, 3000);
         };
+    });
+}
 
-// remove and set message
+// make div for all messages, return relevant
-function buildDownloadMessage(dlProgress) {
+function buildMessage(responseData, dataOrigin) {
-    var box = document.getElementById('downloadMessage');
+    var messages = responseData["messages"];
-    box.innerHTML = '';
+    var notificationDiv = document.getElementById("notifications")
-    var dlStatus = dlProgress['status'];
+    var nots = notificationDiv.childElementCount;
-    var dlTitle = dlProgress['title'];
+    notificationDiv.innerHTML = "";
-    var dlMessage = dlProgress['message'];
+    for (let i = 0; i < messages.length; i++) {
-    var dlLevel = dlProgress['level'];
+        var messageData = messages[i];
-    // animate
+        var messageStatus = messageData["status"];
-    if (dlStatus === 'rescan') {
+        if (! messageTypes[dataOrigin].includes(messageStatus)) {
-        animate('rescan-icon', 'rotate-img');
+            messages.splice(i);
-    } else if (dlStatus === 'downloading') {
+            continue
-        animate('download-icon', 'bounce-img');
         };
-    // div box
+        var messageBox = document.createElement("div");
-    var box = document.getElementById('downloadMessage');
+        var title = document.createElement("h3");
-    var message = document.createElement('div');
+        title.innerHTML = messageData["title"];
-    message.classList.add('download-progress');
+        var message = document.createElement("p");
-    message.classList.add(dlLevel);
+        message.innerHTML = messageData["message"];
-    message.id = 'progress';
+        messageBox.appendChild(title);
-    message.setAttribute('data', dlStatus);
+        messageBox.appendChild(message);
-    var title = document.createElement('h3');
+        messageBox.classList.add(messageData["level"], "notification");
-    title.innerHTML = dlTitle;
+        notificationDiv.appendChild(messageBox);
-    var messageText = document.createElement('p');
+        if (messageStatus === "message:download") {
-    messageText.innerHTML = dlMessage;
+            checkDownloadIcons();
-    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');
+    var downloadIcons = document.createElement('div');
-    iconBox.classList = 'dl-control-icons';
+    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);
+    downloadIcons.appendChild(stopIcon);
-    iconBox.appendChild(killIcon);
+    downloadIcons.appendChild(killIcon);
-    
+    return downloadIcons
-    return iconBox
 }