[web] Lint source code

web-src/src/App.vue

@@ -79,17 +79,17 @@ export default {
   },
   created() {
     this.handlers = {
-      update: [this.libraryStore.initialise],
       database: [this.libraryStore.initialise],
-      player: [this.playerStore.initialise],
+      lastfm: [this.servicesStore.initialiseLastfm],
       options: [this.playerStore.initialise],
-      volume: [this.playerStore.initialise, this.outputsStore.initialise],
       outputs: [this.outputsStore.initialise],
+      pairing: [this.remotesStore.initialise],
+      player: [this.playerStore.initialise],
       queue: [this.queueStore.initialise],
       settings: [this.settingsStore.initialise],
       spotify: [this.servicesStore.initialiseSpotify],
-      lastfm: [this.servicesStore.initialiseLastfm],
-      pairing: [this.remotesStore.initialise]
+      update: [this.libraryStore.initialise],
+      volume: [this.playerStore.initialise, this.outputsStore.initialise]
     }
     this.connect()
     this.$router.beforeEach((to, from, next) => {
@@ -129,6 +129,34 @@ export default {
           })
         })
     },
+    createWebsocket() {
+      const protocol = window.location.protocol.replace('http', 'ws')
+      const hostname =
+        (import.meta.env.DEV &&
+          URL.parse(import.meta.env.VITE_OWNTONE_URL)?.hostname) ||
+        window.location.hostname
+      const suffix =
+        this.configurationStore.websocket_port || `${window.location.port}/ws`
+      const url = `${protocol}${hostname}:${suffix}`
+      return new ReconnectingWebSocket(url, 'notify', {
+        maxReconnectInterval: 2000,
+        reconnectInterval: 1000
+      })
+    },
+    handleEvents(events = []) {
+      events.forEach((event) => {
+        const handlers = this.handlers[event] || []
+        handlers.forEach((handler) => {
+          if (!this.scheduledHandlers.has(handler)) {
+            const timeoutId = setTimeout(() => {
+              handler.call(this)
+              this.scheduledHandlers.delete(handler)
+            }, 50)
+            this.scheduledHandlers.set(handler, timeoutId)
+          }
+        })
+      })
+    },
     openWebsocket() {
       const socket = this.createWebsocket()
       const events = [
@@ -161,34 +189,6 @@ export default {
         this.handleEvents(notifiedEvents)
       }
     },
-    createWebsocket() {
-      const protocol = window.location.protocol.replace('http', 'ws')
-      const hostname =
-        (import.meta.env.DEV &&
-          URL.parse(import.meta.env.VITE_OWNTONE_URL)?.hostname) ||
-        window.location.hostname
-      const suffix =
-        this.configurationStore.websocket_port || `${window.location.port}/ws`
-      const url = `${protocol}${hostname}:${suffix}`
-      return new ReconnectingWebSocket(url, 'notify', {
-        maxReconnectInterval: 2000,
-        reconnectInterval: 1000
-      })
-    },
-    handleEvents(events = []) {
-      events.forEach((event) => {
-        const handlers = this.handlers[event] || []
-        handlers.forEach((handler) => {
-          if (!this.scheduledHandlers.has(handler)) {
-            const timeoutId = setTimeout(() => {
-              handler.call(this)
-              this.scheduledHandlers.delete(handler)
-            }, 50)
-            this.scheduledHandlers.set(handler, timeoutId)
-          }
-        })
-      })
-    },
     updateClipping() {
       if (this.uiStore.showBurgerMenu || this.uiStore.showPlayerMenu) {
         document.querySelector('html').classList.add('is-clipped')

web-src/src/api/outputs.js

@@ -3,12 +3,12 @@ import api from '@/api'
 const BASE_URL = './api/outputs'
 
 export default {
-  toggle(id) {
-    return api.put(`${BASE_URL}/${id}/toggle`)
-  },
   state() {
     return api.get(BASE_URL)
   },
+  toggle(id) {
+    return api.put(`${BASE_URL}/${id}/toggle`)
+  },
   update(id, output) {
     return api.put(`${BASE_URL}/${id}`, output)
   }

web-src/src/components/ControlImage.vue

@@ -23,12 +23,12 @@ export default {
   computed: {
     source() {
       return {
-        src: this.url || this.uri,
         lifecycle: {
           error: (el) => {
             el.src = this.uri
           }
-        }
+        },
+        src: this.url || this.uri
       }
     },
     uri() {

web-src/src/components/ListAlbums.vue

@@ -50,7 +50,7 @@ export default {
   methods: {
     image(item) {
       if (this.settingsStore.showCoverArtworkInAlbumLists) {
-        return { url: item.item.artwork_url, caption: item.item.name }
+        return { caption: item.item.name, url: item.item.artwork_url }
       }
       return null
     },

web-src/src/components/ListAlbumsSpotify.vue

@@ -44,7 +44,7 @@ export default {
   methods: {
     image(item) {
       if (this.settingsStore.showCoverArtworkInAlbumLists) {
-        return { url: item.images?.[0]?.url ?? '', caption: item.name }
+        return { caption: item.name, url: item.images?.[0]?.url ?? '' }
       }
       return null
     },

web-src/src/components/ListItemQueueItem.vue

@@ -54,9 +54,9 @@ export default {
   props: {
     currentPosition: { required: true, type: Number },
     editing: Boolean,
+    hideReadItems: Boolean,
     item: { required: true, type: Object },
-    position: { required: true, type: Number },
-    hideReadItems: Boolean
+    position: { required: true, type: Number }
   },
   setup() {
     return { playerStore: usePlayerStore() }

web-src/src/components/ListTracks.vue

@@ -29,8 +29,8 @@ export default {
   components: { ListItem, ModalDialogTrack },
   props: {
     expression: { default: '', type: String },
-    items: { default: null, type: Object },
     icon: { default: null, type: String },
+    items: { default: null, type: Object },
     load: { default: null, type: Function },
     loaded: { default: true, type: Boolean },
     showProgress: { default: false, type: Boolean },

web-src/src/components/ModalDialogPlayable.vue

@@ -50,12 +50,12 @@ export default {
     }
   },
   methods: {
-    play() {
+    addNextToQueue() {
       this.$emit('close')
       if (this.item.expression) {
-        queue.playExpression(this.item.expression, false)
+        queue.addExpression(this.item.expression, true)
       } else {
-        queue.playUri(this.item.uris || this.item.uri, false)
+        queue.addUri(this.item.uris || this.item.uri, true)
       }
     },
     addToQueue() {
@@ -66,12 +66,12 @@ export default {
         queue.addUri(this.item.uris || this.item.uri)
       }
     },
-    addNextToQueue() {
+    play() {
       this.$emit('close')
       if (this.item.expression) {
-        queue.addExpression(this.item.expression, true)
+        queue.playExpression(this.item.expression, false)
       } else {
-        queue.addUri(this.item.uris || this.item.uri, true)
+        queue.playUri(this.item.uris || this.item.uri, false)
       }
     }
   }

web-src/src/components/PaneLyrics.vue

@@ -30,8 +30,8 @@ export default {
     const MIDDLE_POSITION = Math.floor(VISIBLE_VERSES / 2)
     return {
       MIDDLE_POSITION,
-      playerStore: usePlayerStore(),
-      VISIBLE_VERSES
+      VISIBLE_VERSES,
+      playerStore: usePlayerStore()
     }
   },
   data() {
@@ -139,7 +139,7 @@ export default {
           const start = currentTime
           const end = start + totalDuration * (text.length / totalLength)
           currentTime = end
-          return { text, start, end }
+          return { end, start, text }
         })
       })
       return lyrics

web-src/src/pages/PageAlbumSpotify.vue

@@ -69,14 +69,14 @@ export default {
   computed: {
     heading() {
       return {
-        count: this.$t('data.tracks', { count: this.album.tracks.total }),
-        handler: this.openArtist,
-        subtitle: this.album.artists[0].name,
-        title: this.album.name,
         actions: [
           { handler: this.play, icon: 'shuffle', key: 'actions.shuffle' },
           { handler: this.openDetails, icon: 'dots-horizontal' }
-        ]
+        ],
+        count: this.$t('data.tracks', { count: this.album.tracks.total }),
+        handler: this.openArtist,
+        subtitle: this.album.artists[0].name,
+        title: this.album.name
       }
     },
     tracks() {

web-src/src/pages/PageAlbums.vue

@@ -62,8 +62,8 @@ export default {
     ContentWithHeading,
     ControlDropdown,
     ControlSwitch,
-    ListIndexButtons,
     ListAlbums,
+    ListIndexButtons,
     ListOptions,
     PaneTitle,
     TabsMusic

web-src/src/pages/PageArtists.vue

@@ -62,8 +62,8 @@ export default {
     ContentWithHeading,
     ControlDropdown,
     ControlSwitch,
-    ListIndexButtons,
     ListArtists,
+    ListIndexButtons,
     ListOptions,
     PaneTitle,
     TabsMusic

web-src/src/pages/PageAudiobookAlbums.vue

@@ -26,8 +26,8 @@ export default {
   name: 'PageAudiobookAlbums',
   components: {
     ContentWithHeading,
-    ListIndexButtons,
     ListAlbums,
+    ListIndexButtons,
     PaneTitle,
     TabsAudiobooks
   },

web-src/src/pages/PageAudiobookArtists.vue

@@ -26,8 +26,8 @@ export default {
   name: 'PageAudiobookArtists',
   components: {
     ContentWithHeading,
-    ListIndexButtons,
     ListArtists,
+    ListIndexButtons,
     PaneTitle,
     TabsAudiobooks
   },

web-src/src/pages/PageAudiobookGenres.vue

@@ -26,8 +26,8 @@ export default {
   name: 'PageAudiobooksGenres',
   components: {
     ContentWithHeading,
-    ListIndexButtons,
     ListGenres,
+    ListIndexButtons,
     PaneTitle,
     TabsAudiobooks
   },

web-src/src/pages/PageComposers.vue

@@ -26,8 +26,8 @@ export default {
   name: 'PageComposers',
   components: {
     ContentWithHeading,
-    ListIndexButtons,
     ListComposers,
+    ListIndexButtons,
     PaneTitle,
     TabsMusic
   },

web-src/src/pages/PageGenreAlbums.vue

@@ -42,8 +42,8 @@ export default {
   components: {
     ContentWithHeading,
     ControlButton,
-    ListIndexButtons,
     ListAlbums,
+    ListIndexButtons,
     ModalDialogGenre,
     PaneTitle
   },

web-src/src/pages/PageGenreTracks.vue

@@ -127,6 +127,9 @@ export default {
     }
   },
   methods: {
+    openDetails() {
+      this.showDetailsModal = true
+    },
     openGenre() {
       this.showDetailsModal = false
       this.$router.push({
@@ -137,9 +140,6 @@ export default {
     },
     play() {
       queue.playExpression(this.expression, true)
-    },
-    openDetails() {
-      this.showDetailsModal = true
     }
   }
 }

web-src/src/pages/PageGenres.vue

@@ -26,8 +26,8 @@ export default {
   name: 'PageGenres',
   components: {
     ContentWithHeading,
-    ListIndexButtons,
     ListGenres,
+    ListIndexButtons,
     PaneTitle,
     TabsMusic
   },

web-src/src/pages/PageNowPlaying.vue

@@ -69,8 +69,8 @@ export default {
   components: {
     ControlImage,
     ControlSlider,
-    PaneLyrics,
-    ModalDialogQueueItem
+    ModalDialogQueueItem,
+    PaneLyrics
   },
   setup() {
     return {

web-src/src/pages/PagePodcast.vue

@@ -80,19 +80,19 @@ export default {
     }
   },
   methods: {
+    openDetails() {
+      this.showDetailsModal = true
+    },
     play() {
       queue.playUri(this.album.uri, false)
     },
+    podcastDeleted() {
+      this.$router.push({ name: 'podcasts' })
+    },
     reloadTracks() {
       library.podcastEpisodes(this.album.id).then((tracks) => {
         this.tracks = new GroupedList(tracks)
       })
-    },
-    openDetails() {
-      this.showDetailsModal = true
-    },
-    podcastDeleted() {
-      this.$router.push({ name: 'podcasts' })
     }
   }
 }

web-src/src/pages/PageQueue.vue

@@ -131,9 +131,9 @@ export default {
     return {
       editing: false,
       selectedItem: {},
+      showAddStreamDialog: false,
       showDetailsModal: false,
-      showSaveModal: false,
-      showAddStreamDialog: false
+      showSaveModal: false
     }
   },
   computed: {

web-src/src/pages/PageSearchLibrary.vue

@@ -72,8 +72,8 @@ export default {
   },
   data() {
     return {
-      results: new Map(),
       limit: {},
+      results: new Map(),
       types: SEARCH_TYPES
     }
   },

web-src/src/pages/PageSettingsDevices.vue

@@ -103,18 +103,18 @@ export default {
     }
   },
   methods: {
-    pairRemote() {
-      remotes.pair(this.remotePin)
-    },
-    pairOutput(identifier) {
-      outputs.update(identifier, { pin: this.outputPin })
+    onOutputPinChange(pin) {
+      this.outputPin = pin
     },
     onRemotePinChange(pin, disabled) {
       this.remotePin = pin
       this.remotePairingDisabled = disabled
     },
-    onOutputPinChange(pin) {
-      this.outputPin = pin
+    pairOutput(identifier) {
+      outputs.update(identifier, { pin: this.outputPin })
+    },
+    pairRemote() {
+      remotes.pair(this.remotePin)
     },
     toggleOutput(identifier) {
       outputs.toggle(identifier)

web-src/src/stores/services.js

@@ -23,6 +23,8 @@ export const useServicesStore = defineStore('ServicesStore', {
     }
   },
   getters: {
+    grantedSpotifyScopes: (state) =>
+      state.spotify.webapi_granted_scope?.split(' ') ?? [],
     hasMissingSpotifyScopes: (state) => state.missingSpotifyScopes.length > 0,
     isAuthorizationRequired: (state) =>
       !state.isSpotifyActive || state.hasMissingSpotifyScopes,
@@ -30,8 +32,6 @@ export const useServicesStore = defineStore('ServicesStore', {
     isLastfmEnabled: (state) => state.lastfm.enabled,
     isSpotifyActive: (state) => state.spotify.webapi_token_valid,
     isSpotifyEnabled: (state) => state.spotify.spotify_installed,
-    grantedSpotifyScopes: (state) =>
-      state.spotify.webapi_granted_scope?.split(' ') ?? [],
     missingSpotifyScopes(state) {
       const scopes = new Set(state.grantedSpotifyScopes)
       return (

web-src/src/stores/ui.js

@@ -10,12 +10,12 @@ export const useUIStore = defineStore('UIStore', {
       this.showPlayerMenu = false
       this.showBurgerMenu = !this.showBurgerMenu
     },
+    toggleHideReadItems() {
+      this.hideReadItems = !this.hideReadItems
+    },
     togglePlayerMenu() {
       this.showBurgerMenu = false
       this.showPlayerMenu = !this.showPlayerMenu
-    },
-    toggleHideReadItems() {
-      this.hideReadItems = !this.hideReadItems
     }
   },
   state: () => ({