improvements to mediaitem-square.card, changed some defaults
This commit is contained in:
parent
9c7c821442
commit
e0ea3d1aaa
6 changed files with 118 additions and 69 deletions
|
@ -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>
|
||||
<div class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
|
||||
v-if="getSubtitle() != ''">
|
||||
{{ getSubtitle() }}
|
||||
<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" 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