[web] Avoid the scrollable page behind all modal dialogs
This commit is contained in:
Alain Nussbaumer
parent
8f627f1df0
commit
c8e4862245
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<slot name="content" />
|
||||
</div>
|
||||
<footer class="card-footer is-clipped">
|
||||
<slot name="footer" />
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseModal',
|
||||
props: {
|
||||
show: Boolean
|
||||
},
|
||||
emits: ['close'],
|
||||
watch: {
|
||||
show(value) {
|
||||
const { classList } = document.querySelector('html')
|
||||
if (value) {
|
||||
classList.add('is-clipped')
|
||||
} else {
|
||||
classList.remove('is-clipped')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,49 +1,40 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p v-if="title" class="title is-4" v-text="title" />
|
||||
<slot name="modal-content" />
|
||||
</div>
|
||||
<footer class="card-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 has-background-danger has-text-white has-text-weight-bold"
|
||||
@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 has-background-info has-text-white has-text-weight-bold"
|
||||
@click="$emit('ok')"
|
||||
>
|
||||
<mdicon class="icon" name="check" size="16" />
|
||||
<span class="is-size-7" v-text="ok_action" />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<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 has-background-danger has-text-white has-text-weight-bold"
|
||||
@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 has-background-info has-text-white has-text-weight-bold"
|
||||
@click="$emit('ok')"
|
||||
>
|
||||
<mdicon class="icon" name="check" size="16" />
|
||||
<span class="is-size-7" v-text="ok_action" />
|
||||
</a>
|
||||
</template>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialog',
|
||||
components: { BaseModal },
|
||||
props: {
|
||||
close_action: { default: '', type: String },
|
||||
delete_action: { default: '', type: String },
|
||||
|
|
|
|||
|
|
@ -1,68 +1,55 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<form class="card" @submit.prevent="add_stream">
|
||||
<div class="card-content">
|
||||
<p class="title is-4" v-text="$t('dialog.add.rss.title')" />
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input
|
||||
ref="url_field"
|
||||
v-model="url"
|
||||
class="input is-shadowless"
|
||||
type="url"
|
||||
pattern="http[s]?://.+"
|
||||
required
|
||||
:placeholder="$t('dialog.add.rss.placeholder')"
|
||||
:disabled="loading"
|
||||
@input="check_url"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="rss" size="16" />
|
||||
</p>
|
||||
<p class="help" v-text="$t('dialog.add.rss.help')" />
|
||||
</div>
|
||||
</div>
|
||||
<footer v-if="loading" class="card-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>
|
||||
</footer>
|
||||
<footer v-else class="card-footer is-clipped">
|
||||
<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 has-background-info has-text-white has-text-weight-bold"
|
||||
@click="add_stream"
|
||||
>
|
||||
<mdicon class="icon" name="playlist-plus" size="16" />
|
||||
<span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
|
||||
</a>
|
||||
</footer>
|
||||
</form>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4" v-text="$t('dialog.add.rss.title')" />
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input
|
||||
ref="url_field"
|
||||
v-model="url"
|
||||
class="input is-shadowless"
|
||||
type="url"
|
||||
pattern="http[s]?://.+"
|
||||
required
|
||||
:placeholder="$t('dialog.add.rss.placeholder')"
|
||||
:disabled="loading"
|
||||
@input="check_url"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="rss" size="16" />
|
||||
</p>
|
||||
<p class="help" v-text="$t('dialog.add.rss.help')" />
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</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 has-background-info has-text-white has-text-weight-bold"
|
||||
@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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogAddRss',
|
||||
components: { BaseModal },
|
||||
props: { show: Boolean },
|
||||
emits: ['close', 'podcast-added'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,75 +1,64 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<form class="card" @submit.prevent="play">
|
||||
<div class="card-content">
|
||||
<p class="title is-4" v-text="$t('dialog.add.stream.title')" />
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input
|
||||
ref="url_field"
|
||||
v-model="url"
|
||||
class="input is-shadowless"
|
||||
type="url"
|
||||
pattern="http[s]?://.+"
|
||||
required
|
||||
:placeholder="$t('dialog.add.stream.placeholder')"
|
||||
:disabled="loading"
|
||||
@input="check_url"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="web" size="16" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer v-if="loading" class="card-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>
|
||||
</footer>
|
||||
<footer v-else class="card-footer is-clipped">
|
||||
<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-background-info has-text-white has-text-weight-bold"
|
||||
@click="play"
|
||||
>
|
||||
<mdicon class="icon" name="play" size="16" />
|
||||
<span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
|
||||
</a>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<form @submit.prevent="play">
|
||||
<p class="title is-4" v-text="$t('dialog.add.stream.title')" />
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input
|
||||
ref="url_field"
|
||||
v-model="url"
|
||||
class="input is-shadowless"
|
||||
type="url"
|
||||
pattern="http[s]?://.+"
|
||||
required
|
||||
:placeholder="$t('dialog.add.stream.placeholder')"
|
||||
:disabled="loading"
|
||||
@input="check_url"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="web" size="16" />
|
||||
</p>
|
||||
</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-background-info has-text-white has-text-weight-bold"
|
||||
@click="play"
|
||||
>
|
||||
<mdicon class="icon" name="play" size="16" />
|
||||
<span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
|
||||
</a>
|
||||
</template>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogAddUrlStream',
|
||||
components: { BaseModal },
|
||||
props: { show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,116 +1,99 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<cover-artwork
|
||||
:url="item.artwork_url"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image"
|
||||
/>
|
||||
<p class="title is-4">
|
||||
<a class="has-text-link" @click="open" v-text="item.name" />
|
||||
</p>
|
||||
<div v-if="media_kind_resolved === 'podcast'" class="buttons">
|
||||
<a
|
||||
class="button is-small"
|
||||
@click="mark_played"
|
||||
v-text="$t('dialog.album.mark-as-played')"
|
||||
/>
|
||||
<a
|
||||
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="item.artist">
|
||||
<span class="heading" v-text="$t('dialog.album.artist')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_artist"
|
||||
v-text="item.artist"
|
||||
/>
|
||||
</p>
|
||||
<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(item.date_released)"
|
||||
/>
|
||||
</p>
|
||||
<p v-else-if="item.year">
|
||||
<span class="heading" v-text="$t('dialog.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="item.track_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="
|
||||
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(item.time_added)"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<cover-artwork
|
||||
:url="item.artwork_url"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<p class="title is-4">
|
||||
<a class="has-text-link" @click="open" v-text="item.name" />
|
||||
</p>
|
||||
<div v-if="media_kind_resolved === 'podcast'" class="buttons">
|
||||
<a
|
||||
class="button is-small"
|
||||
@click="mark_played"
|
||||
v-text="$t('dialog.album.mark-as-played')"
|
||||
/>
|
||||
<a
|
||||
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="item.artist">
|
||||
<span class="heading" v-text="$t('dialog.album.artist')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_artist"
|
||||
v-text="item.artist"
|
||||
/>
|
||||
</p>
|
||||
<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(item.date_released)" />
|
||||
</p>
|
||||
<p v-else-if="item.year">
|
||||
<span class="heading" v-text="$t('dialog.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="item.track_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="
|
||||
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(item.time_added)"
|
||||
/>
|
||||
</p>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogAlbum',
|
||||
components: { CoverArtwork },
|
||||
components: { BaseModal, CoverArtwork },
|
||||
props: {
|
||||
item: { required: true, type: Object },
|
||||
media_kind: { default: '', type: String },
|
||||
|
|
|
|||
|
|
@ -1,90 +1,67 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<cover-artwork
|
||||
:url="artwork_url(item)"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image"
|
||||
@load="artwork_loaded"
|
||||
@error="artwork_error"
|
||||
/>
|
||||
<p class="title is-4">
|
||||
<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.spotify.album.album-artist')"
|
||||
/>
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_artist"
|
||||
v-text="item.artists[0].name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.album.release-date')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.date(item.release_date)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.album.type')"
|
||||
/>
|
||||
<span class="title is-6" v-text="item.album_type" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<cover-artwork
|
||||
:url="artwork_url(item)"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image"
|
||||
@load="artwork_loaded"
|
||||
@error="artwork_error"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<p class="title is-4">
|
||||
<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.spotify.album.album-artist')"
|
||||
/>
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_artist"
|
||||
v-text="item.artists[0].name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.album.release-date')"
|
||||
/>
|
||||
<span class="title is-6" v-text="$filters.date(item.release_date)" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.spotify.album.type')" />
|
||||
<span class="title is-6" v-text="item.album_type" />
|
||||
</p>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import CoverArtwork from '@/components/CoverArtwork.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogAlbumSpotify',
|
||||
components: { CoverArtwork },
|
||||
components: { BaseModal, CoverArtwork },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,68 +1,55 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<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="item.album_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.tracks')" />
|
||||
<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.${item.data_kind}`)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(item.time_added)"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4">
|
||||
<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="item.album_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.tracks')" />
|
||||
<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.${item.data_kind}`)" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(item.time_added)"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogArtist',
|
||||
components: { BaseModal },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,72 +1,50 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<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.spotify.artist.popularity')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[item.popularity, item.followers.total].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.artist.genres')"
|
||||
/>
|
||||
<span class="title is-6" v-text="item.genres.join(', ')" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4">
|
||||
<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.spotify.artist.popularity')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[item.popularity, item.followers.total].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.spotify.artist.genres')" />
|
||||
<span class="title is-6" v-text="item.genres.join(', ')" />
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogArtistSpotify',
|
||||
components: { BaseModal },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,71 +1,57 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<a
|
||||
class="has-text-link"
|
||||
@click="open_albums"
|
||||
v-text="item.name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.composer.albums')" />
|
||||
<a
|
||||
class="has-text-link is-6"
|
||||
@click="open_albums"
|
||||
v-text="item.album_count"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.composer.tracks')" />
|
||||
<a
|
||||
class="has-text-link is-6"
|
||||
@click="open_tracks"
|
||||
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(item.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4">
|
||||
<a class="has-text-link" @click="open_albums" v-text="item.name" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.composer.albums')" />
|
||||
<a
|
||||
class="has-text-link is-6"
|
||||
@click="open_albums"
|
||||
v-text="item.album_count"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.composer.tracks')" />
|
||||
<a
|
||||
class="has-text-link is-6"
|
||||
@click="open_tracks"
|
||||
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(item.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogComposer',
|
||||
components: { BaseModal },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,45 +1,32 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4" v-text="item" />
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<base-modal :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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogDirectory',
|
||||
components: { BaseModal },
|
||||
props: { item: { required: true, type: String }, show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,61 +1,51 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<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="item.album_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.genre.tracks')" />
|
||||
<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(item.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4">
|
||||
<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="item.album_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.genre.tracks')" />
|
||||
<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(item.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogGenre',
|
||||
components: { BaseModal },
|
||||
props: {
|
||||
item: { required: true, type: Object },
|
||||
media_kind: { required: true, type: String },
|
||||
|
|
|
|||
|
|
@ -1,61 +1,48 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<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="item.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.playlist.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$t(`playlist.type.${item.type}`)"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="!item.folder">
|
||||
<span class="heading" v-text="$t('dialog.playlist.tracks')" />
|
||||
<span class="title is-6" v-text="item.item_count" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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')" />
|
||||
</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>
|
||||
</footer>
|
||||
</div>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4">
|
||||
<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="item.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.playlist.type')" />
|
||||
<span class="title is-6" v-text="$t(`playlist.type.${item.type}`)" />
|
||||
</p>
|
||||
<p v-if="!item.folder">
|
||||
<span class="heading" v-text="$t('dialog.playlist.tracks')" />
|
||||
<span class="title is-6" v-text="item.item_count" />
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogPlaylist',
|
||||
components: { BaseModal },
|
||||
props: {
|
||||
item: { required: true, type: Object },
|
||||
show: Boolean,
|
||||
|
|
|
|||
|
|
@ -1,73 +1,56 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<form class="card" @submit.prevent="save">
|
||||
<div class="card-content">
|
||||
<p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input
|
||||
ref="playlist_name_field"
|
||||
v-model="playlist_name"
|
||||
class="input is-shadowless"
|
||||
type="text"
|
||||
pattern=".+"
|
||||
required
|
||||
:placeholder="$t('dialog.playlist.save.playlist-name')"
|
||||
:disabled="loading"
|
||||
@input="check_name"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="file-music" size="16" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer v-if="loading" class="card-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>
|
||||
</footer>
|
||||
<footer v-else class="card-footer is-clipped">
|
||||
<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-background-info has-text-white 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>
|
||||
</footer>
|
||||
</form>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<form @submit.prevent="save">
|
||||
<p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input
|
||||
ref="playlist_name_field"
|
||||
v-model="playlist_name"
|
||||
class="input is-shadowless"
|
||||
type="text"
|
||||
pattern=".+"
|
||||
required
|
||||
:placeholder="$t('dialog.playlist.save.playlist-name')"
|
||||
:disabled="loading"
|
||||
@input="check_name"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="file-music" size="16" />
|
||||
</p>
|
||||
</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-background-info has-text-white 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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogPlaylistSave',
|
||||
components: { BaseModal },
|
||||
props: { show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,76 +1,51 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4">
|
||||
<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.spotify.playlist.owner')"
|
||||
/>
|
||||
<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="item.tracks.total" />
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.playlist.path')"
|
||||
/>
|
||||
<span class="title is-6" v-text="item.uri" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4">
|
||||
<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.spotify.playlist.owner')" />
|
||||
<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="item.tracks.total" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.spotify.playlist.path')" />
|
||||
<span class="title is-6" v-text="item.uri" />
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogPlaylistSpotify',
|
||||
components: { BaseModal },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,146 +1,119 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4" v-text="item.title" />
|
||||
<p class="subtitle" v-text="item.artist" />
|
||||
<div class="content is-small">
|
||||
<p v-if="item.album">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.album')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album"
|
||||
v-text="item.album"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.album_artist">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.queue-item.album-artist')"
|
||||
/>
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album_artist"
|
||||
v-text="item.album_artist"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.composer">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.queue-item.composer')"
|
||||
/>
|
||||
<span class="title is-6" v-text="item.composer" />
|
||||
</p>
|
||||
<p v-if="item.year">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.year')" />
|
||||
<span class="title is-6" v-text="item.year" />
|
||||
</p>
|
||||
<p v-if="item.genre">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.genre')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_genre"
|
||||
v-text="item.genre"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.disc_number">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.queue-item.position')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.length_ms">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.queue-item.duration')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.queue-item.path')" />
|
||||
<span class="title is-6" v-text="item.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.queue-item.type')" />
|
||||
<span class="title is-6">
|
||||
<span
|
||||
v-text="
|
||||
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p v-if="item.samplerate">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.queue-item.quality')"
|
||||
/>
|
||||
<span class="title is-6">
|
||||
<span v-text="item.type" />
|
||||
<span
|
||||
v-if="item.samplerate"
|
||||
v-text="
|
||||
$t('dialog.queue-item.samplerate', {
|
||||
rate: item.samplerate
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="item.channels"
|
||||
v-text="
|
||||
$t('dialog.queue-item.channels', {
|
||||
channels: $filters.channels(item.channels)
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="item.bitrate"
|
||||
v-text="
|
||||
$t('dialog.queue-item.bitrate', { rate: item.bitrate })
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-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>
|
||||
</footer>
|
||||
</div>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4" v-text="item.title" />
|
||||
<p class="subtitle" v-text="item.artist" />
|
||||
<div class="content is-small">
|
||||
<p v-if="item.album">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.album')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album"
|
||||
v-text="item.album"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.album_artist">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.album-artist')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album_artist"
|
||||
v-text="item.album_artist"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.composer">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.composer')" />
|
||||
<span class="title is-6" v-text="item.composer" />
|
||||
</p>
|
||||
<p v-if="item.year">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.year')" />
|
||||
<span class="title is-6" v-text="item.year" />
|
||||
</p>
|
||||
<p v-if="item.genre">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.genre')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_genre"
|
||||
v-text="item.genre"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.disc_number">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.position')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.length_ms">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.queue-item.path')" />
|
||||
<span class="title is-6" v-text="item.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.queue-item.type')" />
|
||||
<span class="title is-6">
|
||||
<span
|
||||
v-text="
|
||||
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p v-if="item.samplerate">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.quality')" />
|
||||
<span class="title is-6">
|
||||
<span v-text="item.type" />
|
||||
<span
|
||||
v-if="item.samplerate"
|
||||
v-text="
|
||||
$t('dialog.queue-item.samplerate', {
|
||||
rate: item.samplerate
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="item.channels"
|
||||
v-text="
|
||||
$t('dialog.queue-item.channels', {
|
||||
channels: $filters.channels(item.channels)
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="item.bitrate"
|
||||
v-text="$t('dialog.queue-item.bitrate', { rate: item.bitrate })"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import { useServicesStore } from '@/stores/services'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogQueueItem',
|
||||
components: { BaseModal },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,63 +1,47 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
|
||||
<form @submit.prevent="kickoff_pairing">
|
||||
<label class="label" v-text="pairing.remote" />
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input
|
||||
ref="pin_field"
|
||||
v-model="pairing_req.pin"
|
||||
class="input"
|
||||
inputmode="numeric"
|
||||
pattern="[\d]{4}"
|
||||
:placeholder="$t('dialog.remote-pairing.pairing-code')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
|
||||
<form @submit.prevent="kickoff_pairing">
|
||||
<label class="label" v-text="pairing.remote" />
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input
|
||||
ref="pin_field"
|
||||
v-model="pairing_req.pin"
|
||||
class="input"
|
||||
inputmode="numeric"
|
||||
pattern="[\d]{4}"
|
||||
:placeholder="$t('dialog.remote-pairing.pairing-code')"
|
||||
/>
|
||||
</div>
|
||||
<footer class="card-footer is-clipped">
|
||||
<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 has-background-info has-text-white has-text-weight-bold"
|
||||
@click="kickoff_pairing"
|
||||
>
|
||||
<mdicon class="icon" name="cellphone" size="16" />
|
||||
<span
|
||||
class="is-size-7"
|
||||
v-text="$t('dialog.remote-pairing.pair')"
|
||||
/>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</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 has-background-info has-text-white has-text-weight-bold"
|
||||
@click="kickoff_pairing"
|
||||
>
|
||||
<mdicon class="icon" name="cellphone" size="16" />
|
||||
<span class="is-size-7" v-text="$t('dialog.remote-pairing.pair')" />
|
||||
</a>
|
||||
</template>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import { useRemotesStore } from '@/stores/remotes'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogRemotePairing',
|
||||
components: { BaseModal },
|
||||
props: { show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,181 +1,162 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-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">
|
||||
<a
|
||||
v-if="item.play_count > 0"
|
||||
class="button is-small"
|
||||
@click="mark_new"
|
||||
v-text="$t('dialog.track.mark-as-new')"
|
||||
/>
|
||||
<a
|
||||
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="item.album">
|
||||
<span class="heading" v-text="$t('dialog.track.album')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album"
|
||||
v-text="item.album"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.album_artist && item.media_kind !== 'audiobook'">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.track.album-artist')"
|
||||
/>
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album_artist"
|
||||
v-text="item.album_artist"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.composer">
|
||||
<span class="heading" v-text="$t('dialog.track.composer')" />
|
||||
<span class="title is-6" v-text="item.composer" />
|
||||
</p>
|
||||
<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(item.date_released)"
|
||||
/>
|
||||
</p>
|
||||
<p v-else-if="item.year">
|
||||
<span class="heading" v-text="$t('dialog.track.year')" />
|
||||
<span class="title is-6" v-text="item.year" />
|
||||
</p>
|
||||
<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="item.genre"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.disc_number">
|
||||
<span class="heading" v-text="$t('dialog.track.position')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.length_ms">
|
||||
<span class="heading" v-text="$t('dialog.track.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
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="item.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="
|
||||
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.samplerate">
|
||||
<span class="heading" v-text="$t('dialog.track.quality')" />
|
||||
<span class="title is-6">
|
||||
<span v-text="item.type" />
|
||||
<span
|
||||
v-if="item.samplerate"
|
||||
v-text="
|
||||
$t('dialog.track.samplerate', {
|
||||
rate: item.samplerate
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="item.channels"
|
||||
v-text="
|
||||
$t('dialog.track.channels', {
|
||||
channels: $filters.channels(item.channels)
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="item.bitrate"
|
||||
v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(item.time_added)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.rating')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="
|
||||
$t('dialog.track.rating-value', {
|
||||
rating: Math.floor(item.rating / 10)
|
||||
})
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.comment">
|
||||
<span class="heading" v-text="$t('dialog.track.comment')" />
|
||||
<span class="title is-6" v-text="item.comment" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #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">
|
||||
<a
|
||||
v-if="item.play_count > 0"
|
||||
class="button is-small"
|
||||
@click="mark_new"
|
||||
v-text="$t('dialog.track.mark-as-new')"
|
||||
/>
|
||||
<a
|
||||
v-if="item.play_count === 0"
|
||||
class="button is-small"
|
||||
@click="mark_played"
|
||||
v-text="$t('dialog.track.mark-as-played')"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="content is-small">
|
||||
<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="item.album"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.album_artist && item.media_kind !== 'audiobook'">
|
||||
<span class="heading" v-text="$t('dialog.track.album-artist')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album_artist"
|
||||
v-text="item.album_artist"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.composer">
|
||||
<span class="heading" v-text="$t('dialog.track.composer')" />
|
||||
<span class="title is-6" v-text="item.composer" />
|
||||
</p>
|
||||
<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(item.date_released)" />
|
||||
</p>
|
||||
<p v-else-if="item.year">
|
||||
<span class="heading" v-text="$t('dialog.track.year')" />
|
||||
<span class="title is-6" v-text="item.year" />
|
||||
</p>
|
||||
<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="item.genre"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.disc_number">
|
||||
<span class="heading" v-text="$t('dialog.track.position')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.length_ms">
|
||||
<span class="heading" v-text="$t('dialog.track.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
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="item.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="
|
||||
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.samplerate">
|
||||
<span class="heading" v-text="$t('dialog.track.quality')" />
|
||||
<span class="title is-6">
|
||||
<span v-text="item.type" />
|
||||
<span
|
||||
v-if="item.samplerate"
|
||||
v-text="
|
||||
$t('dialog.track.samplerate', {
|
||||
rate: item.samplerate
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="item.channels"
|
||||
v-text="
|
||||
$t('dialog.track.channels', {
|
||||
channels: $filters.channels(item.channels)
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="item.bitrate"
|
||||
v-text="$t('dialog.track.bitrate', { rate: item.bitrate })"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(item.time_added)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.rating')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="
|
||||
$t('dialog.track.rating-value', {
|
||||
rating: Math.floor(item.rating / 10)
|
||||
})
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.comment">
|
||||
<span class="heading" v-text="$t('dialog.track.comment')" />
|
||||
<span class="title is-6" v-text="item.comment" />
|
||||
</p>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import SpotifyWebApi from 'spotify-web-api-js'
|
||||
import { useServicesStore } from '@/stores/services'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogTrack',
|
||||
components: { BaseModal },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close', 'play-count-changed'],
|
||||
|
||||
|
|
|
|||
|
|
@ -1,110 +1,82 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div v-if="show" class="modal is-active">
|
||||
<div class="modal-background" @click="$emit('close')" />
|
||||
<div class="modal-content">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<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
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.album')"
|
||||
/>
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album"
|
||||
v-text="item.album.name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.album-artist')"
|
||||
/>
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_artist"
|
||||
v-text="item.artists[0].name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.release-date')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.date(item.album.release_date)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.position')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.duration')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.duration_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.path')"
|
||||
/>
|
||||
<span class="title is-6" v-text="item.uri" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer 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.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>
|
||||
</footer>
|
||||
</div>
|
||||
<base-modal :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" />
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.spotify.track.album')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album"
|
||||
v-text="item.album.name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.album-artist')"
|
||||
/>
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_artist"
|
||||
v-text="item.artists[0].name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.release-date')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.date(item.album.release_date)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.spotify.track.position')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.spotify.track.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.duration_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.spotify.track.path')" />
|
||||
<span class="title is-6" v-text="item.uri" />
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</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>
|
||||
</base-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseModal from '@/components/BaseModal.vue'
|
||||
import webapi from '@/webapi'
|
||||
|
||||
export default {
|
||||
name: 'ModalDialogTrackSpotify',
|
||||
components: { BaseModal },
|
||||
props: { item: { required: true, type: Object }, show: Boolean },
|
||||
emits: ['close'],
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue