[media UI] Propagate free text filter to all the views.

This commit is contained in:
Fabio Manganiello 2023-11-14 23:20:53 +01:00
parent ae017516c4
commit 9ed7026aaf
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
7 changed files with 51 additions and 13 deletions

View file

@ -23,7 +23,6 @@
<component
:is="mediaProvider"
:filter="filter"
ref="mediaProvider"
@back="mediaProvider = null"
@path-change="$emit('path-change', $event)"
@play="$emit('play', $event)" />
@ -64,22 +63,25 @@ export default {
},
methods: {
getMediaProviderComponent(type) {
return shallowRef(
registerMediaProvider(type) {
const component = shallowRef(
defineAsyncComponent(
() => import(`@/components/panels/Media/Providers/${type}`)
)
)
this.$options.components[type] = component
this.mediaProviders[type] = component
},
async refreshMediaProviders() {
const config = await this.request('config.get')
this.mediaProviders = {}
// The local File provider is always enabled
this.mediaProviders['File'] = this.getMediaProviderComponent('File')
this.registerMediaProvider('File')
if (config.youtube)
this.mediaProviders['YouTube'] = this.getMediaProviderComponent('YouTube')
this.registerMediaProvider('YouTube')
},
},

View file

@ -37,6 +37,7 @@
:selected-result="selectedResult"
:sources="sources"
:loading="loading"
:filter="browserFilter"
@select="onResultSelect($event)"
@play="play"
@view="view"

View file

@ -7,8 +7,10 @@
<NoToken v-if="!authToken" />
<div class="body" v-else>
<Feed @play="$emit('play', $event)" v-if="selectedView === 'feed'" />
<Playlists :selected-playlist="selectedPlaylist"
<Feed :filter="filter"
@play="$emit('play', $event)" v-if="selectedView === 'feed'" />
<Playlists :filter="filter"
:selected-playlist="selectedPlaylist"
@play="$emit('play', $event)"
@select="onPlaylistSelected"
v-else-if="selectedView === 'playlists'" />

View file

@ -6,6 +6,7 @@
</NoItems>
<Results :results="feed"
:filter="filter"
:sources="{'youtube': true}"
:selected-result="selectedResult"
@select="selectedResult = $event"
@ -29,6 +30,13 @@ export default {
Results,
},
props: {
filter: {
type: String,
default: null,
},
},
data() {
return {
feed: [],

View file

@ -7,6 +7,7 @@
<Results :results="items"
:sources="{'youtube': true}"
:filter="filter"
:selected-result="selectedResult"
@select="selectedResult = $event"
@play="$emit('play', $event)"
@ -34,6 +35,11 @@ export default {
type: String,
required: true,
},
filter: {
type: String,
default: null,
},
},
data() {

View file

@ -18,7 +18,7 @@
</div>
<div class="playlist-body" v-else>
<Playlist :id="selectedPlaylist" @play="$emit('play', $event)" />
<Playlist :id="selectedPlaylist" :filter="filter" @play="$emit('play', $event)" />
</div>
</div>
</template>
@ -45,6 +45,11 @@ export default {
type: String,
default: null,
},
filter: {
type: String,
default: null,
},
},
data() {
@ -56,10 +61,12 @@ export default {
computed: {
playlistsById() {
return this.playlists.reduce((acc, playlist) => {
acc[playlist.id] = playlist
return acc
}, {})
return this.playlists
.filter(playlist => !this.filter || playlist.name.toLowerCase().includes(this.filter.toLowerCase()))
.reduce((acc, playlist) => {
acc[playlist.id] = playlist
return acc
}, {})
},
},

View file

@ -55,6 +55,11 @@ export default {
default: () => {},
},
filter: {
type: String,
default: null,
},
resultIndexStep: {
type: Number,
default: 25,
@ -69,7 +74,14 @@ export default {
computed: {
visibleResults() {
return this.results.slice(0, this.maxResultIndex)
return this.results
.filter((item) => {
if (!this.filter)
return true
return item.title.toLowerCase().includes(this.filter.toLowerCase())
})
.slice(0, this.maxResultIndex)
},
},