mirror of
https://github.com/owntone/owntone-server.git
synced 2025-11-07 04:42:58 -05:00
[web] Remove the non-standard heading class
This commit is contained in:
Alain Nussbaumer
@@ -6,7 +6,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="heading" v-text="$t('navigation.volume')" />
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('navigation.volume')" />
|
||||
<control-slider
|
||||
v-model:value="player.volume"
|
||||
:cursor="cursor"
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p
|
||||
class="heading"
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
:class="{ 'has-text-grey-light': !output.selected }"
|
||||
v-text="output.name"
|
||||
/>
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
class="is-flex is-align-content-center"
|
||||
:class="{ 'has-text-grey-light': !playing }"
|
||||
>
|
||||
<p class="heading" v-text="$t('navigation.stream')" />
|
||||
<a href="stream.mp3" class="heading ml-2" target="_blank">
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('navigation.stream')" />
|
||||
<a href="stream.mp3" class="ml-2" target="_blank">
|
||||
<mdicon class="icon is-small" name="open-in-new" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="is_next || !show_only_next_items"
|
||||
class="media is-align-items-center"
|
||||
class="media is-align-items-center is-clickable mb-0"
|
||||
@click="play"
|
||||
>
|
||||
<div v-if="edit_mode" class="media-left">
|
||||
<mdicon
|
||||
@@ -10,17 +11,17 @@
|
||||
size="18"
|
||||
/>
|
||||
</div>
|
||||
<div class="media-content is-clickable is-clipped" @click="play">
|
||||
<p
|
||||
class="title is-6"
|
||||
<div class="media-content">
|
||||
<div
|
||||
class="is-size-6 has-text-weight-bold"
|
||||
:class="{
|
||||
'has-text-primary': item.id === player.item_id,
|
||||
'has-text-grey-light': !is_next
|
||||
}"
|
||||
v-text="item.title"
|
||||
/>
|
||||
<p
|
||||
class="subtitle is-7 has-text-weight-bold"
|
||||
<div
|
||||
class="is-size-7 has-text-weight-bold"
|
||||
:class="{
|
||||
'has-text-primary': item.id === player.item_id,
|
||||
'has-text-grey-light': !is_next,
|
||||
@@ -28,8 +29,8 @@
|
||||
}"
|
||||
v-text="item.artist"
|
||||
/>
|
||||
<p
|
||||
class="subtitle is-7"
|
||||
<div
|
||||
class="is-size-7"
|
||||
:class="{
|
||||
'has-text-primary': item.id === player.item_id,
|
||||
'has-text-grey-light': !is_next,
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<div class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
</div>
|
||||
<cover-artwork
|
||||
:url="item.artwork_url"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
|
||||
/>
|
||||
<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"
|
||||
@@ -23,50 +23,58 @@
|
||||
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 v-if="item.artist" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.album.artist')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<a @click="open_artist" v-text="item.artist" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.date_released" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.album.release-date')"
|
||||
/>
|
||||
<div class="title is-6" v-text="$filters.date(item.date_released)" />
|
||||
</div>
|
||||
<div v-else-if="item.year" class="mb-3">
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('dialog.album.year')" />
|
||||
<div class="title is-6" v-text="item.year" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.album.tracks')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.track_count" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.album.duration')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('dialog.album.type')" />
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="
|
||||
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.album.added-on')"
|
||||
/>
|
||||
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
||||
@@ -1,40 +1,39 @@
|
||||
<template>
|
||||
<base-modal :show="show" @close="$emit('close')">
|
||||
<template #content>
|
||||
<div class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
</div>
|
||||
<cover-artwork
|
||||
:url="artwork_url(item)"
|
||||
:artist="item.artist"
|
||||
:album="item.name"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image"
|
||||
class="fd-has-shadow fd-cover fd-cover-normal-image mb-3"
|
||||
@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 class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.album.album-artist')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<a @click="open_artist" v-text="item.artists[0].name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.album.release-date')"
|
||||
/>
|
||||
<div class="title is-6" v-text="$filters.date(item.release_date)" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.album.type')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.album_type" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
||||
@@ -1,29 +1,33 @@
|
||||
<template>
|
||||
<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 class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.artist.albums')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.album_count" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.artist.tracks')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.track_count" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('dialog.artist.type')" />
|
||||
<div class="title is-6" v-text="$t(`data.kind.${item.data_kind}`)" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.artist.added-on')"
|
||||
/>
|
||||
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
<template>
|
||||
<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 class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.artist.popularity')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="[item.popularity, item.followers.total].join(' / ')"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.artist.genres')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.genres.join(', ')" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
||||
@@ -1,32 +1,37 @@
|
||||
<template>
|
||||
<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"
|
||||
<div class="title is-4">
|
||||
<a @click="open_albums" v-text="item.name" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.composer.albums')"
|
||||
/>
|
||||
</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"
|
||||
<div class="title is-6">
|
||||
<a @click="open_albums" v-text="item.album_count" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.composer.tracks')"
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
<span class="heading" v-text="$t('dialog.composer.duration')" />
|
||||
<span
|
||||
<div class="title is-6">
|
||||
<a @click="open_tracks" v-text="item.track_count" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.composer.duration')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<a class="card-footer-item has-text-dark" @click="queue_add">
|
||||
|
||||
@@ -1,25 +1,32 @@
|
||||
<template>
|
||||
<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 class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.genre.albums')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.album_count" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.genre.tracks')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.track_count" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.genre.duration')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
||||
@@ -1,22 +1,29 @@
|
||||
<template>
|
||||
<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 class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.playlist.path')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.path" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.playlist.type')"
|
||||
/>
|
||||
<div class="title is-6" v-text="$t(`playlist.type.${item.type}`)" />
|
||||
</div>
|
||||
<div v-if="!item.folder" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.playlist.tracks')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.item_count" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="!item.folder" #footer>
|
||||
|
||||
@@ -1,22 +1,29 @@
|
||||
<template>
|
||||
<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 class="title is-4">
|
||||
<a @click="open" v-text="item.name" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.playlist.owner')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.owner.display_name" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.playlist.tracks')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.tracks.total" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.playlist.path')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.uri" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
||||
@@ -1,95 +1,117 @@
|
||||
<template>
|
||||
<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')" />
|
||||
<div class="title is-4" v-text="item.title" />
|
||||
<div class="subtitle" v-text="item.artist" />
|
||||
<div v-if="item.album" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.album')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<a @click="open_album" v-text="item.album" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.album_artist" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.album-artist')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<a @click="open_album_artist" v-text="item.album_artist" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.composer" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.composer')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.composer" />
|
||||
</div>
|
||||
<div v-if="item.year" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.year')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.year" />
|
||||
</div>
|
||||
<div v-if="item.genre" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.genre')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<a @click="open_genre" v-text="item.genre" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.disc_number" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.position')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.length_ms" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.duration')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.path')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.path" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.type')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
v-text="
|
||||
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
|
||||
"
|
||||
/>
|
||||
</p>
|
||||
<p v-if="item.length_ms">
|
||||
<span class="heading" v-text="$t('dialog.queue-item.duration')" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.samplerate" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.queue-item.quality')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<span v-text="item.type" />
|
||||
<span
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
v-if="item.samplerate"
|
||||
v-text="
|
||||
$t('dialog.queue-item.samplerate', {
|
||||
rate: item.samplerate
|
||||
})
|
||||
"
|
||||
/>
|
||||
</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>
|
||||
<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 })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
||||
@@ -17,118 +17,137 @@
|
||||
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')" />
|
||||
<div v-if="item.album" class="mb-3">
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.album')" />
|
||||
<div class="title is-6">
|
||||
<a @click="open_album" v-text="item.album" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.album_artist && item.media_kind !== 'audiobook'"
|
||||
class="mb-3"
|
||||
>
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.track.album-artist')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<a @click="open_album_artist" v-text="item.album_artist" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.composer" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.track.composer')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.composer" />
|
||||
</div>
|
||||
<div v-if="item.date_released" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.track.release-date')"
|
||||
/>
|
||||
<div class="title is-6" v-text="$filters.date(item.date_released)" />
|
||||
</div>
|
||||
<div v-else-if="item.year" class="mb-3">
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.year')" />
|
||||
<div class="title is-6" v-text="item.year" />
|
||||
</div>
|
||||
<div v-if="item.genre" class="mb-3">
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.genre')" />
|
||||
<div class="title is-6">
|
||||
<a @click="open_genre" v-text="item.genre" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.disc_number" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.track.position')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.length_ms" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.track.duration')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.length_ms)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.path')" />
|
||||
<div class="title is-6" v-text="item.path" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="is-size-7 is-uppercase" v-text="$t('dialog.track.type')" />
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="
|
||||
`${$t(`media.kind.${item.media_kind}`)} - ${$t(`data.kind.${item.data_kind}`)}`
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.samplerate" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.track.quality')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<span v-text="item.type" />
|
||||
<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-if="item.samplerate"
|
||||
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)
|
||||
$t('dialog.track.samplerate', {
|
||||
rate: item.samplerate
|
||||
})
|
||||
"
|
||||
/>
|
||||
</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>
|
||||
<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 })"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.track.added-on')"
|
||||
/>
|
||||
<div class="title is-6" v-text="$filters.datetime(item.time_added)" />
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.track.rating')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="
|
||||
$t('dialog.track.rating-value', {
|
||||
rating: Math.floor(item.rating / 10)
|
||||
})
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.comment" class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.track.comment')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.comment" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
||||
@@ -3,54 +3,60 @@
|
||||
<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 class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.track.album')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<a @click="open_album" v-text="item.album.name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.track.album-artist')"
|
||||
/>
|
||||
<div class="title is-6">
|
||||
<a @click="open_artist" v-text="item.artists[0].name" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.track.release-date')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="$filters.date(item.album.release_date)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.track.position')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="[item.disc_number, item.track_number].join(' / ')"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.track.duration')"
|
||||
/>
|
||||
<div
|
||||
class="title is-6"
|
||||
v-text="$filters.durationInHours(item.duration_ms)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="is-size-7 is-uppercase"
|
||||
v-text="$t('dialog.spotify.track.path')"
|
||||
/>
|
||||
<div class="title is-6" v-text="item.uri" />
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
||||
Reference in New Issue
Block a user