From e0ea3d1aaac28045287642b8075dfc09e66e6c17 Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 5 Jan 2022 22:26:59 -0800 Subject: [PATCH] improvements to mediaitem-square.card, changed some defaults --- index.js | 4 +- src/renderer/ameframework.css | 53 ---------- src/renderer/style.less | 98 ++++++++++++++++++- .../views/components/listennow-child.ejs | 2 +- .../views/components/mediaitem-square.ejs | 29 ++++-- src/renderer/views/pages/zoo.ejs | 1 + 6 files changed, 118 insertions(+), 69 deletions(-) diff --git a/index.js b/index.js index 03e33a57..7579e6ea 100644 --- a/index.js +++ b/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, diff --git a/src/renderer/ameframework.css b/src/renderer/ameframework.css index f411d7ca..7da9b6a2 100644 --- a/src/renderer/ameframework.css +++ b/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; diff --git a/src/renderer/style.less b/src/renderer/style.less index a10fb44c..0a885ca8 100644 --- a/src/renderer/style.less +++ b/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; - width: 90%; + font-size: 0.75em; + width: 100%; display: flex; + z-index: 1; } &::after { diff --git a/src/renderer/views/components/listennow-child.ejs b/src/renderer/views/components/listennow-child.ejs index e93b6f16..d6c51187 100644 --- a/src/renderer/views/components/listennow-child.ejs +++ b/src/renderer/views/components/listennow-child.ejs @@ -36,7 +36,7 @@ }, methods: { visibilityChanged: function (isVisible, entry) { - this.isVisible = isVisible + // this.isVisible = isVisible }, } }) diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs index 846d326c..d64c6a74 100644 --- a/src/renderer/views/components/mediaitem-square.ejs +++ b/src/renderer/views/components/mediaitem-square.ejs @@ -26,15 +26,17 @@ -
-
{{ item.attributes.name }}
-
🅴
-
-
- {{ getSubtitle() }} +
+
+
{{ item.attributes.name }}
+
🅴
+
+
+ {{ getSubtitle() }} +
+
 
-
 
@@ -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 diff --git a/src/renderer/views/pages/zoo.ejs b/src/renderer/views/pages/zoo.ejs index 3d2ab5a7..6b065883 100644 --- a/src/renderer/views/pages/zoo.ejs +++ b/src/renderer/views/pages/zoo.ejs @@ -4,5 +4,6 @@ {{ $store.state.test }} +