MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-14 00:10:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Transition to camel case

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-03-08 22:27:06 +01:00
parent c22372daa6
commit 905d0ca88b
36 changed files with 188 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web-src/src/App.vue
View File

@ -141,7 +141,7 @@ export default {
this.configurationStore.$state = data this.configurationStore.$state = data
this.uiStore.hide_singles = data.hide_singles this.uiStore.hide_singles = data.hide_singles
document.title = data.library_name document.title = data.library_name
this.open_websocket() this.openWebsocket()
this.$Progress.finish() this.$Progress.finish()
}) })
.catch(() => { .catch(() => {
@ -152,7 +152,7 @@ export default {
}) })
}) })
}, },
open_websocket() { openWebsocket() {
const socket = this.create_websocket() const socket = this.create_websocket()
const vm = this const vm = this
socket.onopen = () => { socket.onopen = () => {

9
web-src/src/components/ControlPlayerLyrics.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a :class="{ 'is-dark': is_active }" @click="toggle"> <a :class="{ 'is-dark': isActive }" @click="toggle">
<mdicon <mdicon
class="icon" class="icon"
:name="icon" :name="icon"
@ -14,22 +14,19 @@ import { useLyricsStore } from '@/stores/lyrics'
export default { export default {
name: 'ControlPlayerLyrics', name: 'ControlPlayerLyrics',
setup() { setup() {
return { return {
lyricsStore: useLyricsStore() lyricsStore: useLyricsStore()
} }
}, },
computed: { computed: {
icon() { icon() {
return this.is_active ? 'script-text-play' : 'script-text-outline' return this.isActive ? 'script-text-play' : 'script-text-outline'
}, },
is_active() { isActive() {
return this.lyricsStore.pane return this.lyricsStore.pane
} }
}, },
methods: { methods: {
toggle() { toggle() {
this.lyricsStore.pane = !this.lyricsStore.pane this.lyricsStore.pane = !this.lyricsStore.pane

7
web-src/src/components/ControlPlayerPrevious.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a :disabled="disabled" @click="play_previous"> <a :disabled="disabled" @click="playPrevious">
<mdicon <mdicon
class="icon" class="icon"
name="skip-backward" name="skip-backward"
@ -14,21 +14,18 @@ import webapi from '@/webapi'
export default { export default {
name: 'ControlPlayerPrevious', name: 'ControlPlayerPrevious',
setup() { setup() {
return { return {
queueStore: useQueueStore() queueStore: useQueueStore()
} }
}, },
computed: { computed: {
disabled() { disabled() {
return this.queueStore.count <= 0 return this.queueStore.count <= 0
} }
}, },
methods: { methods: {
play_previous() { playPrevious() {
if (this.disabled) { if (this.disabled) {
return return
} }

6
web-src/src/components/ControlPlayerShuffle.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a :class="{ 'is-dark': is_shuffle }" @click="toggle"> <a :class="{ 'is-dark': isShuffle }" @click="toggle">
<mdicon <mdicon
class="icon" class="icon"
:name="icon" :name="icon"
@ -22,12 +22,12 @@ export default {
}, },
computed: { computed: {
icon() { icon() {
if (this.is_shuffle) { if (this.isShuffle) {
return 'shuffle' return 'shuffle'
} }
return 'shuffle-disabled' return 'shuffle-disabled'
}, },
is_shuffle() { isShuffle() {
return this.playerStore.shuffle return this.playerStore.shuffle
} }
}, },

16
web-src/src/components/ListAlbums.vue
View File

@ -32,7 +32,7 @@
/> />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)"> <a @click.prevent.stop="openDialog(item.item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -44,15 +44,15 @@
:media_kind="media_kind" :media_kind="media_kind"
:show="show_details_modal" :show="show_details_modal"
@close="show_details_modal = false" @close="show_details_modal = false"
@remove-podcast="open_remove_podcast_dialog()" @remove-podcast="openRemovePodcastDialog()"
@play-count-changed="play_count_changed()" @play-count-changed="onPlayCountChange()"
/> />
<modal-dialog <modal-dialog
:actions="actions" :actions="actions"
:show="show_remove_podcast_modal" :show="show_remove_podcast_modal"
:title="$t('page.podcast.remove-podcast')" :title="$t('page.podcast.remove-podcast')"
@cancel="show_remove_podcast_modal = false" @cancel="show_remove_podcast_modal = false"
@remove="remove_podcast" @remove="removePodcast"
> >
<template #content> <template #content>
<i18n-t keypath="list.albums.info" tag="p" scope="global"> <i18n-t keypath="list.albums.info" tag="p" scope="global">
@ -119,11 +119,11 @@ export default {
this.$router.push({ name: 'music-album', params: { id: item.id } }) this.$router.push({ name: 'music-album', params: { id: item.id } })
} }
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
}, },
open_remove_podcast_dialog() { openRemovePodcastDialog() {
webapi webapi
.library_album_tracks(this.selected_item.id, { limit: 1 }) .library_album_tracks(this.selected_item.id, { limit: 1 })
.then(({ data: album }) => { .then(({ data: album }) => {
@ -136,10 +136,10 @@ export default {
}) })
}) })
}, },
play_count_changed() { onPlayCountChange() {
this.$emit('play-count-changed') this.$emit('play-count-changed')
}, },
remove_podcast() { removePodcast() {
this.show_remove_podcast_modal = false this.show_remove_podcast_modal = false
webapi webapi
.library_playlist_delete(this.rss_playlist_to_remove.id) .library_playlist_delete(this.rss_playlist_to_remove.id)

4
web-src/src/components/ListAlbumsSpotify.vue
View File

@ -23,7 +23,7 @@
/> />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item)"> <a @click.prevent.stop="openDialog(item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -60,7 +60,7 @@ export default {
params: { id: item.id } params: { id: item.id }
}) })
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
} }

4
web-src/src/components/ListArtists.vue
View File

@ -16,7 +16,7 @@
<p class="is-size-6 has-text-weight-bold" v-text="item.item.name" /> <p class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)"> <a @click.prevent.stop="openDialog(item.item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -50,7 +50,7 @@ export default {
item.media_kind === 'audiobook' ? 'audiobooks-artist' : 'music-artist' item.media_kind === 'audiobook' ? 'audiobooks-artist' : 'music-artist'
this.$router.push({ name: route, params: { id: item.id } }) this.$router.push({ name: route, params: { id: item.id } })
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
} }

4
web-src/src/components/ListArtistsSpotify.vue
View File

@ -5,7 +5,7 @@
<p class="is-size-6 has-text-weight-bold" v-text="item.name" /> <p class="is-size-6 has-text-weight-bold" v-text="item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item)"> <a @click.prevent.stop="openDialog(item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -38,7 +38,7 @@ export default {
params: { id: item.id } params: { id: item.id }
}) })
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
} }

