[web] Lint source code

web-src/src/App.vue

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

web-src/src/components/IndexButtonList.vue

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

web-src/src/components/LyricsPane.vue

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

web-src/src/components/NavbarBottom.vue

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

web-src/src/components/NavbarTop.vue

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

web-src/src/lib/GroupedList.js

@@ -8,8 +8,8 @@ const stringComparator = (a, b) => a.localeCompare(b, locale.value)
 const dateComparator = (a, b) =>
   new Date(a) - new Date(b) || (!a ? -1 : !b ? 1 : 0)
 
-function createComparators(criteria) {
-  return criteria.map(({ field, type, order = 1 }) => {
+const createComparators = (criteria) => {
+  criteria.map(({ field, type, order = 1 }) => {
     switch (type) {
       case String:
         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
       case Date:
         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)
 }
 
-function createIndexer({ field, type = undefined } = {}) {
+const createIndexer = ({ field, type = undefined } = {}) => {
   switch (type) {
     case String:
       return (item) => characterIndex(item[field])

web-src/src/pages/PageAbout.vue

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

web-src/src/pages/PageMusic.vue

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

web-src/src/pages/PageMusicSpotify.vue

@@ -15,8 +15,9 @@
             <router-link
               :to="{ name: 'music-spotify-new-releases' }"
               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>
         </nav>
       </template>
@@ -38,8 +39,9 @@
             <router-link
               :to="{ name: 'music-spotify-featured-playlists' }"
               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>
         </nav>
       </template>

web-src/src/templates/ContentWithHeading.vue

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

web-src/vite.config.js

@@ -1,7 +1,7 @@
-import path from 'path'
 import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
 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