MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-26 23:25: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 v-for="album in items" :key="album.itemId">
<div v-if="!album.isItem" class="mt-6 mb-5 py-2">
<template v-for="item in items" :key="item.itemId">
<div v-if="!item.isItem" class="mt-6 mb-5 py-2">
<span
:id="'index_' + album.index"
:id="'index_' + item.index"
class="tag is-info is-light is-small has-text-weight-bold"
v-text="album.index"
v-text="item.index"
/>
</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">
<cover-artwork
:artwork_url="album.item.artwork_url"
:artist="album.item.artist"
:album="album.item.name"
:artwork_url="item.item.artwork_url"
:artist="item.item.artist"
:album="item.item.name"
class="is-clickable fd-has-shadow fd-cover fd-cover-small-image"
/>
</div>
<div class="media-content is-clickable is-clipped">
<div>
<h1 class="title is-6" v-text="album.item.name" />
<h1 class="title is-6" v-text="item.item.name" />
<h2
class="subtitle is-7 has-text-grey has-text-weight-bold"
v-text="album.item.artist"
v-text="item.item.artist"
/>
<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"
v-text="$filters.date(album.item.date_released)"
v-text="$filters.date(item.item.date_released)"
/>
</div>
</div>
<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" />
</a>
</div>
@ -39,8 +39,8 @@
</template>
<teleport to="#app">
<modal-dialog-album
:item="selected_item"
:show="show_details_modal"
:album="selected_album"
:media_kind="media_kind"
@remove-podcast="open_remove_podcast_dialog()"
@play-count-changed="play_count_changed()"
@ -82,7 +82,7 @@ export default {
data() {
return {
rss_playlist_to_remove: {},
selected_album: {},
selected_item: {},
show_details_modal: false,
show_remove_podcast_modal: false
}
@ -90,7 +90,7 @@ export default {
computed: {
media_kind_resolved() {
return this.media_kind || this.selected_album.media_kind
return this.media_kind || this.selected_item.media_kind
},
show_artwork() {
return this.$store.getters.settings_option(
@ -101,21 +101,21 @@ export default {
},
methods: {
open(album) {
this.selected_album = album
open(item) {
this.selected_item = item
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') {
this.$router.push({
name: 'audiobooks-album',
params: { id: album.id }
params: { id: item.id }
})
} else {
this.$router.push({ name: 'music-album', params: { id: album.id } })
this.$router.push({ name: 'music-album', params: { id: item.id } })
}
},
open_dialog(album) {
this.selected_album = album
open_dialog(item) {
this.selected_item = item
this.show_details_modal = true
},
open_remove_podcast_dialog() {
@ -123,9 +123,9 @@ export default {
.library_album_tracks(this.selected_album.id, { limit: 1 })
.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'
)[0]
)
this.show_remove_podcast_modal = true
this.show_details_modal = false
})

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -6,13 +6,13 @@
<div class="card">
<div class="card-content">
<cover-artwork
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
:artwork_url="item.artwork_url"
:artist="item.artist"
:album="item.name"
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
/>
<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>
<div v-if="media_kind_resolved === 'podcast'" class="buttons">
<a
@ -21,44 +21,44 @@
v-text="$t('dialog.album.mark-as-played')"
/>
<a
v-if="album.data_kind === 'url'"
v-if="item.data_kind === 'url'"
class="button is-small"
@click="$emit('remove-podcast')"
v-text="$t('dialog.album.remove-podcast')"
/>
</div>
<div class="content is-small">
<p v-if="album.artist">
<p v-if="item.artist">
<span class="heading" v-text="$t('dialog.album.artist')" />
<a
class="title is-6 has-text-link"
@click="open_artist"
v-text="album.artist"
v-text="item.artist"
/>
</p>
<p v-if="album.date_released">
<p v-if="item.date_released">
<span
class="heading"
v-text="$t('dialog.album.release-date')"
/>
<span
class="title is-6"
v-text="$filters.date(album.date_released)"
v-text="$filters.date(item.date_released)"
/>
</p>
<p v-else-if="album.year">
<p v-else-if="item.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>
<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>
<span class="heading" v-text="$t('dialog.album.duration')" />
<span
class="title is-6"
v-text="$filters.durationInHours(album.length_ms)"
v-text="$filters.durationInHours(item.length_ms)"
/>
</p>
<p>
@ -67,8 +67,8 @@
class="title is-6"
v-text="
[
$t('media.kind.' + album.media_kind),
$t('data.kind.' + album.data_kind)
$t('media.kind.' + item.media_kind),
$t('data.kind.' + item.data_kind)
].join(' - ')
"
/>
@ -77,7 +77,7 @@
<span class="heading" v-text="$t('dialog.album.added-on')" />
<span
class="title is-6"
v-text="$filters.datetime(album.time_added)"
v-text="$filters.datetime(item.time_added)"
/>
</p>
</div>
@ -115,7 +115,7 @@ export default {
name: 'ModalDialogAlbum',
components: { CoverArtwork },
props: {
album: { required: true, type: Object },
item: { required: true, type: Object },
media_kind: { default: '', type: String },
show: Boolean
},
@ -129,14 +129,14 @@ export default {
computed: {
media_kind_resolved() {
return this.media_kind || this.album.media_kind
return this.media_kind || this.item.media_kind
}
},
methods: {
mark_played() {
webapi
.library_album_track_update(this.album.id, { play_count: 'played' })
.library_album_track_update(this.item.id, { play_count: 'played' })
.then(({ data }) => {
this.$emit('play-count-changed')
this.$emit('close')
@ -145,16 +145,16 @@ export default {
open() {
this.$emit('close')
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') {
this.$router.push({
name: 'audiobooks-album',
params: { id: this.album.id }
params: { id: this.item.id }
})
} else {
this.$router.push({
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') {
this.$router.push({
name: 'audiobooks-artist',
params: { id: this.album.artist_id }
params: { id: this.item.artist_id }
})
} else {
this.$router.push({
name: 'music-artist',
params: { id: this.album.artist_id }
params: { id: this.item.artist_id }
})
}
},
play() {
this.$emit('close')
webapi.player_play_uri(this.album.uri, false)
webapi.player_play_uri(this.item.uri, false)
},
queue_add() {
this.$emit('close')
webapi.queue_add(this.album.uri)
webapi.queue_add(this.item.uri)
},
queue_add_next() {
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-content">
<cover-artwork
:artwork_url="artwork_url(album)"
:artist="album.artist"
:album="album.name"
:artwork_url="artwork_url(item)"
:artist="item.artist"
:album="item.name"
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
@load="artwork_loaded"
@error="artwork_error"
/>
<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>
<div class="content is-small">
<p>
@ -25,7 +25,7 @@
<a
class="title is-6 has-text-link"
@click="open_artist"
v-text="album.artists[0].name"
v-text="item.artists[0].name"
/>
</p>
<p>
@ -35,7 +35,7 @@
/>
<span
class="title is-6"
v-text="$filters.date(album.release_date)"
v-text="$filters.date(item.release_date)"
/>
</p>
<p>
@ -43,7 +43,7 @@
class="heading"
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>
</div>
</div>
@ -85,7 +85,7 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogAlbumSpotify',
components: { CoverArtwork },
props: { album: { required: true, type: Object }, show: Boolean },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
data() {
@ -101,34 +101,34 @@ export default {
artwork_loaded() {
this.artwork_visible = true
},
artwork_url(album) {
return album.images?.[0]?.url || ''
artwork_url(item) {
return item.images?.[0]?.url || ''
},
open() {
this.$emit('close')
this.$router.push({
name: 'music-spotify-album',
params: { id: this.album.id }
params: { id: this.item.id }
})
},
open_artist() {
this.$emit('close')
this.$router.push({
name: 'music-spotify-artist',
params: { id: this.album.artists[0].id }
params: { id: this.item.artists[0].id }
})
},
play() {
this.$emit('close')
webapi.player_play_uri(this.album.uri, false)
webapi.player_play_uri(this.item.uri, false)
},
queue_add() {
this.$emit('close')
webapi.queue_add(this.album.uri)
webapi.queue_add(this.item.uri)
},
queue_add_next() {
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-content">
<p class="title is-4">
<a
class="has-text-link"
@click="open_artist"
v-text="artist.name"
/>
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
<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>
<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>
<span class="heading" v-text="$t('dialog.artist.type')" />
<span
class="title is-6"
v-text="$t('data.kind.' + artist.data_kind)"
v-text="$t(`data.kind.${item.data_kind}`)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.artist.added-on')" />
<span
class="title is-6"
v-text="$filters.datetime(artist.time_added)"
v-text="$filters.datetime(item.time_added)"
/>
</p>
</div>
@ -67,28 +63,28 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogArtist',
props: { artist: { required: true, type: Object }, show: Boolean },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
methods: {
open_artist() {
open() {
this.$emit('close')
this.$router.push({
name: 'music-artist',
params: { id: this.artist.id }
params: { id: this.item.id }
})
},
play() {
this.$emit('close')
webapi.player_play_uri(this.artist.uri, false)
webapi.player_play_uri(this.item.uri, false)
},
queue_add() {
this.$emit('close')
webapi.queue_add(this.artist.uri)
webapi.queue_add(this.item.uri)
},
queue_add_next() {
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-content">
<p class="title is-4">
<a
class="has-text-link"
@click="open_artist"
v-text="artist.name"
/>
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
@ -20,9 +16,7 @@
/>
<span
class="title is-6"
v-text="
[artist.popularity, artist.followers.total].join(' / ')
"
v-text="[item.popularity, item.followers.total].join(' / ')"
/>
</p>
<p>
@ -30,7 +24,7 @@
class="heading"
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>
</div>
</div>
@ -73,28 +67,28 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogArtistSpotify',
props: { artist: { required: true, type: Object }, show: Boolean },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
methods: {
open_artist() {
open() {
this.$emit('close')
this.$router.push({
name: 'music-spotify-artist',
params: { id: this.artist.id }
params: { id: this.item.id }
})
},
play() {
this.$emit('close')
webapi.player_play_uri(this.artist.uri, false)
webapi.player_play_uri(this.item.uri, false)
},
queue_add() {
this.$emit('close')
webapi.queue_add(this.artist.uri)
webapi.queue_add(this.item.uri)
},
queue_add_next() {
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
class="has-text-link"
@click="open_albums"
v-text="composer.name"
v-text="item.name"
/>
</p>
<p>
@ -17,7 +17,7 @@
<a
class="has-text-link is-6"
@click="open_albums"
v-text="composer.album_count"
v-text="item.album_count"
/>
</p>
<p>
@ -25,14 +25,14 @@
<a
class="has-text-link is-6"
@click="open_tracks"
v-text="composer.track_count"
v-text="item.track_count"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.composer.duration')" />
<span
class="title is-6"
v-text="$filters.durationInHours(composer.length_ms)"
v-text="$filters.durationInHours(item.length_ms)"
/>
</p>
</div>
@ -66,45 +66,41 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogComposer',
props: { composer: { required: true, type: Object }, show: Boolean },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
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() {
this.$emit('close')
this.$router.push({
name: 'music-composer-albums',
params: { name: this.composer.name }
params: { name: this.item.name }
})
},
open_tracks() {
this.$router.push({
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="card">
<div class="card-content">
<p class="title is-4" v-text="directory" />
<p class="title is-4" v-text="item" />
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
@ -40,29 +40,27 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogDirectory',
props: { directory: { required: true, type: String }, show: Boolean },
props: { item: { required: true, type: String }, show: Boolean },
emits: ['close'],
methods: {
play() {
this.$emit('close')
webapi.player_play_expression(
`path starts with "${this.directory}" order by path asc`,
`path starts with "${this.item}" order by path asc`,
false
)
},
queue_add() {
this.$emit('close')
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() {
this.$emit('close')
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-content">
<p class="title is-4">
<a
class="has-text-link"
@click="open_genre"
v-text="genre.name"
/>
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
<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>
<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>
<span class="heading" v-text="$t('dialog.genre.duration')" />
<span
class="title is-6"
v-text="$filters.durationInHours(genre.length_ms)"
v-text="$filters.durationInHours(item.length_ms)"
/>
</p>
</div>
@ -61,7 +57,7 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogGenre',
props: {
genre: { required: true, type: Object },
item: { required: true, type: Object },
media_kind: { required: true, type: String },
show: Boolean
},
@ -69,32 +65,29 @@ export default {
computed: {
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: {
open() {
this.$emit('close')
this.$router.push({
name: 'genre-albums',
params: { name: this.item.name },
query: { media_kind: this.media_kind }
})
},
play() {
this.$emit('close')
webapi.player_play_expression(this.expression, false)
},
queue_add() {
this.$emit('close')
webapi.queue_expression_add(this.expression)
},
queue_add_next() {
this.$emit('close')
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-content">
<p class="title is-4">
<a
class="has-text-link"
@click="open_playlist"
v-text="playlist.name"
/>
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
<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>
<span class="heading" v-text="$t('dialog.playlist.type')" />
<span
class="title is-6"
v-text="$t('playlist.type.' + playlist.type)"
v-text="$t('playlist.type.' + item.type)"
/>
</p>
<p v-if="!playlist.folder">
<p v-if="!item.folder">
<span
class="heading"
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>
</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">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.add')" />
@ -64,31 +60,31 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogPlaylist',
props: {
playlist: { required: true, type: Object },
item: { required: true, type: Object },
show: Boolean,
uris: { default: '', type: String }
},
emits: ['close'],
methods: {
open_playlist() {
open() {
this.$emit('close')
this.$router.push({
name: 'playlist',
params: { id: this.playlist.id }
params: { id: this.item.id }
})
},
play() {
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() {
this.$emit('close')
webapi.queue_add(this.uris || this.playlist.uri)
webapi.queue_add(this.uris || this.item.uri)
},
queue_add_next() {
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-content">
<p class="title is-4">
<a
class="has-text-link"
@click="open_playlist"
v-text="playlist.name"
/>
<a class="has-text-link" @click="open" v-text="item.name" />
</p>
<div class="content is-small">
<p>
@ -18,21 +14,21 @@
class="heading"
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>
<span
class="heading"
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>
<span
class="heading"
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>
</div>
</div>
@ -75,28 +71,28 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogPlaylistSpotify',
props: { playlist: { required: true, type: Object }, show: Boolean },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
methods: {
open_playlist() {
open() {
this.$emit('close')
this.$router.push({
name: 'playlist-spotify',
params: { id: this.playlist.id }
params: { id: this.item.id }
})
},
play() {
this.$emit('close')
webapi.player_play_uri(this.playlist.uri, false)
webapi.player_play_uri(this.item.uri, false)
},
queue_add() {
this.$emit('close')
webapi.queue_add(this.playlist.uri)
webapi.queue_add(this.item.uri)
},
queue_add_next() {
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="card">
<div class="card-content">
<p class="title is-4" v-text="track.title" />
<p class="subtitle" v-text="track.artist" />
<div v-if="track.media_kind === 'podcast'" class="buttons">
<p class="title is-4" v-text="item.title" />
<p class="subtitle" v-text="item.artist" />
<div v-if="item.media_kind === 'podcast'" class="buttons">
<a
v-if="track.play_count > 0"
v-if="item.play_count > 0"
class="button is-small"
@click="mark_new"
v-text="$t('dialog.track.mark-as-new')"
/>
<a
v-if="track.play_count === 0"
v-if="item.play_count === 0"
class="button is-small"
@click="mark_played"
v-text="$t('dialog.track.mark-as-played')"
/>
</div>
<div class="content is-small">
<p v-if="track.album">
<p v-if="item.album">
<span class="heading" v-text="$t('dialog.track.album')" />
<a
class="title is-6 has-text-link"
@click="open_album"
v-text="track.album"
v-text="item.album"
/>
</p>
<p v-if="track.album_artist && track.media_kind !== 'audiobook'">
<p v-if="item.album_artist && item.media_kind !== 'audiobook'">
<span
class="heading"
v-text="$t('dialog.track.album-artist')"
@ -38,52 +38,52 @@
<a
class="title is-6 has-text-link"
@click="open_album_artist"
v-text="track.album_artist"
v-text="item.album_artist"
/>
</p>
<p v-if="track.composer">
<p v-if="item.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 v-if="track.date_released">
<p v-if="item.date_released">
<span
class="heading"
v-text="$t('dialog.track.release-date')"
/>
<span
class="title is-6"
v-text="$filters.date(track.date_released)"
v-text="$filters.date(item.date_released)"
/>
</p>
<p v-else-if="track.year">
<p v-else-if="item.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 v-if="track.genre">
<p v-if="item.genre">
<span class="heading" v-text="$t('dialog.track.genre')" />
<a
class="title is-6 has-text-link"
@click="open_genre"
v-text="track.genre"
v-text="item.genre"
/>
</p>
<p v-if="track.disc_number">
<p v-if="item.disc_number">
<span class="heading" v-text="$t('dialog.track.position')" />
<span
class="title is-6"
v-text="[track.disc_number, track.track_number].join(' / ')"
v-text="[item.disc_number, item.track_number].join(' / ')"
/>
</p>
<p v-if="track.length_ms">
<p v-if="item.length_ms">
<span class="heading" v-text="$t('dialog.track.duration')" />
<span
class="title is-6"
v-text="$filters.durationInHours(track.length_ms)"
v-text="$filters.durationInHours(item.length_ms)"
/>
</p>
<p>
<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>
<span class="heading" v-text="$t('dialog.track.type')" />
@ -91,36 +91,36 @@
<span
v-text="
[
$t('media.kind.' + track.media_kind),
$t('data.kind.' + track.data_kind)
$t('media.kind.' + item.media_kind),
$t('data.kind.' + item.data_kind)
].join(' - ')
"
/>
</span>
</p>
<p v-if="track.samplerate">
<p v-if="item.samplerate">
<span class="heading" v-text="$t('dialog.track.quality')" />
<span class="title is-6">
<span v-text="track.type" />
<span v-text="item.type" />
<span
v-if="track.samplerate"
v-if="item.samplerate"
v-text="
$t('dialog.track.samplerate', {
rate: track.samplerate
rate: item.samplerate
})
"
/>
<span
v-if="track.channels"
v-if="item.channels"
v-text="
$t('dialog.track.channels', {
channels: $filters.channels(track.channels)
channels: $filters.channels(item.channels)
})
"
/>
<span
v-if="track.bitrate"
v-text="$t('dialog.track.bitrate', { rate: track.bitrate })"
v-if="item.bitrate"
v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
/>
</span>
</p>
@ -128,7 +128,7 @@
<span class="heading" v-text="$t('dialog.track.added-on')" />
<span
class="title is-6"
v-text="$filters.datetime(track.time_added)"
v-text="$filters.datetime(item.time_added)"
/>
</p>
<p>
@ -137,14 +137,14 @@
class="title is-6"
v-text="
$t('dialog.track.rating-value', {
rating: Math.floor(track.rating / 10)
rating: Math.floor(item.rating / 10)
})
"
/>
</p>
<p v-if="track.comment">
<p v-if="item.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>
</div>
</div>
@ -179,7 +179,7 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogTrack',
props: { show: Boolean, track: { required: true, type: Object } },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close', 'play-count-changed'],
data() {
@ -189,16 +189,16 @@ export default {
},
watch: {
track() {
item() {
if (
this.track &&
this.track.data_kind === 'spotify' &&
this.track.media_kind !== 'podcast'
this.item &&
this.item.data_kind === 'spotify' &&
this.item.media_kind !== 'podcast'
) {
const spotifyApi = new SpotifyWebApi()
spotifyApi.setAccessToken(this.$store.state.spotify.webapi_token)
spotifyApi
.getTrack(this.track.path.slice(this.track.path.lastIndexOf(':') + 1))
.getTrack(this.item.path.slice(this.item.path.lastIndexOf(':') + 1))
.then((response) => {
this.spotify_track = response
})
@ -211,7 +211,7 @@ export default {
methods: {
mark_new() {
webapi
.library_track_update(this.track.id, { play_count: 'reset' })
.library_track_update(this.item.id, { play_count: 'reset' })
.then(() => {
this.$emit('play-count-changed')
this.$emit('close')
@ -219,7 +219,7 @@ export default {
},
mark_played() {
webapi
.library_track_update(this.track.id, { play_count: 'increment' })
.library_track_update(this.item.id, { play_count: 'increment' })
.then(() => {
this.$emit('play-count-changed')
this.$emit('close')
@ -227,69 +227,69 @@ export default {
},
open_album() {
if (
this.track.data_kind === 'spotify' &&
this.track.media_kind !== 'podcast'
this.item.data_kind === 'spotify' &&
this.item.media_kind !== 'podcast'
) {
this.$router.push({
name: 'music-spotify-album',
params: { id: this.spotify_track.album.id }
})
} else if (this.track.media_kind === 'podcast') {
} else if (this.item.media_kind === 'podcast') {
this.$router.push({
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({
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({
name: 'music-album',
params: { id: this.track.album_id }
params: { id: this.item.album_id }
})
}
},
open_album_artist() {
if (this.track.data_kind === 'spotify') {
if (this.item.data_kind === 'spotify') {
this.$router.push({
name: 'music-spotify-artist',
params: { id: this.spotify_track.artists[0].id }
})
} else if (
this.track.media_kind === 'music' ||
this.track.media_kind === 'podcast'
this.item.media_kind === 'music' ||
this.item.media_kind === 'podcast'
) {
this.$router.push({
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({
name: 'audiobooks-artist',
params: { id: this.track.album_artist_id }
params: { id: this.item.album_artist_id }
})
}
},
open_genre() {
this.$router.push({
name: 'genre-albums',
params: { name: this.track.genre },
query: { media_kind: this.track.media_kind }
params: { name: this.item.genre },
query: { media_kind: this.item.media_kind }
})
},
play() {
this.$emit('close')
webapi.player_play_uri(this.track.uri, false)
webapi.player_play_uri(this.item.uri, false)
},
queue_add() {
this.$emit('close')
webapi.queue_add(this.track.uri)
webapi.queue_add(this.item.uri)
},
queue_add_next() {
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="card">
<div class="card-content">
<p class="title is-4" v-text="track.name" />
<p class="subtitle" v-text="track.artists[0].name" />
<p class="title is-4" v-text="item.name" />
<p class="subtitle" v-text="item.artists[0].name" />
<div class="content is-small">
<p>
<span
@ -16,7 +16,7 @@
<a
class="title is-6 has-text-link"
@click="open_album"
v-text="track.album.name"
v-text="item.album.name"
/>
</p>
<p>
@ -27,7 +27,7 @@
<a
class="title is-6 has-text-link"
@click="open_artist"
v-text="track.artists[0].name"
v-text="item.artists[0].name"
/>
</p>
<p>
@ -37,7 +37,7 @@
/>
<span
class="title is-6"
v-text="$filters.date(track.album.release_date)"
v-text="$filters.date(item.album.release_date)"
/>
</p>
<p>
@ -47,7 +47,7 @@
/>
<span
class="title is-6"
v-text="[track.disc_number, track.track_number].join(' / ')"
v-text="[item.disc_number, item.track_number].join(' / ')"
/>
</p>
<p>
@ -57,7 +57,7 @@
/>
<span
class="title is-6"
v-text="$filters.durationInHours(track.duration_ms)"
v-text="$filters.durationInHours(item.duration_ms)"
/>
</p>
<p>
@ -65,7 +65,7 @@
class="heading"
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>
</div>
</div>
@ -105,10 +105,7 @@ import webapi from '@/webapi'
export default {
name: 'ModalDialogTrackSpotify',
props: {
show: Boolean,
track: { required: true, type: Object }
},
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
methods: {
@ -116,27 +113,27 @@ export default {
this.$emit('close')
this.$router.push({
name: 'music-spotify-album',
params: { id: this.track.album.id }
params: { id: this.item.album.id }
})
},
open_artist() {
this.$emit('close')
this.$router.push({
name: 'music-spotify-artist',
params: { id: this.track.artists[0].id }
params: { id: this.item.artists[0].id }
})
},
play() {
this.$emit('close')
webapi.player_play_uri(this.track.uri, false)
webapi.player_play_uri(this.item.uri, false)
},
queue_add() {
this.$emit('close')
webapi.queue_add(this.track.uri)
webapi.queue_add(this.item.uri)
},
queue_add_next() {
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" />
<modal-dialog-album
:item="album"
:show="show_details_modal"
:album="album"
@close="show_details_modal = false"
/>
</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -35,7 +35,7 @@
</p>
<list-albums :items="albums" />
<modal-dialog-genre
:genre="genre"
:item="genre"
:media_kind="media_kind"
:show="show_details_modal"
@close="show_details_modal = false"

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

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

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

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

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

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