74 lines
3.9 KiB
Text
74 lines
3.9 KiB
Text
<script type="text/x-template" id="mediaitem-mvview-sp">
|
|
<div style="position: relative; display: inline-flex;">
|
|
<div @click.self='log(item);app.routeView(item)'
|
|
class="cd-mediaitem-mvview">
|
|
<div style="height: 70px; min-height: 70px; max-height: 70px; width: 100%; margin-left: 5px;">
|
|
<div class="title-browse-sp bold " @click='log(item);app.routeView(item)' style="color: darkgrey;">
|
|
{{ badge ? badge?.designBadge : ''}}
|
|
</div>
|
|
<div class="title-browse-sp ">
|
|
{{ (badge != null && badge?.designTag != null) ? badge?.designTag : (item.attributes?.name ?? '') }}
|
|
</div>
|
|
<div class="title-browse-sp semibold" style="color: darkgrey;">
|
|
{{ (item?.attributes?.artistName ?? (item?.attributes?.curatorName ?? '')) }}
|
|
</div>
|
|
</div>
|
|
<div class="artwork">
|
|
<mediaitem-artwork
|
|
:url="item.attributes?.editorialArtwork?.subscriptionHero?.url ?? item.attributes?.artwork?.url"
|
|
: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="516" :width="900"
|
|
></mediaitem-artwork>
|
|
</div>
|
|
<div class="cd-mediaitem-mvview-overlay" @click.self='log(item);app.routeView(item)'>
|
|
<div class="button" style="
|
|
border-radius: 50%;
|
|
background: rgba(50,50,50,0.7);"
|
|
:style="[(!(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ?
|
|
{'margin': '205px',
|
|
'margin-left': '260px', 'margin-bottom': '140px',
|
|
width: '30px',
|
|
height: '30px',} :
|
|
{'margin': '205px',
|
|
'margin-left': '260px', 'margin-bottom': '140px',
|
|
width: '30px',
|
|
height: '30px',}]" @click="app.playMediaItem(item)">
|
|
<%- include("../svg/play.svg") %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cd-mediaitem-mvview-overlay" @click.self='log(item);app.routeView(item)' tabindex="0">
|
|
<div class="button" style="
|
|
border-radius: 50%;
|
|
background: rgba(50,50,50,0.7);"
|
|
:style="[(!(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes?.playParams ? (item.attributes?.playParams?.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ?
|
|
{'margin': '205px',
|
|
'margin-left': '260px', 'margin-bottom': '140px',
|
|
width: '30px',
|
|
height: '30px',} :
|
|
{'margin': '205px',
|
|
'margin-left': '260px', 'margin-bottom': '140px',
|
|
width: '30px',
|
|
height: '30px',}]" @click="app.playMediaItem(item)">
|
|
<%- include("../svg/play.svg") %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('mediaitem-mvview-sp', {
|
|
template: '#mediaitem-mvview-sp',
|
|
props: ['item', "imagesize", "badge"],
|
|
data: function() {
|
|
return {
|
|
app: this.$root,
|
|
}
|
|
},
|
|
methods: {
|
|
log(item) {
|
|
console.log(item);
|
|
},
|
|
}
|
|
});
|
|
</script>
|