MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-28 08:05:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Streamline naming of elements

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-03-26 03:13:17 +01:00
parent b78bba94ef
commit 6a0081cf71
37 changed files with 366 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,37 +1,37 @@
<template> <template>
<template v-for="album in items" :key="album.itemId"> <template v-for="item in items" :key="item.itemId">
<div v-if="!album.isItem" class="mt-6 mb-5 py-2"> <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
<span <span
:id="'index_' + album.index" :id="'index_' + item.index"
class="tag is-info is-light is-small has-text-weight-bold" class="tag is-info is-light is-small has-text-weight-bold"
v-text="album.index" v-text="item.index"
/> />
</div> </div>
<div v-else class="media is-align-items-center" @click="open(album.item)"> <div v-else class="media is-align-items-center" @click="open(item.item)">
<div v-if="show_artwork" class="media-left"> <div v-if="show_artwork" class="media-left">
<cover-artwork <cover-artwork
:artwork_url="album.item.artwork_url" :artwork_url="item.item.artwork_url"
:artist="album.item.artist" :artist="item.item.artist"
:album="album.item.name" :album="item.item.name"
class="is-clickable fd-has-shadow fd-cover fd-cover-small-image" class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
/> />
</div> </div>
<div class="media-content is-clickable is-clipped"> <div class="media-content is-clickable is-clipped">
<div> <div>
<h1 class="title is-6" v-text="album.item.name" /> <h1 class="title is-6" v-text="item.item.name" />
<h2 <h2
class="subtitle is-7 has-text-grey has-text-weight-bold" class="subtitle is-7 has-text-grey has-text-weight-bold"
v-text="album.item.artist" v-text="item.item.artist"
/> />
<h2 <h2
v-if="album.item.date_released && album.item.media_kind === 'music'" v-if="item.item.date_released && item.item.media_kind === 'music'"
class="subtitle is-7 has-text-grey" class="subtitle is-7 has-text-grey"
v-text="$filters.date(album.item.date_released)" v-text="$filters.date(item.item.date_released)"
/> />
</div> </div>
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(album.item)"> <a @click.prevent.stop="open_dialog(item.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -39,8 +39,8 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-album <modal-dialog-album
:item="selected_item"
:show="show_details_modal" :show="show_details_modal"
:album="selected_album"
:media_kind="media_kind" :media_kind="media_kind"
@remove-podcast="open_remove_podcast_dialog()" @remove-podcast="open_remove_podcast_dialog()"
@play-count-changed="play_count_changed()" @play-count-changed="play_count_changed()"
@ -82,7 +82,7 @@ export default {
data() { data() {
return { return {
rss_playlist_to_remove: {}, rss_playlist_to_remove: {},
selected_album: {}, selected_item: {},
show_details_modal: false, show_details_modal: false,
show_remove_podcast_modal: false show_remove_podcast_modal: false
} }
@ -90,7 +90,7 @@ export default {
computed: { computed: {
media_kind_resolved() { media_kind_resolved() {
return this.media_kind || this.selected_album.media_kind return this.media_kind || this.selected_item.media_kind
}, },
show_artwork() { show_artwork() {
return this.$store.getters.settings_option( return this.$store.getters.settings_option(
@ -101,21 +101,21 @@ export default {
}, },
methods: { methods: {
open(album) { open(item) {
this.selected_album = album this.selected_item = item
if (this.media_kind_resolved === 'podcast') { if (this.media_kind_resolved === 'podcast') {
this.$router.push({ name: 'podcast', params: { id: album.id } }) this.$router.push({ name: 'podcast', params: { id: item.id } })
} else if (this.media_kind_resolved === 'audiobook') { } else if (this.media_kind_resolved === 'audiobook') {
this.$router.push({ this.$router.push({
name: 'audiobooks-album', name: 'audiobooks-album',
params: { id: album.id } params: { id: item.id }
}) })
} else { } else {
this.$router.push({ name: 'music-album', params: { id: album.id } }) this.$router.push({ name: 'music-album', params: { id: item.id } })
} }
}, },
open_dialog(album) { open_dialog(item) {
this.selected_album = album this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
}, },
open_remove_podcast_dialog() { open_remove_podcast_dialog() {
@ -123,9 +123,9 @@ export default {
.library_album_tracks(this.selected_album.id, { limit: 1 }) .library_album_tracks(this.selected_album.id, { limit: 1 })
.then(({ data }) => { .then(({ data }) => {
webapi.library_track_playlists(data.items[0].id).then(({ data }) => { webapi.library_track_playlists(data.items[0].id).then(({ data }) => {
this.rss_playlist_to_remove = data.items.filter( ;[this.rss_playlist_to_remove] = data.items.filter(
(pl) => pl.type === 'rss' (pl) => pl.type === 'rss'
)[0] )
this.show_remove_podcast_modal = true this.show_remove_podcast_modal = true
this.show_details_modal = false this.show_details_modal = false
}) })

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

@ -31,8 +31,8 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-album-spotify <modal-dialog-album-spotify
:item="selected_item"
:show="show_details_modal" :show="show_details_modal"
:album="selected_item"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</teleport> </teleport>

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

@ -1,24 +1,20 @@
<template> <template>
<template v-for="artist in items" :key="artist.itemId"> <template v-for="item in items" :key="item.itemId">
<div v-if="!artist.isItem" class="mt-6 mb-5 py-2"> <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
<div class="media-content is-clipped"> <div class="media-content is-clipped">
<span <span
:id="'index_' + artist.index" :id="'index_' + item.index"
class="tag is-info is-light is-small has-text-weight-bold" class="tag is-info is-light is-small has-text-weight-bold"
v-text="artist.index" v-text="item.index"
/> />
</div> </div>
</div> </div>
<div <div v-else class="media is-align-items-center" @click="open(item.item)">
v-else
class="media is-align-items-center"
@click="open_artist(artist.item)"
>
<div class="media-content is-clickable is-clipped"> <div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="artist.item.name" /> <h1 class="title is-6" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(artist.item)"> <a @click.prevent.stop="open_dialog(item.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -26,7 +22,7 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-artist <modal-dialog-artist
:artist="selected_artist" :item="selected_item"
:show="show_details_modal" :show="show_details_modal"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
@ -45,21 +41,20 @@ export default {
data() { data() {
return { return {
show_details_modal: false, selected_item: {},
selected_artist: {} show_details_modal: false
} }
}, },
methods: { methods: {
open_artist(artist) { open(item) {
this.selected_artist = artist this.selected_item = item
const route = const route =
artist.media_kind === 'audiobook' ? 'audiobooks-artist' : 'music-artist' item.media_kind === 'audiobook' ? 'audiobooks-artist' : 'music-artist'
this.$router.push({ name: route, params: { id: artist.id } }) this.$router.push({ name: route, params: { id: item.id } })
}, },
open_dialog(item) {
open_dialog(artist) { this.selected_item = item
this.selected_artist = artist
this.show_details_modal = true this.show_details_modal = true
} }
} }

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

@ -13,8 +13,8 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-artist-spotify <modal-dialog-artist-spotify
:item="selected_item"
:show="show_details_modal" :show="show_details_modal"
:artist="selected_item"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</teleport> </teleport>

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

@ -1,24 +1,20 @@
<template> <template>
<template v-for="composer in items" :key="composer.itemId"> <template v-for="item in items" :key="item.itemId">
<div v-if="!composer.isItem" class="mt-6 mb-5 py-2"> <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
<div class="media-content is-clipped"> <div class="media-content is-clipped">
<span <span
:id="'index_' + composer.index" :id="'index_' + item.index"
class="tag is-info is-light is-small has-text-weight-bold" class="tag is-info is-light is-small has-text-weight-bold"
v-text="composer.index" v-text="item.index"
/> />
</div> </div>
</div> </div>
<div <div v-else class="media is-align-items-center" @click="open(item.item)">
v-else
class="media is-align-items-center"
@click="open_composer(composer.item)"
>
<div class="media-content is-clickable is-clipped"> <div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="composer.item.name" /> <h1 class="title is-6" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(composer.item)"> <a @click.prevent.stop="open_dialog(item.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -26,8 +22,8 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-composer <modal-dialog-composer
:item="selected_item"
:show="show_details_modal" :show="show_details_modal"
:composer="selected_composer"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</teleport> </teleport>
@ -45,22 +41,22 @@ export default {
data() { data() {
return { return {
selected_composer: {}, selected_item: {},
show_details_modal: false show_details_modal: false
} }
}, },
methods: { methods: {
open_composer(composer) { open(item) {
this.selected_composer = composer this.selected_item = item
this.$router.push({ this.$router.push({
name: 'music-composer-albums', name: 'music-composer-albums',
params: { name: composer.name } params: { name: item.name }
}) })
}, },
open_dialog(composer) { open_dialog(item) {
this.selected_composer = composer this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
} }
} }

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

@ -2,7 +2,7 @@
<div <div
v-if="$route.query.directory" v-if="$route.query.directory"
class="media is-align-items-center" class="media is-align-items-center"
@click="open_parent_directory()" @click="open_parent()"
> >
<figure class="media-left is-clickable"> <figure class="media-left is-clickable">
<mdicon class="icon" name="subdirectory-arrow-left" size="16" /> <mdicon class="icon" name="subdirectory-arrow-left" size="16" />
@ -14,20 +14,20 @@
<slot name="actions" /> <slot name="actions" />
</div> </div>
</div> </div>
<template v-for="directory in directories" :key="directory.path"> <template v-for="item in items" :key="item.path">
<div class="media is-align-items-center" @click="open_directory(directory)"> <div class="media is-align-items-center" @click="open(item)">
<figure class="media-left is-clickable"> <figure class="media-left is-clickable">
<mdicon class="icon" name="folder" size="16" /> <mdicon class="icon" name="folder" size="16" />
</figure> </figure>
<div class="media-content is-clickable is-clipped"> <div class="media-content is-clickable is-clipped">
<h1 <h1
class="title is-6" class="title is-6"
v-text="directory.path.substring(directory.path.lastIndexOf('/') + 1)" v-text="item.path.substring(item.path.lastIndexOf('/') + 1)"
/> />
<h2 class="subtitle is-7 has-text-grey" v-text="directory.path" /> <h2 class="subtitle is-7 has-text-grey" v-text="item.path" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(directory)"> <a @click.prevent.stop="open_dialog(item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -35,8 +35,8 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-directory <modal-dialog-directory
:item="selected_item"
:show="show_details_modal" :show="show_details_modal"
:directory="selected_directory"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</teleport> </teleport>
@ -48,17 +48,17 @@ import ModalDialogDirectory from '@/components/ModalDialogDirectory.vue'
export default { export default {
name: 'ListDirectories', name: 'ListDirectories',
components: { ModalDialogDirectory }, components: { ModalDialogDirectory },
props: { directories: { required: true, type: Array } }, props: { items: { required: true, type: Array } },
data() { data() {
return { return {
selected_directory: '', selected_item: '',
show_details_modal: false show_details_modal: false
} }
}, },
computed: { computed: {
current_directory() { current() {
if (this.$route.query && this.$route.query.directory) { if (this.$route.query && this.$route.query.directory) {
return this.$route.query.directory return this.$route.query.directory
} }
@ -67,34 +67,28 @@ export default {
}, },
methods: { methods: {
open_dialog(directory) { open(item) {
this.selected_directory = directory.path
this.show_details_modal = true
},
open_directory(directory) {
this.$router.push({ this.$router.push({
name: 'files', name: 'files',
query: { directory: directory.path } query: { directory: item.path }
}) })
}, },
open_parent_directory() { open_dialog(item) {
const parent = this.current_directory.slice( this.selected_item = item.path
0, this.show_details_modal = true
this.current_directory.lastIndexOf('/') },
) open_parent() {
const parent = this.current.slice(0, this.current.lastIndexOf('/'))
if ( if (
parent === '' || parent === '' ||
this.$store.state.config.directories.includes(this.current_directory) this.$store.state.config.directories.includes(this.current)
) { ) {
this.$router.push({ name: 'files' }) this.$router.push({ name: 'files' })
} else { } else {
this.$router.push({ this.$router.push({
name: 'files', name: 'files',
query: { query: {
directory: this.current_directory.slice( directory: this.current.slice(0, this.current.lastIndexOf('/'))
0,
this.current_directory.lastIndexOf('/')
)
} }
}) })
} }

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

@ -1,24 +1,20 @@
<template> <template>
<template v-for="genre in items" :key="genre.itemId"> <template v-for="item in items" :key="item.itemId">
<div v-if="!genre.isItem" class="mt-6 mb-5 py-2"> <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
<div class="media-content is-clipped"> <div class="media-content is-clipped">
<span <span
:id="'index_' + genre.index" :id="'index_' + item.index"
class="tag is-info is-light is-small has-text-weight-bold" class="tag is-info is-light is-small has-text-weight-bold"
v-text="genre.index" v-text="item.index"
/> />
</div> </div>
</div> </div>
<div <div v-else class="media is-align-items-center" @click="open(item.item)">
v-else
class="media is-align-items-center"
@click="open_genre(genre.item)"
>
<div class="media-content is-clickable is-clipped"> <div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="genre.item.name" /> <h1 class="title is-6" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(genre.item)"> <a @click.prevent.stop="open_dialog(item.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -26,9 +22,9 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-genre <modal-dialog-genre
:show="show_details_modal" :item="selected_genre"
:genre="selected_genre"
:media_kind="media_kind" :media_kind="media_kind"
:show="show_details_modal"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</teleport> </teleport>
@ -47,22 +43,22 @@ export default {
data() { data() {
return { return {
selected_genre: {}, selected_item: {},
show_details_modal: false show_details_modal: false
} }
}, },
methods: { methods: {
open_dialog(genre) { open(item) {
this.selected_genre = genre
this.show_details_modal = true
},
open_genre(genre) {
this.$router.push({ this.$router.push({
name: 'genre-albums', name: 'genre-albums',
params: { name: genre.name }, params: { name: item.name },
query: { media_kind: this.media_kind } query: { media_kind: this.media_kind }
}) })
},
open_dialog(item) {
this.selected_item = item
this.show_details_modal = true
} }
} }
} }

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

@ -1,26 +1,23 @@
<template> <template>
<div <template v-for="item in items" :key="item.itemId">
v-for="playlist in items" <div class="media is-align-items-center" @click="open(item.item)">
:key="playlist.itemId"
class="media is-align-items-center"
@click="open_playlist(playlist.item)"
>
<figure class="media-left is-clickable"> <figure class="media-left is-clickable">
<mdicon class="icon" :name="icon_name(playlist.item)" size="16" /> <mdicon class="icon" :name="icon_name(item.item)" size="16" />
</figure> </figure>
<div class="media-content is-clickable is-clipped"> <div class="media-content is-clickable is-clipped">
<h1 class="title is-6" v-text="playlist.item.name" /> <h1 class="title is-6" v-text="item.item.name" />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(playlist.item)"> <a @click.prevent.stop="open_dialog(item.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
</div> </div>
</template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-playlist <modal-dialog-playlist
:item="selected_item"
:show="show_details_modal" :show="show_details_modal"
:playlist="selected_playlist"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</teleport> </teleport>
@ -36,36 +33,30 @@ export default {
data() { data() {
return { return {
selected_playlist: {}, selected_item: {},
show_details_modal: false show_details_modal: false
} }
}, },
methods: { methods: {
icon_name(playlist) { icon_name(item) {
if (playlist.type === 'folder') { if (item.type === 'folder') {
return 'folder' return 'folder'
} else if (playlist.type === 'rss') { } else if (item.type === 'rss') {
return 'rss' return 'rss'
} }
return 'music-box-multiple' return 'music-box-multiple'
}, },
open_dialog(playlist) { open(item) {
this.selected_playlist = playlist if (item.type === 'folder') {
this.show_details_modal = true this.$router.push({ name: 'playlist-folder', params: { id: item.id } })
},
open_playlist(playlist) {
if (playlist.type === 'folder') {
this.$router.push({
name: 'playlist-folder',
params: { id: playlist.id }
})
} else { } else {
this.$router.push({ this.$router.push({ name: 'playlist', params: { id: item.id } })
name: 'playlist',
params: { id: playlist.id }
})
} }
},
open_dialog(item) {
this.selected_item = item
this.show_details_modal = true
} }
} }
} }

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

@ -14,8 +14,8 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-playlist-spotify <modal-dialog-playlist-spotify
:item="selected_item"
:show="show_details_modal" :show="show_details_modal"
:playlist="selected_item"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</teleport> </teleport>

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

@ -1,17 +1,17 @@
<template> <template>
<template v-for="track in items" :key="track.itemId"> <template v-for="item in items" :key="item.itemId">
<div v-if="!track.isItem" class="mt-6 mb-5 py-2"> <div v-if="!item.isItem" class="mt-6 mb-5 py-2">
<span <span
:id="'index_' + track.index" :id="'index_' + item.index"
class="tag is-info is-light is-small has-text-weight-bold" class="tag is-info is-light is-small has-text-weight-bold"
v-text="track.index" v-text="item.index"
/> />
</div> </div>
<div <div
v-else v-else
class="media is-align-items-center" class="media is-align-items-center"
:class="{ 'with-progress': show_progress }" :class="{ 'with-progress': show_progress }"
@click="play_track(track.item)" @click="play(item.item)"
> >
<figure v-if="show_icon" class="media-left is-clickable"> <figure v-if="show_icon" class="media-left is-clickable">
<mdicon class="icon" name="file-outline" size="16" /> <mdicon class="icon" name="file-outline" size="16" />
@ -21,24 +21,24 @@
class="title is-6" class="title is-6"
:class="{ :class="{
'has-text-grey': 'has-text-grey':
track.item.media_kind === 'podcast' && track.item.play_count > 0 item.item.media_kind === 'podcast' && item.item.play_count > 0
}" }"
v-text="track.item.title" v-text="item.item.title"
/> />
<h2 <h2
class="subtitle is-7 has-text-grey has-text-weight-bold" class="subtitle is-7 has-text-grey has-text-weight-bold"
v-text="track.item.artist" v-text="item.item.artist"
/> />
<h2 class="subtitle is-7 has-text-grey" v-text="track.item.album" /> <h2 class="subtitle is-7 has-text-grey" v-text="item.item.album" />
<progress <progress
v-if="show_progress && track.item.seek_ms > 0" v-if="show_progress && item.item.seek_ms > 0"
class="progress is-info" class="progress is-info"
:max="track.item.length_ms" :max="item.item.length_ms"
:value="track.item.seek_ms" :value="item.item.seek_ms"
/> />
</div> </div>
<div class="media-right"> <div class="media-right">
<a @click.prevent.stop="open_dialog(track.item)"> <a @click.prevent.stop="open_dialog(item.item)">
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" /> <mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a> </a>
</div> </div>
@ -46,8 +46,8 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-track <modal-dialog-track
:item="selected_item"
:show="show_details_modal" :show="show_details_modal"
:track="selected_track"
@close="show_details_modal = false" @close="show_details_modal = false"
@play-count-changed="$emit('play-count-changed')" @play-count-changed="$emit('play-count-changed')"
/> />
@ -72,31 +72,27 @@ export default {
data() { data() {
return { return {
selected_track: {}, selected_item: {},
show_details_modal: false show_details_modal: false
} }
}, },
methods: { methods: {
open_dialog(track) { open_dialog(item) {
this.selected_track = track this.selected_item = item
this.show_details_modal = true this.show_details_modal = true
}, },
play_track(track) { play(item) {
if (this.uris) { if (this.uris) {
webapi.player_play_uri( webapi.player_play_uri(this.uris, false, this.items.items.indexOf(item))
this.uris,
false,
this.items.items.indexOf(track)
)
} else if (this.expression) { } else if (this.expression) {
webapi.player_play_expression( webapi.player_play_expression(
this.expression, this.expression,
false, false,
this.items.items.indexOf(track) this.items.items.indexOf(item)
) )
} else { } else {
webapi.player_play_uri(track.uri, false) webapi.player_play_uri(item.uri, false)
} }
} }
} }

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

@ -44,8 +44,8 @@
</template> </template>
<teleport to="#app"> <teleport to="#app">
<modal-dialog-track-spotify <modal-dialog-track-spotify
:item="selected_item"
:show="show_details_modal" :show="show_details_modal"
:track="selected_item"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</teleport> </teleport>

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

@ -6,13 +6,13 @@
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<cover-artwork <cover-artwork
:artwork_url="album.artwork_url" :artwork_url="item.artwork_url"
:artist="album.artist" :artist="item.artist"
:album="album.name" :album="item.name"
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5" class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
/> />
<p class="title is-4"> <p class="title is-4">
<a class="has-text-link" @click="open" v-text="album.name" /> <a class="has-text-link" @click="open" v-text="item.name" />
</p> </p>
<div v-if="media_kind_resolved === 'podcast'" class="buttons"> <div v-if="media_kind_resolved === 'podcast'" class="buttons">
<a <a
@ -21,44 +21,44 @@
v-text="$t('dialog.album.mark-as-played')" v-text="$t('dialog.album.mark-as-played')"
/> />
<a <a
v-if="album.data_kind === 'url'" v-if="item.data_kind === 'url'"
class="button is-small" class="button is-small"
@click="$emit('remove-podcast')" @click="$emit('remove-podcast')"
v-text="$t('dialog.album.remove-podcast')" v-text="$t('dialog.album.remove-podcast')"
/> />
</div> </div>
<div class="content is-small"> <div class="content is-small">
<p v-if="album.artist"> <p v-if="item.artist">
<span class="heading" v-text="$t('dialog.album.artist')" /> <span class="heading" v-text="$t('dialog.album.artist')" />
<a <a
class="title is-6 has-text-link" class="title is-6 has-text-link"
@click="open_artist" @click="open_artist"
v-text="album.artist" v-text="item.artist"
/> />
</p> </p>
<p v-if="album.date_released"> <p v-if="item.date_released">
<span <span
class="heading" class="heading"
v-text="$t('dialog.album.release-date')" v-text="$t('dialog.album.release-date')"
/> />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.date(album.date_released)" v-text="$filters.date(item.date_released)"
/> />
</p> </p>
<p v-else-if="album.year"> <p v-else-if="item.year">
<span class="heading" v-text="$t('dialog.album.year')" /> <span class="heading" v-text="$t('dialog.album.year')" />
<span class="title is-6" v-text="album.year" /> <span class="title is-6" v-text="item.year" />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.album.tracks')" /> <span class="heading" v-text="$t('dialog.album.tracks')" />
<span class="title is-6" v-text="album.track_count" /> <span class="title is-6" v-text="item.track_count" />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.album.duration')" /> <span class="heading" v-text="$t('dialog.album.duration')" />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.durationInHours(album.length_ms)" v-text="$filters.durationInHours(item.length_ms)"
/> />
</p> </p>
<p> <p>
@ -67,8 +67,8 @@
class="title is-6" class="title is-6"
v-text=" v-text="
[ [
$t('media.kind.' + album.media_kind), $t('media.kind.' + item.media_kind),
$t('data.kind.' + album.data_kind) $t('data.kind.' + item.data_kind)
].join(' - ') ].join(' - ')
" "
/> />
@ -77,7 +77,7 @@
<span class="heading" v-text="$t('dialog.album.added-on')" /> <span class="heading" v-text="$t('dialog.album.added-on')" />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.datetime(album.time_added)" v-text="$filters.datetime(item.time_added)"
/> />
</p> </p>
</div> </div>
@ -115,7 +115,7 @@ export default {
name: 'ModalDialogAlbum', name: 'ModalDialogAlbum',
components: { CoverArtwork }, components: { CoverArtwork },
props: { props: {
album: { required: true, type: Object }, item: { required: true, type: Object },
media_kind: { default: '', type: String }, media_kind: { default: '', type: String },
show: Boolean show: Boolean
}, },
@ -129,14 +129,14 @@ export default {
computed: { computed: {
media_kind_resolved() { media_kind_resolved() {
return this.media_kind || this.album.media_kind return this.media_kind || this.item.media_kind
} }
}, },
methods: { methods: {
mark_played() { mark_played() {
webapi webapi
.library_album_track_update(this.album.id, { play_count: 'played' }) .library_album_track_update(this.item.id, { play_count: 'played' })
.then(({ data }) => { .then(({ data }) => {
this.$emit('play-count-changed') this.$emit('play-count-changed')
this.$emit('close') this.$emit('close')
@ -145,16 +145,16 @@ export default {
open() { open() {
this.$emit('close') this.$emit('close')
if (this.media_kind_resolved === 'podcast') { if (this.media_kind_resolved === 'podcast') {
this.$router.push({ name: 'podcast', params: { id: this.album.id } }) this.$router.push({ name: 'podcast', params: { id: this.item.id } })
} else if (this.media_kind_resolved === 'audiobook') { } else if (this.media_kind_resolved === 'audiobook') {
this.$router.push({ this.$router.push({
name: 'audiobooks-album', name: 'audiobooks-album',
params: { id: this.album.id } params: { id: this.item.id }
}) })
} else { } else {
this.$router.push({ this.$router.push({
name: 'music-album', name: 'music-album',
params: { id: this.album.id } params: { id: this.item.id }
}) })
} }
}, },
@ -163,26 +163,26 @@ export default {
if (this.media_kind_resolved === 'audiobook') { if (this.media_kind_resolved === 'audiobook') {
this.$router.push({ this.$router.push({
name: 'audiobooks-artist', name: 'audiobooks-artist',
params: { id: this.album.artist_id } params: { id: this.item.artist_id }
}) })
} else { } else {
this.$router.push({ this.$router.push({
name: 'music-artist', name: 'music-artist',
params: { id: this.album.artist_id } params: { id: this.item.artist_id }
}) })
} }
}, },
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_uri(this.album.uri, false) webapi.player_play_uri(this.item.uri, false)
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_add(this.album.uri) webapi.queue_add(this.item.uri)
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_add_next(this.album.uri) webapi.queue_add_next(this.item.uri)
} }
} }
} }

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

@ -6,15 +6,15 @@
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<cover-artwork <cover-artwork
:artwork_url="artwork_url(album)" :artwork_url="artwork_url(item)"
:artist="album.artist" :artist="item.artist"
:album="album.name" :album="item.name"
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5" class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
@load="artwork_loaded" @load="artwork_loaded"
@error="artwork_error" @error="artwork_error"
/> />
<p class="title is-4"> <p class="title is-4">
<a class="has-text-link" @click="open" v-text="album.name" /> <a class="has-text-link" @click="open" v-text="item.name" />
</p> </p>
<div class="content is-small"> <div class="content is-small">
<p> <p>
@ -25,7 +25,7 @@
<a <a
class="title is-6 has-text-link" class="title is-6 has-text-link"
@click="open_artist" @click="open_artist"
v-text="album.artists[0].name" v-text="item.artists[0].name"
/> />
</p> </p>
<p> <p>
@ -35,7 +35,7 @@
/> />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.date(album.release_date)" v-text="$filters.date(item.release_date)"
/> />
</p> </p>
<p> <p>
@ -43,7 +43,7 @@
class="heading" class="heading"
v-text="$t('dialog.spotify.album.type')" v-text="$t('dialog.spotify.album.type')"
/> />
<span class="title is-6" v-text="album.album_type" /> <span class="title is-6" v-text="item.album_type" />
</p> </p>
</div> </div>
</div> </div>
@ -85,7 +85,7 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogAlbumSpotify', name: 'ModalDialogAlbumSpotify',
components: { CoverArtwork }, components: { CoverArtwork },
props: { album: { required: true, type: Object }, show: Boolean }, props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'], emits: ['close'],
data() { data() {
@ -101,34 +101,34 @@ export default {
artwork_loaded() { artwork_loaded() {
this.artwork_visible = true this.artwork_visible = true
}, },
artwork_url(album) { artwork_url(item) {
return album.images?.[0]?.url || '' return item.images?.[0]?.url || ''
}, },
open() { open() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-album', name: 'music-spotify-album',
params: { id: this.album.id } params: { id: this.item.id }
}) })
}, },
open_artist() { open_artist() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',
params: { id: this.album.artists[0].id } params: { id: this.item.artists[0].id }
}) })
}, },
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_uri(this.album.uri, false) webapi.player_play_uri(this.item.uri, false)
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_add(this.album.uri) webapi.queue_add(this.item.uri)
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_add_next(this.album.uri) webapi.queue_add_next(this.item.uri)
} }
} }
} }

26
web-src/src/components/ModalDialogArtist.vue
View File

@ -6,33 +6,29 @@
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title is-4"> <p class="title is-4">
<a <a class="has-text-link" @click="open" v-text="item.name" />
class="has-text-link"
@click="open_artist"
v-text="artist.name"
/>
</p> </p>
<div class="content is-small"> <div class="content is-small">
<p> <p>
<span class="heading" v-text="$t('dialog.artist.albums')" /> <span class="heading" v-text="$t('dialog.artist.albums')" />
<span class="title is-6" v-text="artist.album_count" /> <span class="title is-6" v-text="item.album_count" />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.artist.tracks')" /> <span class="heading" v-text="$t('dialog.artist.tracks')" />
<span class="title is-6" v-text="artist.track_count" /> <span class="title is-6" v-text="item.track_count" />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.artist.type')" /> <span class="heading" v-text="$t('dialog.artist.type')" />
<span <span
class="title is-6" class="title is-6"
v-text="$t('data.kind.' + artist.data_kind)" v-text="$t(`data.kind.${item.data_kind}`)"
/> />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.artist.added-on')" /> <span class="heading" v-text="$t('dialog.artist.added-on')" />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.datetime(artist.time_added)" v-text="$filters.datetime(item.time_added)"
/> />
</p> </p>
</div> </div>
@ -67,28 +63,28 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogArtist', name: 'ModalDialogArtist',
props: { artist: { required: true, type: Object }, show: Boolean }, props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'], emits: ['close'],
methods: { methods: {
open_artist() { open() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-artist', name: 'music-artist',
params: { id: this.artist.id } params: { id: this.item.id }
}) })
}, },
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_uri(this.artist.uri, false) webapi.player_play_uri(this.item.uri, false)
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_add(this.artist.uri) webapi.queue_add(this.item.uri)
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_add_next(this.artist.uri) webapi.queue_add_next(this.item.uri)
} }
} }
} }

24
web-src/src/components/ModalDialogArtistSpotify.vue
View File

@ -6,11 +6,7 @@
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title is-4"> <p class="title is-4">
<a <a class="has-text-link" @click="open" v-text="item.name" />
class="has-text-link"
@click="open_artist"
v-text="artist.name"
/>
</p> </p>
<div class="content is-small"> <div class="content is-small">
<p> <p>
@ -20,9 +16,7 @@
/> />
<span <span
class="title is-6" class="title is-6"
v-text=" v-text="[item.popularity, item.followers.total].join(' / ')"
[artist.popularity, artist.followers.total].join(' / ')
"
/> />
</p> </p>
<p> <p>
@ -30,7 +24,7 @@
class="heading" class="heading"
v-text="$t('dialog.spotify.artist.genres')" v-text="$t('dialog.spotify.artist.genres')"
/> />
<span class="title is-6" v-text="artist.genres.join(', ')" /> <span class="title is-6" v-text="item.genres.join(', ')" />
</p> </p>
</div> </div>
</div> </div>
@ -73,28 +67,28 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogArtistSpotify', name: 'ModalDialogArtistSpotify',
props: { artist: { required: true, type: Object }, show: Boolean }, props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'], emits: ['close'],
methods: { methods: {
open_artist() { open() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',
params: { id: this.artist.id } params: { id: this.item.id }
}) })
}, },
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_uri(this.artist.uri, false) webapi.player_play_uri(this.item.uri, false)
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_add(this.artist.uri) webapi.queue_add(this.item.uri)
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_add_next(this.artist.uri) webapi.queue_add_next(this.item.uri)
} }
} }
} }

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

@ -9,7 +9,7 @@
<a <a
class="has-text-link" class="has-text-link"
@click="open_albums" @click="open_albums"
v-text="composer.name" v-text="item.name"
/> />
</p> </p>
<p> <p>
@ -17,7 +17,7 @@
<a <a
class="has-text-link is-6" class="has-text-link is-6"
@click="open_albums" @click="open_albums"
v-text="composer.album_count" v-text="item.album_count"
/> />
</p> </p>
<p> <p>
@ -25,14 +25,14 @@
<a <a
class="has-text-link is-6" class="has-text-link is-6"
@click="open_tracks" @click="open_tracks"
v-text="composer.track_count" v-text="item.track_count"
/> />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.composer.duration')" /> <span class="heading" v-text="$t('dialog.composer.duration')" />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.durationInHours(composer.length_ms)" v-text="$filters.durationInHours(item.length_ms)"
/> />
</p> </p>
</div> </div>
@ -66,45 +66,41 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogComposer', name: 'ModalDialogComposer',
props: { composer: { required: true, type: Object }, show: Boolean }, props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'], emits: ['close'],
methods: { methods: {
play() {
this.$emit('close')
webapi.player_play_expression(
`composer is "${this.composer.name}" and media_kind is music`,
false
)
},
queue_add() {
this.$emit('close')
webapi.queue_expression_add(
`composer is "${this.composer.name}" and media_kind is music`
)
},
queue_add_next() {
this.$emit('close')
webapi.queue_expression_add_next(
`composer is "${this.composer.name}" and media_kind is music`
)
},
open_albums() { open_albums() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-composer-albums', name: 'music-composer-albums',
params: { name: this.composer.name } params: { name: this.item.name }
}) })
}, },
open_tracks() { open_tracks() {
this.$router.push({ this.$router.push({
name: 'music-composer-tracks', name: 'music-composer-tracks',
params: { name: this.composer.name } params: { name: this.item.name }
}) })
},
play() {
this.$emit('close')
webapi.player_play_expression(
`composer is "${this.item.name}" and media_kind is music`,
false
)
},
queue_add() {
this.$emit('close')
webapi.queue_expression_add(
`composer is "${this.item.name}" and media_kind is music`
)
},
queue_add_next() {
this.$emit('close')
webapi.queue_expression_add_next(
`composer is "${this.item.name}" and media_kind is music`
)
} }
} }
} }

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

