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">
<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 %}

View File

@ -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 %}

View File

@ -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">

View File

@ -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 %}

View File

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

View File

@ -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);
// 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);
};
});
}
// 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();
};
};
// reload on download page when no more notifications
if (nots > 0 && messages.length === 0 && dataOrigin === "download") {
location.reload();
};
};
req.send();
}, 3000);
};
return messages
}
// 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');
// check if download icons are needed
function checkDownloadIcons() {
var iconBox = document.getElementById("downloadControl");
if (iconBox.childElementCount === 0) {
var downloadIcons = buildDownloadIcons();
iconBox.appendChild(downloadIcons);
};
// 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());
};
};
}
// 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
}