added brick type for media items, brick will now display the correct artwork

This commit is contained in:
booploops 2021-12-21 17:52:03 -08:00
parent 287f8a490b
commit 91664d2d91
4 changed files with 34 additions and 9 deletions

View file

@ -2601,6 +2601,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
width: 212px;
}
}
&.mediaitem-brick {
height: 200px;
width: 240px;
.artwork {
height: 123px;
width: 220px;
}
}
}
.cd-btn-seeall {

View file

@ -6,7 +6,7 @@
:badge="item.attributes" v-for="item in items"></mediaitem-mvview-sp>
</template>
<template v-else>
<mediaitem-square :kind="kind" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
<mediaitem-square :kind="kind" size="600" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
v-for="item in items"></mediaitem-square>
</template>
</div>

View file

@ -6,9 +6,9 @@
<div class="artwork-container">
<div class="artwork" @click='app.routeView(item)'>
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
:url="getArtworkUrl()"
: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="300"
:size="size"
shadow="subtle"
:type="item.type"></mediaitem-artwork>
</div>
@ -38,6 +38,10 @@
kind: {
type: String,
default: ''
},
size: {
type: String,
default: '300'
}
},
data: function () {
@ -48,19 +52,31 @@
}
},
methods: {
getArtworkUrl() {
let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.url : ''
switch (this.kind) {
case "385":
artwork = this.item.attributes.editorialArtwork.subscriptionHero.url
break;
}
return artwork
},
getClasses() {
let type = this.item.type
if(this.kind != "") {
if (this.kind != "") {
type = this.kind
}
switch(type) {
switch (type) {
default:
return []
break;
break;
case "385": // editorial
return ["mediaitem-brick"]
break;
case "music-videos":
case "uploaded-videos":
return "mediaitem-video";
break;
break;
}
},
visibilityChanged: function (isVisible, entry) {

View file

@ -13,11 +13,11 @@
</div>
<template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
<template v-if="index === 0">
<mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0"
<mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0" :kind="recom.attributes.editorialElementKind"
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
<template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
<mediaitem-scroller-horizontal-mvview :imagesize="800" kind="music-videos"
<mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
<template v-else-if="recom.attributes.name == 'Chart Set'">