Feat: add setting to disable coverimages

htdocs/css/mympd.css

@@ -200,6 +200,12 @@ a.card-img-top {
   background-image: url(/assets/coverimage-loading.png);
 }
 
+a.card-img-top-nc {
+  display: block;
+  height: 20px;
+  background-color:#ccc;
+}
+
 button.active {
   color: #fff;
   background-color: #28a745 !important;

htdocs/index.html

@@ -34,7 +34,7 @@
             <a class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalSettings">Settings</a>
             <a class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAbout">About</a>
             <a id="nav-add2homescreen" class="dropdown-item text-light bg-dark hide" href="#">Add2HomeScreen</a>
-            <div id="syscmds"></div>
+            <div id="syscmds" class="featSyscmds"></div>
           </div>
         </div>
         <div class="btn-toolbar col-auto pl-0 pr-0">
@@ -87,7 +87,7 @@
         </div>
       </div>
       <div class="card-body">
-        <div class="album-cover" id="currentCover"></div>
+        <div class="album-cover featCoverimage" id="currentCover"></div>
         <div class="album-desc">
           <h2 id="currentTrack" data-href='{"cmd": "songClick", "options": []}'></h2>
           <div class="featTags">  
@@ -918,7 +918,7 @@
           <button type="button" class="close" data-dismiss="modal">&times;</button>          
         </div>
         <div class="modal-body">
-          <div class="album-cover"></div>
+          <div class="album-cover featCoverimage"></div>
           <h1></h1>
           <div class="table-responsive-md">
             <table class="table table-sm">

htdocs/js/mympd.js

@@ -1015,7 +1015,7 @@ function parseSettings(obj) {
     
     toggleBtn('btnnotifyPage', settings.notificationPage);
 
-    var features = ["featStickers", "featSmartpls", "featPlaylists", "featTags"];
+    var features = ["featStickers", "featSmartpls", "featPlaylists", "featTags", "featLocalplayer", "featSyscmds", "featCoverimage"];
     
     for (var j = 0; j < features.length; j++) {
         var Els = document.getElementsByClassName(features[j]);
@@ -1074,7 +1074,7 @@ function parseSettings(obj) {
     filterCols('colsBrowsePlaylistsDetail');
     filterCols('colsBrowseFilesystem');
 
-    if (settings.localplayer) {
+    if (settings.featLocalplayer) {
         if (settings.streamurl == '') {
             settings.mpdstream = 'http://';
             if (settings.mpdhost == '127.0.0.1' || settings.mpdhost == 'localhost')
@@ -1085,10 +1085,7 @@ function parseSettings(obj) {
         } 
         else
             settings.mpdstream = settings.streamurl;
-        document.getElementsByClassName('featLocalplayer')[0].classList.remove('hide');        
     }
-    else
-        document.getElementsByClassName('featLocalplayer')[0].classList.add('hide');
     
     addTagList('BrowseDatabaseByTagDropdown', 'browsetags');
     addTagList('searchqueuetags', 'searchtags');
@@ -1623,7 +1620,7 @@ function parseListDBtags(obj) {
             card.setAttribute('id', id);
             card.setAttribute('data-album', encodeURI(obj.data[i].value));
             card.innerHTML = '<div class="card mb-4" id="card' + id + '">' +
-                             ' <a href="#" class="card-img-top"></a>' +
+                             (settings.featCoverimage ? ' <a href="#" class="card-img-top"></a>' : '<a href="#" class="card-img-top-nc"></a>') +
                              ' <div class="card-body">' +
                              '  <h5 class="card-title" id="albumartist' + id + '"></h5>' +
                              '  <h4 class="card-title">' + obj.data[i].value + '</h4>' +
@@ -1717,10 +1714,17 @@ function parseListTitles(obj) {
     var card = document.getElementById('card' + id)
     var tbody = card.getElementsByTagName('tbody')[0];
     var img = card.getElementsByTagName('a')[0];
-    img.style.backgroundImage = 'url("' + obj.cover + '")';
+    if (img.classList.contains('card-img-top'))
+        img.style.backgroundImage = 'url("' + obj.cover + '")';
+    else
+        img.style.backgroundImage = '';
     img.setAttribute('data-uri', encodeURI(obj.data[0].uri.replace(/\/[^\/]+$/, '')));
     img.setAttribute('data-name', obj.Album);
     img.setAttribute('data-type', 'dir');
+    img.addEventListener('click', function(event) {
+        showMenu(this, event);
+    }, false);
+    
     document.getElementById('albumartist' + id).innerText = obj.AlbumArtist;
   
     var titleTable = document.getElementById('collapseLink' + id);
@@ -1742,10 +1746,6 @@ function parseListTitles(obj) {
                      '</tr>';
     }
     tbody.innerHTML = titleList;
-  
-    img.addEventListener('click', function(event) {
-        showMenu(this, event);
-    }, false);
 
     tbody.parentNode.addEventListener('click', function(event) {
         if (event.target.nodeName == 'TD') {
@@ -2227,11 +2227,11 @@ function showMenu(el, event) {
     event.preventDefault();
     event.stopPropagation();
 
+    hideMenu();
+
     if (el.getAttribute('data-init'))
         return;
 
-    hideMenu();
-
     var type = el.getAttribute('data-type');
     var uri = decodeURI(el.getAttribute('data-uri'));
     var name = el.getAttribute('data-name');