rewrite of progress.js, now potentially better and flexible

This commit is contained in:
simon 2021-12-05 16:42:33 +07:00
parent 1d262fc936
commit fbdbfd744d
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
6 changed files with 83 additions and 79 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -831,22 +831,22 @@ button:hover {
} }
/* status message */ /* status message */
.download-progress { .notification {
background-color: var(--highlight-bg); background-color: var(--highlight-bg);
text-align: center; text-align: center;
padding: 30px 0 15px 0; padding: 30px 0 15px 0;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.download-progress.info { .notification.info {
background-color: var(--highlight-bg); background-color: var(--highlight-bg);
} }
.download-progress.error { .notification.error {
background-color: var(--highlight-error); background-color: var(--highlight-error);
} }
.download-progress.error h3 { .notification.error h3 {
color: #fff; color: #fff;
} }

View File

@ -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); }, 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 // add dl control icons
function buildDownloadIcons() { function buildDownloadIcons() {
var iconBox = document.createElement('div'); var downloadIcons = document.createElement('div');
iconBox.classList = 'dl-control-icons'; downloadIcons.classList = 'dl-control-icons';
// stop icon // stop icon
var stopIcon = document.createElement('img'); var stopIcon = document.createElement('img');
stopIcon.setAttribute('id', "stop-icon"); stopIcon.setAttribute('id', "stop-icon");
@ -99,8 +98,7 @@ function buildDownloadIcons() {
killIcon.setAttribute('alt', "kill icon"); killIcon.setAttribute('alt', "kill icon");
killIcon.setAttribute('onclick', 'killQueue()'); killIcon.setAttribute('onclick', 'killQueue()');
// stich together // stich together
iconBox.appendChild(stopIcon); downloadIcons.appendChild(stopIcon);
iconBox.appendChild(killIcon); downloadIcons.appendChild(killIcon);
return downloadIcons
return iconBox
} }