Add search bar to cider-playlist
This commit is contained in:
Pedro Galhardo
parent
ef22e8d432
commit
50061f29f9
1 changed files with 87 additions and 20 deletions
|
|
@ -94,13 +94,25 @@
|
|||
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
|
||||
{{app.getLz('term.confirm')}}
|
||||
</button>
|
||||
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
|
||||
<div style="display: flex; float: right;">
|
||||
<div class="search-input-container" style="margin-right: 8px;">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search"
|
||||
style="width:100%;"
|
||||
spellcheck="false"
|
||||
:placeholder="$root.getLz('term.search') + '...'"
|
||||
@input="search()"
|
||||
v-model="searchQuery"
|
||||
class="search-input">
|
||||
</div>
|
||||
<button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
|
||||
<div class="svg-icon"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="artworkContainer" v-if="data.attributes.artwork != null">
|
||||
<artwork-material :url="data.attributes.artwork.url" size="260" images="1"></artwork-material>
|
||||
</div>
|
||||
|
|
@ -160,12 +172,12 @@
|
|||
<draggable :options="{disabled: !editing}"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true"
|
||||
@end="drag=false;put()">
|
||||
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
|
||||
<template v-if="!hasNestedPlaylist">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
|
||||
:context-ext="buildContextMenu()"
|
||||
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
|
||||
v-for="(item,index) in displayListing"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div v-for="disc in nestedPlaylist">
|
||||
|
|
@ -262,7 +274,11 @@
|
|||
useArtistChip: false,
|
||||
nestedPlaylist: [],
|
||||
classes: [],
|
||||
editing: false
|
||||
editing: false,
|
||||
inPlaylist: false,
|
||||
searchQuery: "",
|
||||
displayListing: [],
|
||||
hasNestedPlaylist: null,
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
|
|
@ -271,11 +287,21 @@
|
|||
})
|
||||
},
|
||||
watch: {
|
||||
data: function () {
|
||||
this.nestedPlaylist = [];
|
||||
data: {
|
||||
handler: function () {
|
||||
this.isInLibrary()
|
||||
this.getBadges()
|
||||
this.generateNestedPlaylist()
|
||||
|
||||
if (this.data.relationships) {
|
||||
this.generateNestedPlaylist(this.data.relationships.tracks.data)
|
||||
if (!this.hasNestedPlaylist) {
|
||||
this.displayListing = this.data.relationships.tracks.data
|
||||
}
|
||||
}
|
||||
|
||||
this.inPlaylist = this.data.type == "library-playlists";
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -296,23 +322,24 @@
|
|||
}
|
||||
app.modals.moreInfo = true;
|
||||
},
|
||||
generateNestedPlaylist() {
|
||||
generateNestedPlaylist(songlists) {
|
||||
this.nestedPlaylist = [];
|
||||
if (this.data?.type?.includes("album")) {
|
||||
console.log(this.data.relationships.tracks.data)
|
||||
let songlists = this.data.relationships.tracks.data;
|
||||
let discs = songlists.map(x => {
|
||||
return x.attributes.discNumber
|
||||
}).filter((item, i, ar) => ar.indexOf(item) === i);
|
||||
if (discs && discs.length > 1) {
|
||||
|
||||
if ((discs && discs.length > 1) || (discs && this.hasNestedPlaylist == true)) {
|
||||
for (disc of discs) {
|
||||
let songs = songlists.filter(x => x.attributes.discNumber == disc);
|
||||
this.nestedPlaylist.push({ disc: disc, tracks: songs })
|
||||
}
|
||||
}
|
||||
console.log(this.nestedPlaylist)
|
||||
|
||||
}
|
||||
|
||||
if (!this.hasNestedPlaylist)
|
||||
this.hasNestedPlaylist = this.nestedPlaylist != [] && this.nestedPlaylist.length > 1;
|
||||
},
|
||||
isHeaderVisible(visible) {
|
||||
this.headerVisible = visible
|
||||
|
|
@ -724,8 +751,48 @@
|
|||
navClass(data) {
|
||||
if (data && typeof data.views != "undefined") return "";
|
||||
return "d-none";
|
||||
},
|
||||
search() {
|
||||
let filtered = [];
|
||||
|
||||
if (this.searchQuery == "") {
|
||||
filtered = this.data.relationships.tracks.data;
|
||||
} else {
|
||||
filtered = this.data.relationships.tracks.data.filter((item) => {
|
||||
let itemName = item.attributes.name.toLowerCase();
|
||||
let searchTerm = this.searchQuery.toLowerCase();
|
||||
let artistName = "";
|
||||
let albumName = "";
|
||||
if (item.attributes.artistName != null) {
|
||||
artistName = item.attributes.artistName.toLowerCase();
|
||||
}
|
||||
if (item.attributes.albumName != null) {
|
||||
albumName = item.attributes.albumName.toLowerCase();
|
||||
}
|
||||
|
||||
// remove any non-alphanumeric characters and spaces from search term and item name
|
||||
searchTerm = searchTerm.replace(/[^\p{L}\p{N} ]/gu, "");
|
||||
itemName = itemName.replace(/[^\p{L}\p{N} ]/gu, "");
|
||||
artistName = artistName.replace(/[^\p{L}\p{N} ]/gu, "");
|
||||
albumName = albumName.replace(/[^\p{L}\p{N} ]/gu, "");
|
||||
|
||||
let match = itemName.includes(searchTerm) || artistName.includes(searchTerm);
|
||||
// only include album name in playlists
|
||||
// this allows to search for the title track (itemName == albumName)
|
||||
if (this.inPlaylist) match = match || albumName.includes(searchTerm)
|
||||
|
||||
if (match) return item;
|
||||
});
|
||||
}
|
||||
|
||||
if (!this.hasNestedPlaylist) {
|
||||
// Regular album/playlist
|
||||
this.displayListing = filtered;
|
||||
} else {
|
||||
// Album with multiple discs
|
||||
this.generateNestedPlaylist(filtered);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue