chore: use screen names to differentiate song lists

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

@@ -87,7 +87,7 @@ const {
   playAll,
   playSelected,
   onScrollBreakpoint
-} = useSongList(songs, 'album', { columns: ['track', 'title', 'artist', 'length'] })
+} = useSongList(songs, 'Album', { columns: ['track', 'title', 'artist', 'length'] })
 
 const useLastfm = toRef(commonStore.state, 'use_last_fm')
 const allowDownload = toRef(commonStore.state, 'allow_download')

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

@@ -63,7 +63,7 @@ const {
   onPressEnter,
   playSelected,
   onScrollBreakpoint
-} = useSongList(toRef(songStore.state, 'songs'), 'all-songs')
+} = useSongList(toRef(songStore.state, 'songs'), 'Songs')
 
 const router = requireInjection(RouterKey)
 

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

@@ -87,7 +87,7 @@ const {
   playAll,
   playSelected,
   onScrollBreakpoint
-} = useSongList(songs, 'artist', { columns: ['track', 'title', 'album', 'length'] })
+} = useSongList(songs, 'Artist', { columns: ['track', 'title', 'album', 'length'] })
 
 const { useLastfm } = useThirdPartyServices()
 const allowDownload = toRef(commonStore.state, 'allow_download')

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

@@ -88,7 +88,7 @@ const {
   playSelected,
   onScrollBreakpoint,
   sort
-} = useSongList(toRef(favoriteStore.state, 'songs'), 'favorites')
+} = useSongList(toRef(favoriteStore.state, 'songs'), 'Favorites')
 
 const allowDownload = toRef(commonStore.state, 'allow_download')
 

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

@@ -101,7 +101,7 @@ const {
   playSelected,
   onScrollBreakpoint,
   sort
-} = useSongList(ref<Song[]>([]), 'playlist')
+} = useSongList(ref<Song[]>([]), 'Playlist')
 
 const allowDownload = toRef(commonStore.state, 'allow_download')
 

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

@@ -81,7 +81,7 @@ const {
   isPhone,
   playSelected,
   onScrollBreakpoint
-} = useSongList(toRef(queueStore.state, 'songs'), 'queue', { sortable: false })
+} = useSongList(toRef(queueStore.state, 'songs'), 'Queue', { sortable: false })
 
 const loading = ref(false)
 const libraryNotEmpty = computed(() => commonStore.state.song_count > 0)

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

@@ -64,7 +64,7 @@ const {
   playAll,
   playSelected,
   onScrollBreakpoint
-} = useSongList(recentlyPlayedSongs, 'recently-played', { sortable: false })
+} = useSongList(recentlyPlayedSongs, 'RecentlyPlayed', { sortable: false })
 
 let initialized = false
 let loading = ref(false)

resources/assets/js/components/screens/search/SearchSongResultsScreen.vue

@@ -57,7 +57,7 @@ const {
   playSelected,
   sort,
   onScrollBreakpoint
-} = useSongList(toRef(searchStore.state, 'songs'), 'search-results')
+} = useSongList(toRef(searchStore.state, 'songs'), 'Search.Songs')
 
 const decodedQ = computed(() => decodeURIComponent(q.value))
 const loading = ref(false)

resources/assets/js/components/song/SongList.spec.ts

@@ -5,11 +5,11 @@ import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { arrayify } from '@/utils'
 import {
+  ScreenNameKey,
   SelectedSongsKey,
   SongListConfigKey,
   SongListSortFieldKey,
   SongListSortOrderKey,
-  SongListTypeKey,
   SongsKey
 } from '@/symbols'
 import SongList from './SongList.vue'
