mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-03 23:30:09 -05:00
[web] Refactor modal dialog for playable items
This commit is contained in:
Alain Nussbaumer
parent
714fc4e1b8
commit
ea7efdd869
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<div class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
@ -77,17 +77,17 @@
|
||||
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</modal-dialog-playable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogAlbum',
|
||||
components: { ModalDialog, CoverArtwork },
|
||||
components: { ModalDialogPlayable, CoverArtwork },
|
||||
props: {
|
||||
item: { required: true, type: Object },
|
||||
media_kind: { default: '', type: String },
|
||||
@ -100,25 +100,6 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.album.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.album.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.album.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
},
|
||||
media_kind_resolved() {
|
||||
return this.media_kind || this.item.media_kind
|
||||
}
|
||||
@ -161,18 +142,6 @@ export default {
|
||||
params: { id: this.item.artist_id }
|
||||
})
|
||||
}
|
||||
},
|
||||
play() {
|
||||
this.$emit('close')
|
||||
webapi.player_play_uri(this.item.uri, false)
|
||||
},
|
||||
queue_add() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add(this.item.uri)
|
||||
},
|
||||
queue_add_next() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add_next(this.item.uri)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<div class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
@ -36,17 +36,16 @@
|
||||
<div class="title is-6" v-text="item.album_type" />
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</modal-dialog-playable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import webapi from '@/webapi'
|
||||
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogAlbumSpotify',
|
||||
components: { ModalDialog, CoverArtwork },
|
||||
components: { ModalDialogPlayable, CoverArtwork },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
data() {
|
||||
@ -54,27 +53,6 @@ export default {
|
||||
artwork_visible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.spotify.album.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.spotify.album.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.spotify.album.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
artwork_error() {
|
||||
this.artwork_visible = false
|
||||
@ -98,18 +76,6 @@ export default {
|
||||
name: 'music-spotify-artist',
|
||||
params: { id: this.item.artists[0].id }
|
||||
})
|
||||
},
|
||||
play() {
|
||||
this.$emit('close')
|
||||
webapi.player_play_uri(this.item.uri, false)
|
||||
},
|
||||
queue_add() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add(this.item.uri)
|
||||
},
|
||||
queue_add_next() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add_next(this.item.uri)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<div class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
@ -30,39 +30,17 @@
|
||||
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</modal-dialog-playable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import webapi from '@/webapi'
|
||||
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogArtist',
|
||||
components: { ModalDialog },
|
||||
components: { ModalDialogPlayable },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.artist.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.artist.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.artist.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$emit('close')
|
||||
@ -70,18 +48,6 @@ export default {
|
||||
name: 'music-artist',
|
||||
params: { id: this.item.id }
|
||||
})
|
||||
},
|
||||
play() {
|
||||
this.$emit('close')
|
||||
webapi.player_play_uri(this.item.uri, false)
|
||||
},
|
||||
queue_add() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add(this.item.uri)
|
||||
},
|
||||
queue_add_next() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add_next(this.item.uri)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<div class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
@ -22,39 +22,17 @@
|
||||
<div class="title is-6" v-text="item.genres.join(', ')" />
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</modal-dialog-playable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import webapi from '@/webapi'
|
||||
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogArtistSpotify',
|
||||
components: { ModalDialog },
|
||||
components: { ModalDialogPlayable },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.spotify.artist.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.spotify.artist.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.spotify.artist.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$emit('close')
|
||||
@ -62,18 +40,6 @@ export default {
|
||||
name: 'music-spotify-artist',
|
||||
params: { id: this.item.id }
|
||||
})
|
||||
},
|
||||
play() {
|
||||
this.$emit('close')
|
||||
webapi.player_play_uri(this.item.uri, false)
|
||||
},
|
||||
queue_add() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add(this.item.uri)
|
||||
},
|
||||
queue_add_next() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add_next(this.item.uri)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<modal-dialog-playable
|
||||
:expression="expression"
|
||||
:show="show"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<template #content>
|
||||
<div class="title is-4">
|
||||
<a @click="open_albums" v-text="item.name" />
|
||||
@ -33,37 +37,20 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</modal-dialog-playable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import webapi from '@/webapi'
|
||||
import ModalDialogPlayable from './ModalDialogPlayable.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogComposer',
|
||||
components: { ModalDialog },
|
||||
components: { ModalDialogPlayable },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.composer.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.composer.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.composer.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
expression() {
|
||||
return `composer is "${this.item.name}" and media_kind is music`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -79,25 +66,6 @@ export default {
|
||||
name: 'music-composer-tracks',
|
||||
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`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<modal-dialog
|
||||
:actions="actions"
|
||||
<modal-dialog-playable
|
||||
:expression="expression"
|
||||
:show="show"
|
||||
:title="item"
|
||||
@close="$emit('close')"
|
||||
@ -8,54 +8,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import webapi from '@/webapi'
|
||||
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogDirectory',
|
||||
components: { ModalDialog },
|
||||
components: { ModalDialogPlayable },
|
||||
props: { item: { required: true, type: String }, show: Boolean },
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.directory.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.directory.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.directory.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
play() {
|
||||
this.$emit('close')
|
||||
webapi.player_play_expression(
|
||||
`path starts with "${this.item}" order by path asc`,
|
||||
false
|
||||
)
|
||||
},
|
||||
queue_add() {
|
||||
this.$emit('close')
|
||||
webapi.queue_expression_add(
|
||||
`path starts with "${this.item}" order by path asc`
|
||||
)
|
||||
},
|
||||
queue_add_next() {
|
||||
this.$emit('close')
|
||||
webapi.queue_expression_add_next(
|
||||
`path starts with "${this.item}" order by path asc`
|
||||
)
|
||||
expression() {
|
||||
return `path starts with "${this.item}" order by path asc`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<modal-dialog-playable
|
||||
:expression="expression"
|
||||
:show="show"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<template #content>
|
||||
<div class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
@ -29,16 +33,15 @@
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</modal-dialog-playable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import webapi from '@/webapi'
|
||||
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogGenre',
|
||||
components: { ModalDialog },
|
||||
components: { ModalDialogPlayable },
|
||||
props: {
|
||||
item: { required: true, type: Object },
|
||||
media_kind: { required: true, type: String },
|
||||
@ -46,25 +49,6 @@ export default {
|
||||
},
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.genre.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.genre.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.genre.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
},
|
||||
expression() {
|
||||
return `genre is "${this.item.name}" and media_kind is ${this.media_kind}`
|
||||
}
|
||||
@ -77,18 +61,6 @@ export default {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
75
web-src/src/components/ModalDialogPlayable.vue
Normal file
75
web-src/src/components/ModalDialogPlayable.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<slot name="content" />
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogPlayable',
|
||||
components: { ModalDialog },
|
||||
props: {
|
||||
expression: { default: '', type: String },
|
||||
item: {
|
||||
default() {
|
||||
return {}
|
||||
},
|
||||
type: Object
|
||||
},
|
||||
show: Boolean
|
||||
},
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.playable.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.playable.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.playable.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
play() {
|
||||
this.$emit('close')
|
||||
if (this.expression) {
|
||||
webapi.player_play_expression(this.expression, false)
|
||||
} else {
|
||||
webapi.player_play_uri(this.item.uri, false)
|
||||
}
|
||||
},
|
||||
queue_add() {
|
||||
this.$emit('close')
|
||||
if (this.expression) {
|
||||
webapi.queue_expression_add(this.expression)
|
||||
} else {
|
||||
webapi.queue_add(this.item.uri)
|
||||
}
|
||||
},
|
||||
queue_add_next() {
|
||||
this.$emit('close')
|
||||
if (this.expression) {
|
||||
webapi.queue_expression_add_next(this.expression)
|
||||
} else {
|
||||
webapi.queue_add_next(this.item.uri)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<div class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
@ -26,39 +26,17 @@
|
||||
<div class="title is-6" v-text="item.uri" />
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</modal-dialog-playable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import webapi from '@/webapi'
|
||||
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogPlaylistSpotify',
|
||||
components: { ModalDialog },
|
||||
components: { ModalDialogPlayable },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.spotify.playlist.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.spotify.playlist.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.spotify.playlist.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$emit('close')
|
||||
@ -66,18 +44,6 @@ export default {
|
||||
name: 'playlist-spotify',
|
||||
params: { id: this.item.id }
|
||||
})
|
||||
},
|
||||
play() {
|
||||
this.$emit('close')
|
||||
webapi.player_play_uri(this.item.uri, false)
|
||||
},
|
||||
queue_add() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add(this.item.uri)
|
||||
},
|
||||
queue_add_next() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add_next(this.item.uri)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4" v-text="item.title" />
|
||||
<p class="subtitle" v-text="item.artist" />
|
||||
@ -150,18 +150,18 @@
|
||||
<div class="title is-6" v-text="item.comment" />
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</modal-dialog-playable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import { useServicesStore } from '@/stores/services'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogTrack',
|
||||
components: { ModalDialog },
|
||||
components: { ModalDialogPlayable },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close', 'play-count-changed'],
|
||||
setup() {
|
||||
@ -172,27 +172,6 @@ export default {
|
||||
spotify_track: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.track.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.track.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.track.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
item() {
|
||||
if (
|
||||
@ -282,18 +261,6 @@ export default {
|
||||
params: { name: this.item.genre },
|
||||
query: { media_kind: this.item.media_kind }
|
||||
})
|
||||
},
|
||||
play() {
|
||||
this.$emit('close')
|
||||
webapi.player_play_uri(this.item.uri, false)
|
||||
},
|
||||
queue_add() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add(this.item.uri)
|
||||
},
|
||||
queue_add_next() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add_next(this.item.uri)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<modal-dialog :actions="actions" :show="show" @close="$emit('close')">
|
||||
<modal-dialog-playable :item="item" :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4" v-text="item.name" />
|
||||
<p class="subtitle" v-text="item.artists[0].name" />
|
||||
@ -59,39 +59,17 @@
|
||||
<div class="title is-6" v-text="item.uri" />
|
||||
</div>
|
||||
</template>
|
||||
</modal-dialog>
|
||||
</modal-dialog-playable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalDialog from '@/components/ModalDialog.vue'
|
||||
import webapi from '@/webapi'
|
||||
import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogTrackSpotify',
|
||||
components: { ModalDialog },
|
||||
components: { ModalDialogPlayable },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{
|
||||
label: this.$t('dialog.spotify.track.add'),
|
||||
handler: this.queue_add,
|
||||
icon: 'playlist-plus'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.spotify.track.add-next'),
|
||||
handler: this.queue_add_next,
|
||||
icon: 'playlist-play'
|
||||
},
|
||||
{
|
||||
label: this.$t('dialog.spotify.track.play'),
|
||||
handler: this.play,
|
||||
icon: 'play'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open_album() {
|
||||
this.$emit('close')
|
||||
@ -106,18 +84,6 @@ export default {
|
||||
name: 'music-spotify-artist',
|
||||
params: { id: this.item.artists[0].id }
|
||||
})
|
||||
},
|
||||
play() {
|
||||
this.$emit('close')
|
||||
webapi.player_play_uri(this.item.uri, false)
|
||||
},
|
||||
queue_add() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add(this.item.uri)
|
||||
},
|
||||
queue_add_next() {
|
||||
this.$emit('close')
|
||||
webapi.queue_add_next(this.item.uri)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,13 +27,10 @@
|
||||
}
|
||||
},
|
||||
"album": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"added-on": "Hinzugefügt am",
|
||||
"artist": "Album Künstler",
|
||||
"duration": "Dauer",
|
||||
"mark-as-played": "Markiere als gespielt",
|
||||
"play": "Spielen",
|
||||
"release-date": "Erscheinungsdatum",
|
||||
"remove-podcast": "Entferne podcast",
|
||||
"tracks": "Track Nummer",
|
||||
@ -41,35 +38,26 @@
|
||||
"year": "Jahr"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"added-on": "Hinzugefügt am",
|
||||
"albums": "Alben",
|
||||
"play": "Spielen",
|
||||
"tracks": "Tracks",
|
||||
"type": "Art"
|
||||
},
|
||||
"composer": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"albums": "Alben",
|
||||
"duration": "Dauer",
|
||||
"play": "Spielen",
|
||||
"tracks": "Tracks"
|
||||
},
|
||||
"directory": {
|
||||
"genre": {
|
||||
"albums": "Alben",
|
||||
"duration": "Dauer",
|
||||
"tracks": "Tracks"
|
||||
},
|
||||
"playable": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"play": "Spielen"
|
||||
},
|
||||
"genre": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"albums": "Alben",
|
||||
"duration": "Dauer",
|
||||
"play": "Spielen",
|
||||
"tracks": "Tracks"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
@ -112,43 +100,29 @@
|
||||
},
|
||||
"spotify": {
|
||||
"album": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"album-artist": "Album-Künstler",
|
||||
"play": "Spielen",
|
||||
"release-date": "Erscheinungsdatum",
|
||||
"type": "Art"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"genres": "Genres",
|
||||
"play": "Spielen",
|
||||
"popularity": "Popularität / Followers"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"owner": "Besitzer",
|
||||
"path": "Pfad",
|
||||
"play": "Spielen",
|
||||
"tracks": "Tracks"
|
||||
},
|
||||
"track": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"album-artist": "Album-Künstler",
|
||||
"album": "Album",
|
||||
"duration": "Dauer",
|
||||
"path": "Pfad",
|
||||
"play": "Spielen",
|
||||
"position": "Disc / Track",
|
||||
"release-date": "Erscheinungsdatum"
|
||||
}
|
||||
},
|
||||
"track": {
|
||||
"add-next": "Als nächstes hinzufügen",
|
||||
"add": "Hinzufügen",
|
||||
"added-on": "Hinzugefügt am",
|
||||
"album-artist": "Album-Künstler",
|
||||
"album": "Album",
|
||||
@ -161,7 +135,6 @@
|
||||
"mark-as-new": "Markiere als neu",
|
||||
"mark-as-played": "Markiere als gespielt",
|
||||
"path": "Pfad",
|
||||
"play": "Spielen",
|
||||
"position": "Disc / Track",
|
||||
"quality": "Qualität",
|
||||
"rating-value": "{rating} / 10",
|
||||
|
||||
@ -27,13 +27,10 @@
|
||||
}
|
||||
},
|
||||
"album": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"added-on": "Added on",
|
||||
"artist": "Album artist",
|
||||
"duration": "Duration",
|
||||
"mark-as-played": "Mark as played",
|
||||
"play": "Play",
|
||||
"release-date": "Release date",
|
||||
"remove-podcast": "Remove podcast",
|
||||
"tracks": "Tracks",
|
||||
@ -41,35 +38,26 @@
|
||||
"year": "Year"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"added-on": "Added On",
|
||||
"albums": "Albums",
|
||||
"play": "Play",
|
||||
"tracks": "Tracks",
|
||||
"type": "Type"
|
||||
},
|
||||
"composer": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"albums": "Albums",
|
||||
"duration": "Duration",
|
||||
"play": "Play",
|
||||
"tracks": "Tracks"
|
||||
},
|
||||
"directory": {
|
||||
"genre": {
|
||||
"albums": "Albums",
|
||||
"duration": "Duration",
|
||||
"tracks": "Tracks"
|
||||
},
|
||||
"playable": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"play": "Play"
|
||||
},
|
||||
"genre": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"albums": "Albums",
|
||||
"duration": "Duration",
|
||||
"play": "Play",
|
||||
"tracks": "Tracks"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
@ -112,43 +100,29 @@
|
||||
},
|
||||
"spotify": {
|
||||
"album": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"album-artist": "Album Artist",
|
||||
"play": "Play",
|
||||
"release-date": "Release Date",
|
||||
"type": "Type"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"genres": "Genres",
|
||||
"play": "Play",
|
||||
"popularity": "Popularity / Followers"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"owner": "Owner",
|
||||
"path": "Path",
|
||||
"play": "Play",
|
||||
"tracks": "Tracks"
|
||||
},
|
||||
"track": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"album-artist": "Album Artist",
|
||||
"album": "Album",
|
||||
"duration": "Duration",
|
||||
"path": "Path",
|
||||
"play": "Play",
|
||||
"position": "Disc / Track",
|
||||
"release-date": "Release Date"
|
||||
}
|
||||
},
|
||||
"track": {
|
||||
"add-next": "Add Next",
|
||||
"add": "Add",
|
||||
"added-on": "Added On",
|
||||
"album-artist": "Album Artist",
|
||||
"album": "Album",
|
||||
@ -161,7 +135,6 @@
|
||||
"mark-as-new": "Mark as new",
|
||||
"mark-as-played": "Mark as played",
|
||||
"path": "Path",
|
||||
"play": "Play",
|
||||
"position": "Disc / Track",
|
||||
"quality": "Quality",
|
||||
"rating-value": "{rating} / 10",
|
||||
|
||||
@ -27,13 +27,10 @@
|
||||
}
|
||||
},
|
||||
"album": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"added-on": "Ajouté le",
|
||||
"artist": "Artiste de l’album",
|
||||
"duration": "Durée",
|
||||
"mark-as-played": "Marquer comme lu",
|
||||
"play": "Lire",
|
||||
"release-date": "Date de sortie",
|
||||
"remove-podcast": "Supprimer le podcast",
|
||||
"tracks": "Pistes",
|
||||
@ -41,35 +38,26 @@
|
||||
"year": "Année"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"added-on": "Ajouté le",
|
||||
"albums": "Albums",
|
||||
"play": "Lire",
|
||||
"tracks": "Pistes",
|
||||
"type": "Type"
|
||||
},
|
||||
"composer": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"albums": "Albums",
|
||||
"duration": "Durée",
|
||||
"play": "Lire",
|
||||
"tracks": "Pistes"
|
||||
},
|
||||
"directory": {
|
||||
"genre": {
|
||||
"albums": "Albums",
|
||||
"duration": "Durée",
|
||||
"tracks": "Pistes"
|
||||
},
|
||||
"playable": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"play": "Lire"
|
||||
},
|
||||
"genre": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"albums": "Albums",
|
||||
"duration": "Durée",
|
||||
"play": "Lire",
|
||||
"tracks": "Pistes"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
@ -112,43 +100,29 @@
|
||||
},
|
||||
"spotify": {
|
||||
"album": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"album-artist": "Artiste de l’album",
|
||||
"play": "Lire",
|
||||
"release-date": "Date de sortie",
|
||||
"type": "Type"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"genres": "Genres",
|
||||
"play": "Lire",
|
||||
"popularity": "Popularité / Abonnements"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"owner": "Propriétaire",
|
||||
"path": "Emplacement",
|
||||
"play": "Lire",
|
||||
"tracks": "Pistes"
|
||||
},
|
||||
"track": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"album-artist": "Artiste de l’album",
|
||||
"album": "Album",
|
||||
"duration": "Durée",
|
||||
"path": "Emplacement",
|
||||
"play": "Lire",
|
||||
"position": "Disque / Piste",
|
||||
"release-date": "Date de sortie"
|
||||
}
|
||||
},
|
||||
"track": {
|
||||
"add-next": "Ajouter ensuite",
|
||||
"add": "Ajouter",
|
||||
"added-on": "Ajouté le",
|
||||
"album-artist": "Artiste de l’album",
|
||||
"album": "Album",
|
||||
@ -161,7 +135,6 @@
|
||||
"mark-as-new": "Marquer comme nouveau",
|
||||
"mark-as-played": "Marquer comme lu",
|
||||
"path": "Emplacement",
|
||||
"play": "Lire",
|
||||
"position": "Disque / Piste",
|
||||
"quality": "Qualité",
|
||||
"rating-value": "{rating} / 10",
|
||||
|
||||
@ -27,13 +27,10 @@
|
||||
}
|
||||
},
|
||||
"album": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"added-on": "添加时间",
|
||||
"artist": "专辑艺人",
|
||||
"duration": "时长",
|
||||
"mark-as-played": "标记为已播",
|
||||
"play": "播放",
|
||||
"release-date": "发行日期",
|
||||
"remove-podcast": "移除播客",
|
||||
"tracks": "只曲目",
|
||||
@ -41,35 +38,26 @@
|
||||
"year": "年份"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"added-on": "添加时间",
|
||||
"albums": "张专辑",
|
||||
"play": "播放",
|
||||
"tracks": "只曲目",
|
||||
"type": "类型"
|
||||
},
|
||||
"composer": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"albums": "张专辑",
|
||||
"duration": "时长",
|
||||
"play": "播放",
|
||||
"tracks": "只曲目"
|
||||
},
|
||||
"directory": {
|
||||
"genre": {
|
||||
"albums": "张专辑",
|
||||
"duration": "时长",
|
||||
"tracks": "只曲目"
|
||||
},
|
||||
"playable": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"play": "播放"
|
||||
},
|
||||
"genre": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"albums": "张专辑",
|
||||
"duration": "时长",
|
||||
"play": "播放",
|
||||
"tracks": "只曲目"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
@ -112,43 +100,29 @@
|
||||
},
|
||||
"spotify": {
|
||||
"album": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"album-artist": "专辑艺人",
|
||||
"play": "播放",
|
||||
"release-date": "发行日期",
|
||||
"type": "类型"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"genres": "流派",
|
||||
"play": "播放",
|
||||
"popularity": "流行度 / 粉丝数"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"owner": "所有者",
|
||||
"path": "路径",
|
||||
"play": "播放",
|
||||
"tracks": "曲目"
|
||||
},
|
||||
"track": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"album-artist": "专辑艺人",
|
||||
"album": "专辑",
|
||||
"duration": "时长",
|
||||
"path": "路径",
|
||||
"play": "播放",
|
||||
"position": "盘符 / 曲目",
|
||||
"release-date": "发行日期"
|
||||
}
|
||||
},
|
||||
"track": {
|
||||
"add-next": "插播",
|
||||
"add": "添加",
|
||||
"added-on": "添加时间",
|
||||
"album-artist": "专辑艺人",
|
||||
"album": "专辑",
|
||||
@ -161,7 +135,6 @@
|
||||
"mark-as-new": "标记为最新",
|
||||
"mark-as-played": "标记为已播放",
|
||||
"path": "路径",
|
||||
"play": "播放",
|
||||
"position": "盘符 / 曲目",
|
||||
"quality": "质量",
|
||||
"rating-value": "{rating} / 10",
|
||||
|
||||
@ -27,13 +27,10 @@
|
||||
}
|
||||
},
|
||||
"album": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"added-on": "新增時間",
|
||||
"artist": "專輯藝人",
|
||||
"duration": "時長",
|
||||
"mark-as-played": "標記為已播",
|
||||
"play": "播放",
|
||||
"release-date": "發行日期",
|
||||
"remove-podcast": "移除Podcast",
|
||||
"tracks": "首曲目",
|
||||
@ -41,35 +38,26 @@
|
||||
"year": "年份"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"added-on": "新增時間",
|
||||
"albums": "張專輯",
|
||||
"play": "播放",
|
||||
"tracks": "首曲目",
|
||||
"type": "類型"
|
||||
},
|
||||
"composer": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"albums": "張專輯",
|
||||
"duration": "時長",
|
||||
"play": "播放",
|
||||
"tracks": "首曲目"
|
||||
},
|
||||
"directory": {
|
||||
"genre": {
|
||||
"albums": "張專輯",
|
||||
"duration": "時長",
|
||||
"tracks": "首曲目"
|
||||
},
|
||||
"playable": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"play": "播放"
|
||||
},
|
||||
"genre": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"albums": "張專輯",
|
||||
"duration": "時長",
|
||||
"play": "播放",
|
||||
"tracks": "首曲目"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
@ -112,43 +100,29 @@
|
||||
},
|
||||
"spotify": {
|
||||
"album": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"album-artist": "專輯藝人",
|
||||
"play": "播放",
|
||||
"release-date": "發行日期",
|
||||
"type": "類型"
|
||||
},
|
||||
"artist": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"genres": "音樂類型",
|
||||
"play": "播放",
|
||||
"popularity": "流行度 / 粉絲數"
|
||||
},
|
||||
"playlist": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"owner": "所有者",
|
||||
"path": "路徑",
|
||||
"play": "播放",
|
||||
"tracks": "曲目"
|
||||
},
|
||||
"track": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"album-artist": "專輯藝人",
|
||||
"album": "專輯",
|
||||
"duration": "時長",
|
||||
"path": "路徑",
|
||||
"play": "播放",
|
||||
"position": "盤符 / 曲目",
|
||||
"release-date": "發行日期"
|
||||
}
|
||||
},
|
||||
"track": {
|
||||
"add-next": "插播",
|
||||
"add": "新增",
|
||||
"added-on": "新增時間",
|
||||
"album-artist": "專輯藝人",
|
||||
"album": "專輯",
|
||||
@ -161,7 +135,6 @@
|
||||
"mark-as-new": "標記為最新",
|
||||
"mark-as-played": "標記為已播放",
|
||||
"path": "路徑",
|
||||
"play": "播放",
|
||||
"position": "盤符 / 曲目",
|
||||
"quality": "品質",
|
||||
"rating-value": "{rating} / 10",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user