improvements to mediaitem-square.card, changed some defaults

index.js

@@ -12,7 +12,7 @@ const configDefaults = {
         "close_behavior": 0, // 0 = close, 1 = minimize, 2 = minimize to tray
         "startup_behavior": 0, // 0 = nothing, 1 = open on startup
         "discord_rpc": 1, // 0 = disabled, 1 = enabled as Cider, 2 = enabled as Apple Music
-        "discordClearActivityOnPause": 0, // 0 = disabled, 1 = enabled
+        "discordClearActivityOnPause": 1, // 0 = disabled, 1 = enabled
         "volume": 1
     },
     "home": {
@@ -52,7 +52,7 @@ const configDefaults = {
         "animated_artwork_qualityLevel": 1,
         "bg_artwork_rotation": false,
         "hw_acceleration": "default", // default, webgpu, disabled
-        "window_transparency": "default"
+        "window_transparency": "disabled"
     },
     "lyrics": {
         "enable_mxm": false,

src/renderer/ameframework.css

@@ -98,60 +98,7 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
 }
 
 
-.md-close-btn {
-    -webkit-mask-image: url("ameres://icons/webui/close.svg");
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-    background-color: white;
-    opacity: 0.75;
-    -webkit-mask-size: contain;
-    height: 18px;
-    width: 18px;
-}
 
-.md-btn {
-    background: rgba(100, 100, 100, 0.5);
-    padding: 8px 16px;
-    border-radius: 4px;
-    font-size: 15px;
-    border: 1px solid rgb(100 100 100 / 35%);
-    color: #eee;
-    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-.md-btn.md-btn-block {
-    display: block;
-}
-
-.md-btn:active {
-    filter: brightness(75%);
-}
-
-.md-select {
-    padding: 5px 10px;
-    font-size: 1em;
-    font-family: inherit;
-    border-radius: 4px;
-    border: 1px solid rgb(100 100 100 / 35%);
-    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
-    background: #363636;
-    color: #eee;
-}
-
-.md-select:focus {
-    outline: none;
-}
-
-.md-select > option {
-    font-size: 1em;
-    font-family: inherit;
-    padding: 8px 16px;
-}
-
-.md-btn.md-btn-primary {
-    background: var(--keyColor);
-    color: white;
-}
 
 .md-transparent {
     background: transparent;

src/renderer/style.less

@@ -1794,6 +1794,67 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Cider */
 
+.md-close-btn {
+  -webkit-mask-image: url("ameres://icons/webui/close.svg");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  background-color: white;
+  opacity: 0.75;
+  -webkit-mask-size: contain;
+  height: 18px;
+  width: 18px;
+}
+
+.md-btn {
+  background: rgba(100, 100, 100, 0.5);
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 13px;
+  border: 1px solid rgb(100 100 100 / 35%);
+  color: #eee;
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
+  transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase);
+
+  &.md-btn-block {
+    display: block;
+  }
+
+  &.md-btn-primary {
+    background: var(--keyColor);
+    color: white;
+  }
+
+  &:hover {
+    filter: brightness(125%);
+  }
+
+  &:active {
+    filter: brightness(75%);
+    transform: translateY(2px);
+  }
+}
+
+.md-select {
+  padding: 5px 10px;
+  font-size: 1em;
+  font-family: inherit;
+  border-radius: 4px;
+  border: 1px solid rgb(100 100 100 / 35%);
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
+  background: #363636;
+  color: #eee;
+}
+
+.md-select:focus {
+  outline: none;
+}
+
+.md-select > option {
+  font-size: 1em;
+  font-family: inherit;
+  padding: 8px 16px;
+}
+
 .sidebar-playlist {
   .folder-button-active {
     background: rgb(255 255 255 / 12%);
@@ -3226,9 +3287,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
   }
 
+  .info-rect {
+    width: 90%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
 
   .title {
-    width: 90%;
+    width: 100%;
     text-align: center;
     display: flex;
     align-content: center;
@@ -3298,6 +3367,27 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       }
     }
 
+    .info-rect-card {
+      padding: 10px 10px 14px;
+      position: relative;
+      width: 100%;
+
+      &::before {
+        background: var(--bgartwork);
+        content: "";
+        top:0;
+        left:0;
+        bottom:0;
+        right:0;
+        position:absolute;
+        background-size: cover;
+        background-position: bottom;
+        z-index: 0;
+        opacity:1;
+        filter: brightness(0.5) blur(50px) saturate(180%);
+      }
+    }
+
     .title {
       height: 100%;
       display: flex;
@@ -3305,15 +3395,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       align-items: center;
       font-size: 0.9em;
       font-weight: 500;
+      z-index: 1;
     }
 
     .subtitle {
       height: 100%;
       justify-content: center;
       align-items: center;
-      font-size: 0.7em;
+      font-size: 0.75em;
-      width: 90%;
+      width: 100%;
       display: flex;
+      z-index: 1;
     }
 
     &::after {

src/renderer/views/components/listennow-child.ejs

@@ -36,7 +36,7 @@
         },
         methods: {
             visibilityChanged: function (isVisible, entry) {
-                this.isVisible = isVisible
+                // this.isVisible = isVisible
             },
         }
     })    

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

@@ -26,15 +26,17 @@
                     </div>
                 </div>
             </div>
-            <div class="title" v-if="item.attributes.artistNames == null || kind!= 'card'" @click.self='app.routeView(item)'>
+            <div class="info-rect" :class="{'info-rect-card': kind == 'card'}" :style="{'--bgartwork': getArtworkUrl(size, true)}">
-                <div class="item-navigate text-overflow-elipsis">{{ item.attributes.name }}</div>
+                <div class="title" v-if="item.attributes.artistNames == null || kind!= 'card'" @click.self='app.routeView(item)'>
-                <div v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "margin-top: -2.6px;margin-left: 3px;">🅴</div> 
+                    <div class="item-navigate text-overflow-elipsis">{{ item.attributes.name }}</div>
-            </div>       
+                    <div v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "margin-top: -2.6px;margin-left: 3px;">🅴</div> 
-            <div class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
+                </div>       
-                 v-if="getSubtitle() != ''">
+                <div class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
-                {{ getSubtitle() }}
+                     v-if="getSubtitle() != ''">
+                    {{ getSubtitle() }}
+                </div>
+                <div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'">&nbsp;</div>
             </div>
-            <div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'">&nbsp;</div>
         </template>
     </div>
 </script>
@@ -192,14 +194,21 @@
                     (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
                 );
             },
-            getArtworkUrl() {
+            getArtworkUrl(size = -1, includeUrl = false) {
                 let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.url : ''
+                if(size != -1) {
+                    artwork = artwork.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', ((size === 900) ? "sr" : "cc"))
+                }
                 switch (this.kind) {
                     case "385":
                         artwork = this.item.attributes.editorialArtwork.subscriptionHero.url
                         break;
                 }
-                return artwork
+                if(!includeUrl) {
+                    return artwork
+                }else{
+                    return `url("${artwork}")`
+                }
             },
             getClasses() {
                 let type = this.item.type

src/renderer/views/pages/zoo.ejs

@@ -4,5 +4,6 @@
         <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
         {{ $store.state.test }}
         <div class="spinner"></div>
+        <button class="md-btn">Cider Button</button>
     </div>
 </template>