4
web-src/src/components/ListComposers.vue
View File

@ -18,7 +18,7 @@
<p class="is-size-6 has-text-weight-bold" v-text="item.item.name" /> <p class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)"> <a @click.prevent.stop="openDialog(item.item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -54,7 +54,7 @@ export default {
}) })
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
} }

8
web-src/src/components/ListDirectories.vue
View File

@ -3,7 +3,7 @@
<mdicon <mdicon
class="icon media-left is-clickable" class="icon media-left is-clickable"
name="chevron-left" name="chevron-left"
@click="open_parent" @click="openParent"
/> />
<div class="media-content"> <div class="media-content">
<nav class="breadcrumb"> <nav class="breadcrumb">
@ -30,7 +30,7 @@
<p class="is-size-6 has-text-weight-bold" v-text="item.name" /> <p class="is-size-6 has-text-weight-bold" v-text="item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item)"> <a @click.prevent.stop="openDialog(item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -80,11 +80,11 @@ export default {
} }
this.$router.push(route) this.$router.push(route)
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item.path this.selected_item = item.path
this.show_details_modal = true this.show_details_modal = true
}, },
open_parent() { openParent() {
this.open(this.directories.slice(-1).pop()) this.open(this.directories.slice(-1).pop())
} }
} }

4
web-src/src/components/ListGenres.vue
View File

@ -18,7 +18,7 @@
<p class="is-size-6 has-text-weight-bold" v-text="item.item.name" /> <p class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)"> <a @click.prevent.stop="openDialog(item.item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -55,7 +55,7 @@ export default {
query: { media_kind: this.media_kind } query: { media_kind: this.media_kind }
}) })
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
} }

