138 lines
No EOL
5.9 KiB
Text
138 lines
No EOL
5.9 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">∞</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"
|
|
:class="{selected: selectedItems.includes(position)}"
|
|
@click="select($event, position)"
|
|
@dblclick="playQueueItem(position)" v-else :key="position"
|
|
@contextmenu="selected = position;queueContext($event, queueItem.item, position)">
|
|
<div class="row">
|
|
<div class="col-auto flex-center">
|
|
<div class="artwork">
|
|
<mediaitem-artwork :url="queueItem.item.attributes.artwork ? 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 class="queue-footer">
|
|
<button class="md-btn" style="width:100%;" v-if="queueItems.length > 1" @click="app.mk.clearQueue();updateQueue()">Clear All</button>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
|
|
<script>
|
|
Vue.component('cider-queue', {
|
|
template: '#cider-queue',
|
|
data: function () {
|
|
return {
|
|
drag: false,
|
|
queuePosition: 0,
|
|
queueItems: [],
|
|
selected: -1,
|
|
selectedItems: [],
|
|
app: this.$root
|
|
}
|
|
},
|
|
mounted() {
|
|
this.updateQueue()
|
|
},
|
|
methods: {
|
|
select(e, position) {
|
|
if(e.ctrlKey || e.shiftKey) {
|
|
if(this.selectedItems.indexOf(position) == -1) {
|
|
this.selectedItems.push(position)
|
|
} else {
|
|
this.selectedItems.splice(this.selectedItems.indexOf(position), 1)
|
|
}
|
|
} else {
|
|
this.selectedItems = [position]
|
|
}
|
|
},
|
|
queueContext(event, item, position) {
|
|
let self = this
|
|
let useMenu = "single"
|
|
if(this.selectedItems.length > 1) {
|
|
useMenu = "multiple"
|
|
}
|
|
let menus = {
|
|
single: {
|
|
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()
|
|
})
|
|
}
|
|
},
|
|
]
|
|
},
|
|
multiple: {
|
|
items: [{
|
|
"name": `Remove ${self.selectedItems.length} tracks from queue`,
|
|
"action": function () {
|
|
// add property to items to be removed
|
|
self.selectedItems.forEach(function (item) {
|
|
self.queueItems[item].remove = true
|
|
})
|
|
// remove items
|
|
self.queueItems = self.queueItems.filter(function (item) {
|
|
return !item.remove
|
|
})
|
|
app.mk.queue._reindex()
|
|
self.selectedItems = []
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
app.showMenuPanel(menus[useMenu], event);
|
|
},
|
|
playQueueItem(index) {
|
|
app.mk.changeToMediaAtIndex(index)
|
|
},
|
|
updateQueue() {
|
|
this.selected = -1
|
|
if (app.mk.queue) {
|
|
this.queuePosition = app.mk.queue.position;
|
|
this.queueItems = app.mk.queue._queueItems;
|
|
} else {
|
|
this.queuePosition = 0;
|
|
this.queueItems = [];
|
|
}
|
|
},
|
|
move() {
|
|
this.selected = -1
|
|
app.mk.queue._queueItems = this.queueItems;
|
|
app.mk.queue._reindex()
|
|
}
|
|
}
|
|
});
|
|
</script> |