@@ -19,7 +19,7 @@ let songs: Song[]
 new class extends UnitTestCase {
   private renderComponent (
     _songs: Song | Song[],
-    type: SongListType = 'all-songs',
+    screen: ScreenName = 'Songs',
     config: Partial<SongListConfig> = {},
     selectedSongs: Song[] = [],
     sortField: SongListSortField = 'title',
@@ -38,7 +38,7 @@ new class extends UnitTestCase {
         provide: {
           [<symbol>SongsKey]: [ref(songs)],
           [<symbol>SelectedSongsKey]: [ref(selectedSongs), value => (selectedSongs = value)],
-          [<symbol>SongListTypeKey]: [ref(type)],
+          [<symbol>ScreenNameKey]: [ref(screen)],
           [<symbol>SongListConfigKey]: [config],
           [<symbol>SongListSortFieldKey]: [sortFieldRef, value => (sortFieldRef.value = value)],
           [<symbol>SongListSortOrderKey]: [sortOrderRef, value => (sortOrderRef.value = value)]

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

@@ -1,7 +1,6 @@
 <template>
   <div
     ref="wrapper"
-    :class="type"
     class="song-list-wrap main-scroll-wrap"
     data-testid="song-list"
     tabindex="0"
@@ -108,11 +107,11 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { eventBus, requireInjection } from '@/utils'
 import { useDraggable } from '@/composables'
 import {
+  ScreenNameKey,
   SelectedSongsKey,
   SongListConfigKey,
   SongListSortFieldKey,
   SongListSortOrderKey,
-  SongListTypeKey,
   SongsKey
 } from '@/symbols'
 
@@ -124,7 +123,7 @@ const { startDragging } = useDraggable('songs')
 const emit = defineEmits(['press:enter', 'press:delete', 'reorder', 'sort', 'scroll-breakpoint', 'scrolled-to-end'])
 
 const [items] = requireInjection(SongsKey)
-const [type] = requireInjection(SongListTypeKey)
+const [screen] = requireInjection<[ScreenName]>(ScreenNameKey)
 const [selectedSongs, setSelectedSongs] = requireInjection(SelectedSongsKey)
 const [sortField, setSortField] = requireInjection(SongListSortFieldKey)
 const [sortOrder, setSortOrder] = requireInjection(SongListSortOrderKey)
@@ -134,7 +133,7 @@ const lastSelectedRow = ref<SongRow>()
 const sortFields = ref<SongListSortField[]>([])
 const songRows = ref<SongRow[]>([])
 
-const allowReordering = type === 'queue'
+const allowReordering = screen === 'Queue'
 
 watch(songRows, () => setSelectedSongs(songRows.value.filter(row => row.selected).map(row => row.song)), { deep: true })
 

resources/assets/js/composables/useSongList.ts

@@ -6,13 +6,13 @@ import { queueStore, songStore } from '@/stores'
 import { eventBus, provideReadonly, requireInjection } from '@/utils'
 
 import {
+  RouterKey,
+  ScreenNameKey,
   SelectedSongsKey,
   SongListConfigKey,
   SongListSortFieldKey,
   SongListSortOrderKey,
-  SongListTypeKey,
-  SongsKey,
-  RouterKey
+  SongsKey
 } from '@/symbols'
 
 import ControlsToggle from '@/components/ui/ScreenControlsToggle.vue'
@@ -20,7 +20,7 @@ import SongList from '@/components/song/SongList.vue'
 import SongListControls from '@/components/song/SongListControls.vue'
 import ThumbnailStack from '@/components/ui/ThumbnailStack.vue'
 
-export const useSongList = (songs: Ref<Song[]>, type: SongListType, config: Partial<SongListConfig> = {}) => {
+export const useSongList = (songs: Ref<Song[]>, screen: ScreenName, config: Partial<SongListConfig> = {}) => {
   const router = requireInjection(RouterKey)
 
   const songList = ref<InstanceType<typeof SongList>>()
@@ -67,8 +67,8 @@ export const useSongList = (songs: Ref<Song[]>, type: SongListType, config: Part
   }
 
   const sortField = ref<SongListSortField | null>(((): SongListSortField | null => {
-    if (type === 'album' || type === 'artist') return 'track'
-    if (type === 'search-results') return null
+    if (screen === 'Album' || screen === 'Artist') return 'track'
+    if (screen === 'Search.Songs') return null
     return config.sortable ? 'title' : null
   })())
 
@@ -97,7 +97,7 @@ export const useSongList = (songs: Ref<Song[]>, type: SongListType, config: Part
     songs.value = differenceBy(songs.value, deletedSongs, 'id')
   })
 
-  provideReadonly(SongListTypeKey, type)
+  provideReadonly(ScreenNameKey, screen)
   provideReadonly(SongsKey, songs, false)
   provideReadonly(SelectedSongsKey, selectedSongs, false)
   provideReadonly(SongListConfigKey, reactive(config))

resources/assets/js/symbols.ts

@@ -7,11 +7,11 @@ export interface ReadonlyInjectionKey<T> extends InjectionKey<[Readonly<T> | Dee
 }
 
 export const RouterKey: InjectionKey<Router> = Symbol('Router')
+export const ScreenNameKey: ReadonlyInjectionKey<ScreenName> = Symbol('ScreenName')
 
 export const DialogBoxKey: InjectionKey<Ref<InstanceType<typeof DialogBox>>> = Symbol('DialogBox')
 export const MessageToasterKey: InjectionKey<Ref<InstanceType<typeof MessageToaster>>> = Symbol('MessageToaster')
 
-export const SongListTypeKey: ReadonlyInjectionKey<SongListType> = Symbol('SongListType')
 export const SongsKey: ReadonlyInjectionKey<Ref<Song[]>> | InjectionKey<Ref<Song[]>> = Symbol('Songs')
 export const SelectedSongsKey: ReadonlyInjectionKey<Ref<Song[]>> = Symbol('SelectedSongs')
 export const SongListConfigKey: ReadonlyInjectionKey<Partial<SongListConfig>> = Symbol('SongListConfig')

resources/assets/js/types.d.ts

@@ -353,15 +353,6 @@ type ArtistAlbumViewMode = 'list' | 'thumbnails'
 
 type RepeatMode = 'NO_REPEAT' | 'REPEAT_ALL' | 'REPEAT_ONE'
 
-type SongListType = 'all-songs'
-  | 'queue'
-  | 'playlist'
-  | 'favorites'
-  | 'recently-played'
-  | 'artist'
-  | 'album'
-  | 'search-results'
-
 type SongListColumn = 'track' | 'title' | 'album' | 'artist' | 'length'
 
 interface SongListConfig {
@@ -373,6 +364,11 @@ type SongListSortField = keyof Pick<Song, 'track' | 'disc' | 'title' | 'album_na
 
 type SortOrder = 'asc' | 'desc'
 
+type SongListSort = {
+  fields: SongListSortField[]
+  order: SortOrder
+}
+
 type MethodOf<T> = { [K in keyof T]: T[K] extends Closure ? K : never; }[keyof T]
 
 interface PaginatorResource {