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

11
resources/cider-ui/views/main.ejs
View file

@ -114,11 +114,11 @@
</button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small queue"></button>
<button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}" @click="invokeDrawer('queue')"></button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small lyrics"
@click=" lyricon =!lyricon; if( document.getElementById(`apple-music-video-container`).style.display != `block`){drawertest = !drawertest; if (drawertest) lyricon = true;}; "></button>
<button class="playback-button--small lyrics" :class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"></button>
</div>
<div class="app-chrome-item full-height">
<div class="window-controls">
@ -372,9 +372,10 @@
</transition>
</div>
<transition name="drawertransition">
<div class="app-drawer" v-if="drawertest">
<lyrics-view v-if="drawertest && lyricon" :time="lyriccurrenttime" :lyrics="lyrics">
<div class="app-drawer" v-if="drawer.open">
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics">
</lyrics-view>
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
</div>
</transition>
</div>

1
resources/cider-ui/views/pages/zoo.ejs
View file

@ -1,6 +1,7 @@
<template v-if="page == 'zoo'">
<div class="content-inner">
<h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
<button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
<cider-queue ref="queue"></cider-queue>
</div>
</template>