@ -5,7 +5,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title is-4" v-text="directory" /> <p class="title is-4" v-text="item" />
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
@ -40,29 +40,27 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogDirectory', name: 'ModalDialogDirectory',
props: { directory: { required: true, type: String }, show: Boolean }, props: { item: { required: true, type: String }, show: Boolean },
emits: ['close'], emits: ['close'],
methods: { methods: {
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_expression( webapi.player_play_expression(
`path starts with "${this.directory}" order by path asc`, `path starts with "${this.item}" order by path asc`,
false false
) )
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_expression_add( webapi.queue_expression_add(
`path starts with "${this.directory}" order by path asc` `path starts with "${this.item}" order by path asc`
) )
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_expression_add_next( webapi.queue_expression_add_next(
`path starts with "${this.directory}" order by path asc` `path starts with "${this.item}" order by path asc`
) )
} }
} }

35
web-src/src/components/ModalDialogGenre.vue
View File

@ -6,26 +6,22 @@
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title is-4"> <p class="title is-4">
<a <a class="has-text-link" @click="open" v-text="item.name" />
class="has-text-link"
@click="open_genre"
v-text="genre.name"
/>
</p> </p>
<div class="content is-small"> <div class="content is-small">
<p> <p>
<span class="heading" v-text="$t('dialog.genre.albums')" /> <span class="heading" v-text="$t('dialog.genre.albums')" />
<span class="title is-6" v-text="genre.album_count" /> <span class="title is-6" v-text="item.album_count" />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.genre.tracks')" /> <span class="heading" v-text="$t('dialog.genre.tracks')" />
<span class="title is-6" v-text="genre.track_count" /> <span class="title is-6" v-text="item.track_count" />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.genre.duration')" /> <span class="heading" v-text="$t('dialog.genre.duration')" />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.durationInHours(genre.length_ms)" v-text="$filters.durationInHours(item.length_ms)"
/> />
</p> </p>
</div> </div>
@ -61,7 +57,7 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogGenre', name: 'ModalDialogGenre',
props: { props: {
genre: { required: true, type: Object }, item: { required: true, type: Object },
media_kind: { required: true, type: String }, media_kind: { required: true, type: String },
show: Boolean show: Boolean
}, },
@ -69,32 +65,29 @@ export default {
computed: { computed: {
expression() { expression() {
return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}` return `genre is "${this.item.name}" and media_kind is ${this.media_kind}`
} }
}, },
methods: { methods: {
open() {
this.$emit('close')
this.$router.push({
name: 'genre-albums',
params: { name: this.item.name },
query: { media_kind: this.media_kind }
})
},
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_expression(this.expression, false) webapi.player_play_expression(this.expression, false)
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_expression_add(this.expression) webapi.queue_expression_add(this.expression)
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_expression_add_next(this.expression) webapi.queue_expression_add_next(this.expression)
},
open_genre() {
this.$emit('close')
this.$router.push({
name: 'genre-albums',
params: { name: this.genre.name },
query: { media_kind: this.media_kind }
})
} }
} }
} }

28
web-src/src/components/ModalDialogPlaylist.vue
View File

@ -6,34 +6,30 @@
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title is-4"> <p class="title is-4">
<a <a class="has-text-link" @click="open" v-text="item.name" />
class="has-text-link"
@click="open_playlist"
v-text="playlist.name"
/>
</p> </p>
<div class="content is-small"> <div class="content is-small">
<p> <p>
<span class="heading" v-text="$t('dialog.playlist.path')" /> <span class="heading" v-text="$t('dialog.playlist.path')" />
<span class="title is-6" v-text="playlist.path" /> <span class="title is-6" v-text="item.path" />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.playlist.type')" /> <span class="heading" v-text="$t('dialog.playlist.type')" />
<span <span
class="title is-6" class="title is-6"
v-text="$t('playlist.type.' + playlist.type)" v-text="$t('playlist.type.' + item.type)"
/> />
</p> </p>
<p v-if="!playlist.folder"> <p v-if="!item.folder">
<span <span
class="heading" class="heading"
v-text="$t('dialog.playlist.track-count')" v-text="$t('dialog.playlist.track-count')"
/> />
<span class="title is-6" v-text="playlist.item_count" /> <span class="title is-6" v-text="item.item_count" />
</p> </p>
</div> </div>
</div> </div>
<footer v-if="!playlist.folder" class="card-footer"> <footer v-if="!item.folder" class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add"> <a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" /> <mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.add')" /> <span class="is-size-7" v-text="$t('dialog.playlist.add')" />
@ -64,31 +60,31 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogPlaylist', name: 'ModalDialogPlaylist',
props: { props: {
playlist: { required: true, type: Object }, item: { required: true, type: Object },
show: Boolean, show: Boolean,
uris: { default: '', type: String } uris: { default: '', type: String }
}, },
emits: ['close'], emits: ['close'],
methods: { methods: {
open_playlist() { open() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'playlist', name: 'playlist',
params: { id: this.playlist.id } params: { id: this.item.id }
}) })
}, },
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_uri(this.uris || this.playlist.uri, false) webapi.player_play_uri(this.uris || this.item.uri, false)
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_add(this.uris || this.playlist.uri) webapi.queue_add(this.uris || this.item.uri)
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_add_next(this.uris || this.playlist.uri) webapi.queue_add_next(this.uris || this.item.uri)
} }
} }
} }

24
web-src/src/components/ModalDialogPlaylistSpotify.vue
View File

@ -6,11 +6,7 @@
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title is-4"> <p class="title is-4">
<a <a class="has-text-link" @click="open" v-text="item.name" />
class="has-text-link"
@click="open_playlist"
v-text="playlist.name"
/>
</p> </p>
<div class="content is-small"> <div class="content is-small">
<p> <p>
@ -18,21 +14,21 @@
class="heading" class="heading"
v-text="$t('dialog.spotify.playlist.owner')" v-text="$t('dialog.spotify.playlist.owner')"
/> />
<span class="title is-6" v-text="playlist.owner.display_name" /> <span class="title is-6" v-text="item.owner.display_name" />
</p> </p>
<p> <p>
<span <span
class="heading" class="heading"
v-text="$t('dialog.spotify.playlist.tracks')" v-text="$t('dialog.spotify.playlist.tracks')"
/> />
<span class="title is-6" v-text="playlist.tracks.total" /> <span class="title is-6" v-text="item.tracks.total" />
</p> </p>
<p> <p>
<span <span
class="heading" class="heading"
v-text="$t('dialog.spotify.playlist.path')" v-text="$t('dialog.spotify.playlist.path')"
/> />
<span class="title is-6" v-text="playlist.uri" /> <span class="title is-6" v-text="item.uri" />
</p> </p>
</div> </div>
</div> </div>
@ -75,28 +71,28 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogPlaylistSpotify', name: 'ModalDialogPlaylistSpotify',
props: { playlist: { required: true, type: Object }, show: Boolean }, props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'], emits: ['close'],
methods: { methods: {
open_playlist() { open() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'playlist-spotify', name: 'playlist-spotify',
params: { id: this.playlist.id } params: { id: this.item.id }
}) })
}, },
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_uri(this.playlist.uri, false) webapi.player_play_uri(this.item.uri, false)
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_add(this.playlist.uri) webapi.queue_add(this.item.uri)
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_add_next(this.playlist.uri) webapi.queue_add_next(this.item.uri)
} }
} }
} }

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

@ -5,32 +5,32 @@
<div class="modal-content"> <div class="modal-content">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title is-4" v-text="track.title" /> <p class="title is-4" v-text="item.title" />
<p class="subtitle" v-text="track.artist" /> <p class="subtitle" v-text="item.artist" />
<div v-if="track.media_kind === 'podcast'" class="buttons"> <div v-if="item.media_kind === 'podcast'" class="buttons">
<a <a
v-if="track.play_count > 0" v-if="item.play_count > 0"
class="button is-small" class="button is-small"
@click="mark_new" @click="mark_new"
v-text="$t('dialog.track.mark-as-new')" v-text="$t('dialog.track.mark-as-new')"
/> />
<a <a
v-if="track.play_count === 0" v-if="item.play_count === 0"
class="button is-small" class="button is-small"
@click="mark_played" @click="mark_played"
v-text="$t('dialog.track.mark-as-played')" v-text="$t('dialog.track.mark-as-played')"
/> />
</div> </div>
<div class="content is-small"> <div class="content is-small">
<p v-if="track.album"> <p v-if="item.album">
<span class="heading" v-text="$t('dialog.track.album')" /> <span class="heading" v-text="$t('dialog.track.album')" />
<a <a
class="title is-6 has-text-link" class="title is-6 has-text-link"
@click="open_album" @click="open_album"
v-text="track.album" v-text="item.album"
/> />
</p> </p>
<p v-if="track.album_artist && track.media_kind !== 'audiobook'"> <p v-if="item.album_artist && item.media_kind !== 'audiobook'">
<span <span
class="heading" class="heading"
v-text="$t('dialog.track.album-artist')" v-text="$t('dialog.track.album-artist')"
@ -38,52 +38,52 @@
<a <a
class="title is-6 has-text-link" class="title is-6 has-text-link"
@click="open_album_artist" @click="open_album_artist"
v-text="track.album_artist" v-text="item.album_artist"
/> />
</p> </p>
<p v-if="track.composer"> <p v-if="item.composer">
<span class="heading" v-text="$t('dialog.track.composer')" /> <span class="heading" v-text="$t('dialog.track.composer')" />
<span class="title is-6" v-text="track.composer" /> <span class="title is-6" v-text="item.composer" />
</p> </p>
<p v-if="track.date_released"> <p v-if="item.date_released">
<span <span
class="heading" class="heading"
v-text="$t('dialog.track.release-date')" v-text="$t('dialog.track.release-date')"
/> />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.date(track.date_released)" v-text="$filters.date(item.date_released)"
/> />
</p> </p>
<p v-else-if="track.year"> <p v-else-if="item.year">
<span class="heading" v-text="$t('dialog.track.year')" /> <span class="heading" v-text="$t('dialog.track.year')" />
<span class="title is-6" v-text="track.year" /> <span class="title is-6" v-text="item.year" />
</p> </p>
<p v-if="track.genre"> <p v-if="item.genre">
<span class="heading" v-text="$t('dialog.track.genre')" /> <span class="heading" v-text="$t('dialog.track.genre')" />
<a <a
class="title is-6 has-text-link" class="title is-6 has-text-link"
@click="open_genre" @click="open_genre"
v-text="track.genre" v-text="item.genre"
/> />
</p> </p>
<p v-if="track.disc_number"> <p v-if="item.disc_number">
<span class="heading" v-text="$t('dialog.track.position')" /> <span class="heading" v-text="$t('dialog.track.position')" />
<span <span
class="title is-6" class="title is-6"
v-text="[track.disc_number, track.track_number].join(' / ')" v-text="[item.disc_number, item.track_number].join(' / ')"
/> />
</p> </p>
<p v-if="track.length_ms"> <p v-if="item.length_ms">
<span class="heading" v-text="$t('dialog.track.duration')" /> <span class="heading" v-text="$t('dialog.track.duration')" />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.durationInHours(track.length_ms)" v-text="$filters.durationInHours(item.length_ms)"
/> />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.track.path')" /> <span class="heading" v-text="$t('dialog.track.path')" />
<span class="title is-6" v-text="track.path" /> <span class="title is-6" v-text="item.path" />
</p> </p>
<p> <p>
<span class="heading" v-text="$t('dialog.track.type')" /> <span class="heading" v-text="$t('dialog.track.type')" />
@ -91,36 +91,36 @@
<span <span
v-text=" v-text="
[ [
$t('media.kind.' + track.media_kind), $t('media.kind.' + item.media_kind),
$t('data.kind.' + track.data_kind) $t('data.kind.' + item.data_kind)
].join(' - ') ].join(' - ')
" "
/> />
</span> </span>
</p> </p>
<p v-if="track.samplerate"> <p v-if="item.samplerate">
<span class="heading" v-text="$t('dialog.track.quality')" /> <span class="heading" v-text="$t('dialog.track.quality')" />
<span class="title is-6"> <span class="title is-6">
<span v-text="track.type" /> <span v-text="item.type" />
<span <span
v-if="track.samplerate" v-if="item.samplerate"
v-text=" v-text="
$t('dialog.track.samplerate', { $t('dialog.track.samplerate', {
rate: track.samplerate rate: item.samplerate
}) })
" "
/> />
<span <span
v-if="track.channels" v-if="item.channels"
v-text=" v-text="
$t('dialog.track.channels', { $t('dialog.track.channels', {
channels: $filters.channels(track.channels) channels: $filters.channels(item.channels)
}) })
" "
/> />
<span <span
v-if="track.bitrate" v-if="item.bitrate"
v-text="$t('dialog.track.bitrate', { rate: track.bitrate })" v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
/> />
</span> </span>
</p> </p>
@ -128,7 +128,7 @@
<span class="heading" v-text="$t('dialog.track.added-on')" /> <span class="heading" v-text="$t('dialog.track.added-on')" />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.datetime(track.time_added)" v-text="$filters.datetime(item.time_added)"
/> />
</p> </p>
<p> <p>
@ -137,14 +137,14 @@
class="title is-6" class="title is-6"
v-text=" v-text="
$t('dialog.track.rating-value', { $t('dialog.track.rating-value', {
rating: Math.floor(track.rating / 10) rating: Math.floor(item.rating / 10)
}) })
" "
/> />
</p> </p>
<p v-if="track.comment"> <p v-if="item.comment">
<span class="heading" v-text="$t('dialog.track.comment')" /> <span class="heading" v-text="$t('dialog.track.comment')" />
<span class="title is-6" v-text="track.comment" /> <span class="title is-6" v-text="item.comment" />
</p> </p>
</div> </div>
</div> </div>
@ -179,7 +179,7 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogTrack', name: 'ModalDialogTrack',
props: { show: Boolean, track: { required: true, type: Object } }, props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close', 'play-count-changed'], emits: ['close', 'play-count-changed'],
data() { data() {
@ -189,16 +189,16 @@ export default {
}, },
watch: { watch: {
track() { item() {
if ( if (
this.track && this.item &&
this.track.data_kind === 'spotify' && this.item.data_kind === 'spotify' &&
this.track.media_kind !== 'podcast' this.item.media_kind !== 'podcast'
) { ) {
const spotifyApi = new SpotifyWebApi() const spotifyApi = new SpotifyWebApi()
spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token) spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
spotifyApi spotifyApi
.getTrack(this.track.path.slice(this.track.path.lastIndexOf(':') + 1)) .getTrack(this.item.path.slice(this.item.path.lastIndexOf(':') + 1))
.then((response) => { .then((response) => {
this.spotify_track = response this.spotify_track = response
}) })
@ -211,7 +211,7 @@ export default {
methods: { methods: {
mark_new() { mark_new() {
webapi webapi
.library_track_update(this.track.id, { play_count: 'reset' }) .library_track_update(this.item.id, { play_count: 'reset' })
.then(() => { .then(() => {
this.$emit('play-count-changed') this.$emit('play-count-changed')
this.$emit('close') this.$emit('close')
@ -219,7 +219,7 @@ export default {
}, },
mark_played() { mark_played() {
webapi webapi
.library_track_update(this.track.id, { play_count: 'increment' }) .library_track_update(this.item.id, { play_count: 'increment' })
.then(() => { .then(() => {
this.$emit('play-count-changed') this.$emit('play-count-changed')
this.$emit('close') this.$emit('close')
@ -227,69 +227,69 @@ export default {
}, },
open_album() { open_album() {
if ( if (
this.track.data_kind === 'spotify' && this.item.data_kind === 'spotify' &&
this.track.media_kind !== 'podcast' this.item.media_kind !== 'podcast'
) { ) {
this.$router.push({ this.$router.push({
name: 'music-spotify-album', name: 'music-spotify-album',
params: { id: this.spotify_track.album.id } params: { id: this.spotify_track.album.id }
}) })
} else if (this.track.media_kind === 'podcast') { } else if (this.item.media_kind === 'podcast') {
this.$router.push({ this.$router.push({
name: 'podcast', name: 'podcast',
params: { id: this.track.album_id } params: { id: this.item.album_id }
}) })
} else if (this.track.media_kind === 'audiobook') { } else if (this.item.media_kind === 'audiobook') {
this.$router.push({ this.$router.push({
name: 'audiobooks-album', name: 'audiobooks-album',
params: { id: this.track.album_id } params: { id: this.item.album_id }
}) })
} else if (this.track.media_kind === 'music') { } else if (this.item.media_kind === 'music') {
this.$router.push({ this.$router.push({
name: 'music-album', name: 'music-album',
params: { id: this.track.album_id } params: { id: this.item.album_id }
}) })
} }
}, },
open_album_artist() { open_album_artist() {
if (this.track.data_kind === 'spotify') { if (this.item.data_kind === 'spotify') {
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',
params: { id: this.spotify_track.artists[0].id } params: { id: this.spotify_track.artists[0].id }
}) })
} else if ( } else if (
this.track.media_kind === 'music' || this.item.media_kind === 'music' ||
this.track.media_kind === 'podcast' this.item.media_kind === 'podcast'
) { ) {
this.$router.push({ this.$router.push({
name: 'music-artist', name: 'music-artist',
params: { id: this.track.album_artist_id } params: { id: this.item.album_artist_id }
}) })
} else if (this.track.media_kind === 'audiobook') { } else if (this.item.media_kind === 'audiobook') {
this.$router.push({ this.$router.push({
name: 'audiobooks-artist', name: 'audiobooks-artist',
params: { id: this.track.album_artist_id } params: { id: this.item.album_artist_id }
}) })
} }
}, },
open_genre() { open_genre() {
this.$router.push({ this.$router.push({
name: 'genre-albums', name: 'genre-albums',
params: { name: this.track.genre }, params: { name: this.item.genre },
query: { media_kind: this.track.media_kind } query: { media_kind: this.item.media_kind }
}) })
}, },
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_uri(this.track.uri, false) webapi.player_play_uri(this.item.uri, false)
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_add(this.track.uri) webapi.queue_add(this.item.uri)
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_add_next(this.track.uri) webapi.queue_add_next(this.item.uri)
} }
} }
} }

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

@ -5,8 +5,8 @@
<div class="modal-content"> <div class="modal-content">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p class="title is-4" v-text="track.name" /> <p class="title is-4" v-text="item.name" />
<p class="subtitle" v-text="track.artists[0].name" /> <p class="subtitle" v-text="item.artists[0].name" />
<div class="content is-small"> <div class="content is-small">
<p> <p>
<span <span
@ -16,7 +16,7 @@
<a <a
class="title is-6 has-text-link" class="title is-6 has-text-link"
@click="open_album" @click="open_album"
v-text="track.album.name" v-text="item.album.name"
/> />
</p> </p>
<p> <p>
@ -27,7 +27,7 @@
<a <a
class="title is-6 has-text-link" class="title is-6 has-text-link"
@click="open_artist" @click="open_artist"
v-text="track.artists[0].name" v-text="item.artists[0].name"
/> />
</p> </p>
<p> <p>
@ -37,7 +37,7 @@
/> />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.date(track.album.release_date)" v-text="$filters.date(item.album.release_date)"
/> />
</p> </p>
<p> <p>
@ -47,7 +47,7 @@
/> />
<span <span
class="title is-6" class="title is-6"
v-text="[track.disc_number, track.track_number].join(' / ')" v-text="[item.disc_number, item.track_number].join(' / ')"
/> />
</p> </p>
<p> <p>
@ -57,7 +57,7 @@
/> />
<span <span
class="title is-6" class="title is-6"
v-text="$filters.durationInHours(track.duration_ms)" v-text="$filters.durationInHours(item.duration_ms)"
/> />
</p> </p>
<p> <p>
@ -65,7 +65,7 @@
class="heading" class="heading"
v-text="$t('dialog.spotify.track.path')" v-text="$t('dialog.spotify.track.path')"
/> />
<span class="title is-6" v-text="track.uri" /> <span class="title is-6" v-text="item.uri" />
</p> </p>
</div> </div>
</div> </div>
@ -105,10 +105,7 @@ import webapi from '@/webapi'
export default { export default {
name: 'ModalDialogTrackSpotify', name: 'ModalDialogTrackSpotify',
props: { props: { item: { required: true, type: Object }, show: Boolean },
show: Boolean,
track: { required: true, type: Object }
},
emits: ['close'], emits: ['close'],
methods: { methods: {
@ -116,27 +113,27 @@ export default {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-album', name: 'music-spotify-album',
params: { id: this.track.album.id } params: { id: this.item.album.id }
}) })
}, },
open_artist() { open_artist() {
this.$emit('close') this.$emit('close')
this.$router.push({ this.$router.push({
name: 'music-spotify-artist', name: 'music-spotify-artist',
params: { id: this.track.artists[0].id } params: { id: this.item.artists[0].id }
}) })
}, },
play() { play() {
this.$emit('close') this.$emit('close')
webapi.player_play_uri(this.track.uri, false) webapi.player_play_uri(this.item.uri, false)
}, },
queue_add() { queue_add() {
this.$emit('close') this.$emit('close')
webapi.queue_add(this.track.uri) webapi.queue_add(this.item.uri)
}, },
queue_add_next() { queue_add_next() {
this.$emit('close') this.$emit('close')
webapi.queue_add_next(this.track.uri) webapi.queue_add_next(this.item.uri)
} }
} }
} }

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

@ -35,8 +35,8 @@
/> />
<list-tracks :items="tracks" :uris="album.uri" /> <list-tracks :items="tracks" :uris="album.uri" />
<modal-dialog-album <modal-dialog-album
:item="album"
:show="show_details_modal" :show="show_details_modal"
:album="album"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>

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

@ -41,8 +41,8 @@
/> />
<list-tracks-spotify :items="tracks" :context_uri="album.uri" /> <list-tracks-spotify :items="tracks" :context_uri="album.uri" />
<modal-dialog-album-spotify <modal-dialog-album-spotify
:item="album"
:show="show_details_modal" :show="show_details_modal"
:album="album"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>

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

@ -61,8 +61,8 @@
</p> </p>
<list-albums :items="albums" /> <list-albums :items="albums" />
<modal-dialog-artist <modal-dialog-artist
:item="artist"
:show="show_details_modal" :show="show_details_modal"
:artist="artist"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>

2
web-src/src/pages/PageArtistSpotify.vue
View File

@ -35,8 +35,8 @@
<template #no-more>&nbsp;</template> <template #no-more>&nbsp;</template>
</VueEternalLoading> </VueEternalLoading>
<modal-dialog-artist-spotify <modal-dialog-artist-spotify
:item="artist"
:show="show_details_modal" :show="show_details_modal"
:artist="artist"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>

2
web-src/src/pages/PageArtistTracks.vue
View File

@ -62,8 +62,8 @@
</p> </p>
<list-tracks :items="tracks" :uris="track_uris" /> <list-tracks :items="tracks" :uris="track_uris" />
<modal-dialog-artist <modal-dialog-artist
:item="artist"
:show="show_details_modal" :show="show_details_modal"
:artist="artist"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>

2
web-src/src/pages/PageAudiobooksAlbum.vue
View File

@ -39,8 +39,8 @@
/> />
<list-tracks :items="tracks" :uris="album.uri" /> <list-tracks :items="tracks" :uris="album.uri" />
<modal-dialog-album <modal-dialog-album
:item="album"
:show="show_details_modal" :show="show_details_modal"
:album="album"
:media_kind="'audiobook'" :media_kind="'audiobook'"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />

2
web-src/src/pages/PageAudiobooksArtist.vue
View File

@ -29,8 +29,8 @@
/> />
<list-albums :items="albums" /> <list-albums :items="albums" />
<modal-dialog-artist <modal-dialog-artist
:item="artist"
:show="show_details_modal" :show="show_details_modal"
:artist="artist"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>

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

@ -36,8 +36,8 @@
</p> </p>
<list-albums :items="albums" /> <list-albums :items="albums" />
<modal-dialog-composer <modal-dialog-composer
:item="composer"
:show="show_details_modal" :show="show_details_modal"
:composer="composer"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>

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

@ -50,8 +50,8 @@
</p> </p>
<list-tracks :items="tracks" :expression="expression" /> <list-tracks :items="tracks" :expression="expression" />
<modal-dialog-composer <modal-dialog-composer
:item="composer"
:show="show_details_modal" :show="show_details_modal"
:composer="composer"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>

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

@ -20,7 +20,7 @@
</div> </div>
</template> </template>
<template #content> <template #content>
<list-directories :directories="dirs" /> <list-directories :items="dirs" />
<list-playlists :items="playlists" /> <list-playlists :items="playlists" />
<list-tracks <list-tracks
:expression="play_expression" :expression="play_expression"
@ -28,8 +28,8 @@
:show_icon="true" :show_icon="true"
/> />
<modal-dialog-directory <modal-dialog-directory
:item="current_directory"
:show="show_details_modal" :show="show_details_modal"
:directory="current_directory"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>

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

@ -35,7 +35,7 @@
</p> </p>
<list-albums :items="albums" /> <list-albums :items="albums" />
<modal-dialog-genre <modal-dialog-genre
:genre="genre" :item="genre"
: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"

5
web-src/src/pages/PageGenreTracks.vue
View File

@ -44,9 +44,9 @@
</p> </p>
<list-tracks :items="tracks" :expression="expression" /> <list-tracks :items="tracks" :expression="expression" />
<modal-dialog-genre <modal-dialog-genre
:show="show_details_modal" :item="genre"
:genre="genre"
:media_kind="media_kind" :media_kind="media_kind"
:show="show_details_modal"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />
</template> </template>
@ -155,7 +155,6 @@ export default {
query: { media_kind: this.media_kind } query: { media_kind: this.media_kind }
}) })
}, },
play() { play() {
webapi.player_play_expression(this.expression, true) webapi.player_play_expression(this.expression, true)
} }

2
web-src/src/pages/PagePlaylistTracks.vue
View File

@ -25,8 +25,8 @@
/> />
<list-tracks :items="tracks" :uris="uris" /> <list-tracks :items="tracks" :uris="uris" />
<modal-dialog-playlist <modal-dialog-playlist
:item="playlist"
:show="show_details_modal" :show="show_details_modal"
:playlist="playlist"
:uris="uris" :uris="uris"
@close="show_details_modal = false" @close="show_details_modal = false"
/> />

2
web-src/src/pages/PagePlaylistTracksSpotify.vue
View File

@ -37,8 +37,8 @@
<template #no-more>&nbsp;</template> <template #no-more>&nbsp;</template>
</VueEternalLoading> </VueEternalLoading>
<modal-dialog-playlist-spotify <modal-dialog-playlist-spotify
:item="playlist"
:show="show_playlist_details_modal" :show="show_playlist_details_modal"
:playlist="playlist"
@close="show_playlist_details_modal = false" @close="show_playlist_details_modal = false"
/> />
</template> </template>

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

@ -37,8 +37,8 @@
@play-count-changed="reload_tracks" @play-count-changed="reload_tracks"
/> />
<modal-dialog-album <modal-dialog-album
:item="album"
:show="show_details_modal" :show="show_details_modal"
:album="album"
:media_kind="'podcast'" :media_kind="'podcast'"
@close="show_details_modal = false" @close="show_details_modal = false"
@play-count-changed="reload_tracks" @play-count-changed="reload_tracks"