From a2000c0bc7627d80621433654d459b9223d3634f Mon Sep 17 00:00:00 2001 From: Alain Nussbaumer Date: Sun, 21 Apr 2024 18:20:40 +0200 Subject: [PATCH] [web] Lint source code --- web-src/eslint.config.js | 3 +- web-src/src/App.vue | 92 +++++++++------------ web-src/src/components/LyricsPane.vue | 98 +++++++++++------------ web-src/src/pages/PageNowPlaying.vue | 110 +++++++++++--------------- web-src/src/pages/PageQueue.vue | 13 ++- web-src/src/store/index.js | 14 ++-- 6 files changed, 149 insertions(+), 181 deletions(-) diff --git a/web-src/eslint.config.js b/web-src/eslint.config.js index 386bc79e7f..5f697d977e 100644 --- a/web-src/eslint.config.js +++ b/web-src/eslint.config.js @@ -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' } diff --git a/web-src/src/App.vue b/web-src/src/App.vue index cd64217b95..e67b172783 100644 --- a/web-src/src/App.vue +++ b/web-src/src/App.vue @@ -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,36 +262,37 @@ export default { } } }, - - update_library_stats() { - webapi.library_stats().then(({ data }) => { - this.$store.commit(types.UPDATE_LIBRARY_STATS, data) - }) - webapi.library_count('scan_kind is rss').then(({ data }) => { - this.$store.commit(types.UPDATE_LIBRARY_RSS_COUNT, data) - }) + 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_queue() { - webapi.queue().then(({ data }) => { - this.$store.commit(types.UPDATE_QUEUE, 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) + }) + webapi.library_count('scan_kind is rss').then(({ data }) => { + this.$store.commit(types.UPDATE_LIBRARY_RSS_COUNT, data) }) }, - 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: '' diff --git a/web-src/src/components/LyricsPane.vue b/web-src/src/components/LyricsPane.vue index c786811475..9bf2e1973b 100644 --- a/web-src/src/components/LyricsPane.vue +++ b/web-src/src/components/LyricsPane.vue @@ -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) + } } } } diff --git a/web-src/src/pages/PageNowPlaying.vue b/web-src/src/pages/PageNowPlaying.vue index 2dfbeaec41..2194fd221b 100644 --- a/web-src/src/pages/PageNowPlaying.vue +++ b/web-src/src/pages/PageNowPlaying.vue @@ -86,22 +86,54 @@ export default { }, computed: { + composer() { + if (this.settings_option_show_composer_now_playing) { + if ( + !this.settings_option_show_composer_for_genre || + (this.track.genre && + this.settings_option_show_composer_for_genre + .toLowerCase() + .split(',') + .findIndex( + (elem) => + this.track.genre.toLowerCase().indexOf(elem.trim()) >= 0 + ) >= 0) + ) { + return this.track.composer + } + } + return null + }, + 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) @@ -110,57 +142,13 @@ export default { 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 ( - !this.settings_option_show_composer_for_genre || - (this.track.genre && - this.settings_option_show_composer_for_genre - .toLowerCase() - .split(',') - .findIndex( - (elem) => - this.track.genre.toLowerCase().indexOf(elem.trim()) >= 0 - ) >= 0) - ) { - return this.track.composer - } - } - 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 } }, @@ -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 + } } } } diff --git a/web-src/src/pages/PageQueue.vue b/web-src/src/pages/PageQueue.vue index fe81333670..a9e88cd9c0 100644 --- a/web-src/src/pages/PageQueue.vue +++ b/web-src/src/pages/PageQueue.vue @@ -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) } } } diff --git a/web-src/src/store/index.js b/web-src/src/store/index.js index 93f1eb620f..29e775f647 100644 --- a/web-src/src/store/index.js +++ b/web-src/src/store/index.js @@ -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