MyFavMirrors
/
owntone-server
mirror of https://github.com/owntone/owntone-server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] Lint source code

This commit is contained in:
Alain Nussbaumer 2024-04-21 18:20:40 +02:00
parent c3d5c6eab9
commit a2000c0bc7
6 changed files with 159 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web-src/eslint.config.js
View File

@ -31,10 +31,10 @@ export default [
'no-plusplus': 'off',
'no-shadow': 'off',
'no-ternary': 'off',
'no-unused-vars': ['error', { args: 'none', caughtErrors: 'none' }],
'no-undef': 'off',
'no-undefined': 'off',
'no-unused-expressions': 'off',
'no-unused-vars': ['error', { args: 'none', caughtErrors: 'none' }],
'no-useless-assignment': 'off',
'one-var': 'off',
'prefer-destructuring': 'off',
@ -43,7 +43,6 @@ export default [
'sort-vars': 'off',
'vue/html-self-closing': 'off',
'vue/max-attributes-per-line': 'off',
'vue/no-unused-vars': 'off',
'vue/prop-name-casing': 'off',
'vue/singleline-html-element-content-newline': 'off'
}

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

@ -37,18 +37,18 @@ import webapi from '@/webapi'
export default {
name: 'App',
components: {
NavbarTop,
NavbarBottom,
NotificationList,
ModalDialogRemotePairing,
ModalDialogUpdate
ModalDialogUpdate,
NavbarBottom,
NavbarTop,
NotificationList
},
data() {
return {
token_timer_id: 0,
pairing_active: false,
reconnect_attempts: 0,
pairing_active: false
token_timer_id: 0
}
},
@ -90,10 +90,8 @@ export default {
created() {
this.connect()
// Start the progress bar on app start
this.$Progress.start()
// Hook the progress bar to start before we move router-view
this.$router.beforeEach((to, from, next) => {
if (to.meta.show_progress && !(to.path === from.path && to.hash)) {
@ -104,7 +102,6 @@ export default {
}
next()
})
// Hook the progress bar to finish after we've finished moving router-view
this.$router.afterEach((to, from) => {
if (to.meta.show_progress) {
@ -128,12 +125,11 @@ export default {
.catch(() => {
this.$store.dispatch('add_notification', {
text: this.$t('server.connection-failed'),
type: 'danger',
topic: 'connection'
topic: 'connection',
type: 'danger'
})
})
},
open_ws() {
if (this.$store.state.config.websocket_port <= 0) {
this.$store.dispatch('add_notification', {
@ -164,8 +160,8 @@ export default {
}
const socket = new ReconnectingWebSocket(wsUrl, 'notify', {
reconnectInterval: 1000,
maxReconnectInterval: 2000
maxReconnectInterval: 2000,
reconnectInterval: 1000
})
const vm = this
@ -266,7 +262,29 @@ export default {
}
}
},
update_is_clipped() {
if (this.show_burger_menu || this.show_player_menu) {
document.querySelector('html').classList.add('is-clipped')
} else {
document.querySelector('html').classList.remove('is-clipped')
}
},
update_outputs() {
webapi.outputs().then(({ data }) => {
this.$store.commit(types.UPDATE_OUTPUTS, data.outputs)
})
},
update_player_status() {
webapi.player_status().then(({ data }) => {
this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
this.update_lyrics()
})
},
update_lastfm() {
webapi.lastfm().then(({ data }) => {
this.$store.commit(types.UPDATE_LASTFM, data)
})
},
update_library_stats() {
webapi.library_stats().then(({ data }) => {
this.$store.commit(types.UPDATE_LIBRARY_STATS, data)
@ -275,27 +293,6 @@ export default {
this.$store.commit(types.UPDATE_LIBRARY_RSS_COUNT, data)
})
},
update_outputs() {
webapi.outputs().then(({ data }) => {
this.$store.commit(types.UPDATE_OUTPUTS, data.outputs)
})
},
update_player_status() {
webapi.player_status().then(({ data }) => {
this.$store.commit(types.UPDATE_PLAYER_STATUS, data)
this.update_lyrics()
})
},
update_queue() {
webapi.queue().then(({ data }) => {
this.$store.commit(types.UPDATE_QUEUE, data)
this.update_lyrics()
})
},
update_lyrics() {
const track = this.$store.getters.now_playing
if (track && track.track_id) {
@ -306,19 +303,23 @@ export default {
this.$store.commit(types.UPDATE_LYRICS)
}
},
update_pairing() {
webapi.pairing().then(({ data }) => {
this.$store.commit(types.UPDATE_PAIRING, data)
this.pairing_active = data.active
})
},
update_queue() {
webapi.queue().then(({ data }) => {
this.$store.commit(types.UPDATE_QUEUE, data)
this.update_lyrics()
})
},
update_settings() {
webapi.settings().then(({ data }) => {
this.$store.commit(types.UPDATE_SETTINGS, data)
})
},
update_lastfm() {
webapi.lastfm().then(({ data }) => {
this.$store.commit(types.UPDATE_LASTFM, data)
})
},
update_spotify() {
webapi.spotify().then(({ data }) => {
this.$store.commit(types.UPDATE_SPOTIFY, data)
@ -334,21 +335,6 @@ export default {
)
}
})
},
update_pairing() {
webapi.pairing().then(({ data }) => {
this.$store.commit(types.UPDATE_PAIRING, data)
this.pairing_active = data.active
})
},
update_is_clipped() {
if (this.show_burger_menu || this.show_player_menu) {
document.querySelector('html').classList.add('is-clipped')
} else {
document.querySelector('html').classList.remove('is-clipped')
}
}
},
template: '<App/>'

98
web-src/src/components/LyricsPane.vue
View File

@ -50,6 +50,44 @@ export default {
is_playing() {
return this.player.state === 'play'
},
lyrics() {
const raw = this.$store.state.lyrics.content
const parsed = []
if (raw) {
// Parse the lyrics
const regex = /(\[(\d+):(\d+)(?:\.\d+)?\] ?)?(.*)/u
raw.split('\n').forEach((item, index) => {
const matches = regex.exec(item)
if (matches && matches[4]) {
const verse = {
text: matches[4],
time: matches[2] * 60 + Number(matches[3])
}
parsed.push(verse)
}
})
// Split the verses into words
parsed.forEach((verse, index, lyrics) => {
const duration =
index < lyrics.length - 1 ? lyrics[index + 1].time - verse.time : 3
const unitDuration = duration / verse.text.length
let delay = 0
verse.words = verse.text.match(/\S+\s*/gu).map((text) => {
const duration = text.length * unitDuration
delay += duration
return {
duration,
delay,
text
}
})
})
}
return parsed
},
player() {
return this.$store.state.player
},
verse_index() {
if (this.lyrics.length && this.lyrics[0].time) {
const currentTime = this.player.item_progress_ms / 1000,
@ -99,44 +137,6 @@ export default {
}
this.reset_scrolling()
return -1
},
lyrics() {
const raw = this.$store.state.lyrics.content
const parsed = []
if (raw) {
// Parse the lyrics
const regex = /(\[(\d+):(\d+)(?:\.\d+)?\] ?)?(.*)/u
raw.split('\n').forEach((item, index) => {
const matches = regex.exec(item)
if (matches && matches[4]) {
const verse = {
text: matches[4],
time: matches[2] * 60 + Number(matches[3])
}
parsed.push(verse)
}
})
// Split the verses into words
parsed.forEach((verse, index, lyrics) => {
const duration =
index < lyrics.length - 1 ? lyrics[index + 1].time - verse.time : 3
const unitDuration = duration / verse.text.length
let delay = 0
verse.words = verse.text.match(/\S+\s*/gu).map((text) => {
const duration = text.length * unitDuration
delay += duration
return {
duration,
delay,
text
}
})
})
}
return parsed
},
player() {
return this.$store.state.player
}
},
watch: {
@ -154,17 +154,6 @@ export default {
this.lastItemId = this.player.item_id
this.lastIndex = -1
},
start_scrolling(e) {
// Consider only user events
if (e.screenX || e.screenX !== 0 || e.screenY || e.screenY !== 0) {
this.autoScrolling = false
if (this.scrollingTimer) {
clearTimeout(this.scrollingTimer)
}
// Reenable automatic scrolling after 2 seconds
this.scrollingTimer = setTimeout((this.autoScrolling = true), 2000)
}
},
scroll_to_verse() {
const pane = this.$refs.lyrics
if (this.verse_index === -1) {
@ -181,6 +170,17 @@ export default {
(currentVerse.offsetHeight >> 1) -
pane.scrollTop
})
},
start_scrolling(e) {
// Consider only user events
if (e.screenX || e.screenX !== 0 || e.screenY || e.screenY !== 0) {
this.autoScrolling = false
if (this.scrollingTimer) {
clearTimeout(this.scrollingTimer)
}
// Reenable automatic scrolling after 2 seconds
this.scrollingTimer = setTimeout((this.autoScrolling = true), 2000)
}
}
}
}

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

@ -86,53 +86,6 @@ export default {
},
computed: {
is_live() {
return this.track.length_ms === 0
},
lyrics_visible() {
return this.$store.state.lyrics.pane
},
player() {
return this.$store.state.player
},
track() {
return this.$store.getters.now_playing
},
track_progress: {
get() {
return Math.floor(this.player.item_progress_ms / INTERVAL)
},
set(value) {
this.player.item_progress_ms = value * INTERVAL
}
},
track_progress_max() {
return this.is_live ? 1 : Math.floor(this.track.length_ms / INTERVAL)
},
track_elapsed_time() {
return this.$filters.durationInHours(this.track_progress * INTERVAL)
},
track_total_time() {
return this.is_live
? this.$t('page.now-playing.live')
: this.$filters.durationInHours(this.track.length_ms)
},
settings_option_show_composer_now_playing() {
return this.$store.getters.settings_option_show_composer_now_playing
},
settings_option_show_composer_for_genre() {
return this.$store.getters.settings_option_show_composer_for_genre
},
composer() {
if (this.settings_option_show_composer_now_playing) {
if (
@ -151,16 +104,51 @@ export default {
}
return null
},
settings_option_show_filepath_now_playing() {
return this.$store.getters.settings_option_show_filepath_now_playing
},
filepath() {
if (this.settings_option_show_filepath_now_playing) {
return this.track.path
}
return null
},
is_live() {
return this.track.length_ms === 0
},
lyrics_visible() {
return this.$store.state.lyrics.pane
},
player() {
return this.$store.state.player
},
settings_option_show_composer_for_genre() {
return this.$store.getters.settings_option_show_composer_for_genre
},
settings_option_show_composer_now_playing() {
return this.$store.getters.settings_option_show_composer_now_playing
},
settings_option_show_filepath_now_playing() {
return this.$store.getters.settings_option_show_filepath_now_playing
},
track() {
return this.$store.getters.now_playing
},
track_elapsed_time() {
return this.$filters.durationInHours(this.track_progress * INTERVAL)
},
track_progress: {
get() {
return Math.floor(this.player.item_progress_ms / INTERVAL)
},
set(value) {
this.player.item_progress_ms = value * INTERVAL
}
},
track_progress_max() {
return this.is_live ? 1 : Math.floor(this.track.length_ms / INTERVAL)
},
track_total_time() {
return this.is_live
? this.$t('page.now-playing.live')
: this.$filters.durationInHours(this.track.length_ms)
}
},
@ -193,29 +181,25 @@ export default {
},
methods: {
tick() {
if (!this.is_dragged) {
this.track_progress += 1
}
},
start_dragging() {
this.is_dragged = true
},
end_dragging() {
this.is_dragged = false
},
open_dialog(item) {
this.selected_item = item
this.show_details_modal = true
},
seek() {
if (!this.is_live) {
webapi.player_seek_to_pos(this.track_progress * INTERVAL)
}
},
open_dialog(item) {
this.selected_item = item
this.show_details_modal = true
start_dragging() {
this.is_dragged = true
},
tick() {
if (!this.is_dragged) {
this.track_progress += 1
}
}
}
}

13
web-src/src/pages/PageQueue.vue
View File

@ -172,27 +172,26 @@ export default {
webapi.queue_move(item.id, newPosition)
}
},
open_add_stream_dialog() {
this.show_url_modal = true
},
open_dialog(item) {
this.selected_item = item
this.show_details_modal = true
},
open_add_stream_dialog() {
this.show_url_modal = true
},
queue_clear() {
webapi.queue_clear()
},
remove(item) {
webapi.queue_remove(item.id)
},
update_show_next_items() {
this.$store.commit(types.SHOW_ONLY_NEXT_ITEMS, !this.show_only_next_items)
},
save_dialog() {
if (this.queue_items.length > 0) {
this.show_pls_save_modal = true
}
},
update_show_next_items() {
this.$store.commit(types.SHOW_ONLY_NEXT_ITEMS, !this.show_only_next_items)
}
}
}

14
web-src/src/store/index.js
View File

@ -59,8 +59,8 @@ export default createStore({
settings: {
categories: []
},
show_only_next_items: false,
show_burger_menu: false,
show_only_next_items: false,
show_player_menu: false,
show_update_dialog: false,
spotify: {},
@ -213,18 +213,18 @@ export default createStore({
state.recent_searches.pop()
}
},
remove_recent_search({ commit, state }, query) {
const index = state.recent_searches.indexOf(query)
if (index !== -1) {
state.recent_searches.splice(index, 1)
}
},
delete_notification({ commit, state }, notification) {
const index = state.notifications.list.indexOf(notification)
if (index !== -1) {
state.notifications.list.splice(index, 1)
}
},
remove_recent_search({ commit, state }, query) {
const index = state.recent_searches.indexOf(query)
if (index !== -1) {
state.recent_searches.splice(index, 1)
}
},
update_settings_option({ commit, state }, option) {
const settingCategory = state.settings.categories.find(
(e) => e.name === option.category