64 lines
No EOL
3.5 KiB
Text
64 lines
No EOL
3.5 KiB
Text
<script type="text/x-template" id="mediaitem-mvview">
|
|
<template>
|
|
<div style="position: relative; display: inline-flex;">
|
|
<div @click.self='app.routeView(item)'
|
|
class="cd-mediaitem-mvview">
|
|
<div class="artwork">
|
|
<mediaitem-artwork
|
|
:url="item.attributes.artwork ? 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="imagesize ?? 300"
|
|
></mediaitem-artwork>
|
|
</div>
|
|
<div class="cd-mediaitem-mvview-overlay" @click.self='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': '140px',
|
|
'margin-left': '250px',
|
|
width: '40px',
|
|
height: '40px',} :
|
|
{margin: '35px', 'margin-left': '95px',
|
|
width: '120px',
|
|
height: '120px',}]" @click="app.playMediaItem(item)">
|
|
<%- include("../svg/play.svg") %>
|
|
</div>
|
|
</div>
|
|
<div class="title text-overflow-elipsis" @click='app.routeView(item)'>
|
|
{{ item.attributes.name ?? '' }}
|
|
</div>
|
|
<div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if (item.attributes.artistName)app.searchAndNavigate(item,'artist')">
|
|
{{ item.attributes.artistName ?? '' }}
|
|
</div>
|
|
|
|
</div>
|
|
<div class="cd-mediaitem-mvview-overlay" @click.self='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': '140px',
|
|
'margin-left': '250px',
|
|
width: '40px',
|
|
height: '40px',} :
|
|
{margin: '35px', 'margin-left': '95px',
|
|
width: '120px',
|
|
height: '120px',}]" @click="app.playMediaItem(item)">
|
|
<%- include("../svg/play.svg") %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('mediaitem-mvview', {
|
|
template: '#mediaitem-mvview',
|
|
props: ['item', "imagesize"],
|
|
data: function () {
|
|
return {
|
|
app: this.$root,
|
|
}
|
|
},
|
|
methods: {}
|
|
});
|
|
</script> |