MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-11-07 04:42:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

#1458 Translation of Web UI

Browse Source
This commit is contained in:
Alain Nussbaumer
2022-05-20 13:44:22 +02:00
parent 2b38ebaa12
commit 167ba86211
104 changed files with 4863 additions and 3355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web-src/src/components/CoverArtwork.vue
View File

@@ -1,9 +1,6 @@
<template>
<figure>
<img
v-lazy="{ src: artwork_url_with_size, lifecycle: lazy_lifecycle }"
@click="$emit('click')"
/>
<img v-lazy="{ src: artwork_url_with_size, lifecycle: lazy_lifecycle }" @click="$emit('click')" />
</figure>
</template>

41
web-src/src/components/DropdownMenu.vue
View File

@@ -1,33 +1,14 @@
<template>
<div
v-click-away="onClickOutside"
class="dropdown"
:class="{ 'is-active': is_active }"
>
<div v-click-away="onClickOutside" class="dropdown" :class="{ 'is-active': is_active }">
<div class="dropdown-trigger">
<button
class="button"
aria-haspopup="true"
aria-controls="dropdown-menu"
@click="is_active = !is_active"
>
<span>{{ modelValue }}</span>
<span class="icon">
<mdicon name="chevron-down" size="16" />
</span>
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu" @click="is_active = !is_active">
<span v-text="option.name" />
<mdicon class="icon" name="chevron-down" size="16" />
</button>
</div>
<div id="dropdown-menu" class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a
v-for="option in options"
:key="option"
class="dropdown-item"
:class="{ 'is-active': modelValue === option }"
@click="select(option)"
>
{{ option }}
</a>
<a v-for="option in options" :key="option.id" class="dropdown-item" :class="{ 'is-active': modelValue === option.id }" @click="select(option)" v-text="option.name" />
</div>
</div>
</div>
@@ -36,8 +17,6 @@
<script>
export default {
name: 'DropdownMenu',
// eslint-disable-next-line vue/prop-name-casing
props: ['modelValue', 'options'],
emits: ['update:modelValue'],
@@ -47,6 +26,14 @@ export default {
}
},
computed: {
option: {
get() {
return this.options.find((option) => option.id === this.modelValue)
}
}
},
methods: {
onClickOutside(event) {
this.is_active = false
@@ -54,7 +41,7 @@ export default {
select(option) {
this.is_active = false
this.$emit('update:modelValue', option)
this.$emit('update:modelValue', option.id)
}
}
}

11
web-src/src/components/IndexButtonList.vue
View File

@@ -1,13 +1,7 @@
<template>
<section>
<nav class="buttons is-centered fd-is-square" style="margin-bottom: 16px">
<a
v-for="char in filtered_index"
:key="char"
class="button is-small"
@click="nav(char)"
>{{ char }}</a
>
<a v-for="char in filtered_index" :key="char" class="button is-small" @click="nav(char)" v-text="char" />
</nav>
</section>
</template>
@@ -15,9 +9,7 @@
<script>
export default {
name: 'IndexButtonList',
props: ['index'],
computed: {
filtered_index() {
if (!this.index) {
@@ -27,7 +19,6 @@ export default {
return this.index.filter((c) => !specialChars.includes(c))
}
},
methods: {
nav: function (id) {
this.$router.push({ hash: '#index_' + id })

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

@@ -1,75 +1,38 @@
<template>
<template v-for="album in albums" :key="album.itemId">
<div v-if="!album.isItem && !hide_group_title" class="mt-6 mb-5 py-2">
<span
:id="'index_' + album.groupKey"
class="tag is-info is-light is-small has-text-weight-bold"
>{{ album.groupKey }}</span
>
<span :id="'index_' + album.groupKey" class="tag is-info is-light is-small has-text-weight-bold" v-text="album.groupKey" />
</div>
<div v-else-if="album.isItem" class="media" @click="open_album(album.item)">
<div v-if="is_visible_artwork" class="media-left fd-has-action">
<div class="image is-64x64 fd-has-shadow fd-has-action">
<figure>
<img
v-lazy="{
src: artwork_url_with_size(album.item.artwork_url),
lifecycle: artwork_options.lazy_lifecycle
}"
:album="album.item.name"
:artist="album.item.artist"
/>
<img v-lazy="{ src: artwork_url_with_size(album.item.artwork_url), lifecycle: artwork_options.lazy_lifecycle }" :album="album.item.name" :artist="album.item.artist" />
</figure>
</div>
</div>
<div class="media-content fd-has-action is-clipped">
<div style="margin-top: 0.7rem">
<h1 class="title is-6">
{{ album.item.name }}
</h1>
<h1 class="title is-6" v-text="album.item.name" />
<h2 class="subtitle is-7 has-text-grey">
<b>{{ album.item.artist }}</b>
</h2>
<h2
v-if="album.item.date_released && album.item.media_kind === 'music'"
class="subtitle is-7 has-text-grey has-text-weight-normal"
>
{{ $filters.date(album.item.date_released) }}
<b v-text="album.item.artist" />
</h2>
<h2 v-if="album.item.date_released && album.item.media_kind === 'music'" class="subtitle is-7 has-text-grey has-text-weight-normal" v-text="$filters.date(album.item.date_released)" />
</div>
</div>
<div class="media-right" style="padding-top: 0.7rem">
<a @click.prevent.stop="open_dialog(album.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>
</template>
<teleport to="#app">
<modal-dialog-album
:show="show_details_modal"
:album="selected_album"
:media_kind="media_kind"
@remove-podcast="open_remove_podcast_dialog()"
@play-count-changed="play_count_changed()"
@close="show_details_modal = false"
/>
<modal-dialog
:show="show_remove_podcast_modal"
title="Remove podcast"
delete_action="Remove"
@close="show_remove_podcast_modal = false"
@delete="remove_podcast"
>
<modal-dialog-album :show="show_details_modal" :album="selected_album" :media_kind="media_kind" @remove-podcast="open_remove_podcast_dialog()" @play-count-changed="play_count_changed()" @close="show_details_modal = false" />
<modal-dialog :show="show_remove_podcast_modal" title="Remove podcast" delete_action="Remove" @close="show_remove_podcast_modal = false" @delete="remove_podcast">
<template #modal-content>
<p>Permanently remove this podcast from your library?</p>
<p class="is-size-7">
(This will also remove the RSS playlist
<b>{{ rss_playlist_to_remove.name }}</b
>.)
</p>
<p v-text="$t('list.albums.info-1')" />
<p class="is-size-7" v-html="$t('list.albums.info-2', { name: rss_playlist_to_remove.name })" />
</template>
</modal-dialog>
</teleport>
@@ -152,7 +115,7 @@ export default {
const rssPlaylists = data.items.filter((pl) => pl.type === 'rss')
if (rssPlaylists.length !== 1) {
this.$store.dispatch('add_notification', {
text: 'Podcast cannot be removed. Probably it was not added as an RSS playlist.',
text: this.$t('list.albums.notification'),
type: 'danger'
})
return

27
web-src/src/components/ListArtists.vue
View File

@@ -2,39 +2,22 @@
<template v-for="artist in artists" :key="artist.itemId">
<div v-if="!artist.isItem && !hide_group_title" class="mt-6 mb-5 py-2">
<div class="media-content is-clipped">
<span
:id="'index_' + artist.groupKey"
class="tag is-info is-light is-small has-text-weight-bold"
>{{ artist.groupKey }}</span
>
<span :id="'index_' + artist.groupKey" class="tag is-info is-light is-small has-text-weight-bold" v-text="artist.groupKey" />
</div>
</div>
<div
v-else-if="artist.isItem"
class="media"
@click="open_artist(artist.item)"
>
<div v-else-if="artist.isItem" class="media" @click="open_artist(artist.item)">
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">
{{ artist.item.name }}
</h1>
<h1 class="title is-6" v-text="artist.item.name" />
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(artist.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>
</template>
<teleport to="#app">
<modal-dialog-artist
:show="show_details_modal"
:artist="selected_artist"
:media_kind="media_kind"
@close="show_details_modal = false"
/>
<modal-dialog-artist :show="show_details_modal" :artist="selected_artist" :media_kind="media_kind" @close="show_details_modal = false" />
</teleport>
</template>

28
web-src/src/components/ListComposers.vue
View File

@@ -2,39 +2,22 @@
<template v-for="composer in composers" :key="composer.itemId">
<div v-if="!composer.isItem && !hide_group_title" class="mt-6 mb-5 py-2">
<div class="media-content is-clipped">
<span
:id="'index_' + composer.groupKey"
class="tag is-info is-light is-small has-text-weight-bold"
>{{ composer.groupKey }}</span
>
<span :id="'index_' + composer.groupKey" class="tag is-info is-light is-small has-text-weight-bold" v-text="composer.groupKey" />
</div>
</div>
<div
v-else-if="composer.isItem"
class="media"
@click="open_composer(composer.item)"
>
<div v-else-if="composer.isItem" class="media" @click="open_composer(composer.item)">
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">
{{ composer.item.name }}
</h1>
<h1 class="title is-6" v-text="composer.item.name" />
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(composer.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>
</template>
<teleport to="#app">
<modal-dialog-composer
:show="show_details_modal"
:composer="selected_composer"
:media_kind="media_kind"
@close="show_details_modal = false"
/>
<modal-dialog-composer :show="show_details_modal" :composer="selected_composer" :media_kind="media_kind" @close="show_details_modal = false" />
</teleport>
</template>
@@ -44,7 +27,6 @@ import ModalDialogComposer from '@/components/ModalDialogComposer.vue'
export default {
name: 'ListComposers',
components: { ModalDialogComposer },
props: ['composers', 'media_kind', 'hide_group_title'],
data() {

32
web-src/src/components/ListDirectories.vue
View File

@@ -1,13 +1,7 @@
<template>
<div
v-if="$route.query.directory"
class="media"
@click="open_parent_directory()"
>
<div v-if="$route.query.directory" class="media" @click="open_parent_directory()">
<figure class="media-left fd-has-action">
<span class="icon">
<mdicon name="subdirectory-arrow-left" size="16" />
</span>
<mdicon class="icon" name="subdirectory-arrow-left" size="16" />
</figure>
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">..</h1>
@@ -19,33 +13,21 @@
<template v-for="directory in directories" :key="directory.path">
<div class="media" @click="open_directory(directory)">
<figure class="media-left fd-has-action">
<span class="icon">
<mdicon name="folder" size="16" />
</span>
<mdicon class="icon" name="folder" size="16" />
</figure>
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">
{{ directory.path.substring(directory.path.lastIndexOf('/') + 1) }}
</h1>
<h2 class="subtitle is-7 has-text-grey-light">
{{ directory.path }}
</h2>
<h1 class="title is-6" v-text="directory.path.substring(directory.path.lastIndexOf('/') + 1)" />
<h2 class="subtitle is-7 has-text-grey-light" v-text="directory.path" />
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(directory)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>
</template>
<teleport to="#app">
<modal-dialog-directory
:show="show_details_modal"
:directory="selected_directory"
@close="show_details_modal = false"
/>
<modal-dialog-directory :show="show_details_modal" :directory="selected_directory" @close="show_details_modal = false" />
</teleport>
</template>

20
web-src/src/components/ListGenres.vue
View File

@@ -2,34 +2,22 @@
<template v-for="genre in genres" :key="genre.itemId">
<div v-if="!genre.isItem && !hide_group_title" class="mt-6 mb-5 py-2">
<div class="media-content is-clipped">
<span
:id="'index_' + genre.groupKey"
class="tag is-info is-light is-small has-text-weight-bold"
>{{ genre.groupKey }}</span
>
<span :id="'index_' + genre.groupKey" class="tag is-info is-light is-small has-text-weight-bold" v-text="genre.groupKey" />
</div>
</div>
<div v-else-if="genre.isItem" class="media" @click="open_genre(genre.item)">
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">
{{ genre.item.name }}
</h1>
<h1 class="title is-6" v-text="genre.item.name" />
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(genre.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>
</template>
<teleport to="#app">
<modal-dialog-genre
:show="show_details_modal"
:genre="selected_genre"
@close="show_details_modal = false"
/>
<modal-dialog-genre :show="show_details_modal" :genre="selected_genre" @close="show_details_modal = false" />
</teleport>
</template>

37
web-src/src/components/ListItemQueueItem.vue
View File

@@ -1,41 +1,14 @@
<template>
<div v-if="is_next || !show_only_next_items" class="media">
<div v-if="edit_mode" class="media-left">
<span class="icon has-text-grey fd-is-movable handle"
><mdicon name="drag-horizontal" size="16"
/></span>
<mdicon class="icon has-text-grey fd-is-movable handle" name="drag-horizontal" size="16" />
</div>
<div class="media-content fd-has-action is-clipped" @click="play">
<h1
class="title is-6"
:class="{
'has-text-primary': item.id === state.item_id,
'has-text-grey-light': !is_next
}"
>
{{ item.title }}
</h1>
<h2
class="subtitle is-7"
:class="{
'has-text-primary': item.id === state.item_id,
'has-text-grey-light': !is_next,
'has-text-grey': is_next && item.id !== state.item_id
}"
>
<b>{{ item.artist }}</b>
</h2>
<h2
class="subtitle is-7"
:class="{
'has-text-primary': item.id === state.item_id,
'has-text-grey-light': !is_next,
'has-text-grey': is_next && item.id !== state.item_id
}"
>
{{ item.album }}
<h1 class="title is-6" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next }" v-text="item.title" />
<h2 class="subtitle is-7" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next, 'has-text-grey': is_next && item.id !== state.item_id }">
<b v-text="item.artist" />
</h2>
<h2 class="subtitle is-7" :class="{ 'has-text-primary': item.id === state.item_id, 'has-text-grey-light': !is_next, 'has-text-grey': is_next && item.id !== state.item_id }" v-text="item.album" />
</div>
<div class="media-right">
<slot name="actions" />

26
web-src/src/components/ListPlaylists.vue
View File

@@ -1,35 +1,19 @@
<template>
<div
v-for="playlist in playlists"
:key="playlist.itemId"
class="media"
:playlist="playlist"
@click="open_playlist(playlist.item)"
>
<div v-for="playlist in playlists" :key="playlist.itemId" class="media" :playlist="playlist" @click="open_playlist(playlist.item)">
<figure class="media-left fd-has-action">
<span class="icon">
<mdicon :name="icon_name(playlist.item)" size="16" />
</span>
<mdicon class="icon" :name="icon_name(playlist.item)" size="16" />
</figure>
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">
{{ playlist.item.name }}
</h1>
<h1 class="title is-6" v-text="playlist.item.name" />
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(playlist.item)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>
<teleport to="#app">
<modal-dialog-playlist
:show="show_details_modal"
:playlist="selected_playlist"
@close="show_details_modal = false"
/>
<modal-dialog-playlist :show="show_details_modal" :playlist="selected_playlist" @close="show_details_modal = false" />
</teleport>
</template>

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

@@ -1,55 +1,22 @@
<template>
<div
v-for="(track, index) in tracks"
:id="'index_' + track.title_sort.charAt(0).toUpperCase()"
:key="track.id"
class="media"
:class="{ 'with-progress': show_progress }"
@click="play_track(index, track)"
>
<div v-for="(track, index) in tracks" :id="'index_' + track.title_sort.charAt(0).toUpperCase()" :key="track.id" class="media" :class="{ 'with-progress': show_progress }" @click="play_track(index, track)">
<figure v-if="show_icon" class="media-left fd-has-action">
<span class="icon">
<mdicon name="file-outline" size="16" />
</span>
<mdicon class="icon" name="file-outline" size="16" />
</figure>
<div class="media-content fd-has-action is-clipped">
<h1
class="title is-6"
:class="{
'has-text-grey':
track.media_kind === 'podcast' && track.play_count > 0
}"
>
{{ track.title }}
</h1>
<h2 class="subtitle is-7 has-text-grey">
<b>{{ track.artist }}</b>
</h2>
<h2 class="subtitle is-7 has-text-grey">
{{ track.album }}
</h2>
<progress-bar
v-if="show_progress"
:max="track.length_ms"
:value="track.seek_ms"
/>
<h1 class="title is-6" :class="{ 'has-text-grey': track.media_kind === 'podcast' && track.play_count > 0 }" v-text="track.title" />
<h2 class="subtitle is-7 has-text-grey" v-text="track.artist" />
<h2 class="subtitle is-7 has-text-grey" v-text="track.album" />
<progress-bar v-if="show_progress" :max="track.length_ms" :value="track.seek_ms" />
</div>
<div class="media-right">
<a @click.prevent.stop="open_dialog(track)">
<span class="icon has-text-dark"
><mdicon name="dots-vertical" size="16"
/></span>
<mdicon class="icon has-text-dark" name="dots-vertical" size="16" />
</a>
</div>
</div>
<teleport to="#app">
<modal-dialog-track
:show="show_details_modal"
:track="selected_track"
@close="show_details_modal = false"
@play-count-changed="$emit('play-count-changed')"
/>
<modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" @play-count-changed="$emit('play-count-changed')" />
</teleport>
</template>

36
web-src/src/components/ModalDialog.vue
View File

@@ -6,42 +6,26 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p v-if="title" class="title is-4">
{{ title }}
</p>
<p v-if="title" class="title is-4" v-text="title" />
<slot name="modal-content" />
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">{{
close_action ? close_action : 'Cancel'
}}</span>
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="close_action ? close_action : t('dialog.cancel')" />
</a>
<a
v-if="delete_action"
class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
@click="$emit('delete')"
>
<span class="icon"><mdicon name="delete" size="16" /></span>
<span class="is-size-7">{{ delete_action }}</span>
<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')"
>
<span class="icon"><mdicon name="check" size="16" /></span>
<span class="is-size-7">{{ ok_action }}</span>
<a v-if="ok_action" class="card-footer-item has-background-info has-text-white has-text-weight-bold" @click="$emit('ok')">
<mdicon class="icon" name="check" size="16" />
<span class="is-size-7" v-text="ok_action" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -6,60 +6,36 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4">Add Podcast RSS feed URL</p>
<p class="title is-4" v-text="$t('dialog.add.rss.title')" />
<form @submit.prevent="add_stream">
<div class="field">
<p class="control is-expanded has-icons-left">
<input
ref="url_field"
v-model="url"
class="input is-shadowless"
type="text"
placeholder="http://url-to-rss"
:disabled="loading"
/>
<span class="icon is-left">
<mdicon name="rss" size="16" />
</span>
</p>
<p class="help">
Adding a podcast includes creating an RSS playlist, that
will allow OwnTone to manage the podcast subscription.
<input ref="url_field" v-model="url" class="input is-shadowless" type="text" :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>
</form>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item button is-loading">
<span class="icon"><mdicon name="web" size="16" /></span>
<span class="is-size-7">Processing ...</span>
<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">
<a
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">Cancel</span>
<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.add.rss.cancel')" />
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="add_stream"
>
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -6,60 +6,39 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4">Add stream URL</p>
<p class="title is-4" v-text="$t('dialog.add.stream.title')" />
<form class="fd-has-margin-bottom" @submit.prevent="play">
<div class="field">
<p class="control is-expanded has-icons-left">
<input
ref="url_field"
v-model="url"
class="input is-shadowless"
type="text"
placeholder="http://url-to-stream"
:disabled="loading"
/>
<span class="icon is-left">
<mdicon name="web" size="16" />
</span>
<input ref="url_field" v-model="url" class="input is-shadowless" type="text" :placeholder="$t('dialog.add.stream.placeholder')" :disabled="loading" />
<mdicon class="icon is-left" name="web" size="16" />
</p>
</div>
</form>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<span class="icon"><mdicon name="web" size="16" /></span>
<span class="is-size-7">Loading ...</span>
<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">
<a
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">Cancel</span>
<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.add.stream.cancel')" />
</a>
<a class="card-footer-item has-text-dark" @click="add_stream">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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"
>
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<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>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -6,91 +6,62 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<cover-artwork
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
class="image is-square fd-has-margin-bottom fd-has-shadow"
/>
<cover-artwork :artwork_url="album.artwork_url" :artist="album.artist" :album="album.name" class="image is-square fd-has-margin-bottom fd-has-shadow" />
<p class="title is-4">
<a class="has-text-link" @click="open_album">{{
album.name
}}</a>
<a class="has-text-link" @click="open_album" v-text="album.name" />
</p>
<div v-if="media_kind_resolved === 'podcast'" class="buttons">
<a class="button is-small" @click="mark_played"
>Mark as played</a
>
<a class="button is-small" @click="$emit('remove-podcast')"
>Remove podcast</a
>
<a class="button is-small" @click="mark_played" v-text="$t('dialog.album.mark-as-played')" />
<a 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">Album artist</span>
<a class="title is-6 has-text-link" @click="open_artist">{{
album.artist
}}</a>
<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">Release date</span>
<span class="title is-6">{{
$filters.date(album.date_released)
}}</span>
<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">Year</span>
<span class="title is-6">{{ album.year }}</span>
<span class="heading" v-text="$t('dialog.album.year')" />
<span class="title is-6" v-text="album.year" />
</p>
<p>
<span class="heading">Tracks</span>
<span class="title is-6">{{ album.track_count }}</span>
<span class="heading" v-text="$t('dialog.album.tracks')" />
<span class="title is-6" v-text="album.track_count" />
</p>
<p>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.durationInHours(album.length_ms)
}}</span>
<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">Type</span>
<span class="title is-6"
>{{ album.media_kind }} - {{ album.data_kind }}</span
>
<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">Added at</span>
<span class="title is-6">{{
$filters.datetime(album.time_added)
}}</span>
<span class="heading" v-text="$t('dialog.album.added-on')" />
<span class="title is-6" v-text="$filters.datetime(album.time_added)" />
</p>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.album.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -7,56 +7,44 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_artist">{{
artist.name
}}</a>
<a class="has-text-link" @click="open_artist" v-text="artist.name" />
</p>
<div class="content is-small">
<p>
<span class="heading">Albums</span>
<span class="title is-6">{{ artist.album_count }}</span>
<span class="heading" v-text="$t('dialog.artist.albums')" />
<span class="title is-6" v-text="artist.album_count" />
</p>
<p>
<span class="heading">Tracks</span>
<span class="title is-6">{{ artist.track_count }}</span>
<span class="heading" v-text="$t('dialog.artist.tracks')" />
<span class="title is-6" v-text="artist.track_count" />
</p>
<p>
<span class="heading">Type</span>
<span class="title is-6">{{ artist.data_kind }}</span>
<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">Added at</span>
<span class="title is-6">{{
$filters.datetime(artist.time_added)
}}</span>
<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">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.artist.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -7,54 +7,38 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_albums">{{
composer.name
}}</a>
<a class="has-text-link" @click="open_albums" v-text="composer.name" />
</p>
<p>
<span class="heading">Albums</span>
<a class="has-text-link is-6" @click="open_albums">{{
composer.album_count
}}</a>
<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">Tracks</span>
<a class="has-text-link is-6" @click="open_tracks">{{
composer.track_count
}}</a>
<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">Length</span>
<span class="title is-6">{{
$filters.durationInHours(composer.length_ms)
}}</span>
<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">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.composer.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -6,35 +6,25 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4">
{{ directory.path }}
</p>
<p class="title is-4" v-text="directory.path" />
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.directory.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -7,52 +7,40 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_genre">{{
genre.name
}}</a>
<a class="has-text-link" @click="open_genre" v-text="genre.name" />
</p>
<div class="content is-small">
<p>
<span class="heading">Albums</span>
<span class="title is-6">{{ genre.album_count }}</span>
<span class="heading" v-text="$t('dialog.genre.albums')" />
<span class="title is-6" v-text="genre.album_count" />
</p>
<p>
<span class="heading">Tracks</span>
<span class="title is-6">{{ genre.track_count }}</span>
<span class="heading" v-text="$t('dialog.genre.tracks')" />
<span class="title is-6" v-text="genre.track_count" />
</p>
<p>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.durationInHours(genre.length_ms)
}}</span>
<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">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.genre.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -7,50 +7,40 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_playlist">{{
playlist.name
}}</a>
<a class="has-text-link" @click="open_playlist" v-text="playlist.name" />
</p>
<div class="content is-small">
<p>
<span class="heading">Path</span>
<span class="title is-6">{{ playlist.path }}</span>
<span class="title is-6" v-text="playlist.path" />
</p>
<p>
<span class="heading">Type</span>
<span class="title is-6">{{ playlist.type }}</span>
<span class="heading" v-text="$t('dialog.playlist.type')" />
<span class="title is-6" v-text="playlist.type" />
</p>
<p v-if="!playlist.folder">
<span class="heading">Track count</span>
<span class="title is-6">{{ playlist.item_count }}</span>
<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">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -6,56 +6,35 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4">Save queue to playlist</p>
<p class="title is-4" v-text="$t('dialog.playlist.save.title')" />
<form class="fd-has-margin-bottom" @submit.prevent="save">
<div class="field">
<p class="control is-expanded has-icons-left">
<input
ref="playlist_name_field"
v-model="playlist_name"
class="input is-shadowless"
type="text"
placeholder="Playlist name"
:disabled="loading"
/>
<span class="icon is-left">
<mdicon name="file-music" size="16" />
</span>
<input ref="playlist_name_field" v-model="playlist_name" class="input is-shadowless" type="text" placeholder="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">
<span class="icon"><mdicon name="web" size="16" /></span>
<span class="is-size-7">Saving ...</span>
<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">
<a
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">Cancel</span>
<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"
>
<span class="icon"
><mdicon name="content-save" size="16"
/></span>
<span class="is-size-7">Save</span>
<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>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -6,107 +6,77 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4">
{{ item.title }}
</p>
<p class="subtitle">
{{ item.artist }}
</p>
<p class="title is-4" v-text="item.title" />
<p class="subtitle" v-text="item.artist" />
<div class="content is-small">
<p>
<span class="heading">Album</span>
<a
v-if="item.album_id"
class="title is-6 has-text-link"
@click="open_album"
>{{ item.album }}</a
>
<span v-else class="title is-6">{{ item.album }}</span>
<span class="heading" v-text="$t('dialog.queue-item.album')" />
<a v-if="item.album_id" class="title is-6 has-text-link" @click="open_album" v-text="item.album" />
<span v-else class="title is-6" v-text="item.album" />
</p>
<p v-if="item.album_artist">
<span class="heading">Album artist</span>
<a
v-if="item.album_artist_id"
class="title is-6 has-text-link"
@click="open_album_artist"
>{{ item.album_artist }}</a
>
<span v-else class="title is-6">{{ item.album_artist }}</span>
<span class="heading" v-text="$t('dialog.queue-item.album-artist')" />
<a v-if="item.album_artist_id" class="title is-6 has-text-link" @click="open_album_artist" v-text="item.album_artist" />
<span v-else class="title is-6" v-text="item.album_artist" />
</p>
<p v-if="item.composer">
<span class="heading">Composer</span>
<span class="title is-6">{{ item.composer }}</span>
<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 > 0">
<span class="heading">Year</span>
<span class="title is-6">{{ item.year }}</span>
<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">Genre</span>
<a class="title is-6 has-text-link" @click="open_genre">{{
item.genre
}}</a>
<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>
<span class="heading">Track / Disc</span>
<span class="title is-6"
>{{ item.track_number }} / {{ item.disc_number }}</span
>
<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>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.durationInHours(item.length_ms)
}}</span>
<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">Path</span>
<span class="title is-6">{{ item.path }}</span>
<span class="heading" v-text="$t('dialog.queue-item.path')" />
<span class="title is-6" v-text="item.path" />
</p>
<p>
<span class="heading">Type</span>
<span class="title is-6"
>{{ item.media_kind }} - {{ item.data_kind }}
<span
v-if="item.data_kind === 'spotify'"
class="has-text-weight-normal"
>(<a @click="open_spotify_artist">artist</a>,
<a @click="open_spotify_album">album</a>)</span
></span
>
</p>
<p>
<span class="heading">Quality</span>
<span class="heading" v-text="$t('dialog.queue-item.type')" />
<span class="title is-6">
{{ item.type }}
<span v-if="item.samplerate">
| {{ item.samplerate }} Hz</span
>
<span v-if="item.channels">
| {{ $filters.channels(item.channels) }}</span
>
<span v-if="item.bitrate"> | {{ item.bitrate }} Kb/s</span>
<span v-text="[item.media_kind, item.data_kind].join(' - ')" />
<span v-if="item.data_kind === 'spotify'" class="has-text-weight-normal">
(<a @click="open_spotify_artist" v-text="$t('dialog.queue-item.spotify-artist')" />,
<a @click="open_spotify_album" v-text="$t('dialog.queue-item.spotify-album')" />)
</span>
</span>
</p>
<p>
<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">
<span class="icon"><mdicon name="delete" size="16" /></span>
<span class="is-size-7">Remove</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.queue-item.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -6,47 +6,29 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4">Remote pairing request</p>
<p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
<form @submit.prevent="kickoff_pairing">
<label class="label">
{{ pairing.remote }}
</label>
<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"
placeholder="Enter pairing code"
/>
<input ref="pin_field" v-model="pairing_req.pin" class="input" type="text" placeholder="Enter pairing code" />
</div>
</div>
</form>
</div>
<footer class="card-footer">
<a
class="card-footer-item has-text-danger"
@click="$emit('close')"
>
<span class="icon"><mdicon name="cancel" size="16" /></span>
<span class="is-size-7">Cancel</span>
<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"
>
<span class="icon"><mdicon name="cellphone" size="16" /></span>
<span class="is-size-7">Pair Remote</span>
<a class="card-footer-item has-background-info has-text-white has-text-weight-bold" @click="kickoff_pairing">
<mdicon class="icon" name="cellphone" size="16" />
<span class="is-size-7" v-text="$t('dialog.remote-pairing.pair')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -6,147 +6,99 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4">
{{ track.title }}
</p>
<p class="subtitle">
{{ track.artist }}
</p>
<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"
>Mark as new</a
>
<a
v-if="track.play_count === 0"
class="button is-small"
@click="mark_played"
>Mark as played</a
>
<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>
<span class="heading">Album</span>
<a class="title is-6 has-text-link" @click="open_album">{{
track.album
}}</a>
<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'"
>
<span class="heading">Album artist</span>
<a class="title is-6 has-text-link" @click="open_artist">{{
track.album_artist
}}</a>
<p v-if="track.album_artist && track.media_kind !== 'audiobook'">
<span class="heading" v-text="$t('dialog.track.album-artist')" />
<a class="title is-6 has-text-link" @click="open_artist" v-text="track.album_artist" />
</p>
<p v-if="track.composer">
<span class="heading">Composer</span>
<span class="title is-6">{{ track.composer }}</span>
<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">Release date</span>
<span class="title is-6">{{
$filters.date(track.date_released)
}}</span>
<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 > 0">
<span class="heading">Year</span>
<span class="title is-6">{{ track.year }}</span>
<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">Genre</span>
<a class="title is-6 has-text-link" @click="open_genre">{{
track.genre
}}</a>
<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>
<span class="heading">Track / Disc</span>
<span class="title is-6"
>{{ track.track_number }} / {{ track.disc_number }}</span
>
<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>
<span class="heading">Length</span>
<span class="title is-6">{{
$filters.durationInHours(track.length_ms)
}}</span>
<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">Path</span>
<span class="title is-6">{{ track.path }}</span>
<span class="heading" v-text="$t('dialog.track.path')" />
<span class="title is-6" v-text="track.path" />
</p>
<p>
<span class="heading">Type</span>
<span class="title is-6"
>{{ track.media_kind }} - {{ track.data_kind }}
<span
v-if="track.data_kind === 'spotify'"
class="has-text-weight-normal"
>(<a @click="open_spotify_artist">artist</a>,
<a @click="open_spotify_album">album</a>)</span
></span
>
</p>
<p>
<span class="heading">Quality</span>
<span class="heading" v-text="$t('dialog.track.type')" />
<span class="title is-6">
{{ track.type }}
<span v-if="track.samplerate">
| {{ track.samplerate }} Hz</span
>
<span v-if="track.channels">
| {{ $filters.channels(track.channels) }}</span
>
<span v-if="track.bitrate">
| {{ track.bitrate }} Kb/s</span
>
<span v-text="[track.media_kind, track.data_kind].join(' - ')" />
<span v-if="track.data_kind === 'spotify'" class="has-text-weight-normal">
(<a @click="open_spotify_artist" v-text="$t('dialog.track.spotify-artist')" />,
<a @click="open_spotify_album" v-text="$t('dialog.track.spotify-album')" />)
</span>
</span>
</p>
<p>
<span class="heading">Added at</span>
<span class="title is-6">{{
$filters.datetime(track.time_added)
}}</span>
<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">Rating</span>
<span class="title is-6"
>{{ Math.floor(track.rating / 10) }} / 10</span
>
<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">Comment</span>
<span class="title is-6">{{ track.comment }}</span>
<span class="heading" v-text="$t('dialog.track.comment')" />
<span class="title is-6" v-text="track.comment" />
</p>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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_track">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.track.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

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

