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

Code formatting, translation mistakes, and removal of useless libraries.

Browse Source
This commit is contained in:
Alain Nussbaumer
2022-05-29 18:49:00 +02:00
parent cfa8db7b3f
commit b788273e4c
92 changed files with 2646 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,9 @@
<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>

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

@@ -1,14 +1,30 @@
<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">
<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.id" class="dropdown-item" :class="{ 'is-active': modelValue === option.id }" @click="select(option)" v-text="option.name" />
<a
v-for="o in options"
:key="o.id"
class="dropdown-item"
:class="{ 'is-active': modelValue === o.id }"
@click="select(o)"
v-text="o.name"
/>
</div>
</div>
</div>

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

@@ -1,7 +1,13 @@
<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)" v-text="char" />
<a
v-for="char in filtered_index"
:key="char"
class="button is-small"
@click="nav(char)"
v-text="char"
/>
</nav>
</section>
</template>

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

@@ -1,13 +1,24 @@
<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" v-text="album.groupKey" />
<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>
@@ -17,7 +28,11 @@
<h2 class="subtitle is-7 has-text-grey">
<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)" />
<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">
@@ -28,11 +43,27 @@
</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 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 })" />
<p class="is-size-7">
(<span v-text="$t('list.albums.info-2')" />
<b v-text="rss_playlist_to_remove.name" />)
</p>
</template>
</modal-dialog>
</teleport>

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

@@ -2,10 +2,18 @@
<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" v-text="artist.groupKey" />
<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" v-text="artist.item.name" />
</div>
@@ -17,7 +25,12 @@
</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>

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

@@ -2,10 +2,18 @@
<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" v-text="composer.groupKey" />
<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" v-text="composer.item.name" />
</div>
@@ -17,7 +25,12 @@
</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>

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

@@ -1,5 +1,9 @@
<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">
<mdicon class="icon" name="subdirectory-arrow-left" size="16" />
</figure>
@@ -16,7 +20,10 @@
<mdicon class="icon" name="folder" size="16" />
</figure>
<div class="media-content fd-has-action is-clipped">
<h1 class="title is-6" v-text="directory.path.substring(directory.path.lastIndexOf('/') + 1)" />
<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">
@@ -27,7 +34,11 @@
</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>

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

@@ -2,7 +2,11 @@
<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" v-text="genre.groupKey" />
<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)">
@@ -17,7 +21,11 @@
</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>

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

@@ -1,14 +1,40 @@
<template>
<div v-if="is_next || !show_only_next_items" class="media">
<div v-if="edit_mode" class="media-left">
<mdicon class="icon has-text-grey fd-is-movable handle" name="drag-horizontal" size="16" />
<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 }" 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 }">
<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" />
<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" />

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

@@ -1,5 +1,11 @@
<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">
<mdicon class="icon" :name="icon_name(playlist.item)" size="16" />
</figure>
@@ -13,7 +19,11 @@
</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>

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

@@ -1,13 +1,31 @@
<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">
<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 }" v-text="track.title" />
<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" />
<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)">
@@ -16,7 +34,12 @@
</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>

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

@@ -12,20 +12,35 @@
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="close_action ? close_action : t('dialog.cancel')" />
<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')">
<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')">
<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>

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

@@ -10,7 +10,14 @@
<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="$t('dialog.add.rss.placeholder')" :disabled="loading" />
<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')" />
@@ -20,22 +27,35 @@
<footer v-if="loading" class="card-footer">
<a class="card-footer-item button is-loading">
<mdicon class="icon" name="web" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.processing')" />
<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')">
<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">
<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>

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

@@ -10,7 +10,14 @@
<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="$t('dialog.add.stream.placeholder')" :disabled="loading" />
<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>
@@ -19,26 +26,42 @@
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.loading')" />
<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')">
<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')" />
<span
class="is-size-7"
v-text="$t('dialog.add.stream.cancel')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="add_stream">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
</a>
<a class="card-footer-item has-background-info has-text-white has-text-weight-bold" @click="play">
<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>

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

