mirror of
https://github.com/austinried/subtracks.git
synced 2025-12-27 00:59:28 +01:00
081251061d
* start of music store refactor moving stuff into a state cache better separate it from view logic * added paginated list/album list * reworked fetchAlbumList to remove ui state refactored home screen to use new method i broke playing songs somehow, JS thread goes into a loop * don't reset parts manually, do it all at once * fixed perf issue related to too many rerenders rerenders were caused by strict equality check on object/array picks switched artistInfo to new store updated zustand and fixed deprecation warnings * update typescript and use workspace tsc version for vscode * remove old artistInfo * switched to new playlist w/songs removed more unused stuff * remove unused + (slightly) rework search * refactor star * use only original/large imges for covers/artist fix view artist from context menu add loading indicators to song list and artist views (show info we have right away) * set starred/unstar assuming it works and correct state on error * reorg, remove old music slice files * added back fix for song cover art * sort artists by localCompare name * update licenses * fix now playing background grey bar * update react-native-gesture-handler for node-fetch security alert * fix another gradient height grey bar issue * update licenses again * remove thumbnail cache * rename to remove "Library" from methods * Revert "remove thumbnail cache" This reverts commit e0db4931f11bbf4cd8e73102d06505c6ae85f4a6. * use ids for lists, pull state later * Revert "use only original/large imges for covers/artist" This reverts commit c9aea9065ce6ebe3c8b09c10dd74d4de153d76fd. * deep equal ListItem props for now this needs a bigger refactor * use immer as middleware * refactor api client to use string method hoping to use this for requestKey/deduping next * use thumbnails in list items * Revert "refactor api client to use string method" This reverts commit 234326135b7af96cb91b941e7ca515f45c632556. * rename/cleanup * store servers by id * get rid of settings selectors * renames for clarity remove unused estimateContentLength setting * remove trackplayer selectors * fix migration for library filter settings * fixed shuffle order reporting wrong track/queue * removed the other selectors * don't actually need es6/react for our state * fix slow artist sort on star localeCompare is too slow for large lists
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import FilterButton, { OptionData } from '@app/components/FilterButton'
|
|
import GradientFlatList from '@app/components/GradientFlatList'
|
|
import ListItem from '@app/components/ListItem'
|
|
import { useFetchList2 } from '@app/hooks/list'
|
|
import { Artist } from '@app/models/library'
|
|
import { ArtistFilterType } from '@app/models/settings'
|
|
import { useStore, useStoreDeep } from '@app/state/store'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { StyleSheet, View } from 'react-native'
|
|
|
|
const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
|
|
<ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
|
|
)
|
|
|
|
const filterOptions: OptionData[] = [
|
|
{ text: 'By Name', value: 'alphabeticalByName' },
|
|
{ text: 'Starred', value: 'starred' },
|
|
{ text: 'Random', value: 'random' },
|
|
]
|
|
|
|
const ArtistsList = () => {
|
|
const fetchArtists = useStore(store => store.fetchArtists)
|
|
const { refreshing, refresh } = useFetchList2(fetchArtists)
|
|
const artists = useStoreDeep(store => store.library.artists)
|
|
const artistOrder = useStoreDeep(store => store.library.artistOrder)
|
|
|
|
const filter = useStoreDeep(store => store.settings.screens.library.artistsFilter)
|
|
const setFilter = useStore(store => store.setLibraryArtistFiler)
|
|
const [sortedList, setSortedList] = useState<Artist[]>([])
|
|
|
|
useEffect(() => {
|
|
const list = Object.values(artists)
|
|
switch (filter.type) {
|
|
case 'random':
|
|
setSortedList([...list].sort(() => Math.random() - 0.5))
|
|
break
|
|
case 'starred':
|
|
setSortedList([...list].filter(a => a.starred))
|
|
break
|
|
case 'alphabeticalByName':
|
|
setSortedList(artistOrder.map(id => artists[id]))
|
|
break
|
|
default:
|
|
setSortedList([...list])
|
|
break
|
|
}
|
|
}, [filter.type, artists, artistOrder])
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<GradientFlatList
|
|
data={sortedList}
|
|
renderItem={ArtistRenderItem}
|
|
keyExtractor={item => item.id}
|
|
onRefresh={refresh}
|
|
refreshing={refreshing}
|
|
overScrollMode="never"
|
|
windowSize={3}
|
|
contentMarginTop={6}
|
|
/>
|
|
<FilterButton
|
|
data={filterOptions}
|
|
value={filter.type}
|
|
onSelect={selection => {
|
|
setFilter({
|
|
...filter,
|
|
type: selection as ArtistFilterType,
|
|
})
|
|
}}
|
|
/>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
listItem: {
|
|
paddingHorizontal: 10,
|
|
},
|
|
})
|
|
|
|
export default ArtistsList
|