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

Added play next, and play later for multi select

Browse source
This commit is contained in:
booploops 2021-12-16 01:31:00 -08:00
parent fc015ea559
commit 4c7c644f97
3 changed files with 122 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

25
resources/cider-ui/index.js
View file

@ -235,17 +235,21 @@ const app = new Vue({
page: "browse", page: "browse",
pageHistory: [], pageHistory: [],
songstest: false, songstest: false,
hangtimer: null hangtimer: null,
selectedMediaItems: []
}, },
watch: { watch: {
page: () => { page: () => {
document.getElementById("app-content").scrollTo(0, 0); document.getElementById("app-content").scrollTo(0, 0);
app.selectedMediaItems = [];
}, },
showingPlaylist: () => { showingPlaylist: () => {
document.getElementById("app-content").scrollTo(0, 0); document.getElementById("app-content").scrollTo(0, 0);
app.selectedMediaItems = [];
}, },
artistPage: () => { artistPage: () => {
document.getElementById("app-content").scrollTo(0, 0); document.getElementById("app-content").scrollTo(0, 0);
app.selectedMediaItems = [];
}, },
}, },
methods: { methods: {
@ -414,6 +418,25 @@ const app = new Vue({
this.drawer.panel = panel this.drawer.panel = panel
} }
}, },
select_removeMediaItem(id) {
this.selectedMediaItems.filter(item => item.id == id).forEach(item => {
this.selectedMediaItems.splice(this.selectedMediaItems.indexOf(item), 1)
})
},
select_hasMediaItem(id) {
let found = this.selectedMediaItems.find(item => item.id == id)
if(found) {
return true
}else{
return false
}
},
select_selectMediaItem(id, kind) {
this.selectedMediaItems.push({
id: id,
kind: kind
})
},
async showCollection(response, title, type) { async showCollection(response, title, type) {
let self = this let self = this
this.collectionList.response = response this.collectionList.response = response

111
resources/cider-ui/views/components/mediaitem-list-item.ejs
View file

@ -2,13 +2,18 @@
<template> <template>
<div v-observe-visibility="{callback: visibilityChanged}" <div v-observe-visibility="{callback: visibilityChanged}"
@contextmenu="contextMenu" @contextmenu="contextMenu"
@click.shift="selected = !selected" @click="select"
:data-id="item.attributes.playParams.id ?? item.id" :data-id="item.attributes.playParams.id ?? item.id"
:data-type="item.attributes.playParams.kind ?? item.type" :data-type="item.attributes.playParams.kind ?? item.type"
class="cd-mediaitem-list-item" :class="{'mediaitem-selected': selected}"> :data-index="index"
:data-selectorder="selectedOrder"
class="cd-mediaitem-list-item"
:class="{'mediaitem-selected': app.select_hasMediaItem(item.attributes.playParams.id ?? item.id)}">
<template v-if="isVisible"> <template v-if="isVisible">
<div class="isLibrary" v-if="showLibraryStatus == true"> <div class="isLibrary" v-if="showLibraryStatus == true">
<button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤</button> <button @click="addToLibrary()"
v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤
</button>
<button v-else>❤️</button> <button v-else>❤️</button>
</div> </div>
<div class="artwork" v-if="showArtwork == true"> <div class="artwork" v-if="showArtwork == true">
@ -23,13 +28,15 @@
{{ item.attributes.name }} {{ item.attributes.name }}
</div> </div>
<div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;"> <div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
<template v-if="item.attributes.artistName" > <template v-if="item.attributes.artistName">
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')"> <div class="artist item-navigate text-overflow-elipsis"
@click="app.searchAndNavigate(item,'artist')">
{{ item.attributes.artistName }} {{ item.attributes.artistName }}
</div> </div>
<template v-if="item.attributes.albumName">&nbsp;-&nbsp;</template> <template v-if="item.attributes.albumName">&nbsp;-&nbsp;</template>
<template v-if="item.attributes.albumName"> <template v-if="item.attributes.albumName">
<div class="artist item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'album')"> <div class="artist item-navigate text-overflow-elipsis"
@click="app.searchAndNavigate(item,'album')">
{{ item.attributes.albumName }} {{ item.attributes.albumName }}
</div> </div>
</template> </template>
@ -63,71 +70,129 @@
return { return {
isVisible: false, isVisible: false,
addedToLibrary: false, addedToLibrary: false,
selected: false selected: false,
selectedOrder: -1
} }
}, },
props: { props: {
'item': {type: Object, required: true}, 'item': {type: Object, required: true},
'parent': {type: Object, required: false}, 'parent': {type: Object, required: false},
'index': {type: Object, required: false}, 'index': {type: Object, required: false, default: -1},
'show-artwork': {type: Boolean, default: true}, 'show-artwork': {type: Boolean, default: true},
'show-library-status': {type: Boolean, default: true}, 'show-library-status': {type: Boolean, default: true},
'show-meta-data': {type: Boolean, default: false}, 'show-meta-data': {type: Boolean, default: false},
'show-duration': {type: Boolean, default: true} 'show-duration': {type: Boolean, default: true},
}, },
methods: { methods: {
deselect() {
this.selected = false;
this.selectedOrder = -1;
},
select(e) {
if (e.shiftKey) {
if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
app.select_removeMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
} else {
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
}
} else if (e.ctrlKey) {
if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
app.select_removeMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
} else {
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
}
} else {
if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
app.selectedMediaItems = []
}else{
app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
}
}
},
contextMenu(event) { contextMenu(event) {
let self = this let self = this
CiderContextMenu.Create(event, let useMenu = "normal"
if (!app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) {
app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type)
}else{
useMenu = "multiple"
}
let menus = {
multiple: {
items: [
{ {
name: `Play ${app.selectedMediaItems.length} tracks next`,
action: ()=>{
app.selectedMediaItems.forEach(item=>{
app.mk.playNext({[item.kind]: item.id})
})
app.selectedMediaItems = []
}
},
{
name: `Play ${app.selectedMediaItems.length} tracks later`,
action: ()=>{
app.selectedMediaItems.forEach(item=>{
app.mk.playLater({[item.kind]: item.id})
})
app.selectedMediaItems = []
}
},
]
},
normal: {
items: [ items: [
{ {
"name": "Start Radio", "name": "Start Radio",
"action": function() { "action": function () {
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(()=>{ app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => {
app.mk.play() app.mk.play()
}) })
} }
}, },
{ {
"name": "Play Next", "name": "Play Next",
"action": function() { "action": function () {
app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex() app.mk.queue._reindex()
} }
}, },
{ {
"name": "Play Later", "name": "Play Later",
"action": function() { "action": function () {
app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id})
app.mk.queue._reindex() app.mk.queue._reindex()
} }
}, },
{ {
"name": "Go to Artist", "name": "Go to Artist",
"action": function() { "action": function () {
app.searchAndNavigate(self.item,'artist') app.searchAndNavigate(self.item, 'artist')
} }
}, },
{ {
"name": "Go to Album", "name": "Go to Album",
"action": function() { "action": function () {
app.searchAndNavigate(self.item,'album') app.searchAndNavigate(self.item, 'album')
} }
}, },
] ]
}); }
}
CiderContextMenu.Create(event, menus[useMenu])
}, },
visibilityChanged: function (isVisible, entry) { visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible this.isVisible = isVisible
}, },
addToLibrary() { addToLibrary() {
let item = this.item let item = this.item
if(item.attributes.playParams.id) { if (item.attributes.playParams.id) {
console.log('adding to library', item.attributes.playParams.id) console.log('adding to library', item.attributes.playParams.id)
app.addToLibrary(item.attributes.playParams.id.toString()) app.addToLibrary(item.attributes.playParams.id.toString())
this.addedToLibrary = true this.addedToLibrary = true
}else if(item.id) { } else if (item.id) {
console.log('adding to library', item.id) console.log('adding to library', item.id)
app.addToLibrary(item.id.toString()) app.addToLibrary(item.id.toString())
this.addedToLibrary = true this.addedToLibrary = true
@ -137,8 +202,8 @@
let item = this.item let item = this.item
let parent = this.parent let parent = this.parent
let childIndex = this.index let childIndex = this.index
if (parent != null && childIndex != null){ if (parent != null && childIndex != null) {
app.queueParentandplayChild(parent,childIndex); app.queueParentandplayChild(parent, childIndex);
} else { } else {
app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url) app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
} }

3
resources/cider-ui/views/pages/collection-list.ejs
View file

@ -2,13 +2,14 @@
<div class="content-inner collection-page"> <div class="content-inner collection-page">
<h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3> <h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
<div v-if="data['data'] != 'null'" class="well"> <div v-if="data['data'] != 'null'" class="well">
<template v-for="item in data.data"> <template v-for="(item, key) in data.data">
<template v-if="item.type == 'artists'"> <template v-if="item.type == 'artists'">
<mediaitem-square-large :item="item"></mediaitem-square-large> <mediaitem-square-large :item="item"></mediaitem-square-large>
</template> </template>
<template v-else> <template v-else>
<mediaitem-list-item <mediaitem-list-item
v-if="item.attributes.playParams.kind == 'song'" v-if="item.attributes.playParams.kind == 'song'"
:index="key"
:item="item"></mediaitem-list-item> :item="item"></mediaitem-list-item>
<mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview> <mediaitem-mvview v-else-if="item.attributes.playParams.kind == 'musicVideo'" :item="item"></mediaitem-mvview>
<mediaitem-square-large v-else :item="item"></mediaitem-square-large> <mediaitem-square-large v-else :item="item"></mediaitem-square-large>