@@ -6,22 +6,49 @@
<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" v-text="album.name" />
<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" v-text="$t('dialog.album.mark-as-played')" />
<a class="button is-small" @click="$emit('remove-podcast')" v-text="$t('dialog.album.remove-podcast')" />
<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" v-text="$t('dialog.album.artist')" />
<a class="title is-6 has-text-link" @click="open_artist" v-text="album.artist" />
<a
class="title is-6 has-text-link"
@click="open_artist"
v-text="album.artist"
/>
</p>
<p v-if="album.date_released">
<span class="heading" v-text="$t('dialog.album.release-date')" />
<span class="title is-6" v-text="$filters.date(album.date_released)" />
<span
class="heading"
v-text="$t('dialog.album.release-date')"
/>
<span
class="title is-6"
v-text="$filters.date(album.date_released)"
/>
</p>
<p v-else-if="album.year > 0">
<span class="heading" v-text="$t('dialog.album.year')" />
@@ -33,15 +60,29 @@
</p>
<p>
<span class="heading" v-text="$t('dialog.album.duration')" />
<span class="title is-6" v-text="$filters.durationInHours(album.length_ms)" />
<span
class="title is-6"
v-text="$filters.durationInHours(album.length_ms)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.album.type')" />
<span class="title is-6" v-text="[t('media.kind.' + album.media_kind), t('data.kind.' + album.data_kind)].join(' - ')" />
<span
class="title is-6"
v-text="
[
t('media.kind.' + album.media_kind),
t('data.kind.' + album.data_kind)
].join(' - ')
"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.album.added-on')" />
<span class="title is-6" v-text="$filters.datetime(album.time_added)" />
<span
class="title is-6"
v-text="$filters.datetime(album.time_added)"
/>
</p>
</div>
</div>
@@ -61,7 +102,11 @@
</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>

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

@@ -7,7 +7,11 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_artist" v-text="artist.name" />
<a
class="has-text-link"
@click="open_artist"
v-text="artist.name"
/>
</p>
<div class="content is-small">
<p>
@@ -20,11 +24,17 @@
</p>
<p>
<span class="heading" v-text="$t('dialog.artist.type')" />
<span class="title is-6" v-text="$t('data.kind.' + artist.data_kind)" />
<span
class="title is-6"
v-text="$t('data.kind.' + artist.data_kind)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.artist.added-on')" />
<span class="title is-6" v-text="$filters.datetime(artist.time_added)" />
<span
class="title is-6"
v-text="$filters.datetime(artist.time_added)"
/>
</p>
</div>
</div>
@@ -44,7 +54,11 @@
</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>

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

@@ -7,19 +7,34 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_albums" v-text="composer.name" />
<a
class="has-text-link"
@click="open_albums"
v-text="composer.name"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.composer.albums')" />
<a class="has-text-link is-6" @click="open_albums" v-text="composer.album_count" />
<a
class="has-text-link is-6"
@click="open_albums"
v-text="composer.album_count"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.composer.tracks')" />
<a class="has-text-link is-6" @click="open_tracks" v-text="composer.track_count" />
<a
class="has-text-link is-6"
@click="open_tracks"
v-text="composer.track_count"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.composer.duration')" />
<span class="title is-6" v-text="$filters.durationInHours(composer.length_ms)" />
<span
class="title is-6"
v-text="$filters.durationInHours(composer.length_ms)"
/>
</p>
</div>
<footer class="card-footer">
@@ -29,7 +44,10 @@
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.composer.add-next')" />
<span
class="is-size-7"
v-text="$t('dialog.composer.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
@@ -38,7 +56,11 @@
</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>

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

@@ -15,7 +15,10 @@
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.directory.add-next')" />
<span
class="is-size-7"
v-text="$t('dialog.directory.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
@@ -24,7 +27,11 @@
</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>

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

@@ -7,7 +7,11 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_genre" v-text="genre.name" />
<a
class="has-text-link"
@click="open_genre"
v-text="genre.name"
/>
</p>
<div class="content is-small">
<p>
@@ -20,7 +24,10 @@
</p>
<p>
<span class="heading" v-text="$t('dialog.genre.duration')" />
<span class="title is-6" v-text="$filters.durationInHours(genre.length_ms)" />
<span
class="title is-6"
v-text="$filters.durationInHours(genre.length_ms)"
/>
</p>
</div>
</div>
@@ -40,7 +47,11 @@
</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>

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

