diff --git a/app/components/CoverArt.tsx b/app/components/CoverArt.tsx index 35b2e40..32ec099 100644 --- a/app/components/CoverArt.tsx +++ b/app/components/CoverArt.tsx @@ -27,11 +27,6 @@ const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequ ({ cache, style, imageStyle, resizeMode }) => { const [error, setError] = useState(false) - if (error) { - console.log('error!') - console.log(cache?.file?.path) - } - let source: ImageSourcePropType if (!error && cache?.file && !cache?.request?.promise) { source = { uri: `file://${cache.file.path}`, cache: 'reload' } @@ -62,7 +57,7 @@ const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequ const ArtistImage = React.memo(props => { const cache = useArtistArtFile(props.artistId, props.size) - return + return }) const CoverArtImage = React.memo(props => { @@ -100,6 +95,9 @@ const styles = StyleSheet.create({ width: '100%', position: 'absolute', }, + artistImage: { + backgroundColor: 'rgba(81, 28, 99, 0.4)', + }, }) export default CoverArt diff --git a/app/hooks/cache.ts b/app/hooks/cache.ts index b86ea1f..71e74ca 100644 --- a/app/hooks/cache.ts +++ b/app/hooks/cache.ts @@ -1,9 +1,10 @@ import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache' +import { ArtistInfo } from '@app/models/music' import { selectCache } from '@app/state/cache' +import { selectMusic } from '@app/state/music' import { selectSettings } from '@app/state/settings' import { useStore, Store } from '@app/state/store' import { useCallback, useEffect } from 'react' -import { useArtistInfo } from './music' const useFileRequest = (key: CacheItemTypeKey, id: string) => { const file = useStore( @@ -51,23 +52,37 @@ export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbna }), ) } - }, [cacheItem, client, coverArt, file, type]) + // intentionally leaving file out so it doesn't re-render if the request fails + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [cacheItem, client, coverArt, type]) return { file, request } } export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => { const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb' - const artistInfo = useArtistInfo(artistId) + const fetchArtistInfo = useStore(selectMusic.fetchArtistInfo) const { file, request } = useFileRequest(type, artistId) const cacheItem = useStore(selectCache.cacheItem) useEffect(() => { - const url = type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl - if (!file && artistInfo && url) { - cacheItem(type, artistId, url) + if (!file) { + cacheItem(type, artistId, async () => { + let artistInfo: ArtistInfo | undefined + const cachedArtistInfo = useStore.getState().artistInfo[artistId] + + if (cachedArtistInfo) { + artistInfo = cachedArtistInfo + } else { + artistInfo = await fetchArtistInfo(artistId) + } + + return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl + }) } - }, [artistId, artistInfo, cacheItem, file, type]) + // intentionally leaving file out so it doesn't re-render if the request fails + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [artistId, cacheItem, fetchArtistInfo, type]) return { file, request } } diff --git a/app/screens/LibraryAlbums.tsx b/app/screens/LibraryAlbums.tsx index 6dfd9f3..7cf94c5 100644 --- a/app/screens/LibraryAlbums.tsx +++ b/app/screens/LibraryAlbums.tsx @@ -70,11 +70,6 @@ const AlbumsList = () => { overScrollMode="never" onEndReached={fetchNextPage} onEndReachedThreshold={6} - // getItemLayout={(_data, index) => ({ - // length: height, - // offset: height * Math.floor(index / 3), - // index, - // })} /> ) diff --git a/app/screens/SearchResultsView.tsx b/app/screens/SearchResultsView.tsx index 6e223ae..bfa8b45 100644 --- a/app/screens/SearchResultsView.tsx +++ b/app/screens/SearchResultsView.tsx @@ -57,7 +57,7 @@ const SearchResultsView: React.FC<{ }), [fetchSearchResults, query, type], ), - 50, + 100, ) useEffect(() => { @@ -77,7 +77,8 @@ const SearchResultsView: React.FC<{ refreshing={refreshing} overScrollMode="never" onEndReached={fetchNextPage} - onEndReachedThreshold={1} + removeClippedSubviews={true} + onEndReachedThreshold={2} /> ) } diff --git a/app/state/cache.ts b/app/state/cache.ts index c3aac7d..266e7bf 100644 --- a/app/state/cache.ts +++ b/app/state/cache.ts @@ -1,4 +1,4 @@ -import { CacheFile, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache' +import { CacheFile, CacheImageSize, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/cache' import { mkdir, rmdir } from '@app/util/fs' import PromiseQueue from '@app/util/PromiseQueue' import produce from 'immer' @@ -6,8 +6,13 @@ import RNFS from 'react-native-fs' import { GetState, SetState } from 'zustand' import { Store } from './store' -const imageDownloadQueue = new PromiseQueue(50) -const songDownloadQueue = new PromiseQueue(1) +const queues: Record = { + coverArt: new PromiseQueue(5), + coverArtThumb: new PromiseQueue(50), + artistArt: new PromiseQueue(5), + artistArtThumb: new PromiseQueue(50), + song: new PromiseQueue(1), +} export type CacheDownload = CacheFile & CacheRequest @@ -26,14 +31,18 @@ export type CacheRequestsByServer = Record export type CacheSlice = { - cacheItem: (key: CacheItemTypeKey, itemId: string, url: string | (() => string | Promise)) => Promise + cacheItem: ( + key: CacheItemTypeKey, + itemId: string, + url: string | (() => string | Promise), + ) => Promise // cache: DownloadedItemsByServer cacheDirs: CacheDirsByServer cacheFiles: CacheFilesByServer cacheRequests: CacheRequestsByServer - fetchCoverArtFilePath: (coverArt: string) => Promise + fetchCoverArtFilePath: (coverArt: string, size?: CacheImageSize) => Promise createCache: (serverId: string) => Promise prepareCache: (serverId: string) => void @@ -80,44 +89,47 @@ export const createCacheSlice = (set: SetState, get: GetState): Ca } const path = `${get().cacheDirs[activeServerId][key]}/${itemId}` - const urlResult = typeof url === 'string' ? url : url() - const fromUrl = typeof urlResult === 'string' ? urlResult : await urlResult - const queue = key === 'song' ? songDownloadQueue : imageDownloadQueue + const promise = queues[key].enqueue(async () => { + const urlResult = typeof url === 'string' ? url : url() + const fromUrl = typeof urlResult === 'string' ? urlResult : await urlResult - const promise = queue.enqueue(() => - RNFS.downloadFile({ - fromUrl, - toFile: path, - progressInterval: 100, - progress: res => { - set( - produce(state => { - state.cacheRequests[activeServerId][key][itemId].progress = Math.max( - 1, - res.bytesWritten / (res.contentLength || 1), - ) - }), - ) - }, - }) - .promise.then(() => { - set( - produce(state => { - state.cacheRequests[activeServerId][key][itemId].progress = 1 - delete state.cacheRequests[activeServerId][key][itemId].promise - }), - ) - }) - .catch(() => { - set( - produce(state => { - delete state.cacheFiles[activeServerId][key][itemId] - delete state.cacheRequests[activeServerId][key][itemId] - }), - ) - }), - ) + try { + if (!fromUrl) { + throw new Error('cannot resolve url for cache request') + } + + await RNFS.downloadFile({ + fromUrl, + toFile: path, + // progressInterval: 100, + // progress: res => { + // set( + // produce(state => { + // state.cacheRequests[activeServerId][key][itemId].progress = Math.max( + // 1, + // res.bytesWritten / (res.contentLength || 1), + // ) + // }), + // ) + // }, + }).promise + + set( + produce(state => { + state.cacheRequests[activeServerId][key][itemId].progress = 1 + delete state.cacheRequests[activeServerId][key][itemId].promise + }), + ) + } catch { + set( + produce(state => { + delete state.cacheFiles[activeServerId][key][itemId] + delete state.cacheRequests[activeServerId][key][itemId] + }), + ) + } + }) set( produce(state => { state.cacheFiles[activeServerId][key][itemId] = { @@ -134,7 +146,7 @@ export const createCacheSlice = (set: SetState, get: GetState): Ca return await promise }, - fetchCoverArtFilePath: async coverArt => { + fetchCoverArtFilePath: async (coverArt, size = 'thumbnail') => { const client = get().client if (!client) { return @@ -151,10 +163,16 @@ export const createCacheSlice = (set: SetState, get: GetState): Ca if (inProgress.promise) { await inProgress.promise } - return existing.path + return `file://${existing.path}` } - await get().cacheItem('coverArt', coverArt, () => client.getCoverArtUri({ id: coverArt })) + await get().cacheItem('coverArt', coverArt, () => + client.getCoverArtUri({ + id: coverArt, + size: size === 'thumbnail' ? '256' : undefined, + }), + ) + return `file://${get().cacheFiles[activeServerId].coverArt[coverArt].path}` }, diff --git a/app/state/trackplayermap.ts b/app/state/trackplayermap.ts index b409ee4..2a34d75 100644 --- a/app/state/trackplayermap.ts +++ b/app/state/trackplayermap.ts @@ -23,6 +23,8 @@ export const createTrackPlayerMapSlice = (set: SetState, get: GetState