koel/resources/assets/js/composables/useSongList.ts

205 lines
6.2 KiB
TypeScript
Raw Normal View History

import { differenceBy, orderBy, sampleSize, take, throttle } from 'lodash'
import isMobile from 'ismobilejs'
import type { Ref } from 'vue'
import { computed, provide, reactive, ref } from 'vue'
2022-04-24 08:50:45 +00:00
import { playbackService } from '@/services'
import { commonStore, queueStore, songStore } from '@/stores'
2024-05-19 05:49:42 +00:00
import { arrayify, eventBus, getPlayableProp, provideReadonly } from '@/utils'
import { useFuzzySearch, useRouter } from '@/composables'
2022-04-15 14:24:30 +00:00
import {
2024-05-19 05:49:42 +00:00
PlayableListConfigKey,
PlayableListContextKey,
PlayableListSortFieldKey,
2024-06-03 07:16:29 +00:00
PlayablesKey,
SelectedPlayablesKey,
SongListFilterKeywordsKey,
SongListSortOrderKey,
} from '@/symbols'
2022-04-15 14:24:30 +00:00
import ControlsToggle from '@/components/ui/ScreenControlsToggle.vue'
import SongList from '@/components/song/SongList.vue'
2022-07-16 09:52:39 +00:00
import ThumbnailStack from '@/components/ui/ThumbnailStack.vue'
export const useSongList = (
2024-05-19 05:49:42 +00:00
playables: Ref<Playable[]>,
context: PlayableListContext = {},
config: Partial<PlayableListConfig> = {
filterable: true,
2024-05-19 05:49:42 +00:00
sortable: true,
reorderable: false,
collaborative: false,
hasCustomOrderSort: false,
},
) => {
const filterKeywords = ref('')
config = reactive(config)
2024-03-25 22:59:38 +00:00
context = reactive(context)
const { isCurrentScreen, go } = useRouter()
const fuzzy = config.filterable
? useFuzzySearch(playables, [
'title',
'artist_name',
'album_name',
'podcast_title',
'podcast_author',
'episode_description',
])
: null
2022-04-23 21:24:02 +00:00
const songList = ref<InstanceType<typeof SongList>>()
2022-04-15 14:24:30 +00:00
2022-04-23 21:24:02 +00:00
const isPhone = isMobile.phone
2024-05-19 05:49:42 +00:00
const selectedPlayables = ref<Playable[]>([])
2022-04-15 14:24:30 +00:00
const showingControls = ref(false)
const headerLayout = ref<ScreenHeaderLayout>('expanded')
2022-07-16 09:52:39 +00:00
const sortField = ref<MaybeArray<PlayableListSortField> | null>((() => {
if (!config.sortable) {
return null
}
if (isCurrentScreen('Artist', 'Album')) {
return 'track'
}
if (isCurrentScreen('Search.Songs', 'Queue', 'RecentlyPlayed')) {
return null
}
return 'title'
})())
/**
* Extends the sort fields based on the current field(s) to cater to relevant fields.
* For example, sorting by track should take into account the disc number and the title.
* Similarly, sorting by album name should also include the artist name, disc number, track number, and title, etc.
*/
const extendedSortFields = computed(() => {
if (!sortField.value) {
return null
}
let extended: PlayableListSortField[] = arrayify(sortField.value)
if (sortField.value === 'track') {
extended = ['disc', 'track', 'title']
} else if (sortField.value.includes('album_name') && !sortField.value.includes('disc')) {
extended.push('artist_name', 'disc', 'track', 'title')
} else if (sortField.value.includes('artist_name') && !sortField.value.includes('disc')) {
extended.push('album_name', 'disc', 'track', 'title')
}
return extended
})
const sortOrder = ref<SortOrder>('asc')
2022-07-16 09:52:39 +00:00
const onScrollBreakpoint = (direction: 'up' | 'down') => {
headerLayout.value = direction === 'down' ? 'collapsed' : 'expanded'
}
2022-04-15 14:24:30 +00:00
2024-05-19 05:49:42 +00:00
const duration = computed(() => songStore.getFormattedLength(playables.value))
2022-04-15 14:24:30 +00:00
const downloadable = computed(() => {
if (!commonStore.state.allows_download) {
return false
}
if (playables.value.length === 0) {
return false
}
return playables.value.length === 1 || commonStore.state.supports_batch_downloading
})
2022-07-16 09:52:39 +00:00
const thumbnails = computed(() => {
2024-05-19 05:49:42 +00:00
const playablesWithCover = playables.value.filter(p => getPlayableProp<string>(p, 'album_cover', 'episode_image'))
const sampleCovers = sampleSize(playablesWithCover, 20)
.map(p => getPlayableProp<string>(p, 'album_cover', 'episode_image'))
2022-07-16 09:52:39 +00:00
return take(Array.from(new Set(sampleCovers)), 4)
})
2024-05-19 05:49:42 +00:00
const getPlayablesToPlay = () => songList.value!.getAllPlayablesWithSort()
2022-10-21 20:06:43 +00:00
const playAll = (shuffle: boolean) => {
2024-05-19 05:49:42 +00:00
playbackService.queueAndPlay(getPlayablesToPlay(), shuffle)
2022-11-18 18:44:20 +00:00
go('queue')
2022-10-21 20:06:43 +00:00
}
2024-05-19 05:49:42 +00:00
const playSelected = (shuffle: boolean) => playbackService.queueAndPlay(selectedPlayables.value, shuffle)
2022-04-15 14:24:30 +00:00
const applyFilter = throttle((keywords: string) => (filterKeywords.value = keywords), 200)
const filteredPlayables = computed(() => {
if (!fuzzy) {
return playables.value
}
return sortField.value
? orderBy(fuzzy.search(filterKeywords.value), extendedSortFields.value!, sortOrder.value)
: fuzzy.search(filterKeywords.value)
})
const onPressEnter = async (event: KeyboardEvent) => {
2024-05-19 05:49:42 +00:00
if (selectedPlayables.value.length === 1) {
await playbackService.play(selectedPlayables.value[0])
return
}
2024-05-19 05:49:42 +00:00
// • Only Enter: Queue to bottom
// • Shift+Enter: Queues to top
// • Cmd/Ctrl+Enter: Queues to bottom and play the first selected item
// • Cmd/Ctrl+Shift+Enter: Queue to top and play the first queued item
event.shiftKey ? queueStore.queueToTop(selectedPlayables.value) : queueStore.queue(selectedPlayables.value)
if (event.ctrlKey || event.metaKey) {
2024-05-19 05:49:42 +00:00
await playbackService.play(selectedPlayables.value[0])
}
2022-11-18 18:44:20 +00:00
go('queue')
}
2024-05-19 05:49:42 +00:00
const sort = (by: MaybeArray<PlayableListSortField> | null = sortField.value, order: SortOrder = sortOrder.value) => {
// To sort a song list, we simply set the sort field and order.
// The list will be sorted automatically by the computed property.
2022-07-05 15:09:20 +00:00
sortField.value = by
sortOrder.value = order
2022-06-10 10:47:46 +00:00
}
2024-05-19 05:49:42 +00:00
eventBus.on('SONGS_DELETED', deletedSongs => (playables.value = differenceBy(playables.value, deletedSongs, 'id')))
provideReadonly(PlayablesKey, filteredPlayables, false)
2024-05-19 05:49:42 +00:00
provideReadonly(SelectedPlayablesKey, selectedPlayables, false)
provideReadonly(PlayableListConfigKey, config)
provideReadonly(PlayableListContextKey, context)
provideReadonly(PlayableListSortFieldKey, sortField)
2022-07-20 08:00:02 +00:00
provideReadonly(SongListSortOrderKey, sortOrder)
2022-06-10 10:47:46 +00:00
provide(SongListFilterKeywordsKey, filterKeywords)
2022-04-15 14:24:30 +00:00
return {
SongList,
2022-06-10 10:47:46 +00:00
ControlsToggle,
2022-07-16 09:52:39 +00:00
ThumbnailStack,
2024-05-19 05:49:42 +00:00
songs: playables,
2024-01-18 11:13:05 +00:00
config,
2024-03-25 22:59:38 +00:00
context,
downloadable,
2022-07-16 09:52:39 +00:00
headerLayout,
2022-07-05 15:09:20 +00:00
sortField,
sortOrder,
2022-04-23 21:24:02 +00:00
duration,
2022-07-16 09:52:39 +00:00
thumbnails,
2022-04-15 14:24:30 +00:00
songList,
2024-05-19 05:49:42 +00:00
selectedPlayables,
2022-04-15 14:24:30 +00:00
showingControls,
isPhone,
onPressEnter,
2022-04-15 14:24:30 +00:00
playAll,
playSelected,
applyFilter,
2022-07-16 09:52:39 +00:00
onScrollBreakpoint,
sort,
2022-04-15 14:24:30 +00:00
}
}