@@ -7,7 +7,11 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_playlist" v-text="playlist.name" />
<a
class="has-text-link"
@click="open_playlist"
v-text="playlist.name"
/>
</p>
<div class="content is-small">
<p>
@@ -19,7 +23,10 @@
<span class="title is-6" v-text="playlist.type" />
</p>
<p v-if="!playlist.folder">
<span class="heading" v-text="$t('dialog.playlist.track-count')" />
<span
class="heading"
v-text="$t('dialog.playlist.track-count')"
/>
<span class="title is-6" v-text="playlist.item_count" />
</p>
</div>
@@ -31,7 +38,10 @@
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.add-next')" />
<span
class="is-size-7"
v-text="$t('dialog.playlist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
@@ -40,7 +50,11 @@
</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/ModalDialogPlaylistSave.vue
View File

@@ -10,7 +10,14 @@
<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" />
<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>
@@ -19,22 +26,41 @@
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span class="is-size-7" v-text="$t('dialog.playlist.save.saving')" />
<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')">
<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')" />
<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">
<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')" />
<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>

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

@@ -10,17 +10,36 @@
<p class="subtitle" v-text="item.artist" />
<div class="content is-small">
<p>
<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
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" 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
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" v-text="$t('dialog.queue-item.composer')" />
<span
class="heading"
v-text="$t('dialog.queue-item.composer')"
/>
<span class="title is-6" v-text="item.composer" />
</p>
<p v-if="item.year > 0">
@@ -28,16 +47,35 @@
<span class="title is-6" v-text="item.year" />
</p>
<p v-if="item.genre">
<span class="heading" v-text="$t('dialog.queue-item.genre')" />
<a class="title is-6 has-text-link" @click="open_genre" v-text="item.genre" />
<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" v-text="$t('dialog.queue-item.position')" />
<span class="title is-6" v-text="[ item.disc_number, item.track_number ].join(' / ')" />
<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" v-text="$t('dialog.queue-item.duration')" />
<span class="title is-6" v-text="$filters.durationInHours(item.length_ms)" />
<span
class="heading"
v-text="$t('dialog.queue-item.duration')"
/>
<span
class="title is-6"
v-text="$filters.durationInHours(item.length_ms)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.queue-item.path')" />
@@ -46,20 +84,53 @@
<p>
<span class="heading" v-text="$t('dialog.queue-item.type')" />
<span class="title is-6">
<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
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="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
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>
@@ -67,7 +138,10 @@
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="remove">
<mdicon class="icon" name="delete" size="16" />
<span class="is-size-7" v-text="$t('dialog.queue-item.remove')" />
<span
class="is-size-7"
v-text="$t('dialog.queue-item.remove')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
@@ -76,7 +150,11 @@
</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>

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

@@ -6,29 +6,54 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<p class="title is-4" v-text="$t('dialog.remote-pairing.title')" />
<p
class="title is-4"
v-text="$t('dialog.remote-pairing.title')"
/>
<form @submit.prevent="kickoff_pairing">
<label class="label" v-text="pairing.remote" />
<div class="field">
<div class="control">
<input ref="pin_field" v-model="pairing_req.pin" class="input" type="text" 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')">
<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')" />
<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">
<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')" />
<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>

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

