mirror of
https://github.com/owntone/owntone-server.git
synced 2024-12-25 22:55:56 -05:00
[web] Remove unnecessary HTML elements
This commit is contained in:
Alain Nussbaumer
parent
3f4c6b2cf0
commit
37b1c834c9
@ -1,46 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<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 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="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>
|
||||
<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 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="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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,61 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<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"
|
||||
/>
|
||||
<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')"
|
||||
<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"
|
||||
/>
|
||||
</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="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>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
<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="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>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,67 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<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"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="web" size="16" />
|
||||
</p>
|
||||
</div>
|
||||
<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"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="web" size="16" />
|
||||
</p>
|
||||
</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="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="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>
|
||||
<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="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="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>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,116 +1,114 @@
|
||||
<template>
|
||||
<div>
|
||||
<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
|
||||
:artwork_url="album.artwork_url"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
|
||||
<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
|
||||
:artwork_url="album.artwork_url"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
|
||||
/>
|
||||
<p class="title is-4">
|
||||
<a
|
||||
class="has-text-link"
|
||||
@click="open_album"
|
||||
v-text="album.name"
|
||||
/>
|
||||
<p class="title is-4">
|
||||
</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="album.data_kind === 'url'"
|
||||
class="button is-small"
|
||||
@click="$emit('remove-podcast')"
|
||||
v-text="$t('dialog.album.remove-podcast')"
|
||||
/>
|
||||
</div>
|
||||
<div class="content is-small">
|
||||
<p v-if="album.artist">
|
||||
<span class="heading" v-text="$t('dialog.album.artist')" />
|
||||
<a
|
||||
class="has-text-link"
|
||||
@click="open_album"
|
||||
v-text="album.name"
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_artist"
|
||||
v-text="album.artist"
|
||||
/>
|
||||
</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')"
|
||||
<p v-if="album.date_released">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.album.release-date')"
|
||||
/>
|
||||
<a
|
||||
v-if="album.data_kind === 'url'"
|
||||
class="button is-small"
|
||||
@click="$emit('remove-podcast')"
|
||||
v-text="$t('dialog.album.remove-podcast')"
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.date(album.date_released)"
|
||||
/>
|
||||
</div>
|
||||
<div class="content is-small">
|
||||
<p v-if="album.artist">
|
||||
<span class="heading" v-text="$t('dialog.album.artist')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_artist"
|
||||
v-text="album.artist"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="album.date_released">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.album.release-date')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.date(album.date_released)"
|
||||
/>
|
||||
</p>
|
||||
<p v-else-if="album.year > 0">
|
||||
<span class="heading" v-text="$t('dialog.album.year')" />
|
||||
<span class="title is-6" v-text="album.year" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.tracks')" />
|
||||
<span class="title is-6" v-text="album.track_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(album.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="
|
||||
[
|
||||
$t('media.kind.' + album.media_kind),
|
||||
$t('data.kind.' + album.data_kind)
|
||||
].join(' - ')
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(album.time_added)"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
<p v-else-if="album.year > 0">
|
||||
<span class="heading" v-text="$t('dialog.album.year')" />
|
||||
<span class="title is-6" v-text="album.year" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.tracks')" />
|
||||
<span class="title is-6" v-text="album.track_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(album.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="
|
||||
[
|
||||
$t('media.kind.' + album.media_kind),
|
||||
$t('data.kind.' + album.data_kind)
|
||||
].join(' - ')
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.album.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(album.time_added)"
|
||||
/>
|
||||
</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.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>
|
||||
<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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,90 +1,85 @@
|
||||
<template>
|
||||
<div>
|
||||
<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
|
||||
:artwork_url="artwork_url(album)"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
|
||||
@load="artwork_loaded"
|
||||
@error="artwork_error"
|
||||
<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
|
||||
:artwork_url="artwork_url(album)"
|
||||
:artist="album.artist"
|
||||
:album="album.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image mb-5"
|
||||
@load="artwork_loaded"
|
||||
@error="artwork_error"
|
||||
/>
|
||||
<p class="title is-4">
|
||||
<a
|
||||
class="has-text-link"
|
||||
@click="open_album"
|
||||
v-text="album.name"
|
||||
/>
|
||||
<p class="title is-4">
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.album.album-artist')"
|
||||
/>
|
||||
<a
|
||||
class="has-text-link"
|
||||
@click="open_album"
|
||||
v-text="album.name"
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_artist"
|
||||
v-text="album.artists[0].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="album.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(album.release_date)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.album.type')"
|
||||
/>
|
||||
<span class="title is-6" v-text="album.album_type" />
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.album.release-date')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.date(album.release_date)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.album.type')"
|
||||
/>
|
||||
<span class="title is-6" v-text="album.album_type" />
|
||||
</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.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>
|
||||
<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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,67 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<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_artist"
|
||||
v-text="artist.name"
|
||||
<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_artist"
|
||||
v-text="artist.name"
|
||||
/>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.albums')" />
|
||||
<span class="title is-6" v-text="artist.album_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.tracks')" />
|
||||
<span class="title is-6" v-text="artist.track_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$t('data.kind.' + artist.data_kind)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(artist.time_added)"
|
||||
/>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.albums')" />
|
||||
<span class="title is-6" v-text="artist.album_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.tracks')" />
|
||||
<span class="title is-6" v-text="artist.track_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$t('data.kind.' + artist.data_kind)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.artist.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(artist.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>
|
||||
<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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,73 +1,71 @@
|
||||
<template>
|
||||
<div>
|
||||
<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_artist"
|
||||
v-text="artist.name"
|
||||
<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_artist"
|
||||
v-text="artist.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="
|
||||
[artist.popularity, artist.followers.total].join(' / ')
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.artist.popularity')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="
|
||||
[artist.popularity, artist.followers.total].join(' / ')
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.artist.genres')"
|
||||
/>
|
||||
<span class="title is-6" v-text="artist.genres.join(', ')" />
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.artist.genres')"
|
||||
/>
|
||||
<span class="title is-6" v-text="artist.genres.join(', ')" />
|
||||
</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.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>
|
||||
<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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,69 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<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="composer.name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.composer.albums')" />
|
||||
<a
|
||||
class="has-text-link is-6"
|
||||
@click="open_albums"
|
||||
v-text="composer.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="composer.track_count"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.composer.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(composer.length_ms)"
|
||||
/>
|
||||
</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>
|
||||
<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="composer.name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.composer.albums')" />
|
||||
<a
|
||||
class="has-text-link is-6"
|
||||
@click="open_albums"
|
||||
v-text="composer.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="composer.track_count"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.composer.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(composer.length_ms)"
|
||||
/>
|
||||
</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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,40 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
<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="directory" />
|
||||
</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>
|
||||
<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="directory" />
|
||||
</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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,60 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<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_genre"
|
||||
v-text="genre.name"
|
||||
<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_genre"
|
||||
v-text="genre.name"
|
||||
/>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.genre.albums')" />
|
||||
<span class="title is-6" v-text="genre.album_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.genre.tracks')" />
|
||||
<span class="title is-6" v-text="genre.track_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.genre.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(genre.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.genre.albums')" />
|
||||
<span class="title is-6" v-text="genre.album_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.genre.tracks')" />
|
||||
<span class="title is-6" v-text="genre.track_count" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.genre.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(genre.length_ms)"
|
||||
/>
|
||||
</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>
|
||||
<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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,66 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<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_playlist"
|
||||
v-text="playlist.name"
|
||||
<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_playlist"
|
||||
v-text="playlist.name"
|
||||
/>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.playlist.path')" />
|
||||
<span class="title is-6" v-text="playlist.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.playlist.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$t('playlist.type.' + playlist.type)"
|
||||
/>
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.playlist.path')" />
|
||||
<span class="title is-6" v-text="playlist.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.playlist.type')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$t('playlist.type.' + playlist.type)"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="!playlist.folder">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.playlist.track-count')"
|
||||
/>
|
||||
<span class="title is-6" v-text="playlist.item_count" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer v-if="!playlist.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" />
|
||||
<p v-if="!playlist.folder">
|
||||
<span
|
||||
class="is-size-7"
|
||||
v-text="$t('dialog.playlist.add-next')"
|
||||
class="heading"
|
||||
v-text="$t('dialog.playlist.track-count')"
|
||||
/>
|
||||
</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>
|
||||
<span class="title is-6" v-text="playlist.item_count" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer v-if="!playlist.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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,69 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<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.playlist.save.title')" />
|
||||
<form class="mb-5" @submit.prevent="save">
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input
|
||||
ref="playlist_name_field"
|
||||
v-model="playlist_name"
|
||||
class="input is-shadowless"
|
||||
type="text"
|
||||
:placeholder="$t('dialog.playlist.save.playlist-name')"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="file-music" size="16" />
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</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="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>
|
||||
<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.playlist.save.title')" />
|
||||
<form class="mb-5" @submit.prevent="save">
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input
|
||||
ref="playlist_name_field"
|
||||
v-model="playlist_name"
|
||||
class="input is-shadowless"
|
||||
type="text"
|
||||
:placeholder="$t('dialog.playlist.save.playlist-name')"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<mdicon class="icon is-left" name="file-music" size="16" />
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</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="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>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,78 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<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_playlist"
|
||||
v-text="playlist.name"
|
||||
<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_playlist"
|
||||
v-text="playlist.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="playlist.owner.display_name" />
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.playlist.tracks')"
|
||||
/>
|
||||
<span class="title is-6" v-text="playlist.tracks.total" />
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.playlist.path')"
|
||||
/>
|
||||
<span class="title is-6" v-text="playlist.uri" />
|
||||
</p>
|
||||
<div class="content is-small">
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.playlist.owner')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="playlist.owner.display_name"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.playlist.tracks')"
|
||||
/>
|
||||
<span class="title is-6" v-text="playlist.tracks.total" />
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.playlist.path')"
|
||||
/>
|
||||
<span class="title is-6" v-text="playlist.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>
|
||||
<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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,151 +1,140 @@
|
||||
<template>
|
||||
<div>
|
||||
<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)
|
||||
].join(' - ')
|
||||
"
|
||||
/>
|
||||
</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')"
|
||||
<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"
|
||||
/>
|
||||
</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>
|
||||
</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)
|
||||
].join(' - ')
|
||||
"
|
||||
/>
|
||||
</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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,63 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<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"
|
||||
type="text"
|
||||
pattern="[\d]{4}"
|
||||
:placeholder="$t('dialog.remote-pairing.pairing-code')"
|
||||
/>
|
||||
</div>
|
||||
<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"
|
||||
type="text"
|
||||
pattern="[\d]{4}"
|
||||
:placeholder="$t('dialog.remote-pairing.pairing-code')"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
</form>
|
||||
</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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,182 +1,176 @@
|
||||
<template>
|
||||
<div>
|
||||
<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="track.title" />
|
||||
<p class="subtitle" v-text="track.artist" />
|
||||
<div v-if="track.media_kind === 'podcast'" class="buttons">
|
||||
<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="track.title" />
|
||||
<p class="subtitle" v-text="track.artist" />
|
||||
<div v-if="track.media_kind === 'podcast'" class="buttons">
|
||||
<a
|
||||
v-if="track.play_count > 0"
|
||||
class="button is-small"
|
||||
@click="mark_new"
|
||||
v-text="$t('dialog.track.mark-as-new')"
|
||||
/>
|
||||
<a
|
||||
v-if="track.play_count === 0"
|
||||
class="button is-small"
|
||||
@click="mark_played"
|
||||
v-text="$t('dialog.track.mark-as-played')"
|
||||
/>
|
||||
</div>
|
||||
<div class="content is-small">
|
||||
<p v-if="track.album">
|
||||
<span class="heading" v-text="$t('dialog.track.album')" />
|
||||
<a
|
||||
v-if="track.play_count > 0"
|
||||
class="button is-small"
|
||||
@click="mark_new"
|
||||
v-text="$t('dialog.track.mark-as-new')"
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album"
|
||||
v-text="track.album"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="track.album_artist && track.media_kind !== 'audiobook'">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.track.album-artist')"
|
||||
/>
|
||||
<a
|
||||
v-if="track.play_count === 0"
|
||||
class="button is-small"
|
||||
@click="mark_played"
|
||||
v-text="$t('dialog.track.mark-as-played')"
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album_artist"
|
||||
v-text="track.album_artist"
|
||||
/>
|
||||
</div>
|
||||
<div class="content is-small">
|
||||
<p v-if="track.album">
|
||||
<span class="heading" v-text="$t('dialog.track.album')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album"
|
||||
v-text="track.album"
|
||||
/>
|
||||
</p>
|
||||
<p
|
||||
v-if="track.album_artist && track.media_kind !== 'audiobook'"
|
||||
>
|
||||
</p>
|
||||
<p v-if="track.composer">
|
||||
<span class="heading" v-text="$t('dialog.track.composer')" />
|
||||
<span class="title is-6" v-text="track.composer" />
|
||||
</p>
|
||||
<p v-if="track.date_released">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.track.release-date')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.date(track.date_released)"
|
||||
/>
|
||||
</p>
|
||||
<p v-else-if="track.year">
|
||||
<span class="heading" v-text="$t('dialog.track.year')" />
|
||||
<span class="title is-6" v-text="track.year" />
|
||||
</p>
|
||||
<p v-if="track.genre">
|
||||
<span class="heading" v-text="$t('dialog.track.genre')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_genre"
|
||||
v-text="track.genre"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="track.disc_number">
|
||||
<span class="heading" v-text="$t('dialog.track.position')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[track.disc_number, track.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="track.length_ms">
|
||||
<span class="heading" v-text="$t('dialog.track.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(track.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.path')" />
|
||||
<span class="title is-6" v-text="track.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.type')" />
|
||||
<span class="title is-6">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.track.album-artist')"
|
||||
/>
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_album_artist"
|
||||
v-text="track.album_artist"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="track.composer">
|
||||
<span class="heading" v-text="$t('dialog.track.composer')" />
|
||||
<span class="title is-6" v-text="track.composer" />
|
||||
</p>
|
||||
<p v-if="track.date_released">
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.track.release-date')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.date(track.date_released)"
|
||||
/>
|
||||
</p>
|
||||
<p v-else-if="track.year">
|
||||
<span class="heading" v-text="$t('dialog.track.year')" />
|
||||
<span class="title is-6" v-text="track.year" />
|
||||
</p>
|
||||
<p v-if="track.genre">
|
||||
<span class="heading" v-text="$t('dialog.track.genre')" />
|
||||
<a
|
||||
class="title is-6 has-text-link"
|
||||
@click="open_genre"
|
||||
v-text="track.genre"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="track.disc_number">
|
||||
<span class="heading" v-text="$t('dialog.track.position')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[track.disc_number, track.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="track.length_ms">
|
||||
<span class="heading" v-text="$t('dialog.track.duration')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(track.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.path')" />
|
||||
<span class="title is-6" v-text="track.path" />
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.type')" />
|
||||
<span class="title is-6">
|
||||
<span
|
||||
v-text="
|
||||
[
|
||||
$t('media.kind.' + track.media_kind),
|
||||
$t('data.kind.' + track.data_kind)
|
||||
].join(' - ')
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p v-if="track.samplerate">
|
||||
<span class="heading" v-text="$t('dialog.track.quality')" />
|
||||
<span class="title is-6">
|
||||
<span v-text="track.type" />
|
||||
<span
|
||||
v-if="track.samplerate"
|
||||
v-text="
|
||||
$t('dialog.track.samplerate', {
|
||||
rate: track.samplerate
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="track.channels"
|
||||
v-text="
|
||||
$t('dialog.track.channels', {
|
||||
channels: $filters.channels(track.channels)
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="track.bitrate"
|
||||
v-text="
|
||||
$t('dialog.track.bitrate', { rate: track.bitrate })
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(track.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(track.rating / 10)
|
||||
[
|
||||
$t('media.kind.' + track.media_kind),
|
||||
$t('data.kind.' + track.data_kind)
|
||||
].join(' - ')
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p v-if="track.samplerate">
|
||||
<span class="heading" v-text="$t('dialog.track.quality')" />
|
||||
<span class="title is-6">
|
||||
<span v-text="track.type" />
|
||||
<span
|
||||
v-if="track.samplerate"
|
||||
v-text="
|
||||
$t('dialog.track.samplerate', {
|
||||
rate: track.samplerate
|
||||
})
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="track.comment">
|
||||
<span class="heading" v-text="$t('dialog.track.comment')" />
|
||||
<span class="title is-6" v-text="track.comment" />
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
v-if="track.channels"
|
||||
v-text="
|
||||
$t('dialog.track.channels', {
|
||||
channels: $filters.channels(track.channels)
|
||||
})
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-if="track.bitrate"
|
||||
v-text="$t('dialog.track.bitrate', { rate: track.bitrate })"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.track.added-on')" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.datetime(track.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(track.rating / 10)
|
||||
})
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="track.comment">
|
||||
<span class="heading" v-text="$t('dialog.track.comment')" />
|
||||
<span class="title is-6" v-text="track.comment" />
|
||||
</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.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>
|
||||
<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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,108 +1,103 @@
|
||||
<template>
|
||||
<div>
|
||||
<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="track.name" />
|
||||
<p class="subtitle" v-text="track.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="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="album.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(album.release_date)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.position')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[track.disc_number, track.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.duration')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(track.duration_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.path')"
|
||||
/>
|
||||
<span class="title is-6" v-text="track.uri" />
|
||||
</p>
|
||||
</div>
|
||||
<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="track.name" />
|
||||
<p class="subtitle" v-text="track.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="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="album.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(album.release_date)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.position')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[track.disc_number, track.track_number].join(' / ')"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.duration')"
|
||||
/>
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(track.duration_ms)"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span
|
||||
class="heading"
|
||||
v-text="$t('dialog.spotify.track.path')"
|
||||
/>
|
||||
<span class="title is-6" v-text="track.uri" />
|
||||
</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.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>
|
||||
<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>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<button
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user