okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

progress on queue

Browse source
This commit is contained in:
booploops 2021-12-15 19:27:38 -08:00
parent bcde491e0d
commit d1c8bb8e2f
5 changed files with 138 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

53
resources/cider-ui/views/components/queue.ejs
View file

@ -2,10 +2,22 @@
<div>
<h3>Queue</h3>
<draggable v-model="queueItems" @start="drag=true" @end="drag=false;move()">
<div v-for="(queueItem, position) in queueItems" :key="position">
<span v-if="position == queuePosition">▶️</span>
{{ queueItem.item.attributes.name }}
</div>
<template v-for="(queueItem, position) in queueItems">
<div v-if="position <= queuePosition" style="display: none;">{{ position }}</div>
<div class="cd-queue-item" 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>
</script>
@ -22,9 +34,38 @@
}
},
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()
})
}
},
]
});
},
updateQueue() {
this.queuePosition = app.mk.queue.position;
this.queueItems = app.mk.queue._queueItems;
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;