Library store refactor (#76)

* 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 e0db4931f1.

* use ids for lists, pull state later

* Revert "use only original/large imges for covers/artist"

This reverts commit c9aea9065c.

* 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 234326135b.

* 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
This commit is contained in:
austinried
2022-03-28 13:30:57 +09:00
committed by GitHub
parent b6e3a20e60
commit 5d5188ae5b
57 changed files with 2136 additions and 1843 deletions
+57 -22
View File
@@ -1,18 +1,18 @@
import GradientFlatList from '@app/components/GradientFlatList'
import ListItem from '@app/components/ListItem'
import { useFetchPaginatedList } from '@app/hooks/list'
import { AlbumListItem, Artist, Song } from '@app/models/music'
import { selectMusic } from '@app/state/music'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
import { Album, Artist, Song } from '@app/models/library'
import { useStore, useStoreDeep } from '@app/state/store'
import { Search3Params } from '@app/subsonic/params'
import { mapById } from '@app/util/state'
import { useNavigation } from '@react-navigation/native'
import React, { useCallback, useEffect } from 'react'
import { StyleSheet } from 'react-native'
type SearchListItemType = AlbumListItem | Song | Artist
type SearchListItemType = Album | Song | Artist
const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
const setQueue = useStore(selectTrackPlayer.setQueue)
const setQueue = useStore(store => store.setQueue)
let onPress
if (item.itemType === 'song') {
@@ -40,27 +40,62 @@ const SearchResultsView: React.FC<{
type: 'album' | 'artist' | 'song'
}> = ({ query, type }) => {
const navigation = useNavigation()
const fetchSearchResults = useStore(selectMusic.fetchSearchResults)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList<SearchListItemType>(
const fetchSearchResults = useStore(store => store.fetchSearchResults)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(
useCallback(
(size, offset) =>
fetchSearchResults(query, type, size, offset).then(results => {
switch (type) {
case 'album':
return results.albums
case 'artist':
return results.artists
case 'song':
return results.songs
default:
return []
}
}),
async (size, offset) => {
const params: Search3Params = { query }
if (type === 'album') {
params.albumCount = size
params.albumOffset = offset
} else if (type === 'artist') {
params.artistCount = size
params.artistOffset = offset
} else if (type === 'song') {
params.songCount = size
params.songOffset = offset
} else {
params.albumCount = 5
params.artistCount = 5
params.songCount = 5
}
const results = await fetchSearchResults(params)
switch (type) {
case 'album':
return results.albums
case 'artist':
return results.artists
case 'song':
return results.songs
default:
return []
}
},
[fetchSearchResults, query, type],
),
100,
)
const items: SearchListItemType[] = useStoreDeep(
useCallback(
store => {
switch (type) {
case 'album':
return mapById(store.library.albums, list)
case 'artist':
return mapById(store.library.artists, list)
case 'song':
return mapById(store.library.songs, list)
default:
return []
}
},
[list, type],
),
)
useEffect(() => {
navigation.setOptions({
title: `Search: "${query}"`,
@@ -70,7 +105,7 @@ const SearchResultsView: React.FC<{
return (
<GradientFlatList
data={list}
data={items}
renderItem={SearchResultsRenderItem}
keyExtractor={(item, i) => i.toString()}
onRefresh={refresh}