MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-03-03 23:30:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Simplify the modal dialog with actions

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-02-08 14:27:54 +01:00
parent 8e82fc9f9f
commit a1e68a1aa6
20 changed files with 581 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,12 +48,11 @@
@play-count-changed="play_count_changed()"
/>
<modal-dialog-action
:close_action="$t('page.podcast.cancel')"
:delete_action="$t('page.podcast.remove')"
:actions="actions"
:show="show_remove_podcast_modal"
:title="$t('page.podcast.remove-podcast')"
@close="show_remove_podcast_modal = false"
@delete="remove_podcast"
@cancel="show_remove_podcast_modal = false"
@remove="remove_podcast"
>
<template #modal-content>
<i18n-t keypath="list.albums.info" tag="p" scope="global">
@ -99,6 +98,20 @@ export default {
},
computed: {
actions() {
return [
{
label: this.$t('page.podcast.cancel'),
event: 'cancel',
icon: 'cancel'
},
{
label: this.$t('page.podcast.remove'),
event: 'remove',
icon: 'delete'
}
]
},
media_kind_resolved() {
return this.media_kind || this.selected_item.media_kind
}

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

@ -1,21 +1,19 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<modal-dialog :show="show">
<template #content>
<p v-if="title" class="title is-4" v-text="title" />
<slot name="modal-content" />
</template>
<template #footer>
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="close_action" />
</a>
<a v-if="delete_action" class="card-footer-item" @click="$emit('delete')">
<mdicon class="icon" name="delete" size="16" />
<span class="is-size-7" v-text="delete_action" />
</a>
<a v-if="ok_action" class="card-footer-item" @click="$emit('ok')">
<mdicon class="icon" name="check" size="16" />
<span class="is-size-7" v-text="ok_action" />
<a
v-for="action in actions"
:key="action.event"
class="card-footer-item"
:class="{ 'is-disabled': action.disabled }"
@click="$emit(action.event)"
>
<mdicon class="icon" :name="action.icon" size="16" />
<span class="is-size-7" v-text="action.label" />
</a>
</template>
</modal-dialog>
@ -28,13 +26,10 @@ export default {
name: 'ModalDialogAction',
components: { ModalDialog },
props: {
close_action: { default: '', type: String },
delete_action: { default: '', type: String },
ok_action: { default: '', type: String },
actions: { type: Array, required: true },
show: Boolean,
title: { required: true, type: String }
title: { default: '', type: String }
},
emits: ['delete', 'close', 'ok'],
watch: {
show() {
const { classList } = document.querySelector('html')

61
web-src/src/components/ModalDialogAddRss.vue
View File

@ -1,6 +1,12 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@cancel="$emit('close')"
@close="$emit('close')"
@add="add"
>
<template #modal-content>
<p class="title is-4" v-text="$t('dialog.add.rss.title')" />
<div class="field">
<p class="control has-icons-left">
@ -20,39 +26,18 @@
<p class="help" v-text="$t('dialog.add.rss.help')" />
</div>
</template>
<template v-if="loading" #footer>
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.processing')" />
</a>
</template>
<template v-else #footer>
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
</a>
<a
:class="{ 'is-disabled': disabled }"
class="card-footer-item"
@click="add_stream"
>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogAddRss',
components: { ModalDialog },
components: { ModalDialogAction },
props: { show: Boolean },
emits: ['close', 'podcast-added'],
data() {
return {
disabled: true,
@ -60,7 +45,26 @@ export default {
url: ''
}
},
computed: {
actions() {
if (this.loading) {
return [{ label: this.$t('dialog.add.rss.processing'), icon: 'web' }]
}
return [
{
label: this.$t('dialog.add.rss.cancel'),
event: 'cancel',
icon: 'cancel'
},
{
label: this.$t('dialog.add.rss.add'),
disabled: this.disabled,
event: 'add',
icon: 'playlist-plus'
}
]
}
},
watch: {
show() {
if (this.show) {
@ -72,9 +76,8 @@ export default {
}
}
},
methods: {
add_stream() {
add() {
this.loading = true
webapi
.library_add(this.url)

76
web-src/src/components/ModalDialogAddUrlStream.vue
View File

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="add"
@cancel="$emit('close')"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<form @submit.prevent="play">
<p class="title is-4" v-text="$t('dialog.add.stream.title')" />
<div class="field">
@ -21,47 +28,18 @@
</div>
</form>
</template>
<template v-if="loading" #footer>
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.loading')" />
</a>
</template>
<template v-else #footer>
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.cancel')" />
</a>
<a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-text-dark"
@click="add_stream"
>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
</a>
<a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-text-dark"
@click="play"
>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogAddUrlStream',
components: { ModalDialog },
components: { ModalDialogAction },
props: { show: Boolean },
emits: ['close'],
data() {
return {
disabled: true,
@ -69,7 +47,32 @@ export default {
url: ''
}
},
computed: {
actions() {
if (this.loading) {
return [{ label: this.$t('dialog.add.stream.processing'), icon: 'web' }]
}
return [
{
label: this.$t('dialog.add.stream.cancel'),
event: 'cancel',
icon: 'cancel'
},
{
label: this.$t('dialog.add.stream.add'),
disabled: this.disabled,
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.add.stream.play'),
disabled: this.disabled,
event: 'play',
icon: 'play'
}
]
}
},
watch: {
show() {
if (this.show) {
@ -81,9 +84,8 @@ export default {
}
}
},
methods: {
add_stream() {
add() {
this.loading = true
webapi
.queue_add(this.url)

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
@ -77,31 +84,17 @@
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
</div>
</template>
<template #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.album.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.album.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.album.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import CoverArtwork from '@/components/CoverArtwork.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogAlbum',
components: { ModalDialog, CoverArtwork },
components: { ModalDialogAction, CoverArtwork },
props: {
item: { required: true, type: Object },
media_kind: { default: '', type: String },
@ -116,6 +109,25 @@ export default {
},
computed: {
actions() {
return [
{
label: this.$t('dialog.album.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.album.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.album.play'),
event: 'play',
icon: 'play'
}
]
},
media_kind_resolved() {
return this.media_kind || this.item.media_kind
}

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
@ -36,40 +43,45 @@
<div class="title is-6" v-text="item.album_type" />
</div>
</template>
<template #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.spotify.album.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.album.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.album.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import CoverArtwork from '@/components/CoverArtwork.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogAlbumSpotify',
components: { ModalDialog, CoverArtwork },
components: { ModalDialogAction, CoverArtwork },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
data() {
return {
artwork_visible: false
}
},
computed: {
actions() {
return [
{
label: this.$t('dialog.spotify.album.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.spotify.album.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.spotify.album.play'),
event: 'play',
icon: 'play'
}
]
}
},
methods: {
artwork_error() {
this.artwork_visible = false

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
@ -30,33 +37,39 @@
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
</div>
</template>
<template #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.artist.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.artist.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.artist.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogArtist',
components: { ModalDialog },
components: { ModalDialogAction },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {
actions() {
return [
{
label: this.$t('dialog.artist.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.artist.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.artist.play'),
event: 'play',
icon: 'play'
}
]
}
},
methods: {
open() {
this.$emit('close')

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
@ -22,33 +29,39 @@
<div class="title is-6" v-text="item.genres.join(', ')" />
</div>
</template>
<template #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.spotify.artist.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.artist.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.artist.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogArtistSpotify',
components: { ModalDialog },
components: { ModalDialogAction },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {
actions() {
return [
{
label: this.$t('dialog.spotify.artist.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.spotify.artist.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.spotify.artist.play'),
event: 'play',
icon: 'play'
}
]
}
},
methods: {
open() {
this.$emit('close')

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<div class="title is-4">
<a @click="open_albums" v-text="item.name" />
</div>
@ -33,33 +40,39 @@
/>
</div>
</template>
<template #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.composer.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.composer.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.composer.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogComposer',
components: { ModalDialog },
components: { ModalDialogAction },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {
actions() {
return [
{
label: this.$t('dialog.composer.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.composer.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.composer.play'),
event: 'play',
icon: 'play'
}
]
}
},
methods: {
open_albums() {
this.$emit('close')

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

@ -1,35 +1,45 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<p class="title is-4" v-text="item" />
</template>
<template #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.directory.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.directory.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.directory.play')" />
</a>
</template>
</modal-dialog>
<modal-dialog-action
:actions="actions"
:show="show"
:title="item"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
/>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogDirectory',
components: { ModalDialog },
components: { ModalDialogAction },
props: { item: { required: true, type: String }, show: Boolean },
emits: ['close'],
computed: {
actions() {
return [
{
label: this.$t('dialog.directory.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.directory.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.directory.play'),
event: 'play',
icon: 'play'
}
]
}
},
methods: {
play() {
this.$emit('close')

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
@ -29,38 +36,42 @@
/>
</div>
</template>
<template #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.genre.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.genre.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.genre.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogGenre',
components: { ModalDialog },
components: { ModalDialogAction },
props: {
item: { required: true, type: Object },
media_kind: { required: true, type: String },
show: Boolean
},
emits: ['close'],
computed: {
actions() {
return [
{
label: this.$t('dialog.genre.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.genre.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.genre.play'),
event: 'play',
icon: 'play'
}
]
},
expression() {
return `genre is "${this.item.name}" and media_kind is ${this.media_kind}`
}

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
@ -26,37 +33,46 @@
<div class="title is-6" v-text="item.item_count" />
</div>
</template>
<template v-if="!item.folder" #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')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogPlaylist',
components: { ModalDialog },
components: { ModalDialogAction },
props: {
item: { required: true, type: Object },
show: Boolean,
uris: { default: '', type: String }
},
emits: ['close'],
computed: {
actions() {
if (!this.item.folder) {
return [
{
label: this.$t('dialog.playlist.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.playlist.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.playlist.play'),
event: 'play',
icon: 'play'
}
]
}
return []
}
},
methods: {
open() {
this.$emit('close')

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

@ -1,6 +1,12 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@cancel="$emit('close')"
@close="$emit('close')"
@save="save"
>
<template #modal-content>
<form @submit.prevent="save">
<p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
<div class="field">
@ -21,39 +27,18 @@
</div>
</form>
</template>
<template v-if="loading" #footer>
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.save.saving')" />
</a>
</template>
<template v-else #footer>
<a class="card-footer-item has-text-danger" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.save.cancel')" />
</a>
<a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-text-weight-bold"
@click="save"
>
<mdicon class="icon" name="content-save" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.save.save')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogPlaylistSave',
components: { ModalDialog },
components: { ModalDialogAction },
props: { show: Boolean },
emits: ['close'],
data() {
return {
disabled: true,
@ -61,7 +46,23 @@ export default {
playlist_name: ''
}
},
actions() {
if (loading) {
return [{ label: this.$t('dialog.playlist.save.saving'), icon: 'web' }]
}
return [
{
label: this.$t('dialog.playlist.save.cancel'),
event: 'cancel',
icon: 'cancel'
},
{
label: this.$t('dialog.playlist.save.save'),
event: 'content-save',
icon: 'save'
}
]
},
watch: {
show() {
if (this.show) {
@ -73,7 +74,6 @@ export default {
}
}
},
methods: {
check_name(event) {
const { validity } = event.target

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<div class="title is-4">
<a @click="open" v-text="item.name" />
</div>
@ -26,36 +33,39 @@
<div class="title is-6" v-text="item.uri" />
</div>
</template>
<template #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.spotify.playlist.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.playlist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.playlist.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogPlaylistSpotify',
components: { ModalDialog },
components: { ModalDialogAction },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {
actions() {
return [
{
label: this.$t('dialog.spotify.playlist.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.spotify.playlist.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.spotify.playlist.play'),
event: 'play',
icon: 'play'
}
]
}
},
methods: {
open() {
this.$emit('close')

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

@ -1,6 +1,12 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@remove="remove"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<div class="title is-4" v-text="item.title" />
<div class="subtitle" v-text="item.artist" />
<div v-if="item.album" class="mb-3">
@ -114,41 +120,44 @@
</div>
</div>
</template>
<template #footer>
<a class="card-footer-item has-text-dark" @click="remove">
<mdicon class="icon" name="delete" size="16" />
<span class="is-size-7" v-text="$t('dialog.queue-item.remove')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.queue-item.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import { useServicesStore } from '@/stores/services'
import webapi from '@/webapi'
export default {
name: 'ModalDialogQueueItem',
components: { ModalDialog },
components: { ModalDialogAction },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
setup() {
return { servicesStore: useServicesStore() }
},
data() {
return {
spotify_track: {}
}
},
computed: {
actions() {
return [
{
label: this.$t('dialog.queue-item.remove'),
event: 'remove',
icon: 'delete'
},
{
label: this.$t('dialog.queue-item.play'),
event: 'play',
icon: 'play'
}
]
}
},
watch: {
item() {
if (this.item?.data_kind === 'spotify') {
@ -164,7 +173,6 @@ export default {
}
}
},
methods: {
open_album() {
if (this.item.data_kind === 'spotify') {

49
web-src/src/components/ModalDialogRemotePairing.vue
View File

@ -1,8 +1,14 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@cancel="cancel"
@close="$emit('close')"
@pair="pair"
>
<template #modal-content>
<p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
<form @submit.prevent="kickoff_pairing">
<form @submit.prevent="pair">
<label class="label" v-text="pairing.remote" />
<div class="field">
<div class="control">
@ -18,46 +24,46 @@
</div>
</form>
</template>
<template #footer>
<a class="card-footer-item has-text-danger" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.remote-pairing.cancel')" />
</a>
<a class="card-footer-item" @click="kickoff_pairing">
<mdicon class="icon" name="cellphone" size="16" />
<span class="is-size-7" v-text="$t('dialog.remote-pairing.pair')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import { useRemotesStore } from '@/stores/remotes'
import webapi from '@/webapi'
export default {
name: 'ModalDialogRemotePairing',
components: { ModalDialog },
components: { ModalDialogAction },
props: { show: Boolean },
emits: ['close'],
setup() {
return { remoteStore: useRemotesStore() }
},
data() {
return {
pairing_req: { pin: '' }
}
},
computed: {
actions() {
return [
{
label: this.$t('dialog.remote-pairing.cancel'),
event: 'cancel',
icon: 'cancel'
},
{
label: this.$t('dialog.remote-pairing.pair'),
event: 'pair',
icon: 'cellphone'
}
]
},
pairing() {
return this.remoteStore.pairing
}
},
watch: {
show() {
if (this.show) {
@ -69,9 +75,8 @@ export default {
}
}
},
methods: {
kickoff_pairing() {
pair() {
webapi.pairing_kickoff(this.pairing_req).then(() => {
this.pairing_req.pin = ''
})

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<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">
@ -150,45 +157,49 @@
<div class="title is-6" v-text="item.comment" />
</div>
</template>
<template #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.track.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.track.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.track.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import SpotifyWebApi from 'spotify-web-api-js'
import { useServicesStore } from '@/stores/services'
import webapi from '@/webapi'
export default {
name: 'ModalDialogTrack',
components: { ModalDialog },
components: { ModalDialogAction },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close', 'play-count-changed'],
setup() {
return { servicesStore: useServicesStore() }
},
data() {
return {
spotify_track: {}
}
},
computed: {
actions() {
return [
{
label: this.$t('dialog.track.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.track.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.track.play'),
event: 'play',
icon: 'play'
}
]
}
},
watch: {
item() {
if (
@ -208,7 +219,6 @@ export default {
}
}
},
methods: {
mark_new() {
webapi

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

@ -1,6 +1,13 @@
<template>
<modal-dialog :show="show" @close="$emit('close')">
<template #content>
<modal-dialog-action
:actions="actions"
:show="show"
@add="queue_add"
@add-next="queue_add_next"
@close="$emit('close')"
@play="play"
>
<template #modal-content>
<p class="title is-4" v-text="item.name" />
<p class="subtitle" v-text="item.artists[0].name" />
<div class="mb-3">
@ -59,33 +66,39 @@
<div class="title is-6" v-text="item.uri" />
</div>
</template>
<template #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.spotify.track.add')" />
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.track.add-next')" />
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.track.play')" />
</a>
</template>
</modal-dialog>
</modal-dialog-action>
</template>
<script>
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAction from '@/components/ModalDialogAction.vue'
import webapi from '@/webapi'
export default {
name: 'ModalDialogTrackSpotify',
components: { ModalDialog },
components: { ModalDialogAction },
props: { item: { required: true, type: Object }, show: Boolean },
emits: ['close'],
computed: {
actions() {
return [
{
label: this.$t('dialog.spotify.track.add'),
event: 'add',
icon: 'playlist-plus'
},
{
label: this.$t('dialog.spotify.track.add-next'),
event: 'add-next',
icon: 'playlist-play'
},
{
label: this.$t('dialog.spotify.track.play'),
event: 'play',
icon: 'play'
}
]
}
},
methods: {
open_album() {
this.$emit('close')

23
web-src/src/components/ModalDialogUpdate.vue
View File

@ -1,11 +1,10 @@
<template>
<modal-dialog-action
:actions="actions"
:show="show"
:title="$t('dialog.update.title')"
:ok_action="libraryStore.updating ? '' : $t('dialog.update.rescan')"
:close_action="$t('dialog.update.cancel')"
@ok="update_library"
@close="close()"
@analyse="update_library"
@cancel="close()"
>
<template #modal-content>
<div v-if="!libraryStore.updating">
@ -70,6 +69,22 @@ export default {
},
computed: {
actions() {
return [
{
label: this.$t('dialog.update.cancel'),
event: 'cancel',
icon: 'cancel'
},
{
label: this.libraryStore.updating
? 'In progress'
: this.$t('dialog.update.rescan'),
event: 'analyse',
icon: 'check'
}
]
},
rss() {
return this.libraryStore.rss
},

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

@ -47,12 +47,11 @@
@remove-podcast="open_remove_podcast_dialog"
/>
<modal-dialog-action
:actions="actions"
:show="show_remove_podcast_modal"
:title="$t('page.podcast.remove-podcast')"
:close_action="$t('page.podcast.cancel')"
:delete_action="$t('page.podcast.remove')"
@close="show_remove_podcast_modal = false"
@delete="remove_podcast"
@cancel="show_remove_podcast_modal = false"
@remove="remove_podcast"
>
<template #modal-content>
<i18n-t keypath="page.podcast.remove-info" tag="p" scope="global">
@ -118,7 +117,22 @@ export default {
tracks: new GroupedList()
}
},
computed: {
actions() {
return [
{
label: this.$t('page.podcast.cancel'),
event: 'cancel',
icon: 'cancel'
},
{
label: this.$t('page.podcast.remove'),
event: 'remove',
icon: 'delete'
}
]
}
},
methods: {
open_remove_podcast_dialog() {
webapi