mediaitem bgcolor is now used as a placeholder for artwork whenever present

src/renderer/views/components/mediaitem-artwork.ejs

@@ -3,6 +3,7 @@
          v-observe-visibility="{callback: visibilityChanged}">
         <img :src="app.getMediaItemArtwork(url, size, width)"
              decoding="async" loading="lazy"
+             :style="{background: bgcolor}"
              class="mediaitem-artwork--img">
         <div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
             <animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
@@ -22,6 +23,10 @@
                 type: [String, Number],
                 required: false
             },
+            bgcolor: {
+                type: String,
+                default: ''
+            },
             url: {
                 type: String,
                 default: ''

src/renderer/views/components/mediaitem-list-item.ejs

@@ -28,6 +28,7 @@
                 <mediaitem-artwork
                         :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
                         :size="48"
+                        :bgcolor="getBgColor()"
                         :type="item.type"></mediaitem-artwork>
                 <button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
             </div>
@@ -102,6 +103,10 @@
             this.getClasses()
         },
         methods: {
+            getBgColor() {
+                let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
+                return color
+            },
             async checkLibrary() {
                 if(this.addedToLibrary) {return this.addedToLibrary}
                 if(this.item.type.includes("library-playlists") || this.item.type.includes("station")) {

src/renderer/views/components/mediaitem-square.ejs

@@ -11,6 +11,7 @@
                             :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                             :size="size"
                             shadow="subtle"
+                            :bgcolor="getBgColor()"
                             :type="item.type"></mediaitem-artwork>
                 </div>
                 <button class="menu-btn" v-if="!nomenu.includes(item.type)"
@@ -75,22 +76,8 @@
         },
         methods: {
             getBgColor() {
-                let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : `333333`}`
-                let c = color.substring(1);      // strip #
-                var rgb = parseInt(c, 16);   // convert rrggbb to decimal
-                var r = (rgb >> 16) & 0xff;  // extract red
-                var g = (rgb >>  8) & 0xff;  // extract green
-                var b = (rgb >>  0) & 0xff;  // extract blue
-
-                var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
-
-                if (luma > 140) {
-                    return "#aaaaaa"
-                }else{
+                let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
                 return color
-                }
-
-
             },
             getSubtitle() {
                 if(this.kind == 'card') {