mirror of
https://github.com/koel/koel
synced 2024-11-10 06:34:14 +00:00
chore: use screen names to differentiate song lists
This commit is contained in:
parent
a8013e1f0b
commit
36a32145fc
13 changed files with 27 additions and 32 deletions
|
@ -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')
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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')
|
||||
|
||||
|
|
|
@ -101,7 +101,7 @@ const {
|
|||
playSelected,
|
||||
onScrollBreakpoint,
|
||||
sort
|
||||
} = useSongList(ref<Song[]>([]), 'playlist')
|
||||
} = useSongList(ref<Song[]>([]), 'Playlist')
|
||||
|
||||
const allowDownload = toRef(commonStore.state, 'allow_download')
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)]
|
||||
|
|
|
@ -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 })
|
||||
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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')
|
||||
|
|
14
resources/assets/js/types.d.ts
vendored
14
resources/assets/js/types.d.ts
vendored
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue