added guid's to list items for selection

This commit is contained in:
booploops 2021-12-16 02:41:10 -08:00
parent 7fa3fca084
commit 3ad4665ee2
2 changed files with 42 additions and 24 deletions

View file

@ -424,18 +424,22 @@ const app = new Vue({
}) })
}, },
select_hasMediaItem(id) { select_hasMediaItem(id) {
let found = this.selectedMediaItems.find(item => item.id == id) let found = this.selectedMediaItems.find(item => item.guid == id)
if(found) { if(found) {
return true return true
}else{ }else{
return false return false
} }
}, },
select_selectMediaItem(id, kind) { select_selectMediaItem(id, kind, index, guid) {
if(!this.select_hasMediaItem(guid)) {
this.selectedMediaItems.push({ this.selectedMediaItems.push({
id: id, id: id,
kind: kind kind: kind,
index: index,
guid: guid
}) })
}
}, },
async showCollection(response, title, type) { async showCollection(response, title, type) {
let self = this let self = this
@ -1857,6 +1861,12 @@ document.addEventListener('musickitloaded', function () {
request.send(); request.send();
}); });
function uuidv4() {
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
);
}
function refreshFocus() { function refreshFocus() {
if (document.hasFocus() == false) { if (document.hasFocus() == false) {
app.windowFocus(false) app.windowFocus(false)

View file

@ -6,9 +6,9 @@
: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"
:data-index="index" :data-index="index"
:data-selectorder="selectedOrder" :data-guid="guid"
class="cd-mediaitem-list-item" class="cd-mediaitem-list-item"
:class="{'mediaitem-selected': app.select_hasMediaItem(item.attributes.playParams.id ?? item.id)}"> :class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
<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()" <button @click="addToLibrary()"
@ -70,8 +70,7 @@
return { return {
isVisible: false, isVisible: false,
addedToLibrary: false, addedToLibrary: false,
selected: false, guid: uuidv4()
selectedOrder: -1
} }
}, },
props: { props: {
@ -84,38 +83,44 @@
'show-duration': {type: Boolean, default: true}, 'show-duration': {type: Boolean, default: true},
}, },
methods: { methods: {
deselect() {
this.selected = false;
this.selectedOrder = -1;
},
select(e) { select(e) {
if (e.shiftKey) { if (e.shiftKey) {
if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) { if(this.index != -1) {
app.select_removeMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type) let allMediaItems = document.querySelectorAll(".cd-mediaitem-list-item[data-index]")
// select everything between the last selected item from app.selectedMediaItems and this one
for (let i = start; i <= end; i++) {
let mediaItem = allMediaItems[i];
app.select_selectMediaItem(mediaItem.getAttribute("data-id"), mediaItem.getAttribute("data-type"));
}
}
if (app.select_hasMediaItem(this.guid)) {
app.select_removeMediaItem(this.guid)
} else { } else {
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type) app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} }
} else if (e.ctrlKey) { } else if (e.ctrlKey) {
if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) { if (app.select_hasMediaItem(this.guid)) {
app.select_removeMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type) app.select_removeMediaItem(this.guid)
} else { } else {
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type) app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} }
} else { } else {
if (app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) { if (app.select_hasMediaItem(this.guid)) {
app.selectedMediaItems = [] app.selectedMediaItems = []
} else { } else {
app.selectedMediaItems = [] app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type) app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} }
} }
}, },
contextMenu(event) { contextMenu(event) {
let self = this let self = this
let useMenu = "normal" let useMenu = "normal"
if (!app.select_hasMediaItem(this.item.attributes.playParams.id ?? this.item.id)) { if (!app.select_hasMediaItem(this.guid)) {
app.selectedMediaItems = [] app.selectedMediaItems = []
app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type) app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid)
} else { } else {
useMenu = "multiple" useMenu = "multiple"
} }
@ -172,6 +177,7 @@
"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()
app.selectedMediaItems = []
}) })
} }
}, },
@ -180,6 +186,7 @@
"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()
app.selectedMediaItems = []
} }
}, },
{ {
@ -187,6 +194,7 @@
"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()
app.selectedMediaItems = []
} }
}, },
{ {