improvements to mediaitem-square.card, changed some defaults
This commit is contained in:
booploops
parent
9c7c821442
commit
e0ea3d1aaa
6 changed files with 118 additions and 69 deletions
4
index.js
4
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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
},
|
||||
methods: {
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
this.isVisible = isVisible
|
||||
// this.isVisible = isVisible
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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="item-navigate text-overflow-elipsis">{{ item.attributes.name }}</div>
|
||||
<div v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "margin-top: -2.6px;margin-left: 3px;">🅴</div>
|
||||
<div class="info-rect" :class="{'info-rect-card': kind == 'card'}" :style="{'--bgartwork': getArtworkUrl(size, true)}">
|
||||
<div class="title" v-if="item.attributes.artistNames == null || kind!= 'card'" @click.self='app.routeView(item)'>
|
||||
<div class="item-navigate text-overflow-elipsis">{{ item.attributes.name }}</div>
|
||||
<div v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "margin-top: -2.6px;margin-left: 3px;">🅴</div>
|
||||
</div>
|
||||
<div class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
|
||||
v-if="getSubtitle() != ''">
|
||||
{{ getSubtitle() }}
|
||||
</div>
|
||||
<div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'"> </div>
|
||||
</div>
|
||||
<div class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
|
||||
v-if="getSubtitle() != ''">
|
||||
{{ getSubtitle() }}
|
||||
</div>
|
||||
<div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'"> </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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue