diff --git a/htdocs/css/mympd.css b/htdocs/css/mympd.css
index d9c33d8..3311a0a 100644
--- a/htdocs/css/mympd.css
+++ b/htdocs/css/mympd.css
@@ -251,10 +251,13 @@ caption {
}
@keyframes changewidth {
- from { width: 0%; }
- to { width: 100%; }
+ from { margin-left: -20px; }
+ to { margin-left: 100%; }
}
+#updateDBprogress {
+ width:20px;
+}
.updateDBprogressAnimate {
animation-duration: 2s;
animation-name: changewidth;
diff --git a/htdocs/index.html b/htdocs/index.html
index 2dd2a50..279ff3c 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -543,7 +543,7 @@
Dependent on the size of your music collection this can take a while.
diff --git a/htdocs/js/mympd.js b/htdocs/js/mympd.js
index a497250..f0835a6 100644
--- a/htdocs/js/mympd.js
+++ b/htdocs/js/mympd.js
@@ -694,7 +694,7 @@ function webSocketConnect() {
sendAPI({"cmd": "MPD_API_GET_OUTPUTS"}, parseOutputs);
break;
case 'update_started':
- updateDBstarted();
+ updateDBstarted(false);
break;
case 'update_database':
case 'update_finished':
@@ -1759,25 +1759,41 @@ function openLocalPlayer() {
function updateDB() {
sendAPI({"cmd": "MPD_API_UPDATE_DB"});
- updateDBstarted();
+ updateDBstarted(true);
}
-function updateDBstarted() {
- document.getElementById('updateDBfinished').innerText = '';
- document.getElementById('updateDBfooter').classList.add('hide');
- modalUpdateDB.show();
- document.getElementById('updateDBprogress').classList.add('updateDBprogressAnimate');
+function updateDBstarted(showModal) {
+ if (showModal == true) {
+ document.getElementById('updateDBfinished').innerText = '';
+ document.getElementById('updateDBfooter').classList.add('hide');
+ updateDBprogress.style.width = '20px';
+ updateDBprogress.style.marginLeft = '-20px';
+ modalUpdateDB.show();
+ document.getElementById('updateDBprogress').classList.add('updateDBprogressAnimate');
+ }
+ else {
+ showNotification('Database update started', '', '', 'success');
+ }
}
function updateDBfinished(idleEvent) {
- if (idleEvent == 'update_database')
- document.getElementById('updateDBfinished').innerText = 'Database successfully updated';
- else if (idleEvent == 'update_finished')
- document.getElementById('updateDBfinished').innerText = 'Database update finished.';
- var updateDBprogress = document.getElementById('updateDBprogress');
- updateDBprogress.classList.remove('updateDBprogressAnimate');
- updateDBprogress.style.width = '100%';
- document.getElementById('updateDBfooter').classList.remove('hide');
+ if (document.getElementById('modalUpdateDB').classList.contains('show')) {
+ if (idleEvent == 'update_database')
+ document.getElementById('updateDBfinished').innerText = 'Database successfully updated.';
+ else if (idleEvent == 'update_finished')
+ document.getElementById('updateDBfinished').innerText = 'Database update finished.';
+ var updateDBprogress = document.getElementById('updateDBprogress');
+ updateDBprogress.classList.remove('updateDBprogressAnimate');
+ updateDBprogress.style.width = '100%';
+ updateDBprogress.style.marginLeft = '0px';
+ document.getElementById('updateDBfooter').classList.remove('hide');
+ }
+ else {
+ if (idleEvent == 'update_database')
+ showNotification('Database successfully updated.', '', '', 'success');
+ else if (idleEvent == 'update_finished')
+ showNotification('Database update finished.', '', '', 'success');
+ }
}
function clickPlay() {