@@ -1,40 +1,29 @@
<template>
<modal-dialog
:show="show"
title="Update library"
:ok_action="library.updating ? '' : 'Rescan'"
close_action="Close"
@ok="update_library"
@close="close()"
>
<modal-dialog :show="show" :title="$t('dialog.update.title')" :ok_action="library.updating ? '' : $t('dialog.update.rescan')" :close_action="$t('dialog.update.cancel')" @ok="update_library" @close="close()">
<template #modal-content>
<div v-if="!library.updating">
<p class="mb-3">Scan for new, deleted and modified files</p>
<p class="mb-3" v-text="$t('dialog.update.info')" />
<div v-if="spotify_enabled || rss.tracks > 0" class="field">
<div class="control">
<div class="select is-small">
<select v-model="update_dialog_scan_kind">
<option value="">Update everything</option>
<option value="files">Only update local library</option>
<option v-if="spotify_enabled" value="spotify">
Only update Spotify
</option>
<option v-if="rss.tracks > 0" value="rss">
Only update RSS feeds
</option>
<option value="" v-text="$t('dialog.update.all')" />
<option value="files" v-text="$t('dialog.update.local')" />
<option v-if="spotify_enabled" value="spotify" v-text="$t('dialog.update.spotify')" />
<option v-if="rss.tracks > 0" value="rss" v-text="$t('dialog.update.feeds')" />
</select>
</div>
</div>
</div>
<div class="field">
<label class="checkbox is-size-7 is-small">
<input v-model="rescan_metadata" type="checkbox" />
Rescan metadata for unmodified files
<input v-model="rescan_metadata" type="checkbox" style="margin-right: 5px" />
<span v-text="$t('dialog.update.rescan-metadata')" />
</label>
</div>
</div>
<div v-else>
<p class="mb-3">Library update in progress ...</p>
<p class="mb-3" v-text="$t('dialog.update.progress')" />
</div>
</template>
</modal-dialog>