@@ -9,25 +9,54 @@
<p class="title is-4" v-text="track.title" />
<p class="subtitle" v-text="track.artist" />
<div v-if="track.media_kind === 'podcast'" class="buttons">
<a v-if="track.play_count > 0" class="button is-small" @click="mark_new" v-text="$t('dialog.track.mark-as-new')" />
<a v-if="track.play_count === 0" class="button is-small" @click="mark_played" v-text="$t('dialog.track.mark-as-played')" />
<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" v-text="$t('dialog.track.album')" />
<a class="title is-6 has-text-link" @click="open_album" v-text="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" v-text="$t('dialog.track.album-artist')" />
<a class="title is-6 has-text-link" @click="open_artist" v-text="track.album_artist" />
<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" v-text="$t('dialog.track.composer')" />
<span class="title is-6" v-text="track.composer" />
</p>
<p v-if="track.date_released">
<span class="heading" v-text="$t('dialog.track.release-date')" />
<span class="title is-6" v-text="$filters.date(track.date_released)" />
<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" v-text="$t('dialog.track.year')" />
@@ -35,15 +64,25 @@
</p>
<p v-if="track.genre">
<span class="heading" v-text="$t('dialog.track.genre')" />
<a class="title is-6 has-text-link" @click="open_genre" v-text="track.genre" />
<a
class="title is-6 has-text-link"
@click="open_genre"
v-text="track.genre"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.track.position')" />
<span class="title is-6" v-text="[track.disc_number, track.track_number].join(' / ')" />
<span
class="title is-6"
v-text="[track.disc_number, track.track_number].join(' / ')"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.track.duration')" />
<span class="title is-6" v-text="$filters.durationInHours(track.length_ms)" />
<span
class="title is-6"
v-text="$filters.durationInHours(track.length_ms)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.track.path')" />
@@ -52,10 +91,21 @@
<p>
<span class="heading" v-text="$t('dialog.track.type')" />
<span class="title is-6">
<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
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>
@@ -63,18 +113,47 @@
<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
v-if="track.samplerate"
v-text="
$t('dialog.track.samplerate', {
rate: track.samplerate
})
"
/>
<span
v-if="track.channels"
v-text="
$t('dialog.track.channels', {
channels: $filters.channels(track.channels)
})
"
/>
<span
v-if="track.bitrate"
v-text="
$t('dialog.track.bitrate', { rate: track.bitrate })
"
/>
</span>
</p>
<p>
<span class="heading" v-text="$t('dialog.track.added-on')" />
<span class="title is-6" v-text="$filters.datetime(track.time_added)" />
<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) })" />
<span
class="title is-6"
v-text="
$t('dialog.track.rating-value', {
rating: Math.floor(track.rating / 10)
})
"
/>
</p>
<p v-if="track.comment">
<span class="heading" v-text="$t('dialog.track.comment')" />
@@ -98,7 +177,11 @@
</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>

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

@@ -1,5 +1,12 @@
<template>
<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()">
<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" v-text="$t('dialog.update.info')" />
@@ -9,15 +16,27 @@
<select v-model="update_dialog_scan_kind">
<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')" />
<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" style="margin-right: 5px" />
<input
v-model="rescan_metadata"
type="checkbox"
style="margin-right: 5px"
/>
<span v-text="$t('dialog.update.rescan-metadata')" />
</label>
</div>

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

@@ -1,52 +1,129 @@
<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>
<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 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 })" />
<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">
<mdicon class="icon" :name="show_player_menu ? 'chevron-down' : 'chevron-up'" size="18" />
<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">
<mdicon class="icon" :name="show_player_menu ? 'chevron-down' : 'chevron-up'" size="18" />
<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">
<mdicon class="icon" :name="player.volume > 0 ? 'volume-high' : 'volume-off'" size="18" />
<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" v-text="$t('navigation.volume')" />
<Slider v-model="player.volume" :min="0" :max="100" :step="1" :tooltips="false" :classes="{ target: 'slider' }" @change="set_volume" />
<Slider
v-model="player.volume"
:min="0"
:max="100"
:step="1"
:tooltips="false"
:classes="{ target: 'slider' }"
@change="set_volume"
/>
</div>
</div>
</div>
@@ -54,28 +131,63 @@
</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">
<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 }">
<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
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" />
<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>
@@ -98,7 +210,10 @@
</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 -->
@@ -116,41 +231,88 @@
<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">
<mdicon class="icon" :name="player.volume > 0 ? 'volume-high' : 'volume-off'" size="18" />
<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" v-text="$t('navigation.volume')" />
<Slider v-model="player.volume" :min="0" :max="100" :step="1" :tooltips="false" :classes="{ target: 'slider' }" @change="set_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">
<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 }">
<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
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" />
<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>

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

@@ -1,5 +1,10 @@
<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>

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

@@ -4,15 +4,32 @@
<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 }" 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" />
<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>

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

@@ -1,5 +1,10 @@
<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">
<mdicon class="icon" name="music-box-multiple" size="16" />
@@ -22,7 +27,11 @@
<navbar-item-link v-if="is_visible_search" to="/search">
<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 />
@@ -32,10 +41,17 @@
<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">
<mdicon class="icon is-hidden-touch" name="menu" size="24" />
<span class="is-hidden-desktop has-text-weight-bold" v-text="$t('navigation.title')" />
<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">
@@ -47,16 +63,28 @@
<b v-text="$t('navigation.music')" />
</navbar-item-link>
<navbar-item-link to="/music/artists">
<span class="fd-navbar-item-level2" v-text="$t('navigation.artists')" />
<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" v-text="$t('navigation.albums')" />
<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" v-text="$t('navigation.genres')" />
<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" v-text="$t('navigation.spotify')" />
<span
class="fd-navbar-item-level2"
v-text="$t('navigation.spotify')"
/>
</navbar-item-link>
<navbar-item-link to="/podcasts">
<mdicon class="icon" name="podcast" size="16" />
@@ -79,15 +107,30 @@
<b v-text="$t('navigation.search')" />
</navbar-item-link>
<hr class="fd-navbar-divider" />
<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="/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
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>

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

