[web] Merge branch 'linting'

web-src/eslint.config.js

@@ -25,21 +25,16 @@ export default [
       'max-statements': 'off',
       'no-bitwise': 'off',
       'no-magic-numbers': 'off',
-      'no-negated-condition': 'off',
       'no-nested-ternary': 'off',
       'no-plusplus': 'off',
-      'no-shadow': 'off',
       'no-ternary': 'off',
       'no-undef': 'off',
       'no-unused-vars': ['error', { args: 'none', caughtErrors: 'none' }],
-      'no-useless-assignment': 'off',
       'one-var': 'off',
-      'prefer-named-capture-group': 'off',
       'sort-keys': 'off',
       'vue/html-self-closing': 'off',
       'vue/max-attributes-per-line': 'off',
-      'vue/prop-name-casing': 'off',
-      'vue/singleline-html-element-content-newline': 'off'
+      'vue/prop-name-casing': 'off'
     }
   }
 ]

web-src/src/App.vue

@@ -265,17 +265,6 @@ export default {
         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)
@@ -299,12 +288,23 @@ export default {
         this.$store.commit(types.UPDATE_LYRICS)
       }
     },
+    update_outputs() {
+      webapi.outputs().then(({ data }) => {
+        this.$store.commit(types.UPDATE_OUTPUTS, data.outputs)
+      })
+    },
     update_pairing() {
       webapi.pairing().then(({ data }) => {
         this.$store.commit(types.UPDATE_PAIRING, data)
         this.pairing_active = data.active
       })
     },
+    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)

web-src/src/components/ListAlbums.vue

@@ -94,7 +94,7 @@ export default {
       return this.media_kind || this.selected_item.media_kind
     },
     show_artwork() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_cover_artwork_in_album_lists'
       ).value
