91 lines
No EOL
3.7 KiB
Text
91 lines
No EOL
3.7 KiB
Text
<script type="text/x-template" id="cider-queue">
|
|
<div class="queue-panel">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h3 class="queue-header-text">Queue</h3>
|
|
</div>
|
|
<div class="col-auto flex-center">
|
|
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled">AUTO</button>
|
|
</div>
|
|
</div>
|
|
<div class="queue-body">
|
|
<draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
|
|
<template v-for="(queueItem, position) in queueItems">
|
|
<div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
|
|
<div class="cd-queue-item" @dblclick="playQueueItem(position)" v-else :key="position" @contextmenu="queueContext($event, queueItem.item, position)">
|
|
<div class="row">
|
|
<div class="col-auto flex-center">
|
|
<div class="artwork">
|
|
<mediaitem-artwork :url="queueItem.item.attributes.artwork.url" :size="32"></mediaitem-artwork>
|
|
</div>
|
|
</div>
|
|
<div class="col queue-info">
|
|
<div class="queue-title text-overflow-elipsis">{{ queueItem.item.attributes.name }}</div>
|
|
<div class="queue-subtitle text-overflow-elipsis">{{ queueItem.item.attributes.albumName }} - {{ queueItem.item.attributes.artistName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</draggable>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
|
|
<script>
|
|
Vue.component('cider-queue', {
|
|
template: '#cider-queue',
|
|
data: function () {
|
|
return {
|
|
drag: false,
|
|
queuePosition: 0,
|
|
queueItems: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.updateQueue()
|
|
},
|
|
methods: {
|
|
queueContext(event, item, position) {
|
|
let self = this
|
|
CiderContextMenu.Create(event, {
|
|
items: [{
|
|
"name": "Remove from queue",
|
|
"action": function () {
|
|
self.queueItems.splice(position, 1)
|
|
app.mk.queue._queueItems = self.queueItems;
|
|
app.mk.queue._reindex()
|
|
}
|
|
},
|
|
{
|
|
"name": "Start Radio",
|
|
"action": function () {
|
|
app.mk.setStationQueue({
|
|
song: item.attributes.playParams.id ?? item.id
|
|
}).then(() => {
|
|
app.mk.play()
|
|
})
|
|
}
|
|
},
|
|
]
|
|
});
|
|
},
|
|
playQueueItem(index) {
|
|
app.mk.changeToMediaAtIndex(index)
|
|
},
|
|
updateQueue() {
|
|
if (app.mk.queue) {
|
|
this.queuePosition = app.mk.queue.position;
|
|
this.queueItems = app.mk.queue._queueItems;
|
|
} else {
|
|
this.queuePosition = 0;
|
|
this.queueItems = [];
|
|
}
|
|
},
|
|
move() {
|
|
app.mk.queue._queueItems = this.queueItems;
|
|
app.mk.queue._reindex()
|
|
}
|
|
}
|
|
});
|
|
</script> |