286
web-src/src/components/NavbarBottom.vue
View File

@@ -1,208 +1,86 @@
<template>
<nav
class="fd-bottom-navbar navbar is-white is-fixed-bottom"
:style="zindex"
:class="{
'is-transparent': is_now_playing_page,
'is-dark': !is_now_playing_page
}"
role="navigation"
aria-label="player controls"
>
<nav class="fd-bottom-navbar navbar is-white is-fixed-bottom" :style="zindex" :class="{ 'is-transparent': is_now_playing_page, 'is-dark': !is_now_playing_page }" role="navigation" aria-label="player controls">
<div class="navbar-brand fd-expanded">
<!-- Link to queue -->
<navbar-item-link to="/" exact>
<span class="icon"><mdicon name="playlist-play" size="24" /></span>
<mdicon class="icon" name="playlist-play" size="24" />
</navbar-item-link>
<!-- Now playing artist/title (not visible on "now playing" page) -->
<router-link
v-if="!is_now_playing_page"
to="/now-playing"
class="navbar-item is-expanded is-clipped"
active-class="is-active"
exact
>
<router-link v-if="!is_now_playing_page" to="/now-playing" class="navbar-item is-expanded is-clipped" active-class="is-active" exact>
<div class="is-clipped">
<p class="is-size-7 fd-is-text-clipped">
<strong>{{ now_playing.title }}</strong
><br />
{{ now_playing.artist
}}<span v-if="now_playing.data_kind === 'url'">
- {{ now_playing.album }}</span
>
<strong v-text="now_playing.title" />
<br />
<span v-text="now_playing.artist" />
<span v-if="now_playing.data_kind === 'url'" v-text="$t('navigation.now-playing', { album: now_playing.album })" />
</p>
</div>
</router-link>
<!-- Skip previous (not visible on "now playing" page) -->
<player-button-previous
v-if="is_now_playing_page"
class="navbar-item fd-margin-left-auto"
:icon_size="24"
/>
<player-button-seek-back
v-if="is_now_playing_page"
:seek_ms="10000"
class="navbar-item"
:icon_size="24"
/>
<player-button-previous v-if="is_now_playing_page" class="navbar-item fd-margin-left-auto" :icon_size="24" />
<player-button-seek-back v-if="is_now_playing_page" :seek_ms="10000" class="navbar-item" :icon_size="24" />
<!-- Play/pause -->
<player-button-play-pause
class="navbar-item"
:icon_size="36"
show_disabled_message
/>
<player-button-seek-forward
v-if="is_now_playing_page"
:seek_ms="30000"
class="navbar-item"
:icon_size="24"
/>
<player-button-play-pause class="navbar-item" :icon_size="36" show_disabled_message />
<player-button-seek-forward v-if="is_now_playing_page" :seek_ms="30000" class="navbar-item" :icon_size="24" />
<!-- Skip next (not visible on "now playing" page) -->
<player-button-next
v-if="is_now_playing_page"
class="navbar-item"
:icon_size="24"
/>
<player-button-next v-if="is_now_playing_page" class="navbar-item" :icon_size="24" />
<!-- Player menu button (only visible on mobile and tablet) -->
<a
class="navbar-item fd-margin-left-auto is-hidden-desktop"
@click="show_player_menu = !show_player_menu"
>
<span class="icon"
><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/></span>
<a class="navbar-item fd-margin-left-auto is-hidden-desktop" @click="show_player_menu = !show_player_menu">
<mdicon class="icon" :name="show_player_menu ? 'chevron-down' : 'chevron-up'" size="18" />
</a>
<!-- Player menu dropup menu (only visible on desktop) -->
<div
class="navbar-item has-dropdown has-dropdown-up fd-margin-left-auto is-hidden-touch"
:class="{ 'is-active': show_player_menu }"
>
<a
class="navbar-link is-arrowless"
@click="show_player_menu = !show_player_menu"
>
<span class="icon"
><mdicon
:name="show_player_menu ? 'chevron-down' : 'chevron-up'"
size="18"
/></span>
<div class="navbar-item has-dropdown has-dropdown-up fd-margin-left-auto is-hidden-touch" :class="{ 'is-active': show_player_menu }">
<a class="navbar-link is-arrowless" @click="show_player_menu = !show_player_menu">
<mdicon class="icon" :name="show_player_menu ? 'chevron-down' : 'chevron-up'" size="18" />
</a>
<div
class="navbar-dropdown is-right is-boxed"
style="margin-right: 6px; margin-bottom: 6px; border-radius: 6px"
>
<div class="navbar-dropdown is-right is-boxed" style="margin-right: 6px; margin-bottom: 6px; border-radius: 6px">
<div class="navbar-item">
<!-- Outputs: master volume -->
<div class="level is-mobile">
<div class="level-left fd-expanded">
<div class="level-item" style="flex-grow: 0">
<a
class="button is-white is-small"
@click="toggle_mute_volume"
>
<span class="icon"
><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/></span>
<a class="button is-white is-small" @click="toggle_mute_volume">
<mdicon class="icon" :name="player.volume > 0 ? 'volume-high' : 'volume-off'" size="18" />
</a>
</div>
<div class="level-item fd-expanded">
<div class="fd-expanded">
<p class="heading">Volume</p>
<Slider
v-model="player.volume"
:min="0"
:max="100"
:step="1"
:tooltips="false"
:classes="{ target: 'slider' }"
@change="set_volume"
/>
<!--range-slider
class="slider fd-has-action"
min="0"
max="100"
step="1"
:value="player.volume"
@change="set_volume">
</range-slider-->
<p class="heading" v-text="$t('navigation.volume')" />
<Slider v-model="player.volume" :min="0" :max="100" :step="1" :tooltips="false" :classes="{ target: 'slider' }" @change="set_volume" />
</div>
</div>
</div>
</div>
</div>
<!-- Outputs: master volume -->
<hr class="fd-navbar-divider" />
<navbar-item-output
v-for="output in outputs"
:key="output.id"
:output="output"
/>
<navbar-item-output v-for="output in outputs" :key="output.id" :output="output" />
<!-- Outputs: stream volume -->
<hr class="fd-navbar-divider" />
<div class="navbar-item">
<div class="level is-mobile">
<div class="level-left fd-expanded">
<div class="level-item" style="flex-grow: 0">
<a
class="button is-white is-small"
:class="{ 'is-loading': loading }"
><span
class="icon fd-has-action"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading
}"
@click="togglePlay"
><mdicon name="radio-tower" size="18" /></span
></a>
<a class="button is-white is-small" :class="{ 'is-loading': loading }">
<span class="icon fd-has-action" :class="{ 'has-text-grey-light': !playing && !loading, 'is-loading': loading }" @click="togglePlay">
<mdicon name="broadcast" size="18" />
</span>
</a>
</div>
<div class="level-item fd-expanded">
<div class="fd-expanded">
<p
class="heading"
:class="{ 'has-text-grey-light': !playing }"
>
HTTP stream
<a href="stream.mp3"
><span class="is-lowercase">(stream.mp3)</span></a
>
<p class="heading" :class="{ 'has-text-grey-light': !playing }">
<span v-text="$t('navigation.stream')" />
<a href="stream.mp3" style="margin-left: 5px" target="_blank">
<mdicon class="icon" name="open-in-new" size="16" style="vertical-align: middle" />
</a>
</p>
<Slider
v-model="stream_volume"
:min="0"
:max="100"
:step="1"
:tooltips="false"
:disabled="!playing"
:classes="{ target: 'slider' }"
@change="set_stream_volume"
/>
<!--range-slider
class="slider fd-has-action"
min="0"
max="100"
step="1"
:disabled="!playing"
:value="stream_volume"
@change="set_stream_volume">
</range-slider-->
<Slider v-model="stream_volume" :min="0" :max="100" :step="1" :tooltips="false" :disabled="!playing" :classes="{ target: 'slider' }" @change="set_stream_volume" />
</div>
</div>
</div>
</div>
</div>
<!-- Playback controls -->
<hr class="fd-navbar-divider" />
<div class="navbar-item">
@@ -219,12 +97,8 @@
</div>
</div>
</div>
<!-- Player menu (only visible on mobile and tablet) -->
<div
class="navbar-menu is-hidden-desktop"
:class="{ 'is-active': show_player_menu }"
>
<div class="navbar-menu is-hidden-desktop" :class="{ 'is-active': show_player_menu }">
<div class="navbar-start" />
<div class="navbar-end">
<!-- Repeat/shuffle/consume -->
@@ -235,106 +109,48 @@
<player-button-consume class="button" :icon_size="18" />
</div>
</div>
<hr class="fd-navbar-divider" />
<!-- Outputs: master volume -->
<div class="navbar-item">
<div class="level is-mobile">
<div class="level-left fd-expanded">
<div class="level-item" style="flex-grow: 0">
<a class="button is-white is-small" @click="toggle_mute_volume">
<span class="icon"
><mdicon
:name="player.volume > 0 ? 'volume-high' : 'volume-off'"
size="18"
/></span>
<mdicon class="icon" :name="player.volume > 0 ? 'volume-high' : 'volume-off'" size="18" />
</a>
</div>
<div class="level-item fd-expanded">
<div class="fd-expanded">
<p class="heading">Volume</p>
<Slider
v-model="player.volume"
:min="0"
:max="100"
:step="1"
:tooltips="false"
:classes="{ target: 'slider' }"
@change="set_volume"
/>
<!--range-slider
class="slider fd-has-action"
min="0"
max="100"
step="1"
:value="player.volume"
@change="set_volume">
</range-slider-->
<p class="heading" v-text="$t('navigation.volume')" />
<Slider v-model="player.volume" :min="0" :max="100" :step="1" :tooltips="false" :classes="{ target: 'slider' }" @change="set_volume" />
</div>
</div>
</div>
</div>
</div>
<!-- Outputs: speaker volumes -->
<navbar-item-output
v-for="output in outputs"
:key="output.id"
:output="output"
/>
<navbar-item-output v-for="output in outputs" :key="output.id" :output="output" />
<!-- Outputs: stream volume -->
<hr class="fd-navbar-divider" />
<div class="navbar-item fd-has-margin-bottom">
<div class="level is-mobile">
<div class="level-left fd-expanded">
<div class="level-item" style="flex-grow: 0">
<a
class="button is-white is-small"
:class="{ 'is-loading': loading }"
>
<span
class="icon fd-has-action"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading
}"
@click="togglePlay"
><mdicon name="radio-tower" size="16" />
<a class="button is-white is-small" :class="{ 'is-loading': loading }">
<span class="icon fd-has-action" :class="{ 'has-text-grey-light': !playing && !loading, 'is-loading': loading }" @click="togglePlay">
<mdicon name="broadcast" size="16" />
</span>
</a>
</div>
<div class="level-item fd-expanded">
<div class="fd-expanded">
<p
class="heading"
:class="{ 'has-text-grey-light': !playing }"
>
HTTP stream
<a href="stream.mp3"
><span class="is-lowercase">(stream.mp3)</span></a
>
<p class="heading" :class="{ 'has-text-grey-light': !playing }">
<span v-text="$t('navigation.stream')" />
<a href="stream.mp3" style="margin-left: 5px" target="_blank">
<mdicon class="icon" name="open-in-new" size="16" style="vertical-align: middle" />
</a>
</p>
<Slider
v-model="stream_volume"
:min="0"
:max="100"
:step="1"
:tooltips="false"
:disabled="!playing"
:classes="{ target: 'slider' }"
@change="set_stream_volume"
/>
<!-- range-slider
class="slider fd-has-action"
min="0"
max="100"
step="1"
:disabled="!playing"
:value="stream_volume"
@change="set_stream_volume">
</range-slider-->
<Slider v-model="stream_volume" :min="0" :max="100" :step="1" :tooltips="false" :disabled="!playing" :classes="{ target: 'slider' }" @change="set_stream_volume" />
</div>
</div>
</div>
@@ -358,7 +174,6 @@ import PlayerButtonConsume from '@/components/PlayerButtonConsume.vue'
import PlayerButtonRepeat from '@/components/PlayerButtonRepeat.vue'
import PlayerButtonSeekBack from '@/components/PlayerButtonSeekBack.vue'
import PlayerButtonSeekForward from '@/components/PlayerButtonSeekForward.vue'
//import RangeSlider from 'vue-range-slider'
import Slider from '@vueform/slider'
import * as types from '@/store/mutation_types'
@@ -367,7 +182,6 @@ export default {
components: {
NavbarItemLink,
NavbarItemOutput,
//RangeSlider,
Slider,
PlayerButtonPlayPause,
PlayerButtonNext,
@@ -382,11 +196,9 @@ export default {
data() {
return {
old_volume: 0,
playing: false,
loading: false,
stream_volume: 10,
show_outputs_menu: false,
show_desktop_outputs_menu: false
}
@@ -488,7 +300,7 @@ export default {
a.addEventListener('error', (e) => {
this.closeAudio()
this.$store.dispatch('add_notification', {
text: 'HTTP stream error: failed to load stream or stopped loading due to network problem',
text: this.$t('navigation.stream-error'),
type: 'danger'
})
this.playing = false

7
web-src/src/components/NavbarItemLink.vue
View File

@@ -1,10 +1,5 @@
<template>
<a
class="navbar-item"
:class="{ 'is-active': is_active }"
:href="full_path()"
@click.stop.prevent="open_link()"
>
<a class="navbar-item" :class="{ 'is-active': is_active }" :href="full_path()" @click.stop.prevent="open_link()">
<slot />
</a>
</template>

35
web-src/src/components/NavbarItemOutput.vue
View File

@@ -4,42 +4,15 @@
<div class="level-left fd-expanded">
<div class="level-item" style="flex-grow: 0">
<a class="button is-white is-small">
<span
class="icon fd-has-action"
:class="{ 'has-text-grey-light': !output.selected }"
@click="set_enabled"
>
<span class="icon fd-has-action" :class="{ 'has-text-grey-light': !output.selected }" @click="set_enabled">
<mdicon :name="type_class" size="18" :title="output.type" />
</span>
</a>
</div>
<div class="level-item fd-expanded">
<div class="fd-expanded">
<p
class="heading"
:class="{ 'has-text-grey-light': !output.selected }"
>
{{ output.name }}
</p>
<Slider
v-model="volume"
:min="0"
:max="100"
:step="1"
:tooltips="false"
:disabled="!output.selected"
:classes="{ target: 'slider' }"
@change="set_volume"
/>
<!--range-slider
class="slider fd-has-action"
min="0"
max="100"
step="1"
:disabled="!output.selected"
:value="volume"
@change="set_volume" >
</range-slider-->
<p class="heading" :class="{ 'has-text-grey-light': !output.selected }" v-text="output.name" />
<Slider v-model="volume" :min="0" :max="100" :step="1" :tooltips="false" :disabled="!output.selected" :classes="{ target: 'slider' }" @change="set_volume" />
</div>
</div>
</div>
@@ -48,14 +21,12 @@
</template>
<script>
//import RangeSlider from 'vue-range-slider'
import Slider from '@vueform/slider'
import webapi from '@/webapi'
export default {
name: 'NavbarItemOutput',
components: {
// RangeSlider
Slider
},

108
web-src/src/components/NavbarTop.vue
View File

@@ -1,131 +1,93 @@
<template>
<nav
class="fd-top-navbar navbar is-light is-fixed-top"
:style="zindex"
role="navigation"
aria-label="main navigation"
>
<nav class="fd-top-navbar navbar is-light is-fixed-top" :style="zindex" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<navbar-item-link v-if="is_visible_playlists" to="/playlists">
<span class="icon"><mdicon name="music-box-multiple" size="16" /></span>
<mdicon class="icon" name="music-box-multiple" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_music" to="/music">
<span class="icon"><mdicon name="music" size="16" /></span>
<mdicon class="icon" name="music" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_podcasts" to="/podcasts">
<span class="icon"><mdicon name="microphone" size="16" /></span>
<mdicon class="icon" name="podcast" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_audiobooks" to="/audiobooks">
<span class="icon"><mdicon name="book-open-variant" size="16" /></span>
<mdicon class="icon" name="book-open-variant" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_radio" to="/radio">
<span class="icon"><mdicon name="radio" size="16" /></span>
<mdicon class="icon" name="radio-tower" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_files" to="/files">
<span class="icon"><mdicon name="folder-open" size="16" /></span>
<mdicon class="icon" name="folder-open" size="16" />
</navbar-item-link>
<navbar-item-link v-if="is_visible_search" to="/search">
<span class="icon"><mdicon name="magnify" size="16" /></span>
<mdicon class="icon" name="magnify" size="16" />
</navbar-item-link>
<div
class="navbar-burger"
:class="{ 'is-active': show_burger_menu }"
@click="show_burger_menu = !show_burger_menu"
>
<div class="navbar-burger" :class="{ 'is-active': show_burger_menu }" @click="show_burger_menu = !show_burger_menu">
<span />
<span />
<span />
</div>
</div>
<div class="navbar-menu" :class="{ 'is-active': show_burger_menu }">
<div class="navbar-start" />
<div class="navbar-end">
<!-- Burger menu entries -->
<div
class="navbar-item has-dropdown is-hoverable"
:class="{ 'is-active': show_settings_menu }"
@click="on_click_outside_settings"
>
<div class="navbar-item has-dropdown is-hoverable" :class="{ 'is-active': show_settings_menu }" @click="on_click_outside_settings">
<a class="navbar-link is-arrowless">
<span class="icon is-hidden-touch"
><mdicon name="menu" size="24"
/></span>
<span class="is-hidden-desktop has-text-weight-bold">OwnTone</span>
<mdicon class="icon is-hidden-touch" name="menu" size="24" />
<span class="is-hidden-desktop has-text-weight-bold" v-text="$t('navigation.title')" />
</a>
<div class="navbar-dropdown is-right">
<navbar-item-link to="/playlists">
<span class="icon"
><mdicon name="music-box-multiple" size="16"
/></span>
<b>Playlists</b>
<mdicon class="icon" name="music-box-multiple" size="16" />
<b v-text="$t('navigation.playlists')" />
</navbar-item-link>
<navbar-item-link to="/music" exact>
<span class="icon"><mdicon name="music" size="16" /></span>
<b>Music</b>
<mdicon class="icon" name="music" size="16" />
<b v-text="$t('navigation.music')" />
</navbar-item-link>
<navbar-item-link to="/music/artists">
<span class="fd-navbar-item-level2">Artists</span>
<span class="fd-navbar-item-level2" v-text="$t('navigation.artists')" />
</navbar-item-link>
<navbar-item-link to="/music/albums">
<span class="fd-navbar-item-level2">Albums</span>
<span class="fd-navbar-item-level2" v-text="$t('navigation.albums')" />
</navbar-item-link>
<navbar-item-link to="/music/genres">
<span class="fd-navbar-item-level2">Genres</span>
<span class="fd-navbar-item-level2" v-text="$t('navigation.genres')" />
</navbar-item-link>
<navbar-item-link v-if="spotify_enabled" to="/music/spotify">
<span class="fd-navbar-item-level2">Spotify</span>
<span class="fd-navbar-item-level2" v-text="$t('navigation.spotify')" />
</navbar-item-link>
<navbar-item-link to="/podcasts">
<span class="icon"><mdicon name="microphone" size="16" /></span>
<b>Podcasts</b>
<mdicon class="icon" name="podcast" size="16" />
<b v-text="$t('navigation.podcasts')" />
</navbar-item-link>
<navbar-item-link to="/audiobooks">
<span class="icon"
><mdicon name="book-open-variant" size="16"
/></span>
<b>Audiobooks</b>
<mdicon class="icon" name="book-open-variant" size="16" />
<b v-text="$t('navigation.audiobooks')" />
</navbar-item-link>
<navbar-item-link to="/radio">
<span class="icon"><mdicon name="radio" size="16" /></span>
<b>Radio</b>
<mdicon class="icon" name="radio-tower" size="16" />
<b v-text="$t('navigation.radio')" />
</navbar-item-link>
<navbar-item-link to="/files">
<span class="icon"><mdicon name="folder-open" size="16" /></span>
<b>Files</b>
<mdicon class="icon" name="folder-open" size="16" />
<b v-text="$t('navigation.files')" />
</navbar-item-link>
<navbar-item-link to="/search">
<span class="icon"><mdicon name="magnify" size="16" /></span>
<b>Search</b>
<mdicon class="icon" name="magnify" size="16" />
<b v-text="$t('navigation.search')" />
</navbar-item-link>
<hr class="fd-navbar-divider" />
<navbar-item-link to="/settings/webinterface">
Settings
</navbar-item-link>
<a class="navbar-item" @click.stop.prevent="open_update_dialog()">
Update Library
</a>
<navbar-item-link to="/about"> About </navbar-item-link>
<div
class="navbar-item is-hidden-desktop"
style="margin-bottom: 2.5rem"
/>
<navbar-item-link to="/settings/webinterface" v-text="$t('navigation.settings')" />
<a class="navbar-item" @click.stop.prevent="open_update_dialog()" v-text="$t('navigation.update-library')" />
<navbar-item-link to="/about" v-text="$t('navigation.about')" />
<div class="navbar-item is-hidden-desktop" style="margin-bottom: 2.5rem" />
</div>
</div>
</div>
</div>
<div
v-show="show_settings_menu"
class="is-overlay"
style="z-index: 10; width: 100vw; height: 100vh"
@click="show_settings_menu = false"
/>
<div v-show="show_settings_menu" class="is-overlay" style="z-index: 10; width: 100vw; height: 100vh" @click="show_settings_menu = false" />
</nav>
</template>

12
web-src/src/components/NotificationList.vue
View File

@@ -2,17 +2,9 @@
<section v-if="notifications.length > 0" class="fd-notifications">
<div class="columns is-centered">
<div class="column is-half">
<div
v-for="notification in notifications"
:key="notification.id"
class="notification has-shadow"
:class="[
'notification',
notification.type ? `is-${notification.type}` : ''
]"
>
<div v-for="notification in notifications" :key="notification.id" class="notification has-shadow" :class="[ 'notification', notification.type ? `is-${notification.type}` : '' ]">
<button class="delete" @click="remove(notification)" />
{{ notification.text }}
<span v-text="notification.text" />
</div>
</div>
</div>

2
web-src/src/components/PlayerButtonConsume.vue
View File

@@ -1,6 +1,6 @@
<template>
<a :class="{ 'is-warning': is_consume }" @click="toggle_consume_mode">
<span class="icon"><mdicon name="fire" :size="icon_size" /></span>
<mdicon class="icon" name="fire" :size="icon_size" />
</a>
</template>

2
web-src/src/components/PlayerButtonNext.vue
View File

@@ -1,6 +1,6 @@
<template>
<a :disabled="disabled" @click="play_next">
<span class="icon"><mdicon name="skip-forward" :size="icon_size" /></span>
<mdicon class="icon" name="skip-forward" :size="icon_size" />
</a>
</template>

4
web-src/src/components/PlayerButtonPlayPause.vue
View File

@@ -1,6 +1,6 @@
<template>
<a :disabled="disabled" @click="toggle_play_pause">
<span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
<mdicon class="icon" :name="icon_name" :size="icon_size" />
</a>
</template>
@@ -49,7 +49,7 @@ export default {
if (this.disabled) {
if (this.show_disabled_message) {
this.$store.dispatch('add_notification', {
text: 'Queue is empty',
text: this.$t('server.empty-queue'),
type: 'info',
topic: 'connection',
timeout: 2000

2
web-src/src/components/PlayerButtonPrevious.vue
View File

@@ -1,6 +1,6 @@
<template>
<a :disabled="disabled" @click="play_previous">
<span class="icon"><mdicon name="skip-backward" :size="icon_size" /></span>
<mdicon class="icon" name="skip-backward" :size="icon_size" />
</a>
</template>

2
web-src/src/components/PlayerButtonRepeat.vue
View File

@@ -1,6 +1,6 @@
<template>
<a :class="{ 'is-warning': !is_repeat_off }" @click="toggle_repeat_mode">
<span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
<mdicon class="icon" :name="icon_name" :size="icon_size" />
</a>
</template>

2
web-src/src/components/PlayerButtonSeekBack.vue
View File

@@ -1,6 +1,6 @@
<template>
<a v-if="visible" :disabled="disabled" @click="seek">
<span class="icon"><mdicon name="rewind" :size="icon_size" /></span>
<mdicon class="icon" name="rewind" :size="icon_size" />
</a>
</template>

2
web-src/src/components/PlayerButtonSeekForward.vue
View File

@@ -1,6 +1,6 @@
<template>
<a v-if="visible" :disabled="disabled" @click="seek">
<span class="icon"><mdicon name="fast-forward" :size="icon_size" /></span>
<mdicon class="icon" name="fast-forward" :size="icon_size" />
</a>
</template>

2
web-src/src/components/PlayerButtonShuffle.vue
View File

@@ -1,6 +1,6 @@
<template>
<a :class="{ 'is-warning': is_shuffle }" @click="toggle_shuffle_mode">
<span class="icon"><mdicon :name="icon_name" :size="icon_size" /></span>
<mdicon class="icon" :name="icon_name" :size="icon_size" />
</a>
</template>

6
web-src/src/components/ProgressBar.vue
View File

@@ -1,9 +1,5 @@
<template>
<div
v-if="width > 0"
class="progress-bar mt-2"
:style="{ width: width_percent }"
/>
<div v-if="width > 0" class="progress-bar mt-2" :style="{ width: width_percent }" />
</template>
<script>

42
web-src/src/components/SettingsCheckbox.vue
View File

@@ -1,22 +1,9 @@
<template>
<div class="field">
<label class="checkbox">
<input
ref="settings_checkbox"
type="checkbox"
:checked="value"
@change="set_update_timer"
/>
<label class="switch">
<input ref="setting" type="checkbox" :checked="value" style="margin-right: 5px" @change="set_update_timer"/>
<slot name="label" />
<i
class="is-size-7"
:class="{
'has-text-info': statusUpdate === 'success',
'has-text-danger': statusUpdate === 'error'
}"
>
{{ info }}</i
>
<i class="is-size-7" :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }" v-text="info" />
</label>
<p v-if="$slots['info']" class="help">
<slot name="info" />
@@ -30,15 +17,12 @@ import * as types from '@/store/mutation_types'
export default {
name: 'SettingsCheckbox',
props: ['category_name', 'option_name'],
data() {
return {
timerDelay: 2000,
timerId: -1,
// <empty>: default/no changes, 'success': update succesful, 'error': update failed
statusUpdate: ''
}
},
@@ -65,11 +49,19 @@ export default {
info() {
if (this.statusUpdate === 'success') {
return '(setting saved)'
return this.$t('setting.saved')
} else if (this.statusUpdate === 'error') {
return '(error saving setting)'
return this.$t('setting.not-saved')
}
return ''
},
is_success() {
return this.statusUpdate === 'success'
},
is_error() {
return this.statusUpdate === 'error'
}
},
@@ -81,7 +73,7 @@ export default {
}
this.statusUpdate = ''
const newValue = this.$refs.settings_checkbox.checked
const newValue = this.$refs.setting.checked
if (newValue !== this.value) {
this.timerId = window.setTimeout(this.update_setting, this.timerDelay)
}
@@ -90,8 +82,8 @@ export default {
update_setting() {
this.timerId = -1
const newValue = this.$refs.settings_checkbox.checked
console.log(this.$refs.settings_checkbox)
const newValue = this.$refs.setting.checked
console.log(this.$refs.setting)
if (newValue === this.value) {
this.statusUpdate = ''
return
@@ -110,7 +102,7 @@ export default {
})
.catch(() => {
this.statusUpdate = 'error'
this.$refs.settings_checkbox.checked = this.value
this.$refs.setting.checked = this.value
})
.finally(() => {
this.timerId = window.setTimeout(this.clear_status, this.timerDelay)

41
web-src/src/components/SettingsIntfield.vue
View File

@@ -3,27 +3,10 @@
<div class="field">
<label class="label has-text-weight-normal">
<slot name="label" />
<i
class="is-size-7"
:class="{
'has-text-info': statusUpdate === 'success',
'has-text-danger': statusUpdate === 'error'
}"
>
{{ info }}</i
>
<i class="is-size-7" :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }" v-text="info" />
</label>
<div class="control">
<input
ref="settings_number"
class="input"
type="number"
min="0"
style="width: 10em"
:placeholder="placeholder"
:value="value"
@input="set_update_timer"
/>
<input ref="setting" class="input" type="number" min="0" style="width: 10em" :placeholder="placeholder" :value="value" @input="set_update_timer" />
</div>
<p v-if="$slots['info']" class="help">
<slot name="info" />
@@ -38,14 +21,12 @@ import * as types from '@/store/mutation_types'
export default {
name: 'SettingsIntfield',
props: ['category_name', 'option_name', 'placeholder', 'disabled'],
data() {
return {
timerDelay: 2000,
timerId: -1,
statusUpdate: ''
}
},
@@ -72,11 +53,19 @@ export default {
info() {
if (this.statusUpdate === 'success') {
return '(setting saved)'
return this.$t('setting.saved')
} else if (this.statusUpdate === 'error') {
return '(error saving setting)'
return this.$t('setting.not-saved')
}
return ''
},
is_success() {
return this.statusUpdate === 'success'
},
is_error() {
return this.statusUpdate === 'error'
}
},
@@ -88,7 +77,7 @@ export default {
}
this.statusUpdate = ''
const newValue = this.$refs.settings_number.value
const newValue = this.$refs.setting.value
if (newValue !== this.value) {
this.timerId = window.setTimeout(this.update_setting, this.timerDelay)
}
@@ -97,7 +86,7 @@ export default {
update_setting() {
this.timerId = -1
const newValue = this.$refs.settings_number.value
const newValue = this.$refs.setting.value
if (newValue === this.value) {
this.statusUpdate = ''
return
@@ -116,7 +105,7 @@ export default {
})
.catch(() => {
this.statusUpdate = 'error'
this.$refs.settings_number.value = this.value
this.$refs.setting.value = this.value
})
.finally(() => {
this.timerId = window.setTimeout(this.clear_status, this.timerDelay)

39
web-src/src/components/SettingsTextfield.vue
View File

@@ -3,25 +3,10 @@
<div class="field">
<label class="label has-text-weight-normal">
<slot name="label" />
<i
class="is-size-7"
:class="{
'has-text-info': statusUpdate === 'success',
'has-text-danger': statusUpdate === 'error'
}"
>
{{ info }}</i
>
<i class="is-size-7" :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }" v-text="info" />
</label>
<div class="control">
<input
ref="settings_text"
class="input"
type="text"
:placeholder="placeholder"
:value="value"
@input="set_update_timer"
/>
<input ref="setting" class="input" type="text" :placeholder="placeholder" :value="value" @input="set_update_timer" />
</div>
<p v-if="$slots['info']" class="help">
<slot name="info" />
@@ -43,8 +28,6 @@ export default {
return {
timerDelay: 2000,
timerId: -1,
// <empty>: default/no changes, 'success': update succesful, 'error': update failed
statusUpdate: ''
}
},
@@ -71,11 +54,19 @@ export default {
info() {
if (this.statusUpdate === 'success') {
return '(setting saved)'
return this.$t('setting.saved')
} else if (this.statusUpdate === 'error') {
return '(error saving setting)'
return this.$t('setting.not-saved')
}
return ''
},
is_success() {
return this.statusUpdate === 'success'
},
is_error() {
return this.statusUpdate === 'error'
}
},
@@ -87,7 +78,7 @@ export default {
}
this.statusUpdate = ''
const newValue = this.$refs.settings_text.value
const newValue = this.$refs.setting.value
if (newValue !== this.value) {
this.timerId = window.setTimeout(this.update_setting, this.timerDelay)
}
@@ -96,7 +87,7 @@ export default {
update_setting() {
this.timerId = -1
const newValue = this.$refs.settings_text.value
const newValue = this.$refs.setting.value
if (newValue === this.value) {
this.statusUpdate = ''
return
@@ -115,7 +106,7 @@ export default {
})
.catch(() => {
this.statusUpdate = 'error'
this.$refs.settings_text.value = this.value
this.$refs.setting.value = this.value
})
.finally(() => {
this.timerId = window.setTimeout(this.clear_status, this.timerDelay)

10
web-src/src/components/SpotifyListItemAlbum.vue
View File

@@ -4,15 +4,11 @@
<slot name="artwork" />
</div>
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6">
{{ album.name }}
</h1>
<h1 class="title is-6" v-text="album.name" />
<h2 class="subtitle is-7 has-text-grey">
<b>{{ album.artists[0].name }}</b>
</h2>
<h2 class="subtitle is-7 has-text-grey has-text-weight-normal">
({{ album.album_type }}, {{ $filters.date(album.release_date) }})
<b v-text="album.artists[0].name" />
</h2>
<h2 class="subtitle is-7 has-text-grey has-text-weight-normal" v-text="[album.album_type, $filters.date(album.release_date)].join(', ')" />
</div>
<div class="media-right">
<slot name="actions" />

4
web-src/src/components/SpotifyListItemArtist.vue
View File

@@ -1,9 +1,7 @@
<template>
<div class="media">
<div class="media-content fd-has-action is-clipped" @click="open_artist">
<h1 class="title is-6">
{{ artist.name }}
</h1>
<h1 class="title is-6" v-text="artist.name" />
</div>
<div class="media-right">
<slot name="actions" />

8
web-src/src/components/SpotifyListItemPlaylist.vue
View File

@@ -1,12 +1,8 @@
<template>
<div class="media">
<div class="media-content fd-has-action is-clipped" @click="open_playlist">
<h1 class="title is-6">
{{ playlist.name }}
</h1>
<h2 class="subtitle is-7">
{{ playlist.owner.display_name }}
</h2>
<h1 class="title is-6" v-text="playlist.name" />
<h2 class="subtitle is-7" v-text="playlist.owner.display_name" />
</div>
<div class="media-right">
<slot name="actions" />

25
web-src/src/components/SpotifyListItemTrack.vue
View File

@@ -1,26 +1,13 @@
<template>
<div class="media">
<div class="media-content fd-has-action is-clipped" @click="play">
<h1
class="title is-6"
:class="{ 'has-text-grey-light': track.is_playable === false }"
>
{{ track.name }}
</h1>
<h2
class="subtitle is-7"
:class="{
'has-text-grey': track.is_playable,
'has-text-grey-light': track.is_playable === false
}"
>
<b>{{ track.artists[0].name }}</b>
<h1 class="title is-6" :class="{ 'has-text-grey-light': track.is_playable === false }" v-text="track.name" />
<h2 class="subtitle is-7" :class="{ 'has-text-grey': track.is_playable, 'has-text-grey-light': track.is_playable === false }">
<b v-text="track.artists[0].name" />
</h2>
<h2 v-if="track.is_playable === false" class="subtitle is-7">
(Track is not playable<span
v-if="track.restrictions && track.restrictions.reason"
>, restriction reason: {{ track.restrictions.reason }}</span
>)
(<span v-text="$t('list.spotify.not-playable-track')" />
<span v-if="track.restrictions && track.restrictions.reason" v-text="$t('list.spotify.restriction-reason', { reason: track.restrictions.reason })" />)
</h2>
</div>
<div class="media-right">
@@ -34,9 +21,7 @@ import webapi from '@/webapi'
export default {
name: 'SpotifyListItemTrack',
props: ['track', 'position', 'album', 'context_uri'],
methods: {
play: function () {
webapi.player_play_uri(this.context_uri, false, this.position)

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

@@ -6,66 +6,44 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<figure
v-show="artwork_visible"
class="image is-square fd-has-margin-bottom"
>
<img
:src="artwork_url"
class="fd-has-shadow"
@load="artwork_loaded"
@error="artwork_error"
/>
<figure v-show="artwork_visible" class="image is-square fd-has-margin-bottom">
<img :src="artwork_url" class="fd-has-shadow" @load="artwork_loaded" @error="artwork_error" />
</figure>
<p class="title is-4">
<a class="has-text-link" @click="open_album">{{
album.name
}}</a>
<a class="has-text-link" @click="open_album" v-text="album.name" />
</p>
<div class="content is-small">
<p>
<span class="heading">Album artist</span>
<a class="title is-6 has-text-link" @click="open_artist">{{
album.artists[0].name
}}</a>
<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">Release date</span>
<span class="title is-6">{{
$filters.date(album.release_date)
}}</span>
<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">Type</span>
<span class="title is-6">{{ album.album_type }}</span>
<span class="heading" v-text="$t('dialog.spotify.album.type')" />
<span class="title is-6" v-text="album.album_type" />
</p>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.album.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

37
web-src/src/components/SpotifyModalDialogArtist.vue
View File

@@ -7,49 +7,36 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_artist">{{
artist.name
}}</a>
<a class="has-text-link" @click="open_artist" v-text="artist.name" />
</p>
<div class="content is-small">
<p>
<span class="heading">Popularity / Followers</span>
<span class="title is-6"
>{{ artist.popularity }} /
{{ artist.followers.total }}</span
>
<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">Genres</span>
<span class="title is-6">{{ artist.genres.join(', ') }}</span>
<span class="heading" v-text="$t('dialog.spotify.artist.genres')" />
<span class="title is-6" v-text="artist.genres.join(', ')" />
</p>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.artist.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

40
web-src/src/components/SpotifyModalDialogPlaylist.vue
View File

@@ -7,52 +7,40 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_playlist">{{
playlist.name
}}</a>
<a class="has-text-link" @click="open_playlist" v-text="playlist.name" />
</p>
<div class="content is-small">
<p>
<span class="heading">Owner</span>
<span class="title is-6">{{
playlist.owner.display_name
}}</span>
<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">Tracks</span>
<span class="title is-6">{{ playlist.tracks.total }}</span>
<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">Path</span>
<span class="title is-6">{{ playlist.uri }}</span>
<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">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.playlist.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

64
web-src/src/components/SpotifyModalDialogTrack.vue
View File

@@ -6,74 +6,52 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4">
{{ track.name }}
</p>
<p class="subtitle">
{{ track.artists[0].name }}
</p>
<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">Album</span>
<a class="title is-6 has-text-link" @click="open_album">{{
album.name
}}</a>
<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">Album artist</span>
<a class="title is-6 has-text-link" @click="open_artist">{{
album.artists[0].name
}}</a>
<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">Release date</span>
<span class="title is-6">{{
$filters.date(album.release_date)
}}</span>
<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">Track / Disc</span>
<span class="title is-6"
>{{ track.track_number }} / {{ track.disc_number }}</span
>
<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">Length</span>
<span class="title is-6">{{
$filters.durationInHours(track.duration_ms)
}}</span>
<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">Path</span>
<span class="title is-6">{{ track.uri }}</span>
<span class="heading" v-text="$t('dialog.spotify.track.path')" />
<span class="title is-6" v-text="track.uri" />
</p>
</div>
</div>
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<span class="icon"
><mdicon name="playlist-plus" size="16"
/></span>
<span class="is-size-7">Add</span>
<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">
<span class="icon"
><mdicon name="playlist-play" size="16"
/></span>
<span class="is-size-7">Add Next</span>
<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">
<span class="icon"><mdicon name="play" size="16" /></span>
<span class="is-size-7">Play</span>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.track.play')" />
</a>
</footer>
</div>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')" />
</div>
</transition>
</div>

24
web-src/src/components/TabsAudiobooks.vue
View File

@@ -5,31 +5,19 @@
<div class="column is-four-fifths">
<div class="tabs is-centered is-small">
<ul>
<router-link
v-slot="{ navigate, isActive }"
to="/audiobooks/artists"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/audiobooks/artists" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="account-music" size="16"
/></span>
<span class="">Authors</span>
<mdicon class="icon is-small" name="account-music" size="16" />
<span v-text="$t('tabs.audiobooks.authors')" />
</a>
</li>
</router-link>
<router-link
v-slot="{ navigate, isActive }"
to="/audiobooks/albums"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/audiobooks/albums" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="album" size="16"
/></span>
<span class="">Audiobooks</span>
<mdicon class="icon is-small" name="album" size="16" />
<span v-text="$t('tabs.audiobooks.audiobooks')" />
</a>
</li>
</router-link>

73
web-src/src/components/TabsMusic.vue
View File

@@ -5,88 +5,51 @@
<div class="column is-four-fifths">
<div class="tabs is-centered is-small">
<ul>
<router-link
v-slot="{ navigate, isActive }"
to="/music/browse"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/music/browse" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="web" size="16"
/></span>
<span class="">Browse</span>
<mdicon class="icon is-small" name="web" size="16" />
<span v-text="$t('page.settings.tabs.music.browse')" />
</a>
</li>
</router-link>
<router-link
v-slot="{ navigate, isActive }"
to="/music/artists"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/music/artists" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="account-music" size="16"
/></span>
<span class="">Artists</span>
<mdicon class="icon is-small" name="account-music" size="16" />
<span v-text="$t('page.settings.tabs.music.artists')" />
</a>
</li>
</router-link>
<router-link
v-slot="{ navigate, isActive }"
to="/music/albums"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/music/albums" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="album" size="16"
/></span>
<span class="">Albums</span>
<mdicon class="icon is-small" name="album" size="16" />
<span v-text="$t('page.settings.tabs.music.albums')" />
</a>
</li>
</router-link>
<router-link
v-slot="{ navigate, isActive }"
to="/music/genres"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/music/genres" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="speaker" size="16"
/></span>
<span class="">Genres</span>
<mdicon class="icon is-small" name="speaker" size="16" />
<span v-text="$t('page.settings.tabs.music.genres')" />
</a>
</li>
</router-link>
<router-link
v-slot="{ navigate, isActive }"
to="/music/composers"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/music/composers" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="book-open-page-variant" size="16"
/></span>
<span class="">Composers</span>
<mdicon class="icon is-small" name="book-open-page-variant" size="16" />
<span v-text="$t('page.settings.tabs.music.composers')" />
</a>
</li>
</router-link>
<router-link
v-if="spotify_enabled"
v-slot="{ navigate, isActive }"
to="/music/spotify"
custom
>
<router-link v-if="spotify_enabled" v-slot="{ navigate, isActive }" to="/music/spotify" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="icon is-small"
><mdicon name="spotify" size="16"
/></span>
<span class="">Spotify</span>
<mdicon class="icon is-small" name="spotify" size="16" />
<span v-text="$t('page.settings.tabs.music.spotify')" />
</a>
</li>
</router-link>

24
web-src/src/components/TabsSearch.vue
View File

@@ -5,28 +5,16 @@
<div class="column is-four-fifths">
<div class="tabs is-centered is-small is-toggle is-toggle-rounded">
<ul>
<li
:class="{
'is-active': $store.state.search_path === '/search/library'
}"
>
<li :class="{ 'is-active': $store.state.search_path === '/search/library' }">
<a @click="search_library">
<span class="icon is-small"
><mdicon name="bookshelf" size="16"
/></span>
<span class="">Library</span>
<mdicon class="icon is-small" name="bookshelf" size="16" />
<span v-text="$t('tabs.search.library')" />
</a>
</li>
<li
:class="{
'is-active': $store.state.search_path === '/search/spotify'
}"
>
<li :class="{ 'is-active': $store.state.search_path === '/search/spotify' }">
<a @click="search_spotify">
<span class="icon is-small"
><mdicon name="spotify" size="16"
/></span>
<span class="">Spotify</span>
<mdicon class="icon is-small" name="spotify" size="16" />
<span v-text="$t('tabs.search.spotify')" />
</a>
</li>
</ul>

36
web-src/src/components/TabsSettings.vue
View File

@@ -5,47 +5,31 @@
<div class="column is-four-fifths">
<div class="tabs is-centered is-small">
<ul>
<router-link
v-slot="{ navigate, isActive }"
to="/settings/webinterface"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/settings/webinterface" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="">Webinterface</span>
<span v-text="$t('page.settings.tabs.settings.general')" />
</a>
</li>
</router-link>
<router-link
v-slot="{ navigate, isActive }"
to="/settings/remotes-outputs"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/settings/remotes-outputs" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="">Remotes &amp; Outputs</span>
<span v-text="$t('page.settings.tabs.settings.remotes-and-outputs')" />
</a>
</li>
</router-link>
<router-link
v-slot="{ navigate, isActive }"
to="/settings/artwork"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/settings/artwork" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="">Artwork</span>
<span v-text="$t('page.settings.tabs.settings.artwork')" />
</a>
</li>
</router-link>
<router-link
v-slot="{ navigate, isActive }"
to="/settings/online-services"
custom
>
<router-link v-slot="{ navigate, isActive }" to="/settings/online-services" custom>
<li :class="{ 'is-active': isActive }">
<a @click="navigate" @keypress.enter="navigate">
<span class="">Online Services</span>
<span v-text="$t('page.settings.tabs.settings.online-services')" />
</a>
</li>
</router-link>
@@ -59,9 +43,7 @@
<script>
export default {
name: 'TabsSettings',
computed: {}
name: 'TabsSettings'
}
</script>