@@ -122,10 +122,10 @@ export default {
     open_remove_podcast_dialog() {
       webapi
         .library_album_tracks(this.selected_item.id, { limit: 1 })
-        .then(({ data }) => {
-          webapi.library_track_playlists(data.items[0].id).then(({ data }) => {
+        .then(({ data: album }) => {
+          webapi.library_track_playlists(album.items[0].id).then(({ data }) => {
             ;[this.rss_playlist_to_remove] = data.items.filter(
-              (pl) => pl.type === 'rss'
+              (playlist) => playlist.type === 'rss'
             )
             this.show_remove_podcast_modal = true
             this.show_details_modal = false

web-src/src/components/ListAlbumsSpotify.vue

@@ -53,7 +53,7 @@ export default {
 
   computed: {
     show_artwork() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_cover_artwork_in_album_lists'
       ).value

web-src/src/components/LyricsPane.vue

@@ -55,31 +55,28 @@ export default {
       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 regex =
+          /\[(?<minutes>\d+):(?<seconds>\d+)(?:\.(?<hundredths>\d+))?\] ?(?<text>.*)/u
+        raw.split('\n').forEach((line) => {
+          const { text, minutes, seconds, hundredths } = regex.exec(line).groups
+          if (text) {
             const verse = {
-              text: matches[4],
-              time: matches[2] * 60 + Number(matches[3])
+              text,
+              time:
+                minutes * 60 + Number(seconds) + Number(`.${hundredths || 0}`)
             }
             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
+          const unitDuration =
+            (lyrics[index + 1].time - verse.time || 3) / 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 { duration, delay, text }
           })
         })
       }
@@ -117,25 +114,25 @@ export default {
         }
         // Not found, then start a binary search
         let end = la.length - 1,
-          index = 0,
+          index = -1,
           start = 0
         while (start <= end) {
           index = (start + end) >> 1
-          const currentVerse = la[index]
-          const nextVerse = la[index + 1]
+          const currentVerseTime = la[index].time
+          const nextVerseTime = la[index + 1]?.time
           if (
-            currentVerse.time <= currentTime &&
-            (nextVerse?.time > currentTime || !nextVerse)
+            currentVerseTime <= currentTime &&
+            (nextVerseTime > currentTime || !nextVerseTime)
           ) {
-            return index
+            break
           }
-          if (currentVerse.time < currentTime) {
+          if (currentVerseTime < currentTime) {
             start = index + 1
           } else {
             end = index - 1
           }
         }
-        return -1
+        return index
       }
       this.reset_scrolling()
       return -1
@@ -175,13 +172,11 @@ export default {
           pane.scrollTop
       })
     },
-    start_scrolling(e) {
+    start_scrolling(event) {
       // Consider only user events
-      if (e.screenX || e.screenX !== 0 || e.screenY || e.screenY !== 0) {
+      if (event.screenX ?? event.screenY) {
         this.autoScrolling = false
-        if (this.scrollingTimer) {
-          clearTimeout(this.scrollingTimer)
-        }
+        clearTimeout(this.scrollingTimer)
         // Reenable automatic scrolling after 2 seconds
         this.scrollingTimer = setTimeout((this.autoScrolling = true), 2000)
       }

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -74,8 +74,8 @@ export default {
   data() {
     return {
       disabled: true,
-      playlist_name: '',
-      loading: false
+      loading: false,
+      playlist_name: ''
     }
   },
 

web-src/src/components/NavbarBottom.vue

@@ -103,7 +103,7 @@
       </div>
     </div>
     <div class="navbar-brand is-flex-grow-1">
-      <navbar-item-link :to="{ name: 'queue' }" exact class="mr-auto">
+      <navbar-item-link :to="{ name: 'queue' }" class="mr-auto">
         <mdicon class="icon" name="playlist-play" size="24" />
       </navbar-item-link>
       <navbar-item-link

web-src/src/components/NavbarItemLink.vue

@@ -1,10 +1,5 @@
 <template>
-  <a
-    class="navbar-item"
-    :class="{ 'is-active': is_active }"
-    :href="full_path()"
-    @click.stop.prevent="open_link()"
-  >
+  <a class="navbar-item" :href="href" @click.stop.prevent="open">
     <slot />
   </a>
 </template>
@@ -15,47 +10,21 @@ import * as types from '@/store/mutation_types'
 export default {
   name: 'NavbarItemLink',
   props: {
-    exact: Boolean,
     to: { required: true, type: Object }
   },
 
   computed: {
-    is_active() {
-      if (this.exact) {
-        return this.$route.path === this.to
-      }
-      return this.$route.path.startsWith(this.to)
-    },
-
-    show_burger_menu: {
-      get() {
-        return this.$store.state.show_burger_menu
-      },
-      set(value) {
-        this.$store.commit(types.SHOW_BURGER_MENU, value)
-      }
-    },
-
-    show_player_menu: {
-      get() {
-        return this.$store.state.show_player_menu
-      },
-      set(value) {
-        this.$store.commit(types.SHOW_PLAYER_MENU, value)
-      }
+    href() {
+      return this.$router.resolve(this.to).href
     }
   },
 
   methods: {
-    full_path() {
-      const resolved = this.$router.resolve(this.to)
-      return resolved.href
-    },
-    open_link() {
-      if (this.show_burger_menu) {
+    open() {
+      if (this.$store.state.show_burger_menu) {
         this.$store.commit(types.SHOW_BURGER_MENU, false)
       }
-      if (this.show_player_menu) {
+      if (this.$store.state.show_player_menu) {
         this.$store.commit(types.SHOW_PLAYER_MENU, false)
       }
       this.$router.push(this.to)

web-src/src/components/NavbarTop.vue

@@ -54,7 +54,7 @@
               <mdicon class="icon" name="music-box-multiple" size="16" />
               <b v-text="$t('navigation.playlists')" />
             </navbar-item-link>
-            <navbar-item-link :to="{ name: 'music' }" exact>
+            <navbar-item-link :to="{ name: 'music' }">
               <mdicon class="icon" name="music" size="16" />
               <b v-text="$t('navigation.music')" />
             </navbar-item-link>
@@ -138,7 +138,7 @@ export default {
       }
     },
     show_audiobooks() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_menu_item_audiobooks'
       ).value
@@ -152,40 +152,34 @@ export default {
       }
     },
     show_files() {
-      return this.$store.getters.settings_option(
-        'webinterface',
-        'show_menu_item_files'
-      ).value
+      return this.$store.getters.setting('webinterface', 'show_menu_item_files')
+        .value
     },
     show_music() {
-      return this.$store.getters.settings_option(
-        'webinterface',
-        'show_menu_item_music'
-      ).value
+      return this.$store.getters.setting('webinterface', 'show_menu_item_music')
+        .value
     },
     show_player_menu() {
       return this.$store.state.show_player_menu
     },
     show_playlists() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_menu_item_playlists'
       ).value
     },
     show_podcasts() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_menu_item_podcasts'
       ).value
     },
     show_radio() {
-      return this.$store.getters.settings_option(
-        'webinterface',
-        'show_menu_item_radio'
-      ).value
+      return this.$store.getters.setting('webinterface', 'show_menu_item_radio')
+        .value
     },
     show_search() {
-      return this.$store.getters.settings_option(
+      return this.$store.getters.setting(
         'webinterface',
         'show_menu_item_search'
       ).value