progress on queue
This commit is contained in:
booploops
parent
bcde491e0d
commit
d1c8bb8e2f
5 changed files with 138 additions and 32 deletions
|
|
@ -1861,6 +1861,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
|
||||
/* queue item */
|
||||
.cd-queue-item {
|
||||
border-bottom: 1px solid rgb(200 200 200 / 10%);
|
||||
padding: 8px;
|
||||
.row, .col {
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
.artwork {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.queue-info {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
|
||||
.queue-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
.queue-subtitle {
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* horizontal media scroller */
|
||||
.cd-hmedia-scroller {
|
||||
margin: 0 auto;
|
||||
|
|
@ -2087,18 +2115,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
|
||||
.artwork {
|
||||
height: 190px;
|
||||
width: 190px;
|
||||
background: blue;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
background: var(--artwork);
|
||||
background-size: cover;
|
||||
flex: 0 0 auto;
|
||||
margin: 6px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* mediaitem-square-large */
|
||||
.cd-mediaitem-square-large {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<script type="text/x-template" id="queue-item">
|
||||
<template>
|
||||
<div v-observe-visibility="{callback: visibilityChanged}"
|
||||
@contextmenu="contextMenu"
|
||||
class="cd-mediaitem-list-item">
|
||||
<template v-if="isVisible">
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
size="34"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="info-rect" :style="{'padding-left': '16px'}">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
|
||||
<template v-if="item.attributes.artistName" >
|
||||
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')">
|
||||
{{ item.attributes.artistName }}
|
||||
</div>
|
||||
<template v-if="item.attributes.albumName"> - </template>
|
||||
<template v-if="item.attributes.albumName">
|
||||
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')">
|
||||
{{ item.attributes.albumName }}
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="duration">
|
||||
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('queue-item', {
|
||||
template: '#queue-item',
|
||||
props: ['item'],
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
contextMenu(event) {
|
||||
let self = this
|
||||
CiderContextMenu.Create(event, {
|
||||
items: [{
|
||||
"name": "Remove from queue",
|
||||
"action": function () {
|
||||
|
||||
}
|
||||
}]
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -462,6 +462,8 @@
|
|||
|
||||
<!-- Queue -->
|
||||
<%- include('components/queue') %>
|
||||
<!-- Queue Item -->
|
||||
<%- include('components/queue-item') %>
|
||||
<!-- Horizontal MediaItem Scroller -->
|
||||
<%- include('components/mediaitem-scroller-horizontal') %>
|
||||
<!-- Horizontal MediaItem Scroller (Large) -->
|
||||
|
|
|
|||
|
|
@ -1,20 +1,6 @@
|
|||
<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>
|
||||
<div tabindex="0" class="cd-mediaitem-video">
|
||||
<div class="artwork">
|
||||
<mediaitem-artwork
|
||||
url="https://is1-ssl.mzstatic.com/image/thumb/Video115/v4/00/8b/eb/008beb79-fc95-a24f-eb38-b2cc5a472d4e/8864491155490101.jpg/{w}x{h}mv.{f}"
|
||||
size="300"
|
||||
type="song"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="title text-overflow-elipsis">
|
||||
Name
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis">
|
||||
Artist Name
|
||||
</div>
|
||||
</div>
|
||||
<cider-queue ref="queue"></cider-queue>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue