[web] Lint source code

This commit is contained in:
Alain Nussbaumer 2024-04-21 17:44:55 +02:00
parent 2fda829ac4
commit b8373a4ee0
11 changed files with 69 additions and 61 deletions

View File

@ -143,15 +143,13 @@ export default {
return return
} }
const vm = this
let protocol = 'ws://' let protocol = 'ws://'
if (window.location.protocol === 'https:') { if (window.location.protocol === 'https:') {
protocol = 'wss://' protocol = 'wss://'
} }
let wsUrl = `${protocol + window.location.hostname}:${ let wsUrl = `${protocol + window.location.hostname}:${
vm.$store.state.config.websocket_port this.$store.state.config.websocket_port
}` }`
if (import.meta.env.DEV && import.meta.env.VITE_OWNTONE_URL) { if (import.meta.env.DEV && import.meta.env.VITE_OWNTONE_URL) {
@ -161,7 +159,7 @@ export default {
*/ */
const owntoneUrl = new URL(import.meta.env.VITE_OWNTONE_URL) const owntoneUrl = new URL(import.meta.env.VITE_OWNTONE_URL)
wsUrl = `${protocol + owntoneUrl.hostname}:${ wsUrl = `${protocol + owntoneUrl.hostname}:${
vm.$store.state.config.websocket_port this.$store.state.config.websocket_port
}` }`
} }
@ -170,6 +168,7 @@ export default {
maxReconnectInterval: 2000 maxReconnectInterval: 2000
}) })
const vm = this
socket.onopen = () => { socket.onopen = () => {
vm.reconnect_attempts = 0 vm.reconnect_attempts = 0
socket.send( socket.send(
@ -188,7 +187,6 @@ export default {
] ]
}) })
) )
vm.update_outputs() vm.update_outputs()
vm.update_player_status() vm.update_player_status()
vm.update_library_stats() vm.update_library_stats()
@ -207,11 +205,10 @@ export default {
*/ */
let update_throttled = false let update_throttled = false
function update_info() { const update_info = () => {
if (update_throttled) { if (update_throttled) {
return return
} }
vm.update_outputs() vm.update_outputs()
vm.update_player_status() vm.update_player_status()
vm.update_library_stats() vm.update_library_stats()
@ -220,7 +217,6 @@ export default {
vm.update_spotify() vm.update_spotify()
vm.update_lastfm() vm.update_lastfm()
vm.update_pairing() vm.update_pairing()
update_throttled = true update_throttled = true
setTimeout(() => { setTimeout(() => {
update_throttled = false update_throttled = false

View File

@ -6,8 +6,9 @@
:key="index" :key="index"
class="button is-small" class="button is-small"
:to="{ hash: `#index_${index}`, query: $route.query }" :to="{ hash: `#index_${index}`, query: $route.query }"
>{{ index }}</router-link
> >
{{ index }}
</router-link>
</nav> </nav>
</section> </section>
</template> </template>

View File

@ -68,17 +68,19 @@ export default {
(this.lastIndex < la.length - 1 && (this.lastIndex < la.length - 1 &&
la[this.lastIndex + 1].time > currentTime) || la[this.lastIndex + 1].time > currentTime) ||
this.lastIndex === la.length - 1 this.lastIndex === la.length - 1
) ) {
return this.lastIndex return this.lastIndex
}
if ( if (
this.lastIndex < la.length - 2 && this.lastIndex < la.length - 2 &&
la[this.lastIndex + 2].time > currentTime la[this.lastIndex + 2].time > currentTime
) ) {
return this.lastIndex + 1 return this.lastIndex + 1
}
// Not found, then start a binary search // Not found, then start a binary search
let start = 0, let end = la.length - 1,
end = la.length - 1, index = 0,
index start = 0
while (start <= end) { while (start <= end) {
index = (start + end) >> 1 index = (start + end) >> 1
const currentVerse = la[index] const currentVerse = la[index]
@ -103,7 +105,7 @@ export default {
const parsed = [] const parsed = []
if (raw) { if (raw) {
// Parse the lyrics // Parse the lyrics
const regex = /(\[(\d+):(\d+)(?:\.\d+)?\] ?)?(.*)/ const regex = /(\[(\d+):(\d+)(?:\.\d+)?\] ?)?(.*)/u
raw.split('\n').forEach((item, index) => { raw.split('\n').forEach((item, index) => {
const matches = regex.exec(item) const matches = regex.exec(item)
if (matches && matches[4]) { if (matches && matches[4]) {
@ -120,7 +122,7 @@ export default {
index < lyrics.length - 1 ? lyrics[index + 1].time - verse.time : 3 index < lyrics.length - 1 ? lyrics[index + 1].time - verse.time : 3
const unitDuration = duration / verse.text.length const unitDuration = duration / verse.text.length
let delay = 0 let delay = 0
verse.words = verse.text.match(/\S+\s*/g).map((text) => { verse.words = verse.text.match(/\S+\s*/gu).map((text) => {
const duration = text.length * unitDuration const duration = text.length * unitDuration
delay += duration delay += duration
return { return {

View File

@ -60,7 +60,8 @@
'is-loading': loading 'is-loading': loading
}" }"
@click="togglePlay" @click="togglePlay"
><mdicon class="icon" name="broadcast" size="18" /> >
<mdicon class="icon" name="broadcast" size="18" />
</a> </a>
</div> </div>
<div class="level-item"> <div class="level-item">
@ -70,8 +71,8 @@
:class="{ 'has-text-grey-light': !playing }" :class="{ 'has-text-grey-light': !playing }"
> >
<p class="heading" v-text="$t('navigation.stream')" /> <p class="heading" v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="heading ml-2" target="_blank" <a href="stream.mp3" class="heading ml-2" target="_blank">
><mdicon <mdicon
class="icon is-small" class="icon is-small"
name="open-in-new" name="open-in-new"
size="16" size="16"
@ -218,7 +219,8 @@
'is-loading': loading 'is-loading': loading
}" }"
@click="togglePlay" @click="togglePlay"
><mdicon class="icon" name="radio-tower" size="16" /> >
<mdicon class="icon" name="radio-tower" size="16" />
</a> </a>
</div> </div>
<div class="level-item"> <div class="level-item">
@ -228,8 +230,8 @@
:class="{ 'has-text-grey-light': !playing }" :class="{ 'has-text-grey-light': !playing }"
> >
<p class="heading" v-text="$t('navigation.stream')" /> <p class="heading" v-text="$t('navigation.stream')" />
<a href="stream.mp3" class="heading ml-2" target="_blank" <a href="stream.mp3" class="heading ml-2" target="_blank">
><mdicon <mdicon
class="icon is-small" class="icon is-small"
name="open-in-new" name="open-in-new"
size="16" size="16"
@ -367,19 +369,19 @@ export default {
}, },
setupAudio() { setupAudio() {
const a = audio.setup() const a = audio.setup()
a.addEventListener('waiting', (e) => { a.addEventListener('waiting', () => {
this.playing = false this.playing = false
this.loading = true this.loading = true
}) })
a.addEventListener('playing', (e) => { a.addEventListener('playing', () => {
this.playing = true this.playing = true
this.loading = false this.loading = false
}) })
a.addEventListener('ended', (e) => { a.addEventListener('ended', () => {
this.playing = false this.playing = false
this.loading = false this.loading = false
}) })
a.addEventListener('error', (e) => { a.addEventListener('error', () => {
this.closeAudio() this.closeAudio()
this.$store.dispatch('add_notification', { this.$store.dispatch('add_notification', {
text: this.$t('navigation.stream-error'), text: this.$t('navigation.stream-error'),

View File

@ -94,17 +94,17 @@
<b v-text="$t('navigation.search')" /> <b v-text="$t('navigation.search')" />
</navbar-item-link> </navbar-item-link>
<hr class="my-3" /> <hr class="my-3" />
<navbar-item-link :to="{ name: 'settings-webinterface' }">{{ <navbar-item-link :to="{ name: 'settings-webinterface' }">
$t('navigation.settings') {{ $t('navigation.settings') }}
}}</navbar-item-link> </navbar-item-link>
<a <a
class="navbar-item" class="navbar-item"
@click.stop.prevent="open_update_dialog()" @click.stop.prevent="open_update_dialog()"
v-text="$t('navigation.update-library')" v-text="$t('navigation.update-library')"
/> />
<navbar-item-link :to="{ name: 'about' }">{{ <navbar-item-link :to="{ name: 'about' }">
$t('navigation.about') {{ $t('navigation.about') }}
}}</navbar-item-link> </navbar-item-link>
</div> </div>
</div> </div>
</div> </div>

View File

@ -8,8 +8,8 @@ const stringComparator = (a, b) => a.localeCompare(b, locale.value)
const dateComparator = (a, b) => const dateComparator = (a, b) =>
new Date(a) - new Date(b) || (!a ? -1 : !b ? 1 : 0) new Date(a) - new Date(b) || (!a ? -1 : !b ? 1 : 0)
function createComparators(criteria) { const createComparators = (criteria) => {
return criteria.map(({ field, type, order = 1 }) => { criteria.map(({ field, type, order = 1 }) => {
switch (type) { switch (type) {
case String: case String:
return (a, b) => stringComparator(a[field], b[field]) * order return (a, b) => stringComparator(a[field], b[field]) * order
@ -17,6 +17,8 @@ function createComparators(criteria) {
return (a, b) => numberComparator(a[field], b[field]) * order return (a, b) => numberComparator(a[field], b[field]) * order
case Date: case Date:
return (a, b) => dateComparator(a[field], b[field]) * order return (a, b) => dateComparator(a[field], b[field]) * order
default:
return null
} }
}) })
} }
@ -49,7 +51,7 @@ const timeIndex = (string) => {
return times.find((item) => isNaN(diff) || diff < item.difference)?.text(date) return times.find((item) => isNaN(diff) || diff < item.difference)?.text(date)
} }
function createIndexer({ field, type = undefined } = {}) { const createIndexer = ({ field, type = undefined } = {}) => {
switch (type) { switch (type) {
case String: case String:
return (item) => characterIndex(item[field]) return (item) => characterIndex(item[field])

View File

@ -146,25 +146,26 @@
keypath="page.about.built-with" keypath="page.about.built-with"
scope="global" scope="global"
> >
<template #bulma><a href="https://bulma.io">Bulma</a></template> <template #bulma>
<template #mdi <a href="https://bulma.io">Bulma</a>
><a href="https://pictogrammers.com/library/mdi/" </template>
>Material Design Icons</a <template #mdi>
></template <a href="https://pictogrammers.com/library/mdi/">
> Material Design Icons
<template #vuejs </a>
><a href="https://vuejs.org/">Vue.js</a></template </template>
> <template #vuejs>
<template #axios <a href="https://vuejs.org/">Vue.js</a>
><a href="https://github.com/mzabriskie/axios" </template>
>axios</a <template #axios>
></template <a href="https://github.com/mzabriskie/axios">axios</a>
> </template>
<template #others <template #others>
><a <a
href="https://github.com/owntone/owntone-server/network/dependencies" href="https://github.com/owntone/owntone-server/network/dependencies"
v-text="$t('page.about.more')" v-text="$t('page.about.more')"
/></template> />
</template>
</i18n-t> </i18n-t>
</div> </div>
</div> </div>

View File

@ -15,8 +15,9 @@
<router-link <router-link
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
:to="{ name: 'music-recently-added' }" :to="{ name: 'music-recently-added' }"
>{{ $t('page.music.show-more') }}</router-link
> >
{{ $t('page.music.show-more') }}
</router-link>
</p> </p>
</nav> </nav>
</template> </template>
@ -35,8 +36,9 @@
<router-link <router-link
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
:to="{ name: 'music-recently-played' }" :to="{ name: 'music-recently-played' }"
>{{ $t('page.music.show-more') }}</router-link
> >
{{ $t('page.music.show-more') }}
</router-link>
</p> </p>
</nav> </nav>
</template> </template>

View File

@ -15,8 +15,9 @@
<router-link <router-link
:to="{ name: 'music-spotify-new-releases' }" :to="{ name: 'music-spotify-new-releases' }"
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
>{{ $t('page.spotify.music.show-more') }}</router-link
> >
{{ $t('page.spotify.music.show-more') }}
</router-link>
</p> </p>
</nav> </nav>
</template> </template>
@ -38,8 +39,9 @@
<router-link <router-link
:to="{ name: 'music-spotify-featured-playlists' }" :to="{ name: 'music-spotify-featured-playlists' }"
class="button is-light is-small is-rounded" class="button is-light is-small is-rounded"
>{{ $t('page.spotify.music.show-more') }}</router-link
> >
{{ $t('page.spotify.music.show-more') }}
</router-link>
</p> </p>
</nav> </nav>
</template> </template>

View File

@ -7,9 +7,9 @@
<div ref="options_ref" style="height: 1px" /> <div ref="options_ref" style="height: 1px" />
<slot name="options" /> <slot name="options" />
<nav class="buttons is-centered mt-4 mb-2"> <nav class="buttons is-centered mt-4 mb-2">
<router-link class="button is-small is-white" :to="position" <router-link class="button is-small is-white" :to="position">
><mdicon class="icon is-small" :name="icon_name" size="16" <mdicon class="icon is-small" :name="icon_name" size="16" />
/></router-link> </router-link>
</nav> </nav>
</section> </section>
<div :class="{ 'is-full-height': $slots.options }"> <div :class="{ 'is-full-height': $slots.options }">

View File

@ -1,7 +1,7 @@
import path from 'path'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import i18n from '@intlify/unplugin-vue-i18n/vite' import i18n from '@intlify/unplugin-vue-i18n/vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
/* /*
* In development mode, use the VITE_OWNTONE_URL environment variable to set * In development mode, use the VITE_OWNTONE_URL environment variable to set