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

adding search suggestions

Browse source
This commit is contained in:
vapormusic 2022-09-04 18:38:26 +07:00
parent 6cbe9522fc
commit 167893e890
5 changed files with 152 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/renderer/less/elements.less
View file

@ -334,6 +334,15 @@
width: 42px; width: 42px;
height: 42px; height: 42px;
flex: 0 0 auto; flex: 0 0 auto;
&.circle{
border-radius: 50%;
.mediaitem-artwork{
border-radius: 50%;
}
img {
border-radius: 50%;
}
}
} }
&:hover { &:hover {
@ -349,6 +358,11 @@
color: #eee; color: #eee;
} }
&.hintactive {
background: var(--keyColor);
border-radius: 6px;
}
.queue-info { .queue-info {
justify-content: center; justify-content: center;
display: flex; display: flex;
@ -392,6 +406,18 @@
} }
} }
.search-hints .cd-queue-item{
&:hover {
background: var(--selected);
border-radius: 6px;
}
&:active {
background: var(--selected-click);
color: #eee;
border-radius: 6px;
}
}
/* horizontal media scroller */ /* horizontal media scroller */
.cd-hmedia-scroller { .cd-hmedia-scroller {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {

25
src/renderer/main/vueapp.js
View file

@ -1903,8 +1903,18 @@ const app = new Vue({
this.search.hints = []; this.search.hints = [];
return; return;
} }
let hints = await (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/search/hints?term=${this.search.term}`)).data.results; let hints = await (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/search/suggestions?term=${this.search.term}`,
this.search.hints = hints ? hints.terms : []; {"fields[albums]": "artwork,name,playParams,url,artistName,id",
"fields[artists]": "url,name,artwork,id",
"fields[songs]": "artwork,name,playParams,url,artistName,id",
"kinds": "terms,topResults",
"l": this.mklang,
"limit[results:terms]": 5,
"limit[results:topResults]": 5,
"omit[resource]": "autos",
"platform": "web",
"types": "activities,albums,artists,editorial-items,music-movies,playlists,record-labels,songs,stations"})).data.results;
this.search.hints = hints ? hints.suggestions : [];
}, },
getSongProgress() { getSongProgress() {
if (this.playerLCD.userInteraction) { if (this.playerLCD.userInteraction) {
@ -3890,15 +3900,22 @@ const app = new Vue({
if (e.keyCode == "40") { if (e.keyCode == "40") {
if (this.search.hints.length - 1 < this.search.cursor + 1) return; if (this.search.hints.length - 1 < this.search.cursor + 1) return;
this.search.cursor++; this.search.cursor++;
this.search.term = this.search.hints[this.search.cursor]; let item = this.search.hints[this.search.cursor]
this.search.term = item.content ? (item.content?.attributes?.name ?? "") :item.displayTerm;
} else if (e.keyCode == "38") { } else if (e.keyCode == "38") {
if (this.search.cursor == 0) return; if (this.search.cursor == 0) return;
this.search.cursor--; this.search.cursor--;
this.search.term = this.search.hints[this.search.cursor]; let item = this.search.hints[this.search.cursor]
this.search.term = item.content ? (item.content?.attributes?.name ?? "") :item.displayTerm;
} }
}, },
async searchQuery(term = this.search.term) { async searchQuery(term = this.search.term) {
let self = this; let self = this;
if (typeof term === "object"){
this.routeView(term)
this.search.term = ""
return;
}
if (term == "") { if (term == "") {
return; return;
} }

40
src/renderer/views/app/chrome-top.ejs
View file

@ -277,10 +277,10 @@
<div class="app-chrome-item search"> <div class="app-chrome-item search">
<div class="search-input-container"> <div class="search-input-container">
<div class="search-input--icon"></div> <div class="search-input--icon"></div>
<input type="search" spellcheck="false" @click="$root.appRoute('search');" <input type="search" spellcheck="false" @click="$root.appRoute('search');search.showHints = true"
@focus="search.showHints = true" @focus="search.showHints = true"
@blur="setTimeout(()=>{search.showHints = false}, 300)" @blur="setTimeout(()=>{search.showHints = false}, 300)"
v-on:keyup.enter="searchQuery();search.showHints = false;search.cursor = -1" @change="$root.appRoute('search');" v-on:keyup.enter="searchQuery(search.hints[search.cursor].content ?? search.hints[search.cursor].searchTerm);search.showHints = false;search.cursor = -1" @change="$root.appRoute('search');"
v-on:keyup="searchCursor" v-on:keyup="searchCursor"
@input="getSearchHints()" @input="getSearchHints()"
:placeholder="$root.getLz('term.search') + '...'" v-model="search.term" ref="searchInput" :placeholder="$root.getLz('term.search') + '...'" v-model="search.term" ref="searchInput"
@ -288,10 +288,40 @@
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0"> <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
<div class="search-hints"> <div class="search-hints">
<button class="search-hint text-overflow-elipsis" :class="{active: (search.cursor == index)}" v-for="(hint, index) in search.hints" <button class="search-hint text-overflow-elipsis" :class="{active: (search.cursor == index)}" v-for="(hint, index) in search.hints.filter((a) => {return a.content == null})"
@click="search.term = hint;search.showHints = false;searchQuery(hint);search.cursor = -1"> @click="search.term = hint.searchTerm;search.showHints = false;searchQuery(hint.searchTerm);search.cursor = -1">
{{ hint }} {{ hint.displayTerm }}
</button> </button>
<template v-for="(item, position) in search.hints.filter((a) => {return a.content != null})">
<div class="cd-queue-item" @click="search.showHints = false;routeView(item.content);search.cursor = -1"
:class="{'hintactive': (search.cursor == position + search.hints.filter((a) => {return a.content == null}).length)}">
<div class="row">
<div class="col-auto cider-flex-center">
<div class="artwork" :class="{'circle': item.content.type == 'artists'}">
<mediaitem-artwork
:url="item.content.attributes.artwork ? item.content.attributes.artwork.url : ''"
:size="32"></mediaitem-artwork>
</div>
</div>
<div class="col queue-info">
<div class="queue-title text-overflow-elipsis">{{ item.content.attributes.name }}
</div>
<div class="queue-subtitle text-overflow-elipsis">{{
item.content.attributes.artistName }}
</div>
</div>
<div class="queue-explicit-icon cider-flex-center"
v-if="item.content.attributes.contentRating == 'explicit'">
<div class="explicit-icon"></div>
</div>
<!-- <div class="col queue-duration-info">
<div class="queue-duration cider-flex-center">
{{convertTimeToString(item.content.attributes.durationInMillis)}}
</div>
</div> -->
</div>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>

40
src/renderer/views/components/sidebar.ejs
View file

@ -7,10 +7,10 @@
<input <input
type="search" type="search"
spellcheck="false" spellcheck="false"
@click="$root.appRoute('search');" @click="$root.appRoute('search');$root.search.showHints = true"
@focus="$root.search.showHints = true" @focus="$root.search.showHints = true"
@blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)" @blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false;$root.search.cursor = -1" v-on:keyup.enter="$root.searchQuery($root.search.hints[$root.search.cursor].content ?? $root.search.hints[$root.search.cursor].searchTerm);$root.search.showHints = false;$root.search.cursor = -1"
v-on:keyup="$root.searchCursor" v-on:keyup="$root.searchCursor"
@change="$root.appRoute('search');" @change="$root.appRoute('search');"
@input="$root.getSearchHints()" @input="$root.getSearchHints()"
@ -27,11 +27,41 @@
<div class="search-hints"> <div class="search-hints">
<button <button
class="search-hint text-overflow-elipsis" class="search-hint text-overflow-elipsis"
v-for="hint in $root.search.hints" v-for="(hint, index) in $root.search.hints.filter((a) => {return a.content == null})" :class="{active: ($root.search.cursor == index)}"
@click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint);$root.search.cursor = -1" @click="$root.search.term = hint.searchTerm;$root.search.showHints = false;$root.searchQuery(hint.searchTerm);$root.search.cursor = -1"
> >
{{ hint }} {{ hint.displayTerm }}
</button> </button>
<template v-for="(item, position) in $root.search.hints.filter((a) => {return a.content != null})">
<div class="cd-queue-item" @click="$root.search.showHints = false;$root.routeView(item.content);$root.search.cursor = -1"
:class="{'hintactive': ($root.search.cursor == position + $root.search.hints.filter((a) => {return a.content == null}).length)}">
<div class="row">
<div class="col-auto cider-flex-center">
<div class="artwork" :class="{'circle': item.content.type == 'artists'}">
<mediaitem-artwork
:url="item.content.attributes.artwork ? item.content.attributes.artwork.url : ''"
:size="32"></mediaitem-artwork>
</div>
</div>
<div class="col queue-info">
<div class="queue-title text-overflow-elipsis">{{ item.content.attributes.name }}
</div>
<div class="queue-subtitle text-overflow-elipsis">{{
item.content.attributes.artistName }}
</div>
</div>
<div class="queue-explicit-icon cider-flex-center"
v-if="item.content.attributes.contentRating == 'explicit'">
<div class="explicit-icon"></div>
</div>
<!-- <div class="col queue-duration-info">
<div class="queue-duration cider-flex-center">
{{convertTimeToString(item.content.attributes.durationInMillis)}}
</div>
</div> -->
</div>
</div>
</template>
</div> </div>
</div> </div>
</div> </div>

39
src/renderer/views/pages/search.ejs
View file

@ -4,18 +4,49 @@
<div class="search-input--icon"></div> <div class="search-input--icon"></div>
<input type="search" spellcheck="false" @focus="$root.search.showHints = true" <input type="search" spellcheck="false" @focus="$root.search.showHints = true"
@blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)" @blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false" @input="$root.getSearchHints()" v-on:keyup.enter="$root.searchQuery($root.search.hints[$root.search.cursor].content ?? $root.search.hints[$root.search.cursor].searchTerm);$root.search.showHints = false" @input="$root.getSearchHints()"
:placeholder="$root.getLz('term.search') + '...'" v-model="$root.search.term" :placeholder="$root.getLz('term.search') + '...'" v-model="$root.search.term"
class="search-input" /> class="search-input" />
<div class="search-hints-container" v-if="$root.search.showHints && $root.search.hints.length != 0"> <div class="search-hints-container" v-if="$root.search.showHints && $root.search.hints.length != 0">
<div class="search-hints"> <div class="search-hints">
<button class="search-hint text-overflow-elipsis" v-for="hint in $root.search.hints" <button class="search-hint text-overflow-elipsis" v-for="(hint, index) in $root.search.hints.filter((a) => {return a.content == null})" :class="{active: ($root.search.cursor == index)}"
@click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint)"> @click="$root.search.term = hint.searchTerm;$root.search.showHints = false;$root.searchQuery(hint.searchTerm)">
{{ hint }} {{ hint.displayTerm }}
</button> </button>
<template v-for="(item, position) in $root.search.hints.filter((a) => {return a.content != null})">
<div class="cd-queue-item" @click="$root.search.showHints = false;$root.routeView(item.content);$root.search.cursor = -1"
:class="{'hintactive': ($root.search.cursor == position + $root.search.hints.filter((a) => {return a.content == null}).length)}">
<div class="row">
<div class="col-auto cider-flex-center">
<div class="artwork" :class="{'circle': item.content.type == 'artists'}">
<mediaitem-artwork
:url="item.content.attributes.artwork ? item.content.attributes.artwork.url : ''"
:size="32"></mediaitem-artwork>
</div> </div>
</div> </div>
<div class="col queue-info">
<div class="queue-title text-overflow-elipsis">{{ item.content.attributes.name }}
</div>
<div class="queue-subtitle text-overflow-elipsis">{{
item.content.attributes.artistName }}
</div>
</div>
<div class="queue-explicit-icon cider-flex-center"
v-if="item.content.attributes.contentRating == 'explicit'">
<div class="explicit-icon"></div>
</div>
<!-- <div class="col queue-duration-info">
<div class="queue-duration cider-flex-center">
{{convertTimeToString(item.content.attributes.durationInMillis)}}
</div>
</div> -->
</div>
</div>
</template>
</div>
</div>
</div> </div>
<div class="btn-group searchToggle"> <div class="btn-group searchToggle">
<button <button