chore: remove unnecessary reactive() calls

resources/assets/js/components/album/AlbumContextMenu.vue

@@ -6,7 +6,7 @@
       <li class="separator"></li>
       <li data-test="view-album" @click="viewAlbumDetails" v-if="isStandardAlbum">Go to Album</li>
       <li data-test="view-artist" @click="viewArtistDetails" v-if="isStandardArtist">Go to Artist</li>
-      <template v-if="isStandardAlbum && sharedState.allowDownload">
+      <template v-if="isStandardAlbum && allowDownload">
         <li class="separator"></li>
         <li data-test="download" @click="download">Download</li>
       </template>
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, Ref, toRef } from 'vue'
+import { computed, Ref, toRef } from 'vue'
 import { albumStore, artistStore, commonStore } from '@/stores'
 import { downloadService, playbackService } from '@/services'
 import { useContextMenu } from '@/composables'
@@ -24,8 +24,7 @@ import router from '@/router'
 const { context, base, ContextMenuBase, open, close } = useContextMenu()
 
 const album = toRef(context, 'album') as Ref<Album>
-
-const sharedState = reactive(commonStore.state)
+const allowDownload = toRef(commonStore.state, 'allowDownload')
 
 const isStandardAlbum = computed(() => !albumStore.isUnknownAlbum(album.value))
 

resources/assets/js/components/artist/ArtistContextMenu.vue

@@ -7,7 +7,7 @@
         <li class="separator"></li>
         <li data-test="view-artist" @click="viewArtistDetails">Go to Artist</li>
       </template>
-      <template v-if="isStandardArtist && sharedState.allowDownload">
+      <template v-if="isStandardArtist && allowDownload">
         <li class="separator"></li>
         <li data-test="download" @click="download">Download</li>
       </template>
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, Ref, toRef } from 'vue'
+import { computed, Ref, toRef } from 'vue'
 import { artistStore, commonStore } from '@/stores'
 import { downloadService, playbackService } from '@/services'
 import { useContextMenu } from '@/composables'
@@ -25,8 +25,7 @@ import router from '@/router'
 const { context, base, ContextMenuBase, open, close } = useContextMenu()
 
 const artist = toRef(context, 'artist') as Ref<Artist>
