chore: use screen names to differentiate song lists

This commit is contained in:
Phan An 2022-10-09 08:31:46 +02:00
parent a8013e1f0b
commit 36a32145fc
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
13 changed files with 27 additions and 32 deletions

View file

@ -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')

View file

@ -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)

View file

@ -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')

View file

@ -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')

View file

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

View file

@ -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)

View file

@ -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)

View file

@ -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)

View file

@ -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)]

View file

@ -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 })

View file

@ -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))

View file

@ -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')

View file

@ -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 {