57 lines
No EOL
2.5 KiB
Text
57 lines
No EOL
2.5 KiB
Text
<script type="text/x-template" id="mediaitem-list-item">
|
|
<template>
|
|
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
|
class="cd-mediaitem-list-item">
|
|
<div class="isLibrary" v-if="showLibraryStatus == true">
|
|
<button v-if="!app.isInLibrary(item.attributes.playParams)">🖤</button>
|
|
<button v-else>❤️</button>
|
|
</div>
|
|
<div class="artwork" v-if="showArtwork == true">
|
|
<mediaitem-artwork
|
|
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
|
size="34"
|
|
:type="item.type"></mediaitem-artwork>
|
|
</div>
|
|
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}">
|
|
<div class="title text-overflow-elipsis">
|
|
{{ item.attributes.name }}
|
|
</div>
|
|
<div class="subtitle text-overflow-elipsis">
|
|
<template v-if="item.attributes.artistName">
|
|
{{ item.attributes.artistName }}
|
|
<template v-if="item.attributes.albumName">
|
|
- {{ item.attributes.albumName }}
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="content-rating" v-if="item.attributes.contentRating">
|
|
{{ item.attributes.contentRating }}
|
|
</div>
|
|
<template v-if="showMetaData == true">
|
|
<div class="metainfo">
|
|
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString() : "" }}
|
|
</div>
|
|
<div class="metainfo">
|
|
{{ item.attributes.genreNames[0] ?? "" }}
|
|
</div>
|
|
</template>
|
|
<div class="duration">
|
|
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('mediaitem-list-item', {
|
|
template: '#mediaitem-list-item',
|
|
props: {
|
|
'item': {type: Object, required: true},
|
|
'show-artwork': {type: Boolean, default: true},
|
|
'show-library-status': {type: Boolean, default: true},
|
|
'show-meta-data': {type: Boolean, default: false}
|
|
},
|
|
methods: {}
|
|
});
|
|
</script> |