29
web-src/src/components/ListItemQueueItem.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div <div
v-if="is_next || !show_only_next_items" v-if="isNext || !show_only_next_items"
class="media is-align-items-center is-clickable mb-0" class="media is-align-items-center is-clickable mb-0"
@click="play" @click="play"
> >
@ -15,26 +15,26 @@
<div <div
class="is-size-6 has-text-weight-bold" class="is-size-6 has-text-weight-bold"
:class="{ :class="{
'has-text-primary': item.id === player.item_id, 'has-text-primary': isCurrent,
'has-text-grey-light': !is_next 'has-text-grey-light': !isNext
}" }"
v-text="item.title" v-text="item.title"
/> />
<div <div
class="is-size-7 has-text-weight-bold" class="is-size-7 has-text-weight-bold"
:class="{ :class="{
'has-text-primary': item.id === player.item_id, 'has-text-primary': isCurrent,
'has-text-grey-light': !is_next, 'has-text-grey-light': !isNext,
'has-text-grey': is_next && item.id !== player.item_id 'has-text-grey': isNext && !isCurrent
}" }"
v-text="item.artist" v-text="item.artist"
/> />
<div <div
class="is-size-7" class="is-size-7"
:class="{ :class="{
'has-text-primary': item.id === player.item_id, 'has-text-primary': isCurrent,
'has-text-grey-light': !is_next, 'has-text-grey-light': !isNext,
'has-text-grey': is_next && item.id !== player.item_id 'has-text-grey': isNext && isCurrent
}" }"
v-text="item.album" v-text="item.album"
/> />
@ -58,20 +58,17 @@ export default {
position: { required: true, type: Number }, position: { required: true, type: Number },
show_only_next_items: Boolean show_only_next_items: Boolean
}, },
setup() { setup() {
return { playerStore: usePlayerStore() } return { playerStore: usePlayerStore() }
}, },
computed: { computed: {
is_next() { isCurrent() {
return this.current_position < 0 || this.position >= this.current_position return this.item.id === this.playerStore.item_id
}, },
player() { isNext() {
return this.playerStore return this.current_position < 0 || this.position >= this.current_position
} }
}, },
methods: { methods: {
play() { play() {
webapi.player_play({ item_id: this.item.id }) webapi.player_play({ item_id: this.item.id })

10
web-src/src/components/ListPlaylists.vue
View File

@ -9,7 +9,7 @@
<p class="is-size-6 has-text-weight-bold" v-text="item.item.name" /> <p class="is-size-6 has-text-weight-bold" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)"> <a @click.prevent.stop="openDialog(item.item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -17,7 +17,7 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-playlist <modal-dialog-playlist
:item="selected_item" :item="selectedItem"
:show="show_details_modal" :show="show_details_modal"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
@ -33,7 +33,7 @@ export default {
props: { items: { required: true, type: Object } }, props: { items: { required: true, type: Object } },
data() { data() {
return { selected_item: {}, show_details_modal: false } return { selectedItem: {}, show_details_modal: false }
}, },
methods: { methods: {
@ -52,8 +52,8 @@ export default {
this.$router.push({ name: 'playlist', params: { id: item.id } }) this.$router.push({ name: 'playlist', params: { id: item.id } })
} }
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selectedItem = item
this.show_details_modal = true this.show_details_modal = true
} }
} }

4
web-src/src/components/ListPlaylistsSpotify.vue
View File

@ -12,7 +12,7 @@
/> />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item)"> <a @click.prevent.stop="openDialog(item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -45,7 +45,7 @@ export default {
open(item) { open(item) {
this.$router.push({ name: 'playlist-spotify', params: { id: item.id } }) this.$router.push({ name: 'playlist-spotify', params: { id: item.id } })
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
} }

4
web-src/src/components/ListTracks.vue
View File

@ -40,7 +40,7 @@
/> />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item.item)"> <a @click.prevent.stop="openDialog(item.item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -77,7 +77,7 @@ export default {
}, },
methods: { methods: {
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
}, },

4
web-src/src/components/ListTracksSpotify.vue
View File

@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(item)"> <a @click.prevent.stop="openDialog(item)">
<mdicon class="icon has-text-grey" name="dots-vertical" size="16" /> <mdicon class="icon has-text-grey" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -66,7 +66,7 @@ export default {
return { selected_item: {}, show_details_modal: false } return { selected_item: {}, show_details_modal: false }
}, },
methods: { methods: {
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
}, },

4
web-src/src/components/ModalDialogAlbum.vue
View File

@ -43,7 +43,7 @@ export default {
name: this.item.name, name: this.item.name,
properties: [ properties: [
{ {
handler: this.open_artist, handler: this.openArtist,
key: 'property.artist', key: 'property.artist',
value: this.item.artist value: this.item.artist
}, },
@ -95,7 +95,7 @@ export default {
}) })
} }
}, },
open_artist() { openArtist() {
this.$emit('close') this.$emit('close')
if (this.media_kind_resolved === 'audiobook') { if (this.media_kind_resolved === 'audiobook') {
this.$router.push({ this.$router.push({

4
web-src/src/components/ModalDialogAlbumSpotify.vue
View File

@ -22,7 +22,7 @@ export default {
name: this.item.name || '', name: this.item.name || '',
properties: [ properties: [
{ {
handler: this.open_artist, handler: this.openArtist,
key: 'property.artist', key: 'property.artist',
value: this.item?.artists?.[0]?.name value: this.item?.artists?.[0]?.name
}, },
@ -44,7 +44,7 @@ export default {
params: { id: this.item.id } params: { id: this.item.id }
}) })
}, },
open_artist() { openArtist() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',

10
web-src/src/components/ModalDialogComposer.vue
View File

@ -18,16 +18,16 @@ export default {
playable() { playable() {
return { return {
expression: `composer is "${this.item.name}" and media_kind is music`, expression: `composer is "${this.item.name}" and media_kind is music`,
handler: this.open_albums, handler: this.openAlbums,
name: this.item.name, name: this.item.name,
properties: [ properties: [
{ {
handler: this.open_albums, handler: this.openAlbums,
key: 'property.albums', key: 'property.albums',
value: this.item.album_count value: this.item.album_count
}, },
{ {
handler: this.open_tracks, handler: this.openTracks,
key: 'property.tracks', key: 'property.tracks',
value: this.item.track_count value: this.item.track_count
}, },
@ -40,14 +40,14 @@ export default {
} }
}, },
methods: { methods: {
open_albums() { openAlbums() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-composer-albums', name: 'music-composer-albums',
params: { name: this.item.name } params: { name: this.item.name }
}) })
}, },
open_tracks() { openTracks() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-composer-tracks', name: 'music-composer-tracks',

8
web-src/src/components/ModalDialogPlayable.vue
View File

@ -34,9 +34,9 @@ export default {
computed: { computed: {
actions() { actions() {
return [ return [
{ handler: this.queue_add, icon: 'playlist-plus', key: 'actions.add' }, { handler: this.addToQueue, icon: 'playlist-plus', key: 'actions.add' },
{ {
handler: this.queue_add_next, handler: this.addNextToQueue,
icon: 'playlist-play', icon: 'playlist-play',
key: 'actions.add-next' key: 'actions.add-next'
}, },
@ -53,7 +53,7 @@ export default {
webapi.player_play_uri(this.item.uris || this.item.uri, false) webapi.player_play_uri(this.item.uris || this.item.uri, false)
} }
}, },
queue_add() { addToQueue() {
this.$emit('close') this.$emit('close')
if (this.item.expression) { if (this.item.expression) {
webapi.queue_expression_add(this.item.expression) webapi.queue_expression_add(this.item.expression)
@ -61,7 +61,7 @@ export default {
webapi.queue_add(this.item.uris || this.item.uri) webapi.queue_add(this.item.uris || this.item.uri)
} }
}, },
queue_add_next() { addNextToQueue() {
this.$emit('close') this.$emit('close')
if (this.item.expression) { if (this.item.expression) {
webapi.queue_expression_add_next(this.item.expression) webapi.queue_expression_add_next(this.item.expression)

12
web-src/src/components/ModalDialogQueueItem.vue
View File

@ -38,19 +38,19 @@ export default {
name: this.item.title, name: this.item.title,
properties: [ properties: [
{ {
handler: this.open_album, handler: this.openAlbum,
key: 'property.album', key: 'property.album',
value: this.item.album value: this.item.album
}, },
{ {
handler: this.open_album_artist, handler: this.openAlbumArtist,
key: 'property.album-artist', key: 'property.album-artist',
value: this.item.album_artist value: this.item.album_artist
}, },
{ key: 'property.composer', value: this.item.composer }, { key: 'property.composer', value: this.item.composer },
{ key: 'property.year', value: this.item.year }, { key: 'property.year', value: this.item.year },
{ {
handler: this.open_genre, handler: this.openGenre,
key: 'property.genre', key: 'property.genre',
value: this.item.genre value: this.item.genre
}, },
@ -97,7 +97,7 @@ export default {
} }
}, },
methods: { methods: {
open_album() { openAlbum() {
this.$emit('close') this.$emit('close')
if (this.item.data_kind === 'spotify') { if (this.item.data_kind === 'spotify') {
this.$router.push({ this.$router.push({
@ -121,7 +121,7 @@ export default {
}) })
} }
}, },
open_album_artist() { openAlbumArtist() {
this.$emit('close') this.$emit('close')
if (this.item.data_kind === 'spotify') { if (this.item.data_kind === 'spotify') {
this.$router.push({ this.$router.push({
@ -143,7 +143,7 @@ export default {
}) })
} }
}, },
open_genre() { openGenre() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'genre-albums', name: 'genre-albums',

18
web-src/src/components/ModalDialogTrack.vue
View File

@ -22,20 +22,20 @@ export default {
return [] return []
} }
return this.item.play_count > 0 return this.item.play_count > 0
? [{ handler: this.mark_new, key: 'actions.mark-as-new' }] ? [{ handler: this.markAsNew, key: 'actions.mark-as-new' }]
: [{ handler: this.mark_played, key: 'actions.mark-as-played' }] : [{ handler: this.markAsPlayed, key: 'actions.mark-as-played' }]
}, },
playable() { playable() {
return { return {
name: this.item.title, name: this.item.title,
properties: [ properties: [
{ {
handler: this.open_album, handler: this.openAlbum,
key: 'property.album', key: 'property.album',
value: this.item.album value: this.item.album
}, },
{ {
handler: this.open_artist, handler: this.openArtist,
key: 'property.album-artist', key: 'property.album-artist',
value: this.item.album_artist value: this.item.album_artist
}, },
@ -91,7 +91,7 @@ export default {
} }
}, },
methods: { methods: {
mark_new() { markAsNew() {
webapi webapi
.library_track_update(this.item.id, { play_count: 'reset' }) .library_track_update(this.item.id, { play_count: 'reset' })
.then(() => { .then(() => {
@ -99,7 +99,7 @@ export default {
this.$emit('close') this.$emit('close')
}) })
}, },
mark_played() { markAsPlayed() {
webapi webapi
.library_track_update(this.item.id, { play_count: 'increment' }) .library_track_update(this.item.id, { play_count: 'increment' })
.then(() => { .then(() => {
@ -107,7 +107,7 @@ export default {
this.$emit('close') this.$emit('close')
}) })
}, },
open_album() { openAlbum() {
this.$emit('close') this.$emit('close')
if (this.item.media_kind === 'podcast') { if (this.item.media_kind === 'podcast') {
this.$router.push({ this.$router.push({
@ -126,7 +126,7 @@ export default {
}) })
} }
}, },
open_artist() { openArtist() {
this.$emit('close') this.$emit('close')
if ( if (
this.item.media_kind === 'music' || this.item.media_kind === 'music' ||
@ -143,7 +143,7 @@ export default {
}) })
} }
}, },
open_genre() { openGenre() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'genre-albums', name: 'genre-albums',

8
web-src/src/components/ModalDialogTrackSpotify.vue
View File

@ -23,12 +23,12 @@ export default {
name: this.item.name, name: this.item.name,
properties: [ properties: [
{ {
handler: this.open_album, handler: this.openAlbum,
key: 'property.album', key: 'property.album',
value: this.item.album.name value: this.item.album.name
}, },
{ {
handler: this.open_artist, handler: this.openArtist,
key: 'property.album-artist', key: 'property.album-artist',
value: this.item.artists[0]?.name value: this.item.artists[0]?.name
}, },
@ -51,14 +51,14 @@ export default {
} }
}, },
methods: { methods: {
open_album() { openAlbum() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-album', name: 'music-spotify-album',
params: { id: this.item.album.id } params: { id: this.item.album.id }
}) })
}, },
open_artist() { openArtist() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',

6
web-src/src/components/NavbarTop.vue
View File

@ -143,7 +143,7 @@ export default {
{ {
icon: 'magnify', icon: 'magnify',
key: 'navigation.search', key: 'navigation.search',
name: this.searchStore.search_source, name: this.searchStore.source,
show: this.settingsStore.show_menu_item_search show: this.settingsStore.show_menu_item_search
}, },
{ separator: true, show: true }, { separator: true, show: true },
@ -153,7 +153,7 @@ export default {
show: true show: true
}, },
{ {
action: this.open_update_dialog, action: this.openUpdateDialog,
key: 'navigation.update-library', key: 'navigation.update-library',
show: true show: true
}, },
@ -168,7 +168,7 @@ export default {
} }
}, },
methods: { methods: {
open_update_dialog() { openUpdateDialog() {
this.uiStore.show_update_dialog = true this.uiStore.show_update_dialog = true
this.uiStore.show_burger_menu = false this.uiStore.show_burger_menu = false
} }

4
web-src/src/pages/PageAlbum.vue
View File

@ -4,7 +4,7 @@
<template #heading-left> <template #heading-left>
<div class="title is-5" v-text="album.name" /> <div class="title is-5" v-text="album.name" />
<div class="subtitle is-6"> <div class="subtitle is-6">
<a @click="open_artist" v-text="album.artist" /> <a @click="openArtist" v-text="album.artist" />
</div> </div>
<div <div
class="is-size-7 is-uppercase has-text-centered-mobile" class="is-size-7 is-uppercase has-text-centered-mobile"
@ -91,7 +91,7 @@ export default {
} }
}, },
methods: { methods: {
open_artist() { openArtist() {
this.show_details_modal = false this.show_details_modal = false
this.$router.push({ this.$router.push({
name: 'music-artist', name: 'music-artist',

4
web-src/src/pages/PageAlbumSpotify.vue
View File

@ -4,7 +4,7 @@
<template #heading-left> <template #heading-left>
<div class="title is-5" v-text="album.name" /> <div class="title is-5" v-text="album.name" />
<div class="subtitle is-6"> <div class="subtitle is-6">
<a @click="open_artist" v-text="album.artists[0].name" /> <a @click="openArtist" v-text="album.artists[0].name" />
</div> </div>
<div <div
class="is-size-7 is-uppercase has-text-centered-mobile" class="is-size-7 is-uppercase has-text-centered-mobile"
@ -96,7 +96,7 @@ export default {
} }
}, },
methods: { methods: {
open_artist() { openArtist() {
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',
params: { id: this.album.artists[0].id } params: { id: this.album.artists[0].id }

4
web-src/src/pages/PageArtist.vue
View File

@ -137,7 +137,7 @@ export default {
{ count: this.albums.count, key: 'count.albums' }, { count: this.albums.count, key: 'count.albums' },
{ {
count: this.track_count, count: this.track_count,
handler: this.open_tracks, handler: this.openTracks,
key: 'count.tracks' key: 'count.tracks'
} }
], ],
@ -156,7 +156,7 @@ export default {
} }
}, },
methods: { methods: {
open_tracks() { openTracks() {
this.$router.push({ this.$router.push({
name: 'music-artist-tracks', name: 'music-artist-tracks',
params: { id: this.artist.id } params: { id: this.artist.id }

4
web-src/src/pages/PageComposerAlbums.vue
View File

@ -78,7 +78,7 @@ export default {
{ count: this.composer.album_count, key: 'count.albums' }, { count: this.composer.album_count, key: 'count.albums' },
{ {
count: this.composer.track_count, count: this.composer.track_count,
handler: this.open_tracks, handler: this.openTracks,
key: 'count.tracks' key: 'count.tracks'
} }
], ],
@ -89,7 +89,7 @@ export default {
} }
}, },
methods: { methods: {
open_tracks() { openTracks() {
this.$router.push({ this.$router.push({
name: 'music-composer-tracks', name: 'music-composer-tracks',
params: { name: this.composer.name } params: { name: this.composer.name }

4
web-src/src/pages/PageComposerTracks.vue
View File

@ -117,7 +117,7 @@ export default {
subtitle: [ subtitle: [
{ {
count: this.composer.album_count, count: this.composer.album_count,
handler: this.open_albums, handler: this.openAlbums,
key: 'count.albums' key: 'count.albums'
}, },
{ count: this.composer.track_count, key: 'count.tracks' } { count: this.composer.track_count, key: 'count.tracks' }
@ -135,7 +135,7 @@ export default {
} }
}, },
methods: { methods: {
open_albums() { openAlbums() {
this.$router.push({ this.$router.push({
name: 'music-composer-albums', name: 'music-composer-albums',
params: { name: this.composer.name } params: { name: this.composer.name }

4
web-src/src/pages/PageGenreAlbums.vue
View File

@ -84,7 +84,7 @@ export default {
{ count: this.genre.album_count, key: 'count.albums' }, { count: this.genre.album_count, key: 'count.albums' },
{ {
count: this.genre.track_count, count: this.genre.track_count,
handler: this.open_tracks, handler: this.openTracks,
key: 'count.tracks' key: 'count.tracks'
} }
], ],
@ -95,7 +95,7 @@ export default {
} }
}, },
methods: { methods: {
open_tracks() { openTracks() {
this.show_details_modal = false this.show_details_modal = false
this.$router.push({ this.$router.push({
name: 'genre-tracks', name: 'genre-tracks',

4
web-src/src/pages/PageNowPlaying.vue
View File

@ -9,7 +9,7 @@
:album="track.album" :album="track.album"
class="is-clickable is-big" class="is-clickable is-big"
:class="{ 'is-masked': lyricsStore.pane }" :class="{ 'is-masked': lyricsStore.pane }"
@click="open_dialog(track)" @click="openDialog(track)"
/> />
<lyrics-pane v-if="lyricsStore.pane" /> <lyrics-pane v-if="lyricsStore.pane" />
<control-slider <control-slider
@ -164,7 +164,7 @@ export default {
end_dragging() { end_dragging() {
this.is_dragged = false this.is_dragged = false
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
}, },

14
web-src/src/pages/PagePodcast.vue
View File

@ -32,22 +32,22 @@
<list-tracks <list-tracks
:items="tracks" :items="tracks"
:show_progress="true" :show_progress="true"
@play-count-changed="reload_tracks" @play-count-changed="reloadTracks"
/> />
<modal-dialog-album <modal-dialog-album
:item="album" :item="album"
:show="show_details_modal" :show="show_details_modal"
:media_kind="'podcast'" :media_kind="'podcast'"
@close="show_details_modal = false" @close="show_details_modal = false"
@play-count-changed="reload_tracks" @play-count-changed="reloadTracks"
@remove-podcast="open_remove_podcast_dialog" @remove-podcast="openRemovePodcastDialog"
/> />
<modal-dialog <modal-dialog
:actions="actions" :actions="actions"
:show="show_remove_podcast_modal" :show="show_remove_podcast_modal"
:title="$t('page.podcast.remove-podcast')" :title="$t('page.podcast.remove-podcast')"
@cancel="show_remove_podcast_modal = false" @cancel="show_remove_podcast_modal = false"
@remove="remove_podcast" @remove="removePodcast"
> >
<template #content> <template #content>
<i18n-t keypath="page.podcast.remove-info" tag="p" scope="global"> <i18n-t keypath="page.podcast.remove-info" tag="p" scope="global">
@ -129,7 +129,7 @@ export default {
} }
}, },
methods: { methods: {
open_remove_podcast_dialog() { openRemovePodcastDialog() {
webapi webapi
.library_track_playlists(this.tracks.items[0].id) .library_track_playlists(this.tracks.items[0].id)
.then(({ data }) => { .then(({ data }) => {
@ -143,12 +143,12 @@ export default {
play() { play() {
webapi.player_play_uri(this.album.uri, false) webapi.player_play_uri(this.album.uri, false)
}, },
reload_tracks() { reloadTracks() {
webapi.library_podcast_episodes(this.album.id).then(({ data }) => { webapi.library_podcast_episodes(this.album.id).then(({ data }) => {
this.tracks = new GroupedList(data.tracks) this.tracks = new GroupedList(data.tracks)
}) })
}, },
remove_podcast() { removePodcast() {
this.show_remove_podcast_modal = false this.show_remove_podcast_modal = false
webapi webapi
.library_playlist_delete(this.rss_playlist_to_remove.id) .library_playlist_delete(this.rss_playlist_to_remove.id)

20
web-src/src/pages/PageQueue.vue
View File

@ -7,7 +7,7 @@
<template #heading-right> <template #heading-right>
<control-button <control-button
:button="{ :button="{
handler: update_show_next_items, handler: toggleHideReadItems,
icon: 'eye-off-outline', icon: 'eye-off-outline',
key: 'actions.hide-previous' key: 'actions.hide-previous'
}" }"
@ -15,7 +15,7 @@
/> />
<control-button <control-button
:button="{ :button="{
handler: open_add_stream_dialog, handler: openAddStreamDialog,
icon: 'web', icon: 'web',
key: 'actions.add-stream' key: 'actions.add-stream'
}" }"
@ -31,7 +31,7 @@
/> />
<control-button <control-button
:button="{ :button="{
handler: queue_clear, handler: clearQueue,
icon: 'delete-empty', icon: 'delete-empty',
key: 'actions.clear' key: 'actions.clear'
}" }"
@ -40,7 +40,7 @@
<control-button <control-button
v-if="is_queue_save_allowed" v-if="is_queue_save_allowed"
:button="{ :button="{
handler: save_dialog, handler: showSaveDialog,
icon: 'download', icon: 'download',
key: 'actions.save' key: 'actions.save'
}" }"
@ -58,7 +58,7 @@
:edit_mode="edit_mode" :edit_mode="edit_mode"
> >
<template #actions> <template #actions>
<a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)"> <a v-if="!edit_mode" @click.prevent.stop="openDialog(element)">
<mdicon <mdicon
class="icon has-text-grey" class="icon has-text-grey"
name="dots-vertical" name="dots-vertical"
@ -180,20 +180,20 @@ export default {
webapi.queue_move(item.id, newPosition) webapi.queue_move(item.id, newPosition)
} }
}, },
open_add_stream_dialog() { openAddStreamDialog() {
this.show_url_modal = true this.show_url_modal = true
}, },
open_dialog(item) { openDialog(item) {
this.selected_item = item this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
}, },
queue_clear() { clearQueue() {
webapi.queue_clear() webapi.queue_clear()
}, },
remove(item) { remove(item) {
webapi.queue_remove(item.id) webapi.queue_remove(item.id)
}, },
save_dialog() { showSaveDialog() {
if (this.queue_items.length > 0) { if (this.queue_items.length > 0) {
this.show_pls_save_modal = true this.show_pls_save_modal = true
} }
@ -201,7 +201,7 @@ export default {
toggleEdit() { toggleEdit() {
this.edit_mode = !this.edit_mode this.edit_mode = !this.edit_mode
}, },
update_show_next_items() { toggleHideReadItems() {
this.uiStore.show_only_next_items = !this.uiStore.show_only_next_items this.uiStore.show_only_next_items = !this.uiStore.show_only_next_items
} }
} }

62
web-src/src/pages/PageSearchLibrary.vue
View File

@ -8,7 +8,7 @@
<p class="control has-icons-left"> <p class="control has-icons-left">
<input <input
ref="search_field" ref="search_field"
v-model="search_query" v-model="query"
class="input is-rounded" class="input is-rounded"
type="text" type="text"
:placeholder="$t('page.search.placeholder')" :placeholder="$t('page.search.placeholder')"
@ -36,10 +36,10 @@
</div> </div>
</form> </form>
<div class="field is-grouped is-grouped-multiline mt-4"> <div class="field is-grouped is-grouped-multiline mt-4">
<div v-for="query in recent_searches" :key="query" class="control"> <div v-for="query in history" :key="query" class="control">
<div class="tags has-addons"> <div class="tags has-addons">
<a class="tag" @click="open_search(query)" v-text="query" /> <a class="tag" @click="openSearch(query)" v-text="query" />
<a class="tag is-delete" @click="remove_search(query)" /> <a class="tag is-delete" @click="removeSearch(query)" />
</div> </div>
</div> </div>
</div> </div>
@ -47,7 +47,7 @@
</div> </div>
</div> </div>
</section> </section>
<tabs-search @search-library="search" @search-spotify="search_spotify" /> <tabs-search @search-library="search" @search-spotify="searchSpotify" />
<template v-for="[type, items] in results" :key="type"> <template v-for="[type, items] in results" :key="type">
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading-left>
@ -57,7 +57,7 @@
<component :is="components[type]" :items="items" /> <component :is="components[type]" :items="items" />
</template> </template>
<template v-if="!expanded" #footer> <template v-if="!expanded" #footer>
<nav v-if="show_all_button(items)" class="level"> <nav v-if="showAllButton(items)" class="level">
<p class="level-item"> <p class="level-item">
<a <a
class="button is-small is-rounded" class="button is-small is-rounded"
@ -116,11 +116,9 @@ export default {
ListTracks, ListTracks,
TabsSearch TabsSearch
}, },
setup() { setup() {
return { searchStore: useSearchStore() } return { searchStore: useSearchStore() }
}, },
data() { data() {
return { return {
components: { components: {
@ -134,47 +132,43 @@ export default {
}, },
results: new Map(), results: new Map(),
search_limit: {}, search_limit: {},
search_query: '', query: '',
search_types: SEARCH_TYPES search_types: SEARCH_TYPES
} }
}, },
computed: { computed: {
expanded() { expanded() {
return this.search_types.length === 1 return this.search_types.length === 1
}, },
recent_searches() { history() {
return this.searchStore.recent_searches return this.searchStore.history
} }
}, },
watch: { watch: {
search_query() { query() {
this.searchStore.search_query = this.search_query this.searchStore.query = this.query
} }
}, },
mounted() { mounted() {
this.searchStore.search_source = this.$route.name this.searchStore.source = this.$route.name
this.search_query = this.searchStore.search_query this.query = this.searchStore.query
this.search_limit = PAGE_SIZE this.search_limit = PAGE_SIZE
this.search() this.search()
}, },
methods: { methods: {
expand(type) { expand(type) {
this.search_query = this.searchStore.search_query this.query = this.searchStore.query
this.search_types = [type] this.search_types = [type]
this.search_limit = -1 this.search_limit = -1
this.search() this.search()
}, },
open_search(query) { openSearch(query) {
this.search_query = query this.query = query
this.search_types = SEARCH_TYPES this.search_types = SEARCH_TYPES
this.search_limit = PAGE_SIZE this.search_limit = PAGE_SIZE
this.search() this.search()
}, },
remove_search(query) { removeSearch(query) {
this.searchStore.remove(query) this.searchStore.remove(query)
}, },
reset() { reset() {
@ -188,43 +182,43 @@ export default {
this.search_types = SEARCH_TYPES this.search_types = SEARCH_TYPES
this.search_limit = PAGE_SIZE this.search_limit = PAGE_SIZE
} }
this.search_query = this.search_query.trim() this.query = this.query.trim()
if (!this.search_query || !this.search_query.replace(/^query:/u, '')) { if (!this.query || !this.query.replace(/^query:/u, '')) {
this.$refs.search_field.focus() this.$refs.search_field.focus()
return return
} }
this.reset() this.reset()
this.search_types.forEach((type) => { this.search_types.forEach((type) => {
this.search_items(type) this.searchItems(type)
}) })
this.searchStore.add(this.search_query) this.searchStore.add(this.query)
}, },
search_items(type) { searchItems(type) {
const music = type !== 'audiobook' && type !== 'podcast' const music = type !== 'audiobook' && type !== 'podcast'
const kind = music ? 'music' : type const kind = music ? 'music' : type
const parameters = { const parameters = {
limit: this.search_limit, limit: this.search_limit,
type: music ? type : 'album' type: music ? type : 'album'
} }
if (this.search_query.startsWith('query:')) { if (this.query.startsWith('query:')) {
parameters.expression = `(${this.search_query.replace(/^query:/u, '').trim()}) and media_kind is ${kind}` parameters.expression = `(${this.query.replace(/^query:/u, '').trim()}) and media_kind is ${kind}`
} else if (music) { } else if (music) {
parameters.query = this.search_query parameters.query = this.query
parameters.media_kind = kind parameters.media_kind = kind
} else { } else {
parameters.expression = `(album includes "${this.search_query}" or artist includes "${this.search_query}") and media_kind is ${kind}` parameters.expression = `(album includes "${this.query}" or artist includes "${this.query}") and media_kind is ${kind}`
} }
webapi.search(parameters).then(({ data }) => { webapi.search(parameters).then(({ data }) => {
this.results.set(type, new GroupedList(data[`${parameters.type}s`])) this.results.set(type, new GroupedList(data[`${parameters.type}s`]))
}) })
}, },
search_spotify() { searchSpotify() {
this.$router.push({ name: 'search-spotify' }) this.$router.push({ name: 'search-spotify' })
}, },
show(type) { show(type) {
return this.search_types.includes(type) return this.search_types.includes(type)
}, },
show_all_button(items) { showAllButton(items) {
return items.total > items.items.length return items.total > items.items.length
} }
} }

56
web-src/src/pages/PageSearchSpotify.vue
View File

@ -8,7 +8,7 @@
<p class="control has-icons-left"> <p class="control has-icons-left">
<input <input
ref="search_field" ref="search_field"
v-model="search_query" v-model="query"
class="input is-rounded" class="input is-rounded"
type="text" type="text"
:placeholder="$t('page.spotify.search.placeholder')" :placeholder="$t('page.spotify.search.placeholder')"
@ -19,10 +19,10 @@
</div> </div>
</form> </form>
<div class="field is-grouped is-grouped-multiline mt-4"> <div class="field is-grouped is-grouped-multiline mt-4">
<div v-for="query in recent_searches" :key="query" class="control"> <div v-for="query in history" :key="query" class="control">
<div class="tags has-addons"> <div class="tags has-addons">
<a class="tag" @click="open_search(query)" v-text="query" /> <a class="tag" @click="openSearch(query)" v-text="query" />
<a class="tag is-delete" @click="remove_search(query)" /> <a class="tag is-delete" @click="removeSearch(query)" />
</div> </div>
</div> </div>
</div> </div>
@ -30,7 +30,7 @@
</div> </div>
</div> </div>
</section> </section>
<tabs-search @search-library="search_library" @search-spotify="search" /> <tabs-search @search-library="searchLibrary" @search-spotify="search" />
<template v-for="[type, items] in results" :key="type"> <template v-for="[type, items] in results" :key="type">
<content-with-heading> <content-with-heading>
<template #heading-left> <template #heading-left>
@ -40,7 +40,7 @@
</template> </template>
<template #content> <template #content>
<component :is="components[type]" :items="items.items" /> <component :is="components[type]" :items="items.items" />
<vue-eternal-loading v-if="expanded" :load="search_next"> <vue-eternal-loading v-if="expanded" :load="searchNext">
<template #loading> <template #loading>
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column has-text-centered"> <div class="column has-text-centered">
@ -54,7 +54,7 @@
</vue-eternal-loading> </vue-eternal-loading>
</template> </template>
<template v-if="!expanded" #footer> <template v-if="!expanded" #footer>
<nav v-if="show_all_button(items)" class="level"> <nav v-if="showAllButton(items)" class="level">
<p class="level-item"> <p class="level-item">
<a <a
class="button is-small is-rounded" class="button is-small is-rounded"
@ -119,7 +119,7 @@ export default {
}, },
results: new Map(), results: new Map(),
search_parameters: {}, search_parameters: {},
search_query: '', query: '',
search_types: SEARCH_TYPES search_types: SEARCH_TYPES
} }
}, },
@ -127,39 +127,39 @@ export default {
expanded() { expanded() {
return this.search_types.length === 1 return this.search_types.length === 1
}, },
recent_searches() { history() {
return this.searchStore.recent_searches.filter( return this.searchStore.history.filter(
(query) => !query.startsWith('query:') (query) => !query.startsWith('query:')
) )
} }
}, },
watch: { watch: {
search_query() { query() {
this.searchStore.search_query = this.search_query this.searchStore.query = this.query
} }
}, },
mounted() { mounted() {
this.searchStore.search_source = this.$route.name this.searchStore.source = this.$route.name
this.search_query = this.searchStore.search_query this.query = this.searchStore.query
this.search_parameters.limit = PAGE_SIZE this.search_parameters.limit = PAGE_SIZE
this.search() this.search()
}, },
methods: { methods: {
expand(type) { expand(type) {
this.search_query = this.searchStore.search_query this.query = this.searchStore.query
this.search_types = [type] this.search_types = [type]
this.search_parameters.limit = PAGE_SIZE_EXPANDED this.search_parameters.limit = PAGE_SIZE_EXPANDED
this.search_parameters.offset = 0 this.search_parameters.offset = 0
this.search() this.search()
}, },
open_search(query) { openSearch(query) {
this.search_query = query this.query = query
this.search_types = SEARCH_TYPES this.search_types = SEARCH_TYPES
this.search_parameters.limit = PAGE_SIZE this.search_parameters.limit = PAGE_SIZE
this.search_parameters.offset = 0 this.search_parameters.offset = 0
this.search() this.search()
}, },
remove_search(query) { removeSearch(query) {
this.searchStore.remove(query) this.searchStore.remove(query)
}, },
reset() { reset() {
@ -173,41 +173,41 @@ export default {
this.search_types = SEARCH_TYPES this.search_types = SEARCH_TYPES
this.search_parameters.limit = PAGE_SIZE this.search_parameters.limit = PAGE_SIZE
} }
this.search_query = this.search_query.trim() this.query = this.query.trim()
if (!this.search_query) { if (!this.query) {
this.$refs.search_field.focus() this.$refs.search_field.focus()
return return
} }
this.reset() this.reset()
this.search_items().then((data) => { this.searchItems().then((data) => {
this.search_types.forEach((type) => { this.search_types.forEach((type) => {
this.results.set(type, data[`${type}s`]) this.results.set(type, data[`${type}s`])
}) })
}) })
this.searchStore.add(this.search_query) this.searchStore.add(this.query)
}, },
search_items() { searchItems() {
return webapi.spotify().then(({ data }) => { return webapi.spotify().then(({ data }) => {
this.search_parameters.market = data.webapi_country this.search_parameters.market = data.webapi_country
const spotifyApi = new SpotifyWebApi() const spotifyApi = new SpotifyWebApi()
spotifyApi.setAccessToken(data.webapi_token) spotifyApi.setAccessToken(data.webapi_token)
return spotifyApi.search( return spotifyApi.search(
this.search_query, this.query,
this.search_types, this.search_types,
this.search_parameters this.search_parameters
) )
}) })
}, },
search_library() { searchLibrary() {
this.$router.push({ this.$router.push({
name: 'search-library' name: 'search-library'
}) })
}, },
search_next({ loaded }) { searchNext({ loaded }) {
const [type] = this.search_types, const [type] = this.search_types,
items = this.results.get(type) items = this.results.get(type)
this.search_parameters.limit = PAGE_SIZE_EXPANDED this.search_parameters.limit = PAGE_SIZE_EXPANDED
this.search_items().then((data) => { this.searchItems().then((data) => {
const [next] = Object.values(data) const [next] = Object.values(data)
items.items.push(...next.items) items.items.push(...next.items)
items.total = next.total items.total = next.total
@ -221,7 +221,7 @@ export default {
show(type) { show(type) {
return this.search_types.includes(type) return this.search_types.includes(type)
}, },
show_all_button(items) { showAllButton(items) {
return items.total > items.items.length return items.total > items.items.length
} }
} }

20
web-src/src/stores/search.js
View File

@ -3,25 +3,25 @@ import { defineStore } from 'pinia'
export const useSearchStore = defineStore('SearchStore', { export const useSearchStore = defineStore('SearchStore', {
actions: { actions: {
add(query) { add(query) {
const index = this.recent_searches.indexOf(query) const index = this.history.indexOf(query)
if (index !== -1) { if (index !== -1) {
this.recent_searches.splice(index, 1) this.history.splice(index, 1)
} }
this.recent_searches.unshift(query) this.history.unshift(query)
if (this.recent_searches.length > 5) { if (this.history.length > 5) {
this.recent_searches.pop() this.history.pop()
} }
}, },
remove(query) { remove(query) {
const index = this.recent_searches.indexOf(query) const index = this.history.indexOf(query)
if (index !== -1) { if (index !== -1) {
this.recent_searches.splice(index, 1) this.history.splice(index, 1)
} }
} }
}, },
state: () => ({ state: () => ({
recent_searches: [], history: [],
search_query: '', query: '',
search_source: 'search-library' source: 'search-library'
}) })
}) })