@@ -2,7 +2,15 @@
<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)" />
<span v-text="notification.text" />
</div>

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

@@ -1,5 +1,9 @@
<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>

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

@@ -1,9 +1,19 @@
<template>
<div class="field">
<label class="switch">
<input ref="setting" type="checkbox" :checked="value" style="margin-right: 5px" @change="set_update_timer"/>
<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': is_success, 'has-text-danger': is_error }" v-text="info" />
<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" />

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

@@ -3,10 +3,23 @@
<div class="field">
<label class="label has-text-weight-normal">
<slot name="label" />
<i class="is-size-7" :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }" v-text="info" />
<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="setting" 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" />

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

@@ -3,10 +3,21 @@
<div class="field">
<label class="label has-text-weight-normal">
<slot name="label" />
<i class="is-size-7" :class="{ 'has-text-info': is_success, 'has-text-danger': is_error }" v-text="info" />
<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="setting" 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" />

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

@@ -8,7 +8,12 @@
<h2 class="subtitle is-7 has-text-grey">
<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(', ')" />
<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" />

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

@@ -1,13 +1,30 @@
<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 }" v-text="track.name" />
<h2 class="subtitle is-7" :class="{ 'has-text-grey': track.is_playable, 'has-text-grey-light': track.is_playable === false }">
<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">
(<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 })" />)
<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">

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

@@ -6,23 +6,51 @@
<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" v-text="album.name" />
<a
class="has-text-link"
@click="open_album"
v-text="album.name"
/>
</p>
<div class="content is-small">
<p>
<span class="heading" v-text="$t('dialog.spotify.album.album-artist')" />
<a class="title is-6 has-text-link" @click="open_artist" v-text="album.artists[0].name" />
<span
class="heading"
v-text="$t('dialog.spotify.album.album-artist')"
/>
<a
class="title is-6 has-text-link"
@click="open_artist"
v-text="album.artists[0].name"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.album.release-date')" />
<span class="title is-6" v-text="$filters.date(album.release_date)" />
<span
class="heading"
v-text="$t('dialog.spotify.album.release-date')"
/>
<span
class="title is-6"
v-text="$filters.date(album.release_date)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.album.type')" />
<span
class="heading"
v-text="$t('dialog.spotify.album.type')"
/>
<span class="title is-6" v-text="album.album_type" />
</p>
</div>
@@ -30,20 +58,33 @@
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.album.add')" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.album.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.album.add-next')" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.album.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.album.play')" />
<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>

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

@@ -7,15 +7,30 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_artist" v-text="artist.name" />
<a
class="has-text-link"
@click="open_artist"
v-text="artist.name"
/>
</p>
<div class="content is-small">
<p>
<span class="heading" v-text="$t('dialog.spotify.artist.popularity')" />
<span class="title is-6" v-text="[artist.popularity, artist.followers.total].join(' / ')" />
<span
class="heading"
v-text="$t('dialog.spotify.artist.popularity')"
/>
<span
class="title is-6"
v-text="
[artist.popularity, artist.followers.total].join(' / ')
"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.artist.genres')" />
<span
class="heading"
v-text="$t('dialog.spotify.artist.genres')"
/>
<span class="title is-6" v-text="artist.genres.join(', ')" />
</p>
</div>
@@ -23,20 +38,33 @@
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.artist.add')" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.artist.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.artist.add-next')" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.artist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.artist.play')" />
<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>

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

