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

Queue is now implemented into main window, active drawers will now change the icons on the chrome

Browse source
This commit is contained in:
booploops 2021-12-15 19:51:00 -08:00
parent 36019b518d
commit 459175ef1b
5 changed files with 84 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,24 +1,33 @@
<script type="text/x-template" id="cider-queue">
<div>
<h3>Queue</h3>
<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" 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 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" 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 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>
</template>
</draggable>
</div>
</div>
</script>
@ -29,10 +38,13 @@
data: function () {
return {
drag: false,
queuePosition: app.mk.queue.position,
queueItems: app.mk.queue._queueItems
queuePosition: 0,
queueItems: []
}
},
mounted() {
this.updateQueue()
},
methods: {
queueContext(event, item, position) {
let self = this