MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-01-23 20:53:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Migrate to Bulma 1.0.2

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-09-24 20:31:51 +02:00
parent 87ec17c243
commit 66c2873d32
43 changed files with 261 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web-src/package-lock.json generated
View File

@ -3062,9 +3062,9 @@
"license": "MIT"
},
"node_modules/vite": {
"version": "5.4.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
"integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
"version": "5.4.6",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
"integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==",
"dev": true,
"license": "MIT",
"dependencies": {

3
web-src/src/App.vue
View File

@ -5,7 +5,6 @@
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
<modal-dialog-remote-pairing
:show="pairing_active"
@close="pairing_active = false"
@ -18,7 +17,7 @@
<navbar-bottom />
<div
v-show="show_burger_menu || show_player_menu"
class="fd-overlay-fullscreen"
class="overlay-fullscreen"
@click="show_burger_menu = show_player_menu = false"
/>
</div>

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

@ -1,7 +1,7 @@
<template>
<div class="media is-align-items-center pt-0">
<div class="media-left">
<a class="button is-white is-small" @click="toggle">
<a class="button is-small" @click="toggle">
<mdicon class="icon" :name="icon" />
</a>
</div>

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

@ -2,7 +2,7 @@
<div class="media is-align-items-center pt-0">
<div class="media-left">
<a
class="button is-white is-small"
class="button is-small"
:class="{ 'has-text-grey-light': !output.selected }"
@click="toggle"
>

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

@ -2,7 +2,7 @@
<div class="media is-align-items-center pt-0">
<div class="media-left">
<a
class="button is-white is-small"
class="button is-small"
:class="{
'has-text-grey-light': !playing && !loading,
'is-loading': loading

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

@ -1,14 +1,22 @@
<template>
<label class="toggle">
<input
:checked="modelValue"
type="checkbox"
class="toggle-checkbox is-rounded mr-2"
@change="$emit('update:modelValue', !modelValue)"
/>
<div class="toggle-switch"></div>
<slot name="label" class="toggle-label" />
</label>
<div class="field">
<label class="toggle">
<div class="control is-flex is-align-content-center">
<input
:checked="modelValue"
type="checkbox"
class="toggle-checkbox"
@change="$emit('update:modelValue', !modelValue)"
/>
<div class="toggle-switch" />
<slot name="label" />
<slot name="info" />
</div>
</label>
<p v-if="$slots['help']" class="help notification">
<slot name="help" />
</p>
</div>
</template>
<script>
@ -29,10 +37,11 @@ export default {
.toggle-switch {
display: inline-block;
background: var(--bulma-grey-light);
background: var(--bulma-grey-lighter);
border-radius: 1rem;
width: 2.75rem;
height: 1.5rem;
min-width: 2.5rem;
width: 2.5rem;
height: 1.25rem;
position: relative;
vertical-align: middle;
transition: background 0.25s;
@ -49,18 +58,18 @@ export default {
width: 1rem;
height: 1rem;
position: absolute;
top: 0.25rem;
left: 0.25rem;
top: 0.125rem;
left: 0.125rem;
transition: left 0.25s;
}
.toggle:hover .toggle-switch:before {
background: var(--bulma-white);
}
.toggle-checkbox:checked + .toggle-switch {
background: var(--bulma-primary);
background: var(--bulma-dark);
}
.toggle-checkbox:checked + .toggle-switch:before {
left: 1.5rem;
left: 1.375rem;
}
.toggle-checkbox {

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

@ -3,7 +3,7 @@
<div v-if="!item.isItem" class="py-5">
<span
:id="`index_${item.index}`"
class="tag is-info is-light is-small has-text-weight-bold"
class="tag is-small has-text-weight-bold"
v-text="item.index"
/>
</div>

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

@ -4,7 +4,7 @@
<div class="media-content">
<span
:id="`index_${item.index}`"
class="tag is-info is-light is-small has-text-weight-bold"
class="tag is-small has-text-weight-bold"
v-text="item.index"
/>
</div>

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

@ -4,7 +4,7 @@
<div class="media-content">
<span
:id="`index_${item.index}`"
class="tag is-info is-light is-small has-text-weight-bold"
class="tag is-small has-text-weight-bold"
v-text="item.index"
/>
</div>

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

@ -4,7 +4,7 @@
<div class="media-content">
<span
:id="`index_${item.index}`"
class="tag is-info is-light is-small has-text-weight-bold"
class="tag is-small has-text-weight-bold"
v-text="item.index"
/>
</div>

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

@ -3,7 +3,7 @@
<div v-if="!item.isItem" class="py-5">
<span
:id="`index_${item.index}`"
class="tag is-info is-light is-small has-text-weight-bold"
class="tag is-small has-text-weight-bold"
v-text="item.index"
/>
</div>

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

@ -11,17 +11,13 @@
</a>
<a
v-if="delete_action"
class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
class="card-footer-item has-background-danger"
@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" @click="$emit('ok')">
<mdicon class="icon" name="check" size="16" />
<span class="is-size-7" v-text="ok_action" />
</a>

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

@ -7,7 +7,7 @@
<input
ref="url_field"
v-model="url"
class="input is-shadowless"
class="input"
type="url"
pattern="http[s]?://.+"
required
@ -33,7 +33,7 @@
</a>
<a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
class="card-footer-item"
@click="add_stream"
>
<mdicon class="icon" name="playlist-plus" size="16" />

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

@ -8,7 +8,7 @@
<input
ref="url_field"
v-model="url"
class="input is-shadowless"
class="input"
type="url"
pattern="http[s]?://.+"
required

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

@ -8,7 +8,7 @@
<input
ref="playlist_name_field"
v-model="playlist_name"
class="input is-shadowless"
class="input"
type="text"
pattern=".+"
required
@ -34,7 +34,7 @@
</a>
<a
:class="{ 'is-disabled': disabled }"
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
class="card-footer-item has-text-weight-bold"
@click="save"
>
<mdicon class="icon" name="content-save" size="16" />

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

@ -23,10 +23,7 @@
<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"
>
<a class="card-footer-item" @click="kickoff_pairing">
<mdicon class="icon" name="cellphone" size="16" />
<span class="is-size-7" v-text="$t('dialog.remote-pairing.pair')" />
</a>

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

@ -9,8 +9,8 @@
>
<template #modal-content>
<div v-if="!libraryStore.updating">
<p class="mb-3" v-text="$t('dialog.update.info')" />
<div v-if="spotify_enabled || rss.tracks > 0" class="field">
<label class="label" v-text="$t('dialog.update.info')" />
<div class="control">
<div class="select is-small">
<select v-model="libraryStore.update_dialog_scan_kind">
@ -30,13 +30,11 @@
</div>
</div>
</div>
<div class="field">
<control-switch v-model="rescan_metadata">
<template #label>
<span v-text="$t('dialog.update.rescan-metadata')" />
</template>
</control-switch>
</div>
<control-switch v-model="rescan_metadata">
<template #label>
<span v-text="$t('dialog.update.rescan-metadata')" />
</template>
</control-switch>
</div>
<div v-else>
<p class="mb-3" v-text="$t('dialog.update.progress')" />

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

@ -18,9 +18,9 @@
<control-link
:to="{ name: 'now-playing' }"
exact
class="navbar-item is-expanded is-clipped is-size-7"
class="navbar-item is-justify-content-flex-start is-expanded is-clipped is-size-7"
>
<div class="fd-is-text-clipped">
<div class="is-text-clipped">
<strong v-text="current.title" />
<br />
<span v-text="current.artist" />
@ -134,3 +134,11 @@ export default {
}
}
</script>
<style scoped>
.is-text-clipped {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

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

@ -1,23 +1,23 @@
<template>
<div class="field">
<control-switch
:id="setting.name"
v-model="setting.value"
@update:model-value="update_setting"
>
<template #label>
<slot name="label" />
</template>
</control-switch>
<i
class="is-size-7"
:class="{ 'has-text-info': is_success, 'has-text-danger': is_error }"
v-text="info"
/>
<p v-if="$slots['info']" class="help">
<slot name="info" />
</p>
</div>
<control-switch v-model="setting.value" @update:model-value="update">
<template #label>
<slot name="label" />
</template>
<template #info>
<mdicon
v-if="isSuccess"
class="icon has-text-info"
name="check"
size="16"
/>
<mdicon
v-if="isError"
class="icon has-text-danger"
name="close"
size="16"
/>
</template>
</control-switch>
</template>
<script>
@ -48,18 +48,10 @@ export default {
},
computed: {
info() {
if (this.is_success) {
return this.$t('setting.saved')
} else if (this.is_error) {
return this.$t('setting.not-saved')
}
return ''
},
is_error() {
isError() {
return this.statusUpdate === 'error'
},
is_success() {
isSuccess() {
return this.statusUpdate === 'success'
},
setting() {
@ -76,13 +68,13 @@ export default {
},
methods: {
clear_status() {
clearStatus() {
if (this.is_error) {
this.setting.value = !this.setting.value
}
this.statusUpdate = ''
},
update_setting() {
update() {
this.timerId = -1
const setting = {
category: this.category,
@ -99,7 +91,7 @@ export default {
this.statusUpdate = 'error'
})
.finally(() => {
this.timerId = window.setTimeout(this.clear_status, this.timerDelay)
this.timerId = window.setTimeout(this.clearStatus, this.timerDelay)
})
}
}

12
web-src/src/i18n/de.json
View File

@ -241,6 +241,7 @@
"compiled-with": "Compiliert mit Unterstützung von {options}.",
"library": "Bibliothek",
"more": "mehr",
"name": "Name",
"total-playtime": "Gesamte Spielzeit",
"tracks": "Tracks",
"update": "Neu einlesen",
@ -407,8 +408,8 @@
"count": "{count} Track|{count} Track|{count} Tracks",
"edit": "Bearbeiten",
"hide-previous": "Vorherige verbergen",
"title": "Warteschlange",
"save": "Speichern"
"save": "Speichern",
"title": "Warteschlange"
},
"radio": {
"count": "{count} Station|{count} Station|{count} Stationen",
@ -494,8 +495,7 @@
"spotify": {
"no-support": "OwnTone wurde entweder ohne Unterstützung für Spotify erstellt oder libspotify ist nicht installiert.",
"logged-as": "Angemeldet als ",
"requirements": "Spotify Premium Abo erforderlich.",
"scopes": "Zugriff auf die Spotify Web-Api ermöglicht scannen der Spotify-Blibliothek. Erforderliche scopes sind: ",
"requirements": "Spotify Premium Abo erforderlich. Zugriff auf die Spotify Web-Api ermöglicht scannen der Spotify-Blibliothek. Erforderliche scopes sind: ",
"user": "Zugriff gestattet für ",
"authorize": "Authorisiere Web-API-Zugriff",
"grant-access": "Zugriff auf die Spotify Web-API gestatten",
@ -571,10 +571,6 @@
"toggle-lyrics": "Liedtexte anzeigen/verbergen"
}
},
"setting": {
"not-saved": " (Fehler beim Speichern der Einstellungen)",
"saved": " (Einstellungen gesichert)"
},
"server": {
"connection-failed": "Fehler bei Verbindung zum OwnTone-Server",
"missing-port": "Fehlender Websocket-Port",

12
web-src/src/i18n/en.json
View File

@ -241,6 +241,7 @@
"compiled-with": "Compiled with support for {options}.",
"library": "Library",
"more": "more",
"name": "Name",
"total-playtime": "Total playtime",
"tracks": "Tracks",
"update": "Update",
@ -407,8 +408,8 @@
"count": "{count} track|{count} track|{count} tracks",
"edit": "Edit",
"hide-previous": "Hide previous",
"title": "Queue",
"save": "Save"
"save": "Save",
"title": "Queue"
},
"radio": {
"count": "{count} station|{count} station|{count} stations",
@ -494,8 +495,7 @@
"spotify": {
"no-support": "OwnTone was either built without support for Spotify or libspotify is not installed.",
"logged-as": "Logged in as ",
"requirements": "You must have a Spotify premium account.",
"scopes": "Access to the Spotify Web API enables scanning of your Spotify library. Required scopes are: ",
"requirements": "You must have a Spotify premium account. Access to the Spotify Web API enables scanning of your Spotify library. Required scopes are: ",
"user": "Access granted for ",
"authorize": "Authorize Web API access",
"grant-access": "Grant access to the Spotify Web API",
@ -571,10 +571,6 @@
"toggle-lyrics": "Toggle lyrics"
}
},
"setting": {
"not-saved": " (error saving setting)",
"saved": " (setting saved)"
},
"server": {
"connection-failed": "Failed to connect to OwnTone server",
"missing-port": "Missing websocket port",

12
web-src/src/i18n/fr.json
View File

@ -241,6 +241,7 @@
"compiled-with": "Compilé avec les options {options}.",
"library": "Bibliothèque",
"more": "plus",
"name": "Nom",
"total-playtime": "Durée totale de lecture",
"tracks": "Pistes",
"update": "Actualiser",
@ -407,8 +408,8 @@
"count": "{count} piste|{count} piste|{count} pistes",
"edit": "Éditer",
"hide-previous": "Masquer l’historique",
"queue": "File d’attente",
"save": "Enregistrer"
"save": "Enregistrer",
"title": "File d’attente"
},
"radio": {
"count": "{count} station|{count} station|{count} stations",
@ -494,8 +495,7 @@
"spotify": {
"no-support": "L’option Spotify n’est pas présente.",
"logged-as": "Connecté en tant que ",
"requirements": "Vous devez posséder un compte Spotify Premium.",
"scopes": "L’accès à l’API de Spotify permet l’analyse de votre bibliothèque Spotify. Les champs d’application requis sont les suivants :",
"requirements": "Vous devez posséder un compte Spotify Premium. L’accès à l’API de Spotify permet l’analyse de votre bibliothèque Spotify. Les champs d’application requis sont les suivants :",
"user": "Accès autorisé pour ",
"authorize": "Autoriser l’accès à l’API",
"grant-access": "Accordez l’accès à l’API de Spotify",
@ -571,10 +571,6 @@
"toggle-lyrics": "Voir/Cacher les paroles"
}
},
"setting": {
"not-saved": " (erreur à l’enregistrement du réglage)",
"saved": " (réglage enregistré)"
},
"server": {
"connection-failed": "Échec de connexion au serveur",
"missing-port": "Port websocket manquant",

12
web-src/src/i18n/zh-CN.json
View File

@ -241,6 +241,7 @@
"compiled-with": "编译支持来自于 {options}",
"library": "资料库",
"more": "更多",
"name": "名称",
"total-playtime": "总播放时长",
"tracks": "曲目总数",
"update": "更新",
@ -407,8 +408,8 @@
"count": "{count} 只曲目|{count} 只曲目",
"edit": "编辑",
"hide-previous": "隐藏历史",
"title": "清单",
"save": "保存"
"save": "保存",
"title": "清单"
},
"radio": {
"count": "{count} 个电台|{count} 个电台",
@ -494,8 +495,7 @@
"spotify": {
"no-support": "OwnTone的构建没有来自 Spotify 官方的支持，也未安装 libspotify",
"logged-as": "登录为 ",
"requirements": "您必须拥有 Spotify付费帐户",
"scopes": "访问 Spotify Web API 可以扫描您的 Spotify库。所需范围是：",
"requirements": "您必须拥有 Spotify付费帐户。访问 Spotify Web API 可以扫描您的 Spotify库。所需范围是：",
"user": "授予访问权限",
"authorize": "授权 Web API 访问",
"grant-access": "授予对 Spotify Web API 的访问权限",
@ -571,10 +571,6 @@
"toggle-lyrics": "显示/隐藏歌词"
}
},
"setting": {
"not-saved": " (设置保存错误)",
"saved": " (设置已保存)"
},
"server": {
"connection-failed": "无法连接到 OwnTone 服务器",
"missing-port": "缺少 websocket 端口",

12
web-src/src/i18n/zh-TW.json
View File

@ -241,6 +241,7 @@
"compiled-with": "編譯支持來自於 {options}",
"library": "資料庫",
"more": "更多",
"name": "名稱",
"total-playtime": "總播放時長",
"tracks": "曲目總數",
"update": "更新",
@ -407,8 +408,8 @@
"count": "{count} 首曲目|{count} 首曲目",
"edit": "編輯",
"hide-previous": "隱藏歷史",
"title": "清單",
"save": "儲存"
"save": "儲存",
"title": "清單"
},
"radio": {
"count": "{count} 個電台|{count} 個電台",
@ -494,8 +495,7 @@
"spotify": {
"no-support": "OwnTone並無 Spotify 官方的支持，也未安裝 libspotify",
"logged-as": "登入為 ",
"requirements": "您必須擁有 Spotify付費帳戶",
"scopes": "訪問 Spotify Web API 可以掃描您的 Spotify庫。所需範圍是：",
"requirements": "您必須擁有 Spotify付費帳戶。訪問 Spotify Web API 可以掃描您的 Spotify庫。所需範圍是：",
"user": "授予訪問權限",
"authorize": "授權 Web API 訪問",
"grant-access": "授予對 Spotify Web API 的訪問權限",
@ -571,10 +571,6 @@
"toggle-lyrics": "顯示/隱藏歌詞"
}
},
"setting": {
"not-saved": " (設定儲存錯誤)",
"saved": " (設定已儲存)"
},
"server": {
"connection-failed": "無法連接到 OwnTone 伺服器",
"missing-port": "缺少 websocket 端口",

35
web-src/src/mystyles.scss
View File

@ -11,12 +11,6 @@
cursor: move;
}
.fd-is-text-clipped {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fd-tabs-section {
padding-bottom: 0;
padding-top: 0;
@ -44,6 +38,11 @@
}
}
.navbar-item {
width: var(--bulma-navbar-height);
justify-content: center;
}
.fd-cover {
align-items: center;
display: flex;
@ -112,24 +111,16 @@
/* Only scroll content if modal contains a card component */
.modal-content .card-content {
max-height: calc(100vh - 200px);
max-height: calc(100vh - calc(4 * var(--bulma-navbar-height)));
overflow: auto;
}
/* Show scrollbar for navbar menu in desktop mode if content exceeds the screen size */
@include desktop {
.navbar-dropdown {
max-height: calc(100vh - calc(2 * var(--bulma-navbar-height)) - 2rem);
overflow: auto;
}
}
.buttons {
@include mobile {
&.fd-is-centered-mobile {
&.is-centered-mobile {
justify-content: center;
&:not(.has-addons) {
.button:not(.is-fullwidth) {
.button {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
@ -157,7 +148,7 @@
}
}
.fd-overlay-fullscreen {
.overlay-fullscreen {
@extend .is-overlay;
z-index: 25;
background-color: rgba(10, 10, 10, 0.2);
@ -187,9 +178,9 @@
box-sizing: border-box;
border-radius: 50%;
background: var(--bulma-light);
border: 1px solid var(--bulma-grey-light);
border: 1px solid var(--bulma-grey-lighter);
@media (prefers-color-scheme: dark) {
background: var(--bulma-grey-light);
background: var(--bulma-grey-lighter);
border: 1px solid var(--bulma-grey-dark);
}
}
@ -209,12 +200,12 @@
background: linear-gradient(
90deg,
var(--bulma-dark) var(--sx),
var(--bulma-grey-light) var(--sx)
var(--bulma-grey-lighter) var(--sx)
);
@media (prefers-color-scheme: dark) {
background: linear-gradient(
90deg,
var(--bulma-grey-light) var(--sx),
var(--bulma-grey-lighter) var(--sx),
var(--bulma-grey-dark) var(--sx)
);
}

4
web-src/src/pages/PageAbout.vue
View File

@ -5,13 +5,11 @@
<div class="column is-four-fifths">
<div class="content">
<nav class="level">
<!-- Left side -->
<div class="level-left">
<div class="level-item">
<p class="title is-4" v-text="$t('page.about.library')" />
</div>
</div>
<!-- Right side -->
<div class="level-right">
<div v-if="library.updating">
<a
@ -31,7 +29,7 @@
<div class="media">
<div
class="media-content has-text-weight-bold"
v-text="$t('page.about.library')"
v-text="$t('page.about.name')"
/>
<div class="media-right" v-text="configuration.library_name" />
</div>

9
web-src/src/pages/PageAlbum.vue
View File

@ -6,13 +6,16 @@
<p class="subtitle is-6 has-text-link">
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
</p>
<div class="buttons fd-is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<div class="buttons is-centered-mobile mt-5">
<a
class="button has-background-light is-small is-rounded"
@click="play"
>
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.album.shuffle')" />
</a>
<a
class="button is-small is-light is-rounded"
class="button is-small has-background-light is-rounded"
@click="show_details_modal = true"
>
<mdicon class="icon" name="dots-horizontal" size="16" />

2
web-src/src/pages/PageAlbumSpotify.vue
View File

@ -10,7 +10,7 @@
v-text="album.artists[0].name"
/>
</p>
<div class="buttons fd-is-centered-mobile mt-5">
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="shuffle" size="16" />
<span v-text="$t('page.spotify.album.shuffle')" />

35
web-src/src/pages/PageAlbums.vue
View File

@ -7,22 +7,25 @@
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.albums.filter')" />
<div class="field">
<control-switch v-model="uiStore.hide_singles">
<template #label>
<span v-text="$t('page.albums.hide-singles')" />
</template>
</control-switch>
<p class="help" v-text="$t('page.albums.hide-singles-help')" />
</div>
<div v-if="spotify_enabled" class="field">
<control-switch v-model="uiStore.hide_spotify">
<template #label>
<span v-text="$t('page.albums.hide-spotify')" />
</template>
</control-switch>
<p class="help" v-text="$t('page.albums.hide-spotify-help')" />
</div>
<control-switch v-model="uiStore.hide_singles">
<template #label>
<span v-text="$t('page.albums.hide-singles')" />
</template>
<template #help>
<span v-text="$t('page.albums.hide-singles-help')" />
</template>
</control-switch>
<control-switch
v-if="spotify_enabled"
v-model="uiStore.hide_spotify"
>
<template #label>
<span v-text="$t('page.albums.hide-spotify')" />
</template>
<template #help>
<span v-text="$t('page.albums.hide-spotify-help')" />
</template>
</control-switch>
</div>
<div class="column">
<p class="heading" v-text="$t('page.albums.sort.title')" />

19
web-src/src/pages/PageArtist.vue
View File

@ -5,14 +5,17 @@
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.artist.filter')" />
<div v-if="spotify_enabled" class="field">
<control-switch v-model="uiStore.hide_spotify">
<template #label>
<span v-text="$t('page.artist.hide-spotify')" />
</template>
</control-switch>
<p class="help" v-text="$t('page.artist.hide-spotify-help')" />
</div>
<control-switch
v-if="spotify_enabled"
v-model="uiStore.hide_spotify"
>
<template #label>
<span v-text="$t('page.artist.hide-spotify')" />
</template>
<template #help>
<span v-text="$t('page.artist.hide-spotify-help')" />
</template>
</control-switch>
</div>
<div class="column">
<p class="heading" v-text="$t('page.artist.sort.title')" />

19
web-src/src/pages/PageArtistTracks.vue
View File

@ -6,14 +6,17 @@
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.artist.filter')" />
<div v-if="spotify_enabled" class="field">
<control-switch v-model="uiStore.hide_spotify">
<template #label>
<span v-text="$t('page.artist.hide-spotify')" />
</template>
</control-switch>
<p class="help" v-text="$t('page.artist.hide-spotify-help')" />
</div>
<control-switch
v-if="spotify_enabled"
v-model="uiStore.hide_spotify"
>
<template #label>
<span v-text="$t('page.artist.hide-spotify')" />
</template>
<template #help>
<span v-text="$t('page.artist.hide-spotify-help')" />
</template>
</control-switch>
</div>
<div class="column">
<p class="heading" v-text="$t('page.artist.sort.title')" />

22
web-src/src/pages/PageArtists.vue
View File

@ -6,22 +6,24 @@
<index-button-list :indices="artists.indices" />
<div class="columns">
<div class="column">
<p class="heading" v-text="$t('page.artists.filter')" />
<div class="field">
<control-switch v-model="uiStore.hide_singles">
<template #label>
<span v-text="$t('page.artists.hide-singles')" />
</template>
</control-switch>
<p class="help" v-text="$t('page.artists.hide-singles-help')" />
</div>
<p v-text="$t('page.artists.filter')" class="heading" />
<control-switch v-model="uiStore.hide_singles">
<template #label>
<span v-text="$t('page.artists.hide-singles')" />
</template>
<template #help>
<span v-text="$t('page.artists.hide-singles-help')" />
</template>
</control-switch>
<div v-if="spotify_enabled" class="field">
<control-switch v-model="uiStore.hide_spotify">
<template #label>
<span v-text="$t('page.artists.hide-spotify')" />
</template>
<template #help>
<span v-text="$t('page.artists.hide-spotify-help')" />
</template>
</control-switch>
<p class="help" v-text="$t('page.artists.hide-spotify-help')" />
</div>
</div>
<div class="column">

2
web-src/src/pages/PageAudiobooksAlbum.vue
View File

@ -6,7 +6,7 @@
<p class="subtitle is-6 has-text-link">
<a class="has-text-link" @click="open_artist" v-text="album.artist" />
</p>
<div class="buttons fd-is-centered-mobile mt-5">
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.audiobooks.album.play')" />

4
web-src/src/pages/PageMusic.vue
View File

@ -12,7 +12,7 @@
<nav class="level">
<p class="level-item">
<router-link
class="button is-light is-small is-rounded"
class="button is-small is-rounded"
:to="{ name: 'music-recently-added' }"
>
{{ $t('page.music.show-more') }}
@ -32,7 +32,7 @@
<nav class="level">
<p class="level-item">
<router-link
class="button is-light is-small is-rounded"
class="button is-small is-rounded"
:to="{ name: 'music-recently-played' }"
>
{{ $t('page.music.show-more') }}

4
web-src/src/pages/PageMusicSpotify.vue
View File

@ -13,7 +13,7 @@
<p class="level-item">
<router-link
:to="{ name: 'music-spotify-new-releases' }"
class="button is-light is-small is-rounded"
class="button is-small is-rounded"
>
{{ $t('page.spotify.music.show-more') }}
</router-link>
@ -36,7 +36,7 @@
<p class="level-item">
<router-link
:to="{ name: 'music-spotify-featured-playlists' }"
class="button is-light is-small is-rounded"
class="button is-small is-rounded"
>
{{ $t('page.spotify.music.show-more') }}
</router-link>

96
web-src/src/pages/PageNowPlaying.vue
View File

@ -1,56 +1,56 @@
<template>
<div class="hero is-full-height">
<div v-if="track.id > 0" class="hero-body is-flex is-align-items-center">
<div class="container has-text-centered" style="max-width: 500px">
<cover-artwork
:url="track.artwork_url"
:artist="track.artist"
:album="track.album"
class="is-clickable fd-has-shadow fd-cover-big-image"
:class="{ 'is-masked': lyricsStore.pane }"
@click="open_dialog(track)"
/>
<lyrics-pane v-if="lyricsStore.pane" />
<control-slider
v-model:value="track_progress"
class="mt-5"
:disabled="is_live"
:max="track_progress_max"
:cursor="cursor"
@change="seek"
@mousedown="start_dragging"
@mouseup="end_dragging"
/>
<div class="is-flex is-justify-content-space-between">
<p class="subtitle is-7" v-text="track_elapsed_time" />
<p class="subtitle is-7" v-text="track_total_time" />
</div>
<p class="title is-5" v-text="track.title" />
<p class="title is-6" v-text="track.artist" />
<p
v-if="composer"
class="subtitle is-6 has-text-grey has-text-weight-bold"
v-text="composer"
/>
<p v-if="track.album" class="subtitle is-6" v-text="track.album" />
<p
v-if="settingsStore.show_filepath_now_playing"
class="subtitle is-6 has-text-grey"
v-text="track.path"
/>
</div>
</div>
<div v-else class="hero-body is-flex is-align-items-center">
<div class="hero-body is-flex is-align-items-center">
<div class="container has-text-centered">
<p class="title is-5" v-text="$t('page.now-playing.title')" />
<p class="subtitle" v-text="$t('page.now-playing.info')" />
<div v-if="track.id" class="mx-auto" style="max-width: 32rem">
<cover-artwork
:url="track.artwork_url"
:artist="track.artist"
:album="track.album"
class="is-clickable fd-has-shadow fd-cover-big-image"
:class="{ 'is-masked': lyricsStore.pane }"
@click="open_dialog(track)"
/>
<lyrics-pane v-if="lyricsStore.pane" />
<control-slider
v-model:value="track_progress"
class="mt-5"
:disabled="is_live"
:max="track_progress_max"
:cursor="cursor"
@change="seek"
@mousedown="start_dragging"
@mouseup="end_dragging"
/>
<div class="is-flex is-justify-content-space-between">
<p class="subtitle is-7" v-text="track_elapsed_time" />
<p class="subtitle is-7" v-text="track_total_time" />
</div>
<p class="title is-5" v-text="track.title" />
<p class="title is-6" v-text="track.artist" />
<p
v-if="composer"
class="subtitle is-6 has-text-grey has-text-weight-bold"
v-text="composer"
/>
<p v-if="track.album" class="subtitle is-6" v-text="track.album" />
<p
v-if="settingsStore.show_filepath_now_playing"
class="subtitle is-6 has-text-grey"
v-text="track.path"
/>
</div>
<div v-else>
<p class="title is-5" v-text="$t('page.now-playing.title')" />
<p class="subtitle" v-text="$t('page.now-playing.info')" />
</div>
</div>
<modal-dialog-queue-item
:show="show_details_modal"
:item="selected_item"
@close="show_details_modal = false"
/>
</div>
<modal-dialog-queue-item
:show="show_details_modal"
:item="selected_item"
@close="show_details_modal = false"
/>
</div>
</template>

2
web-src/src/pages/PagePodcast.vue
View File

@ -6,7 +6,7 @@
<p class="subtitle is-6">
<br />
</p>
<div class="buttons fd-is-centered-mobile mt-5">
<div class="buttons is-centered-mobile mt-5">
<a class="button is-small is-dark is-rounded" @click="play">
<mdicon class="icon" name="play" size="16" />
<span v-text="$t('page.podcast.play')" />

4
web-src/src/pages/PageSearchLibrary.vue
View File

@ -9,7 +9,7 @@
<input
ref="search_field"
v-model="search_query"
class="input is-rounded is-shadowless"
class="input is-rounded"
type="text"
:placeholder="$t('page.search.placeholder')"
autocomplete="off"
@ -60,7 +60,7 @@
<nav v-if="show_all_button(items)" class="level">
<p class="level-item">
<a
class="button is-light is-small is-rounded"
class="button is-small is-rounded"
@click="expand(type)"
v-text="
$t(`page.search.show-${type}s`, items.total, {

4
web-src/src/pages/PageSearchSpotify.vue
View File

@ -9,7 +9,7 @@
<input
ref="search_field"
v-model="search_query"
class="input is-rounded is-shadowless"
class="input is-rounded"
type="text"
:placeholder="$t('page.spotify.search.placeholder')"
autocomplete="off"
@ -55,7 +55,7 @@
<nav v-if="show_all_button(items)" class="level">
<p class="level-item">
<a
class="button is-light is-small is-rounded"
class="button is-small is-rounded"
@click="expand(type)"
v-text="
$t(`page.spotify.search.show-${type}s`, items.total, {

29
web-src/src/pages/PageSettingsOnlineServices.vue
View File

@ -9,18 +9,19 @@
/>
</template>
<template #content>
<div v-if="!spotify.spotify_installed" class="notification is-size-7">
<div v-if="!spotify.spotify_installed" class="notification help">
<p v-text="$t('page.settings.services.spotify.no-support')" />
</div>
<div v-if="spotify.spotify_installed">
<div class="notification is-size-7">
<span v-text="$t('page.settings.services.spotify.requirements')" />
</div>
<div class="mt-5">
<div>
<p
class="content"
v-text="$t('page.settings.services.spotify.grant-access')"
/>
<div class="notification help">
<p v-text="$t('page.settings.services.spotify.requirements')" />
<p v-text="spotify_required_scope.join(', ')" />
</div>
<p v-if="spotify.webapi_token_valid">
<span v-text="$t('page.settings.services.spotify.user')" />
<code v-text="spotify.webapi_user" />
@ -29,25 +30,21 @@
<span v-text="$t('page.settings.services.spotify.reauthorize')" />
<code v-text="spotify_missing_scope.join()" />
</p>
<div class="field mt-5">
<div
v-if="
!spotify.webapi_token_valid || spotify_missing_scope.length > 0
"
class="field"
>
<div class="control">
<a
class="button"
:class="{
'is-info':
!spotify.webapi_token_valid ||
spotify_missing_scope.length > 0
}"
:href="spotify.oauth_uri"
v-text="$t('page.settings.services.spotify.authorize')"
/>
</div>
</div>
<p class="help">
<span v-text="$t('page.settings.services.spotify.scopes')" />
<code v-text="spotify_required_scope.join(', ')" />
</p>
<div v-if="spotify.webapi_token_valid" class="field mt-5">
<div v-if="spotify.webapi_token_valid" class="field">
<div class="control">
<a
class="button is-danger"

19
web-src/src/pages/PageSettingsRemotesOutputs.vue
View File

@ -50,17 +50,14 @@
v-text="$t('page.settings.devices.speaker-pairing-info')"
/>
<div v-for="output in outputs" :key="output.id">
<div class="field">
<control-switch
:id="output.id"
v-model="output.selected"
@update:model-value="toggleOutput(output.id)"
>
<template #label>
<span v-text="output.name" />
</template>
</control-switch>
</div>
<control-switch
v-model="output.selected"
@update:model-value="toggleOutput(output.id)"
>
<template #label>
<span v-text="output.name" />
</template>
</control-switch>
<form
v-if="output.needs_auth_key"
class="mb-5"

6
web-src/src/templates/ContentWithHeading.vue
View File

@ -6,14 +6,13 @@
<section v-if="$slots.options" ref="options">
<slot name="options" />
<nav class="buttons is-centered">
<router-link class="button is-small is-white" :to="position">
<router-link class="button is-small" :to="position">
<mdicon class="icon" :name="icon" size="16" />
</router-link>
</nav>
</section>
<div :class="{ 'is-full-height': $slots.options }">
<div>
<nav id="top" class="level is-clipped">
<!-- Left side -->
<div class="level-left is-flex-shrink-1">
<div
class="level-item is-flex-shrink-1 has-text-centered-mobile"
@ -23,7 +22,6 @@
</div>
</div>
</div>
<!-- Right side -->
<div class="level-right has-text-centered-mobile">
<slot name="heading-right" />
</div>

2
web-src/src/templates/ContentWithHero.vue
View File

@ -6,13 +6,11 @@
<div class="column is-four-fifths">
<div class="columns is-flex-direction-row-reverse">
<div class="column fd-has-cover">
<!-- Slot heading right -->
<slot name="heading-right" />
</div>
<div
class="column m-auto is-three-fifths has-text-centered-mobile"
>
<!-- Slot heading left -->
<slot name="heading-left" />
</div>
</div>