Feat: configurable coverimagesize

contrib/mympd.conf.dist

@@ -39,6 +39,9 @@ coverimage = true
 #Name for coverimages
 coverimagename = folder.jpg
 
+#Size for coverimage in px
+coverimagesize = 240
+
 #myMPD state directory
 varlibdir = /var/lib/mympd
 

htdocs/css/mympd.css

@@ -1,17 +1,20 @@
+:root {
+    --mympd-coverimagesize: 240px;
+}
+
 html {
   position: relative;
   min-height: 100%;
 }
 
 body {
-  margin-bottom: 60px;
   padding-top: 50px;
   padding-bottom: 50px;
   background-color: #888;
 }
 
 main {
-  padding-top: 20px;
+  padding-top: 10px;
 }
 
 footer {
@@ -23,6 +26,10 @@ button {
   overflow: hidden;
 }
 
+.cardBodyPlayback {
+  padding-bottom:0px;
+}
+
 #BrowseBreadrumb {
   overflow: auto;
   white-space: nowrap;
@@ -65,17 +72,19 @@ small {
   border: 1px solid black;
   border-radius: 5px;
   overflow: hidden;
-  width: 240px;
-  height: 240px;
+  width: var(--mympd-coverimagesize);
+  max-width:100%;
+  height: var(--mympd-coverimagesize);
   background-color: #eee;
   float: left;
-  margin-right: 20px;
-  margin-bottom: 20px;
+  margin-right: 1.25rem;
+  margin-bottom: 1.25rem;
 }
 
 .album-desc {
   min-width: 240px;
   float: left;
+  padding-bottom:1.25rem;
 }
 
 .hide {
@@ -196,8 +205,8 @@ small {
 a.card-img-left {
   overflow: hidden;
   display: block;
-  width: 250px;
-  height: 250px;
+  width: var(--mympd-coverimagesize);
+  height: var(--mympd-coverimagesize);
   border-radius: 5px;
   background-size: cover;
   background-image: url(/assets/coverimage-loading.png);  
@@ -327,5 +336,6 @@ ol#searchCrumb {
 }
 
 .nodropdown::after {
-   content: none;
-}
+  content: none;
+}
+

htdocs/index.html

@@ -92,7 +92,7 @@
           <button title="Like song" id="btnVoteUp" data-href='{"cmd": "voteSong", "options": [2]}' class="btn btn-sm btn-light material-icons">thumb_up</button>
         </div>
       </div>
-      <div class="card-body">
+      <div class="card-body cardBodyPlayback">
         <div class="album-cover featCoverimage" id="currentCover"></div>
         <div class="album-desc">
           <h2 id="currentTitle" data-href='{"cmd": "clickTitle", "options": []}'></h2>

htdocs/js/mympd.js

@@ -1200,6 +1200,8 @@ function parseSettings(obj) {
     toggleBtn('btnnotifyPage', settings.notificationPage);
 
     var features = ["featStickers", "featSmartpls", "featPlaylists", "featTags", "featLocalplayer", "featSyscmds", "featCoverimage", "featAdvsearch"];
+
+    document.documentElement.style.setProperty('--mympd-coverimagesize', settings.coverimagesize + "px");
     
     for (var j = 0; j < features.length; j++) {
         var Els = document.getElementsByClassName(features[j]);

src/mpd_client.c

@@ -1696,7 +1696,7 @@ int mympd_put_settings(char *buffer) {
         "mixrampdb: %f, mixrampdelay: %f, mpdhost: %Q, mpdport: %d, passwort_set: %B, featSyscmds: %B, featPlaylists: %B, featTags: %B, featLibrary: %B, "
         "featAdvsearch: %B, featLocalplayer: %B, streamport: %d, streamurl: %Q, featCoverimage: %B, coverimagename: %Q, featStickers: %B, mixramp: %B, "
         "featSmartpls: %B, maxElementsPerPage: %d, replaygain: %Q, notificationWeb: %B, notificationPage: %B, jukeboxMode: %d, jukeboxPlaylist: %Q, "
-        "jukeboxQueueLength: %d, tags: [", 
+        "jukeboxQueueLength: %d, coverimagesize: %d, tags: [", 
         mpd_status_get_repeat(status),
         mpd_status_get_single(status),
         mpd_status_get_crossfade(status),
@@ -1726,7 +1726,8 @@ int mympd_put_settings(char *buffer) {
         mympd_state.notificationPage,
         mympd_state.jukeboxMode,
         mympd_state.jukeboxPlaylist,
-        mympd_state.jukeboxQueueLength
+        mympd_state.jukeboxQueueLength,
+        config.coverimagesize
     );
     mpd_status_free(status);
     free(replaygain);

src/mpd_client.h

@@ -193,6 +193,7 @@ typedef struct {
     const char *user;
     bool coverimage;
     const char *coverimagename;
+    long coverimagesize;
     bool stickers;
     bool mixramp;
     const char *taglist;

src/mympd.c

@@ -157,6 +157,8 @@ static int inihandler(void* user, const char* section, const char* name, const c
             p_config->coverimage = false;
     else if (MATCH("coverimagename"))
         p_config->coverimagename = strdup(value);
+    else if (MATCH("coverimagesize"))
+        p_config->coverimagesize = strtol(value, &crap, 10);
     else if (MATCH("varlibdir"))
         p_config->varlibdir = strdup(value);
     else if (MATCH("stickers"))
@@ -393,6 +395,7 @@ int main(int argc, char **argv) {
     config.streamurl = "";
     config.coverimage = true;
     config.coverimagename = "folder.jpg";
+    config.coverimagesize = 240;
     config.varlibdir = "/var/lib/mympd";
     config.stickers = true;
     config.mixramp = true;