MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-04-12 23:42:32 -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.uiStore.hide_singles = data.hide_singles
document.title = data.library_name
this.open_websocket()
this.openWebsocket()
this.$Progress.finish()
})
.catch(() => {
@ -152,7 +152,7 @@ export default {
})
})
},
open_websocket() {
openWebsocket() {
const socket = this.create_websocket()
const vm = this
socket.onopen = () => {

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

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

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

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

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

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

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

@ -32,7 +32,7 @@
/>
</div>
<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" />
</a>
</div>
@ -44,15 +44,15 @@
:media_kind="media_kind"
:show="show_details_modal"
@close="show_details_modal = false"
@remove-podcast="open_remove_podcast_dialog()"
@play-count-changed="play_count_changed()"
@remove-podcast="openRemovePodcastDialog()"
@play-count-changed="onPlayCountChange()"
/>
<modal-dialog
:actions="actions"
:show="show_remove_podcast_modal"
:title="$t('page.podcast.remove-podcast')"
@cancel="show_remove_podcast_modal = false"
@remove="remove_podcast"
@remove="removePodcast"
>
<template #content>
<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 } })
}
},
open_dialog(item) {
openDialog(item) {
this.selected_item = item
this.show_details_modal = true
},
open_remove_podcast_dialog() {
openRemovePodcastDialog() {
webapi
.library_album_tracks(this.selected_item.id, { limit: 1 })
.then(({ data: album }) => {
@ -136,10 +136,10 @@ export default {
})
})
},
play_count_changed() {
onPlayCountChange() {
this.$emit('play-count-changed')
},
remove_podcast() {
removePodcast() {
this.show_remove_podcast_modal = false
webapi
.library_playlist_delete(this.rss_playlist_to_remove.id)

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

@ -23,7 +23,7 @@
/>
</div>
<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" />
</a>
</div>
@ -60,7 +60,7 @@ export default {
params: { id: item.id }
})
},
open_dialog(item) {
openDialog(item) {
this.selected_item = item
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" />
</div>
<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" />
</a>
</div>
@ -50,7 +50,7 @@ export default {
item.media_kind === 'audiobook' ? 'audiobooks-artist' : 'music-artist'
this.$router.push({ name: route, params: { id: item.id } })
},
open_dialog(item) {
openDialog(item) {
this.selected_item = item
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" />
</div>
<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" />
</a>
</div>
@ -38,7 +38,7 @@ export default {
params: { id: item.id }
})
},
open_dialog(item) {
openDialog(item) {
this.selected_item = item
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" />
</div>
<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" />
</a>
</div>
@ -54,7 +54,7 @@ export default {
})
},
open_dialog(item) {
openDialog(item) {
this.selected_item = item
this.show_details_modal = true
}

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

@ -3,7 +3,7 @@
<mdicon
class="icon media-left is-clickable"
name="chevron-left"
@click="open_parent"
@click="openParent"
/>
<div class="media-content">
<nav class="breadcrumb">
@ -30,7 +30,7 @@
<p class="is-size-6 has-text-weight-bold" v-text="item.name" />
</div>
<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" />
</a>
</div>
@ -80,11 +80,11 @@ export default {
}
this.$router.push(route)
},
open_dialog(item) {
openDialog(item) {
this.selected_item = item.path
this.show_details_modal = true
},
open_parent() {
openParent() {
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" />
</div>
<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" />
</a>
</div>
@ -55,7 +55,7 @@ export default {
query: { media_kind: this.media_kind }
})
},
open_dialog(item) {
openDialog(item) {
this.selected_item = item
this.show_details_modal = true
}

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

@ -1,6 +1,6 @@
<template>
<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"
@click="play"
>
@ -15,26 +15,26 @@
<div
class="is-size-6 has-text-weight-bold"
:class="{
'has-text-primary': item.id === player.item_id,
'has-text-grey-light': !is_next
'has-text-primary': isCurrent,
'has-text-grey-light': !isNext
}"
v-text="item.title"
/>
<div
class="is-size-7 has-text-weight-bold"
:class="{
'has-text-primary': item.id === player.item_id,
'has-text-grey-light': !is_next,
'has-text-grey': is_next && item.id !== player.item_id
'has-text-primary': isCurrent,
'has-text-grey-light': !isNext,
'has-text-grey': isNext && !isCurrent
}"
v-text="item.artist"
/>
<div
class="is-size-7"
:class="{
'has-text-primary': item.id === player.item_id,
'has-text-grey-light': !is_next,
'has-text-grey': is_next && item.id !== player.item_id
'has-text-primary': isCurrent,
'has-text-grey-light': !isNext,
'has-text-grey': isNext && isCurrent
}"
v-text="item.album"
/>
@ -58,20 +58,17 @@ export default {
position: { required: true, type: Number },
show_only_next_items: Boolean
},
setup() {
return { playerStore: usePlayerStore() }
},
computed: {
is_next() {
return this.current_position < 0 || this.position >= this.current_position
isCurrent() {
return this.item.id === this.playerStore.item_id
},
player() {
return this.playerStore
isNext() {
return this.current_position < 0 || this.position >= this.current_position
}
},
methods: {
play() {
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" />
</div>
<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" />
</a>
</div>
@ -17,7 +17,7 @@
</template>
<teleport to="#app">
<modal-dialog-playlist
:item="selected_item"
:item="selectedItem"
:show="show_details_modal"
@close="show_details_modal = false"
/>
@ -33,7 +33,7 @@ export default {
props: { items: { required: true, type: Object } },
data() {
return { selected_item: {}, show_details_modal: false }
return { selectedItem: {}, show_details_modal: false }
},
methods: {
@ -52,8 +52,8 @@ export default {
this.$router.push({ name: 'playlist', params: { id: item.id } })
}
},
open_dialog(item) {
this.selected_item = item
openDialog(item) {
this.selectedItem = item
this.show_details_modal = true
}
}

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

@ -12,7 +12,7 @@
/>
</div>
<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" />
</a>
</div>
@ -45,7 +45,7 @@ export default {
open(item) {
this.$router.push({ name: 'playlist-spotify', params: { id: item.id } })
},
open_dialog(item) {
openDialog(item) {
this.selected_item = item
this.show_details_modal = true
}

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

@ -40,7 +40,7 @@
/>
</div>
<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" />
</a>
</div>
@ -77,7 +77,7 @@ export default {
},
methods: {
open_dialog(item) {
openDialog(item) {
this.selected_item = item
this.show_details_modal = true
},

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

@ -36,7 +36,7 @@
</div>
</div>
<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" />
</a>
</div>
@ -66,7 +66,7 @@ export default {
return { selected_item: {}, show_details_modal: false }
},
methods: {
open_dialog(item) {
openDialog(item) {
this.selected_item = item
this.show_details_modal = true
},

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

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

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

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

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

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

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

@ -34,9 +34,9 @@ export default {
computed: {
actions() {
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',
key: 'actions.add-next'
},
@ -53,7 +53,7 @@ export default {
webapi.player_play_uri(this.item.uris || this.item.uri, false)
}
},
queue_add() {
addToQueue() {
this.$emit('close')
if (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)
}
},
queue_add_next() {
addNextToQueue() {
this.$emit('close')
if (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,
properties: [
{
handler: this.open_album,
handler: this.openAlbum,
key: 'property.album',
value: this.item.album
},
{
handler: this.open_album_artist,
handler: this.openAlbumArtist,
key: 'property.album-artist',
value: this.item.album_artist
},
{ key: 'property.composer', value: this.item.composer },
{ key: 'property.year', value: this.item.year },
{
handler: this.open_genre,
handler: this.openGenre,
key: 'property.genre',
value: this.item.genre
},
@ -97,7 +97,7 @@ export default {
}
},
methods: {
open_album() {
openAlbum() {
this.$emit('close')
if (this.item.data_kind === 'spotify') {
this.$router.push({
@ -121,7 +121,7 @@ export default {
})
}
},
open_album_artist() {
openAlbumArtist() {
this.$emit('close')
if (this.item.data_kind === 'spotify') {
this.$router.push({
@ -143,7 +143,7 @@ export default {
})
}
},
open_genre() {
openGenre() {
this.$emit('close')
this.$router.push({
name: 'genre-albums',

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

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

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

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

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

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

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

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

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

@ -4,7 +4,7 @@
<template #heading-left>
<div class="title is-5" v-text="album.name" />
<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
class="is-size-7 is-uppercase has-text-centered-mobile"
@ -96,7 +96,7 @@ export default {
}
},
methods: {
open_artist() {
openArtist() {
this.$router.push({
name: 'music-spotify-artist',
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.track_count,
handler: this.open_tracks,
handler: this.openTracks,
key: 'count.tracks'
}
],
@ -156,7 +156,7 @@ export default {
}
},
methods: {
open_tracks() {
openTracks() {
this.$router.push({
name: 'music-artist-tracks',
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.track_count,
handler: this.open_tracks,
handler: this.openTracks,
key: 'count.tracks'
}
],
@ -89,7 +89,7 @@ export default {
}
},
methods: {
open_tracks() {
openTracks() {
this.$router.push({
name: 'music-composer-tracks',
params: { name: this.composer.name }

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

@ -117,7 +117,7 @@ export default {
subtitle: [
{
count: this.composer.album_count,
handler: this.open_albums,
handler: this.openAlbums,
key: 'count.albums'
},
{ count: this.composer.track_count, key: 'count.tracks' }
@ -135,7 +135,7 @@ export default {
}
},
methods: {
open_albums() {
openAlbums() {
this.$router.push({
name: 'music-composer-albums',
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.track_count,
handler: this.open_tracks,
handler: this.openTracks,
key: 'count.tracks'
}
],
@ -95,7 +95,7 @@ export default {
}
},
methods: {
open_tracks() {
openTracks() {
this.show_details_modal = false
this.$router.push({
name: 'genre-tracks',

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

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

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

@ -32,22 +32,22 @@
<list-tracks
:items="tracks"
:show_progress="true"
@play-count-changed="reload_tracks"
@play-count-changed="reloadTracks"
/>
<modal-dialog-album
:item="album"
:show="show_details_modal"
:media_kind="'podcast'"
@close="show_details_modal = false"
@play-count-changed="reload_tracks"
@remove-podcast="open_remove_podcast_dialog"
@play-count-changed="reloadTracks"
@remove-podcast="openRemovePodcastDialog"
/>
<modal-dialog
:actions="actions"
:show="show_remove_podcast_modal"
:title="$t('page.podcast.remove-podcast')"
@cancel="show_remove_podcast_modal = false"
@remove="remove_podcast"
@remove="removePodcast"
>
<template #content>
<i18n-t keypath="page.podcast.remove-info" tag="p" scope="global">
@ -129,7 +129,7 @@ export default {
}
},
methods: {
open_remove_podcast_dialog() {
openRemovePodcastDialog() {
webapi
.library_track_playlists(this.tracks.items[0].id)
.then(({ data }) => {
@ -143,12 +143,12 @@ export default {
play() {
webapi.player_play_uri(this.album.uri, false)
},
reload_tracks() {
reloadTracks() {
webapi.library_podcast_episodes(this.album.id).then(({ data }) => {
this.tracks = new GroupedList(data.tracks)
})
},
remove_podcast() {
removePodcast() {
this.show_remove_podcast_modal = false
webapi
.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>
<control-button
:button="{
handler: update_show_next_items,
handler: toggleHideReadItems,
icon: 'eye-off-outline',
key: 'actions.hide-previous'
}"
@ -15,7 +15,7 @@
/>
<control-button
:button="{
handler: open_add_stream_dialog,
handler: openAddStreamDialog,
icon: 'web',
key: 'actions.add-stream'
}"
@ -31,7 +31,7 @@
/>
<control-button
:button="{
handler: queue_clear,
handler: clearQueue,
icon: 'delete-empty',
key: 'actions.clear'
}"
@ -40,7 +40,7 @@
<control-button
v-if="is_queue_save_allowed"
:button="{
handler: save_dialog,
handler: showSaveDialog,
icon: 'download',
key: 'actions.save'
}"
@ -58,7 +58,7 @@
:edit_mode="edit_mode"
>
<template #actions>
<a v-if="!edit_mode" @click.prevent.stop="open_dialog(element)">
<a v-if="!edit_mode" @click.prevent.stop="openDialog(element)">
<mdicon
class="icon has-text-grey"
name="dots-vertical"
@ -180,20 +180,20 @@ export default {
webapi.queue_move(item.id, newPosition)
}
},
open_add_stream_dialog() {
openAddStreamDialog() {
this.show_url_modal = true
},
open_dialog(item) {
openDialog(item) {
this.selected_item = item
this.show_details_modal = true
},
queue_clear() {
clearQueue() {
webapi.queue_clear()
},
remove(item) {
webapi.queue_remove(item.id)
},
save_dialog() {
showSaveDialog() {
if (this.queue_items.length > 0) {
this.show_pls_save_modal = true
}
@ -201,7 +201,7 @@ export default {
toggleEdit() {
this.edit_mode = !this.edit_mode
},
update_show_next_items() {
toggleHideReadItems() {
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">
<input
ref="search_field"
v-model="search_query"
v-model="query"
class="input is-rounded"
type="text"
:placeholder="$t('page.search.placeholder')"
@ -36,10 +36,10 @@
</div>
</form>
<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">
<a class="tag" @click="open_search(query)" v-text="query" />
<a class="tag is-delete" @click="remove_search(query)" />
<a class="tag" @click="openSearch(query)" v-text="query" />
<a class="tag is-delete" @click="removeSearch(query)" />
</div>
</div>
</div>
@ -47,7 +47,7 @@
</div>
</div>
</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">
<content-with-heading>
<template #heading-left>
@ -57,7 +57,7 @@
<component :is="components[type]" :items="items" />
</template>
<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">
<a
class="button is-small is-rounded"
@ -116,11 +116,9 @@ export default {
ListTracks,
TabsSearch
},
setup() {
return { searchStore: useSearchStore() }
},
data() {
return {
components: {
@ -134,47 +132,43 @@ export default {
},
results: new Map(),
search_limit: {},
search_query: '',
query: '',
search_types: SEARCH_TYPES
}
},
computed: {
expanded() {
return this.search_types.length === 1
},
recent_searches() {
return this.searchStore.recent_searches
history() {
return this.searchStore.history
}
},
watch: {
search_query() {
this.searchStore.search_query = this.search_query
query() {
this.searchStore.query = this.query
}
},
mounted() {
this.searchStore.search_source = this.$route.name
this.search_query = this.searchStore.search_query
this.searchStore.source = this.$route.name
this.query = this.searchStore.query
this.search_limit = PAGE_SIZE
this.search()
},
methods: {
expand(type) {
this.search_query = this.searchStore.search_query
this.query = this.searchStore.query
this.search_types = [type]
this.search_limit = -1
this.search()
},
open_search(query) {
this.search_query = query
openSearch(query) {
this.query = query
this.search_types = SEARCH_TYPES
this.search_limit = PAGE_SIZE
this.search()
},
remove_search(query) {
removeSearch(query) {
this.searchStore.remove(query)
},
reset() {
@ -188,43 +182,43 @@ export default {
this.search_types = SEARCH_TYPES
this.search_limit = PAGE_SIZE
}
this.search_query = this.search_query.trim()
if (!this.search_query || !this.search_query.replace(/^query:/u, '')) {
this.query = this.query.trim()
if (!this.query || !this.query.replace(/^query:/u, '')) {
this.$refs.search_field.focus()
return
}
this.reset()
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 kind = music ? 'music' : type
const parameters = {
limit: this.search_limit,
type: music ? type : 'album'
}
if (this.search_query.startsWith('query:')) {
parameters.expression = `(${this.search_query.replace(/^query:/u, '').trim()}) and media_kind is ${kind}`
if (this.query.startsWith('query:')) {
parameters.expression = `(${this.query.replace(/^query:/u, '').trim()}) and media_kind is ${kind}`
} else if (music) {
parameters.query = this.search_query
parameters.query = this.query
parameters.media_kind = kind
} 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 }) => {
this.results.set(type, new GroupedList(data[`${parameters.type}s`]))
})
},
search_spotify() {
searchSpotify() {
this.$router.push({ name: 'search-spotify' })
},
show(type) {
return this.search_types.includes(type)
},
show_all_button(items) {
showAllButton(items) {
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">
<input
ref="search_field"
v-model="search_query"
v-model="query"
class="input is-rounded"
type="text"
:placeholder="$t('page.spotify.search.placeholder')"
@ -19,10 +19,10 @@
</div>
</form>
<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">
<a class="tag" @click="open_search(query)" v-text="query" />
<a class="tag is-delete" @click="remove_search(query)" />
<a class="tag" @click="openSearch(query)" v-text="query" />
<a class="tag is-delete" @click="removeSearch(query)" />
</div>
</div>
</div>
@ -30,7 +30,7 @@
</div>
</div>
</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">
<content-with-heading>
<template #heading-left>
@ -40,7 +40,7 @@
</template>
<template #content>
<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>
<div class="columns is-centered">
<div class="column has-text-centered">
@ -54,7 +54,7 @@
</vue-eternal-loading>
</template>
<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">
<a
class="button is-small is-rounded"
@ -119,7 +119,7 @@ export default {
},
results: new Map(),
search_parameters: {},
search_query: '',
query: '',
search_types: SEARCH_TYPES
}
},
@ -127,39 +127,39 @@ export default {
expanded() {
return this.search_types.length === 1
},
recent_searches() {
return this.searchStore.recent_searches.filter(
history() {
return this.searchStore.history.filter(
(query) => !query.startsWith('query:')
)
}
},
watch: {
search_query() {
this.searchStore.search_query = this.search_query
query() {
this.searchStore.query = this.query
}
},
mounted() {
this.searchStore.search_source = this.$route.name
this.search_query = this.searchStore.search_query
this.searchStore.source = this.$route.name
this.query = this.searchStore.query
this.search_parameters.limit = PAGE_SIZE
this.search()
},
methods: {
expand(type) {
this.search_query = this.searchStore.search_query
this.query = this.searchStore.query
this.search_types = [type]
this.search_parameters.limit = PAGE_SIZE_EXPANDED
this.search_parameters.offset = 0
this.search()
},
open_search(query) {
this.search_query = query
openSearch(query) {
this.query = query
this.search_types = SEARCH_TYPES
this.search_parameters.limit = PAGE_SIZE
this.search_parameters.offset = 0
this.search()
},
remove_search(query) {
removeSearch(query) {
this.searchStore.remove(query)
},
reset() {
@ -173,41 +173,41 @@ export default {
this.search_types = SEARCH_TYPES
this.search_parameters.limit = PAGE_SIZE
}
this.search_query = this.search_query.trim()
if (!this.search_query) {
this.query = this.query.trim()
if (!this.query) {
this.$refs.search_field.focus()
return
}
this.reset()
this.search_items().then((data) => {
this.searchItems().then((data) => {
this.search_types.forEach((type) => {
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 }) => {
this.search_parameters.market = data.webapi_country
const spotifyApi = new SpotifyWebApi()
spotifyApi.setAccessToken(data.webapi_token)
return spotifyApi.search(
this.search_query,
this.query,
this.search_types,
this.search_parameters
)
})
},
search_library() {
searchLibrary() {
this.$router.push({
name: 'search-library'
})
},
search_next({ loaded }) {
searchNext({ loaded }) {
const [type] = this.search_types,
items = this.results.get(type)
this.search_parameters.limit = PAGE_SIZE_EXPANDED
this.search_items().then((data) => {
this.searchItems().then((data) => {
const [next] = Object.values(data)
items.items.push(...next.items)
items.total = next.total
@ -221,7 +221,7 @@ export default {
show(type) {
return this.search_types.includes(type)
},
show_all_button(items) {
showAllButton(items) {
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', {
actions: {
add(query) {
const index = this.recent_searches.indexOf(query)
const index = this.history.indexOf(query)
if (index !== -1) {
this.recent_searches.splice(index, 1)
this.history.splice(index, 1)
}
this.recent_searches.unshift(query)
if (this.recent_searches.length > 5) {
this.recent_searches.pop()
this.history.unshift(query)
if (this.history.length > 5) {
this.history.pop()
}
},
remove(query) {
const index = this.recent_searches.indexOf(query)
const index = this.history.indexOf(query)
if (index !== -1) {
this.recent_searches.splice(index, 1)
this.history.splice(index, 1)
}
}
},
state: () => ({
recent_searches: [],
search_query: '',
search_source: 'search-library'
history: [],
query: '',
source: 'search-library'
})
})