65 lines
No EOL
2.7 KiB
Text
65 lines
No EOL
2.7 KiB
Text
<script type="text/x-template" id="queue-item">
|
|
<template>
|
|
<div v-observe-visibility="{callback: visibilityChanged}"
|
|
@contextmenu="contextMenu"
|
|
class="cd-mediaitem-list-item">
|
|
<template v-if="isVisible">
|
|
<div class="artwork">
|
|
<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': '16px'}">
|
|
<div class="title text-overflow-elipsis">
|
|
{{ item.attributes.name }}
|
|
</div>
|
|
<div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
|
|
<template v-if="item.attributes.artistName" >
|
|
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')">
|
|
{{ item.attributes.artistName }}
|
|
</div>
|
|
<template v-if="item.attributes.albumName"> — </template>
|
|
<template v-if="item.attributes.albumName">
|
|
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')">
|
|
{{ item.attributes.albumName }}
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="duration">
|
|
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</script>
|
|
|
|
<script>
|
|
Vue.component('queue-item', {
|
|
template: '#queue-item',
|
|
props: ['item'],
|
|
data: function () {
|
|
return {}
|
|
},
|
|
methods: {
|
|
contextMenu(event) {
|
|
let self = this
|
|
CiderContextMenu.Create(event, {
|
|
items: [{
|
|
"name": $root.getLz('action.removeFromQueue'),
|
|
"action": function () {
|
|
|
|
}
|
|
}]
|
|
});
|
|
},
|
|
msToMinSec(ms) {
|
|
var minutes = Math.floor(ms / 60000);
|
|
var seconds = ((ms % 60000) / 1000).toFixed(0);
|
|
return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
|
|
},
|
|
}
|
|
});
|
|
</script> |