@@ -7,19 +7,35 @@
<div class="card">
<div class="card-content">
<p class="title is-4">
<a class="has-text-link" @click="open_playlist" v-text="playlist.name" />
<a
class="has-text-link"
@click="open_playlist"
v-text="playlist.name"
/>
</p>
<div class="content is-small">
<p>
<span class="heading" v-text="$t('dialog.spotify.playlist.owner')" />
<span class="title is-6" v-text="playlist.owner.display_name" />
<span
class="heading"
v-text="$t('dialog.spotify.playlist.owner')"
/>
<span
class="title is-6"
v-text="playlist.owner.display_name"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.playlist.tracks')" />
<span
class="heading"
v-text="$t('dialog.spotify.playlist.tracks')"
/>
<span class="title is-6" v-text="playlist.tracks.total" />
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.playlist.path')" />
<span
class="heading"
v-text="$t('dialog.spotify.playlist.path')"
/>
<span class="title is-6" v-text="playlist.uri" />
</p>
</div>
@@ -27,20 +43,33 @@
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.playlist.add')" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.playlist.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.playlist.add-next')" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.playlist.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.playlist.play')" />
<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>

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

@@ -10,27 +10,62 @@
<p class="subtitle" v-text="track.artists[0].name" />
<div class="content is-small">
<p>
<span class="heading" v-text="$t('dialog.spotify.track.album')" />
<a class="title is-6 has-text-link" @click="open_album" v-text="album.name" />
<span
class="heading"
v-text="$t('dialog.spotify.track.album')"
/>
<a
class="title is-6 has-text-link"
@click="open_album"
v-text="album.name"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.track.album-artist')" />
<a class="title is-6 has-text-link" @click="open_artist" v-text="album.artists[0].name" />
<span
class="heading"
v-text="$t('dialog.spotify.track.album-artist')"
/>
<a
class="title is-6 has-text-link"
@click="open_artist"
v-text="album.artists[0].name"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.track.release-date')" />
<span class="title is-6" v-text="$filters.date(album.release_date)" />
<span
class="heading"
v-text="$t('dialog.spotify.track.release-date')"
/>
<span
class="title is-6"
v-text="$filters.date(album.release_date)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.track.position')" />
<span class="title is-6" v-text="[ track.disc_number, track.track_number ].join(' / ')" />
<span
class="heading"
v-text="$t('dialog.spotify.track.position')"
/>
<span
class="title is-6"
v-text="[track.disc_number, track.track_number].join(' / ')"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.track.duration')" />
<span class="title is-6" v-text="$filters.durationInHours(track.duration_ms)" />
<span
class="heading"
v-text="$t('dialog.spotify.track.duration')"
/>
<span
class="title is-6"
v-text="$filters.durationInHours(track.duration_ms)"
/>
</p>
<p>
<span class="heading" v-text="$t('dialog.spotify.track.path')" />
<span
class="heading"
v-text="$t('dialog.spotify.track.path')"
/>
<span class="title is-6" v-text="track.uri" />
</p>
</div>
@@ -38,20 +73,33 @@
<footer class="card-footer">
<a class="card-footer-item has-text-dark" @click="queue_add">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.track.add')" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.track.add')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="queue_add_next">
<mdicon class="icon" name="playlist-play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.track.add-next')" />
<span
class="is-size-7"
v-text="$t('dialog.spotify.track.add-next')"
/>
</a>
<a class="card-footer-item has-text-dark" @click="play">
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.spotify.track.play')" />
<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>

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

@@ -5,15 +5,27 @@
<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">
<mdicon class="icon is-small" name="account-music" size="16" />
<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">
<mdicon class="icon is-small" name="album" size="16" />

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

@@ -5,7 +5,11 @@
<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">
<mdicon class="icon is-small" name="web" size="16" />
@@ -13,15 +17,27 @@
</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">
<mdicon class="icon is-small" name="account-music" size="16" />
<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">
<mdicon class="icon is-small" name="album" size="16" />
@@ -29,7 +45,11 @@
</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">
<mdicon class="icon is-small" name="speaker" size="16" />
@@ -37,15 +57,28 @@
</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">
<mdicon class="icon is-small" name="book-open-page-variant" size="16" />
<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">
<mdicon class="icon is-small" name="spotify" size="16" />

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

@@ -5,13 +5,21 @@
<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">
<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">
<mdicon class="icon is-small" name="spotify" size="16" />
<span v-text="$t('tabs.search.spotify')" />

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

@@ -5,31 +5,53 @@
<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 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 v-text="$t('page.settings.tabs.settings.remotes-and-outputs')" />
<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 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 v-text="$t('page.settings.tabs.settings.online-services')" />
<span
v-text="$t('page.settings.tabs.settings.online-services')"
/>
</a>
</li>
</router-link>