-
-const sharedState = reactive(commonStore.state)
+const allowDownload = toRef(commonStore.state, 'allowDownload')
 
 const isStandardArtist = computed(() =>
   !artistStore.isUnknownArtist(artist.value)

resources/assets/js/components/layout/ModalWrapper.vue

@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue'
-import { eventBus } from '@/utils'
+import { eventBus, arrayify } from '@/utils'
 
 interface ModalWrapperBoundData {
   playlist?: Playlist
@@ -67,8 +67,8 @@ eventBus.on({
     showingModalName.value = 'edit-user-form'
   },
 
-  MODAL_SHOW_EDIT_SONG_FORM (songs: Song[], initialTab = 'details') {
-    boundData.value.songs = songs
+  MODAL_SHOW_EDIT_SONG_FORM (songs: Song | Song[], initialTab = 'details') {
+    boundData.value.songs = arrayify(songs)
     boundData.value.initialTab = initialTab
     showingModalName.value = 'edit-song-form'
   }

resources/assets/js/components/layout/app-footer/FooterExtraControls.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, reactive, ref, toRef, toRefs } from 'vue'
+import { defineAsyncComponent, ref, toRef, toRefs } from 'vue'
 import isMobile from 'ismobilejs'
 import { socketService } from '@/services'
 import { eventBus, isAudioContextSupported as useEqualizer } from '@/utils'

resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue

@@ -1,42 +1,42 @@
 <template>
-  <section id="extra" :class="{ showing: state.showExtraPanel }" class="text-secondary" data-testid="extra-panel">
+  <section id="extra" :class="{ showing }" class="text-secondary" data-testid="extra-panel">
     <div class="tabs">
       <div class="clear" role="tablist">
         <button
-          :aria-selected="currentTab === 'Lyrics'"
-          @click.prevent="currentTab = 'Lyrics'"
-          aria-controls="extraPanelLyrics"
           id="extraTabLyrics"
+          :aria-selected="currentTab === 'Lyrics'"
+          aria-controls="extraPanelLyrics"
           role="tab"
+          @click.prevent="currentTab = 'Lyrics'"
         >
           Lyrics
         </button>
         <button
-          :aria-selected="currentTab === 'Artist'"
-          @click.prevent="currentTab = 'Artist'"
-          aria-controls="extraPanelArtist"
           id="extraTabArtist"
+          :aria-selected="currentTab === 'Artist'"
+          aria-controls="extraPanelArtist"
           role="tab"
+          @click.prevent="currentTab = 'Artist'"
         >
           Artist
         </button>
         <button
-          :aria-selected="currentTab === 'Album'"
-          @click.prevent="currentTab = 'Album'"
-          aria-controls="extraPanelAlbum"
           id="extraTabAlbum"
+          :aria-selected="currentTab === 'Album'"
+          aria-controls="extraPanelAlbum"
           role="tab"
+          @click.prevent="currentTab = 'Album'"
         >
           Album
         </button>
         <button
-          :aria-selected="currentTab === 'YouTube'"
-          @click.prevent="currentTab = 'YouTube'"
-          aria-controls="extraPanelYouTube"
+          v-if="useYouTube"
           id="extraTabYouTube"
+          :aria-selected="currentTab === 'YouTube'"
+          aria-controls="extraPanelYouTube"
           role="tab"
           title="YouTube"
-          v-if="sharedState.useYouTube"
+          @click.prevent="currentTab = 'YouTube'"
         >
           <i class="fa fa-youtube-play"></i>
         </button>
@@ -44,43 +44,43 @@
 
       <div class="panes">
         <div
-          aria-labelledby="extraTabLyrics"
+          v-show="currentTab === 'Lyrics'"
           id="extraPanelLyrics"
+          aria-labelledby="extraTabLyrics"
           role="tabpanel"
           tabindex="0"
-          v-show="currentTab === 'Lyrics'"
         >
           <lyrics-pane :song="song"/>
         </div>
 
         <div
-          aria-labelledby="extraTabArtist"
+          v-show="currentTab === 'Artist'"
           id="extraPanelArtist"
+          aria-labelledby="extraTabArtist"
           role="tabpanel"
           tabindex="0"
-          v-show="currentTab === 'Artist'"
         >
           <ArtistInfo v-if="artist" :artist="artist" mode="sidebar"/>
         </div>
 
         <div
-          aria-labelledby="extraTabAlbum"
+          v-show="currentTab === 'Album'"
           id="extraPanelAlbum"
+          aria-labelledby="extraTabAlbum"
           role="tabpanel"
           tabindex="0"
-          v-show="currentTab === 'Album'"
         >
           <AlbumInfo v-if="album" :album="album" mode="sidebar"/>
         </div>
 
         <div
-          aria-labelledby="extraTabYouTube"
+          v-show="currentTab === 'YouTube'"
           id="extraPanelYouTube"
+          aria-labelledby="extraTabYouTube"
           role="tabpanel"
           tabindex="0"
-          v-show="currentTab === 'YouTube'"
         >
-          <YouTubeVideoList v-if="sharedState.useYouTube && song" :song="song"/>
+          <YouTubeVideoList v-if="useYouTube && song" :song="song"/>
         </div>
       </div>
     </div>
@@ -89,9 +89,9 @@
 
 <script lang="ts" setup>
 import isMobile from 'ismobilejs'
-import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue'
 import { $, eventBus } from '@/utils'
-import { preferenceStore as preferences, commonStore, songStore } from '@/stores'
+import { commonStore, preferenceStore as preferences, songStore } from '@/stores'
 import { songInfo } from '@/services'
 
 type Tab = 'Lyrics' | 'Artist' | 'Album' | 'YouTube'
@@ -103,14 +103,14 @@ const AlbumInfo = defineAsyncComponent(() => import('@/components/album/AlbumInf
 const YouTubeVideoList = defineAsyncComponent(() => import('@/components/ui/YouTubeVideoList.vue'))
 
 const song = ref<Song | null>(null)
-const state = reactive(preferences.state)
-const sharedState = reactive(commonStore.state)
+const showing = toRef(preferences.state, 'showExtraPanel')
+const useYouTube = toRef(commonStore.state, 'useYouTube')
 const currentTab = ref(defaultTab)
 
 const artist = computed(() => song.value?.artist)
 const album = computed(() => song.value?.album)
 
-watch(() => state.showExtraPanel, (showingExtraPanel) => {
+watch(showing, (showingExtraPanel) => {
   if (showingExtraPanel && !isMobile.any) {
     $.addClass(document.documentElement, 'with-extra-panel')
   } else {
@@ -123,7 +123,7 @@ const resetState = () => {
   song.value = songStore.stub
 }
 
-const fetchSongInfo = async (_song: Song) =>{
+const fetchSongInfo = async (_song: Song) => {
   try {
     song.value = await songInfo.fetch(_song)
   } catch (err) {
@@ -139,7 +139,7 @@ eventBus.on({
     isMobile.any || $.addClass(document.documentElement, 'with-extra-panel')
 
     // Hide the extra panel if on mobile
-    isMobile.phone && (state.showExtraPanel = false)
+    isMobile.phone && (showing.value = false)
   }
 })
 </script>

resources/assets/js/components/layout/main-wrapper/MainContent.vue

@@ -30,9 +30,9 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, reactive, ref, toRef } from 'vue'
+import { defineAsyncComponent, ref, toRef } from 'vue'
 import { eventBus } from '@/utils'
-import { preferenceStore, commonStore } from '@/stores'
+import { commonStore, preferenceStore } from '@/stores'
 import HomeScreen from '@/components/screens/HomeScreen.vue'
 import QueueScreen from '@/components/screens/QueueScreen.vue'
 import AlbumListScreen from '@/components/screens/AlbumListScreen.vue'

resources/assets/js/components/screens/AlbumScreen.vue

@@ -18,11 +18,11 @@
           •
           {{ duration }}
 
-          <template v-if="sharedState.useLastfm">
+          <template v-if="useLastfm">
             •
             <a class="info" href title="View album's extra information" @click.prevent="showInfo">Info</a>
           </template>
-          <template v-if="sharedState.allowDownload">
+          <template v-if="allowDownload">
             •
             <a class="download" href role="button" title="Download all songs in album" @click.prevent="download">
               Download All
@@ -45,7 +45,7 @@
 
     <SongList ref="songList" :config="listConfig" :items="songs" type="album" @press:enter="onPressEnter"/>
 
-    <section v-if="sharedState.useLastfm && showing" class="info-wrapper">
+    <section v-if="useLastfm && showing" class="info-wrapper">
       <CloseModalBtn @click="showing = false"/>
       <div class="inner">
         <div class="loading" v-if="loading">
@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, reactive, ref, toRefs, watch } from 'vue'
+import { computed, defineAsyncComponent, ref, toRef, toRefs, watch } from 'vue'
 import { pluralize } from '@/utils'
 import { artistStore, commonStore } from '@/stores'
 import { albumInfoService, downloadService } from '@/services'
@@ -92,7 +92,8 @@ const {
 } = useSongList(ref(album.value.songs))
 
 const listConfig: Partial<SongListConfig> = { columns: ['track', 'title', 'length'] }
-const sharedState = reactive(commonStore.state)
+const useLastfm = toRef(commonStore.state, 'useLastfm')
+const allowDownload = toRef(commonStore.state, 'allowDownload')
 const showing = ref(false)
 const loading = ref(true)
 

resources/assets/js/components/screens/ArtistScreen.vue

@@ -16,12 +16,12 @@
           •
           {{ duration }}
 
-          <template v-if="sharedState.useLastfm">
+          <template v-if="useLastfm">
             •
             <a class="info" href title="View artist's extra information" @click.prevent="showInfo">Info</a>
           </template>
 
-          <template v-if="sharedState.allowDownload">
+          <template v-if="allowDownload">
             •
             <a
               class="download"
@@ -50,7 +50,7 @@
 
     <SongList ref="songList" :config="listConfig" :items="songs" type="artist" @press:enter="onPressEnter"/>
 
-    <section class="info-wrapper" v-if="sharedState.useLastfm && showing">
+    <section class="info-wrapper" v-if="useLastfm && showing">
       <CloseModalBtn @click="showing = false"/>
       <div class="inner">
         <div class="loading" v-if="loading">
@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, reactive, ref, toRefs, watch } from 'vue'
+import { defineAsyncComponent, ref, toRef, toRefs, watch } from 'vue'
 import { pluralize } from '@/utils'
 import { commonStore } from '@/stores'
 import { artistInfoService, downloadService } from '@/services'
@@ -97,7 +97,8 @@ const ArtistThumbnail = defineAsyncComponent(() => import('@/components/ui/Album
 const CloseModalBtn = defineAsyncComponent(() => import('@/components/ui/BtnCloseModal.vue'))
 
 const listConfig: Partial<SongListConfig> = { columns: ['track', 'title', 'album', 'length'] }
-const sharedState = reactive(commonStore.state)
+const useLastfm = toRef(commonStore.state, 'useLastfm')
+const allowDownload = toRef(commonStore.state, 'allowDownload')
 
 const showing = ref(false)
 const loading = ref(true)

resources/assets/js/components/screens/QueueScreen.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, reactive, toRef } from 'vue'
+import { computed, defineAsyncComponent, toRef } from 'vue'
 import { pluralize } from '@/utils'
 import { queueStore, songStore } from '@/stores'
 import { playbackService } from '@/services'
@@ -72,9 +72,7 @@ const {
   toggleControls
 } = useSongList(toRef(queueStore.state, 'songs'), { clearQueue: true })
 
-const songState = reactive(songStore.state)
-
-const showShuffleLibraryButton = computed(() => songState.songs.length > 0)
+const showShuffleLibraryButton = computed(() => songs.value.length > 0)
 
 const playAll = (shuffle: boolean) => playbackService.queueAndPlay(songs.value.length ? songs.value : songStore.all, shuffle)
 const clearQueue = () => queueStore.clear()

resources/assets/js/components/song/AddToMenu.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, nextTick, reactive, ref, toRefs, watch } from 'vue'
+import { computed, defineAsyncComponent, nextTick, ref, toRef, toRefs, watch } from 'vue'
 import { alerts, pluralize } from '@/utils'
 import { playlistStore } from '@/stores'
 import router from '@/router'
@@ -72,7 +72,9 @@ const props = defineProps<{ songs: Song[], showing: Boolean, config: AddToMenuCo
 const { songs, showing, config } = toRefs(props)
 
 const newPlaylistName = ref('')
-const playlistState = reactive(playlistStore.state)
+
+const allPlaylists = toRef(playlistStore.state, 'playlists')
+const playlists = computed(() => allPlaylists.value.filter(playlist => !playlist.is_smart))
 
 const emit = defineEmits(['closing'])
 const close = () => emit('closing')
@@ -87,8 +89,6 @@ const {
 
 watch(songs, () => songs.value.length || close())
 
-const playlists = computed(() => playlistState.playlists.filter(playlist => !playlist.is_smart))
-
 /**
  * Save the selected songs as a playlist.
  * As of current we don't have selective save.

resources/assets/js/components/song/SongContextMenu.vue

@@ -27,7 +27,7 @@
       </ul>
     </li>
     <li class="open-edit-form" v-if="isAdmin" @click="openEditForm">Edit</li>
-    <li class="download" v-if="sharedState.allowDownload" @click="download">Download</li>
+    <li class="download" v-if="allowDownload" @click="download">Download</li>
     <li
       class="copy-url"
       v-if="copyable && onlyOneSongSelected"
@@ -39,9 +39,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, Ref, toRef, toRefs, watchEffect } from 'vue'
+import { computed, Ref, toRef } from 'vue'
 import { alerts, copyText, eventBus, isClipboardSupported as copyable } from '@/utils'
-import { playlistStore, queueStore, commonStore, songStore, userStore } from '@/stores'
+import { commonStore, playlistStore, queueStore, songStore, userStore } from '@/stores'
 import { downloadService, playbackService } from '@/services'
 import router from '@/router'
 import { useContextMenu, useSongMenuMethods } from '@/composables'
@@ -64,14 +64,14 @@ const {
   addSongsToExistingPlaylist
 } = useSongMenuMethods(songs, close)
 
-const playlistState = reactive(playlistStore.state)
-const sharedState = reactive(commonStore.state)
-const userState = reactive(userStore.state)
+const playlists = toRef(playlistStore.state, 'playlists')
+const allowDownload = toRef(commonStore.state, 'allowDownload')
+const user = toRef(userStore.state, 'current')
 
 const onlyOneSongSelected = computed(() => songs.value.length === 1)
 const firstSongPlaying = computed(() => songs.value.length ? songs.value[0].playbackState === 'Playing' : false)
-const normalPlaylists = computed(() => playlistState.playlists.filter(playlist => !playlist.is_smart))
-const isAdmin = computed(() => userState.current.is_admin)
+const normalPlaylists = computed(() => playlists.value.filter(playlist => !playlist.is_smart))
+const isAdmin = computed(() => user.value.is_admin)
 
 const doPlayback = () => {
   if (!songs.value.length) return

resources/assets/js/components/ui/AlbumArtistThumbnail.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import { orderBy } from 'lodash'
-import { computed, reactive, ref, toRefs } from 'vue'
+import { computed, ref, toRef, toRefs } from 'vue'
 import { albumStore, artistStore, queueStore, userStore } from '@/stores'
 import { playbackService } from '@/services'
 import { defaultCover, fileReader } from '@/utils'
@@ -28,7 +28,7 @@ const props = defineProps<{ entity: Album | Artist }>()
 const { entity } = toRefs(props)
 
 const droppable = ref(false)
-const userState = reactive(userStore.state)
+const user = toRef(userStore.state, 'current')
 
 const forAlbum = computed(() => 'artist' in entity.value)
 const sortFields = computed(() => forAlbum.value ? ['disc', 'track'] : ['album_id', 'disc', 'track'])
@@ -64,7 +64,7 @@ const buttonLabel = computed(() => forAlbum.value
 
 const playbackFunc = computed(() => forAlbum.value ? playbackService.playAllInAlbum : playbackService.playAllByArtist)
 
-const allowsUpload = computed(() => userState.current.is_admin)
+const allowsUpload = computed(() => user.value.is_admin)
 
 const playOrQueue = (event: KeyboardEvent) => {
   if (event.metaKey || event.ctrlKey) {

resources/assets/js/components/ui/LyricsPane.vue

@@ -4,7 +4,7 @@
       <template v-if="song">
         <div v-show="song.lyrics">
           <div ref="lyricsContainer" v-html="song.lyrics"></div>
-          <TextZoomer :target="textZoomTarget"/>
+          <Magnifier :target="lyricsContainer"/>
         </div>
         <p v-if="song.id && !song.lyrics" class="none text-secondary">
           <template v-if="isAdmin">
@@ -22,27 +22,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onUpdated, reactive, ref, toRefs } from 'vue'
+import { computed, defineAsyncComponent, ref, toRef, toRefs } from 'vue'
 import { eventBus } from '@/utils'
 import { userStore } from '@/stores'
 
-const TextZoomer = defineAsyncComponent(() => import('@/components/ui/TextMagnifier.vue'))
+const Magnifier = defineAsyncComponent(() => import('@/components/ui/TextMagnifier.vue'))
 
 const props = defineProps<{ song: Song | null }>()
 const { song } = toRefs(props)
 
-const lyricsContainer = ref(null as unknown as HTMLElement)
-const textZoomTarget = ref(null as unknown as HTMLElement)
-const userState = reactive(userStore.state)
+const lyricsContainer = ref<HTMLElement>()
+const user = toRef(userStore.state, 'current')
 
-const showEditSongForm = () => eventBus.emit('MODAL_SHOW_EDIT_SONG_FORM', [song.value], 'lyrics')
+const isAdmin = computed(() => user.value.is_admin)
 
-const isAdmin = computed(() => userState.current.is_admin)
-
-onUpdated(() => {
-  // Since Vue's $refs are not reactive, we work around by assigning to a data property
-  textZoomTarget.value = lyricsContainer.value
-})
+const showEditSongForm = () => eventBus.emit('MODAL_SHOW_EDIT_SONG_FORM', song.value, 'lyrics')
 </script>
 
 <style lang="scss" scoped>

resources/assets/js/services/httpService.ts

@@ -2,7 +2,7 @@ import Axios, { AxiosInstance, Method } from 'axios'
 import NProgress from 'nprogress'
 
 import { eventBus } from '@/utils'
-import { authService, localStorageService } from '@/services'
+import { authService } from '@/services'
 
 export const httpService = {
   client: null as AxiosInstance | null,

resources/assets/tsconfig.json

@@ -3,11 +3,12 @@
     "baseUrl": ".",
     "target": "es6",
     "strict": true,
+    "noImplicitAny": false,
     "module": "esnext",
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "esModuleInterop": true,
-    "allowJs": true, // for some external modules
+    "allowJs": true,
     "paths": {
       "@/*": ["js/*"]
     }