fix artist image render error

separate cache state into its own slice
This commit is contained in:
austinried
2021-08-13 14:41:28 +09:00
parent f82a9b55bd
commit d1824a70be
8 changed files with 300 additions and 275 deletions

View File

@@ -14,24 +14,12 @@ import {
PlaylistListItem,
PlaylistWithSongs,
SearchResults,
Song,
} from '@app/models/music'
import { Store } from '@app/state/store'
import { GetAlbumList2Type, StarParams } from '@app/subsonic/params'
import PromiseQueue from '@app/util/PromiseQueue'
import produce from 'immer'
import RNFS from 'react-native-fs'
import { GetState, SetState } from 'zustand'
const imageDownloadQueue = new PromiseQueue(5)
export type DownloadFile = {
path: string
date: number
progress: number
promise?: Promise<void>
}
export type MusicSlice = {
//
// family-style state
@@ -70,29 +58,6 @@ export type MusicSlice = {
fetchHomeLists: () => Promise<void>
clearHomeLists: () => void
//
// downloads
//
coverArtDir?: string
artistArtDir?: string
songsDir?: string
cachedCoverArt: { [coverArt: string]: DownloadFile }
downloadedCoverArt: { [coverArt: string]: DownloadFile }
coverArtRequests: { [coverArt: string]: Promise<void> }
cacheCoverArt: (coverArt: string) => Promise<void>
getCoverArtPath: (coverArt: string) => Promise<string>
cachedArtistArt: { [artistId: string]: DownloadFile }
downloadedArtistArt: { [artistId: string]: DownloadFile }
cacheArtistArt: (artistId: string, url?: string) => Promise<void>
cachedSongs: { [id: string]: DownloadFile }
downloadedSongs: { [id: string]: DownloadFile }
//
// actions, etc.
//
@@ -100,12 +65,6 @@ export type MusicSlice = {
starredAlbums: { [id: string]: boolean }
starredArtists: { [id: string]: boolean }
starItem: (id: string, type: string, unstar?: boolean) => Promise<void>
albumCoverArt: { [id: string]: string | undefined }
albumCoverArtRequests: { [id: string]: Promise<void> }
fetchAlbumCoverArt: (id: string) => Promise<void>
getAlbumCoverArt: (id: string | undefined) => Promise<string | undefined>
mapSongCoverArtFromAlbum: (songs: Song[]) => Promise<Song[]>
}
export const selectMusic = {
@@ -135,12 +94,7 @@ export const selectMusic = {
fetchHomeLists: (store: MusicSlice) => store.fetchHomeLists,
clearHomeLists: (store: MusicSlice) => store.clearHomeLists,
cacheCoverArt: (store: MusicSlice) => store.cacheCoverArt,
getCoverArtPath: (store: MusicSlice) => store.getCoverArtPath,
cacheArtistArt: (store: MusicSlice) => store.cacheArtistArt,
starItem: (store: MusicSlice) => store.starItem,
fetchAlbumCoverArt: (store: MusicSlice) => store.fetchAlbumCoverArt,
}
function reduceStarred(
@@ -416,110 +370,6 @@ export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): Mu
set({ homeLists: {} })
},
cachedCoverArt: {},
downloadedCoverArt: {},
coverArtRequests: {},
cacheCoverArt: async coverArt => {
const client = get().client
if (!client) {
return
}
const path = `${get().coverArtDir}/${coverArt}`
const existing = get().cachedCoverArt[coverArt]
if (existing) {
if (existing.promise !== undefined) {
return await existing.promise
} else {
return
}
}
const promise = imageDownloadQueue
.enqueue<void>(() =>
RNFS.downloadFile({
fromUrl: client.getCoverArtUri({ id: coverArt }),
toFile: path,
}).promise.then(() => new Promise(resolve => setTimeout(resolve, 100))),
)
.then(() => {
set(
produce<MusicSlice>(state => {
state.cachedCoverArt[coverArt].progress = 1
delete state.cachedCoverArt[coverArt].promise
}),
)
})
set(
produce<MusicSlice>(state => {
state.cachedCoverArt[coverArt] = {
path,
date: Date.now(),
progress: 0,
promise,
}
}),
)
return await promise
},
getCoverArtPath: async coverArt => {
const existing = get().cachedCoverArt[coverArt]
if (existing) {
if (existing.promise) {
await existing.promise
}
return existing.path
}
await get().cacheCoverArt(coverArt)
return get().cachedCoverArt[coverArt].path
},
cachedArtistArt: {},
downloadedArtistArt: {},
cacheArtistArt: async (artistId, url) => {
if (!url) {
return
}
const client = get().client
if (!client) {
return
}
const path = `${get().artistArtDir}/${artistId}`
set(
produce<MusicSlice>(state => {
state.cachedArtistArt[artistId] = {
path,
date: Date.now(),
progress: 0,
}
}),
)
await imageDownloadQueue.enqueue(
() =>
RNFS.downloadFile({
fromUrl: url,
toFile: path,
}).promise,
)
set(
produce<MusicSlice>(state => {
state.cachedArtistArt[artistId].progress = 1
}),
)
},
cachedSongs: {},
downloadedSongs: {},
starredSongs: {},
starredAlbums: {},
starredArtists: {},
@@ -579,70 +429,4 @@ export const createMusicSlice = (set: SetState<Store>, get: GetState<Store>): Mu
setStarred(unstar)
}
},
albumCoverArt: {},
albumCoverArtRequests: {},
fetchAlbumCoverArt: async id => {
const client = get().client
if (!client) {
return
}
const inProgress = get().albumCoverArtRequests[id]
if (inProgress !== undefined) {
return await inProgress
}
const promise = new Promise<void>(async resolve => {
try {
const response = await client.getAlbum({ id })
set(
produce<MusicSlice>(state => {
state.albumCoverArt[id] = response.data.album.coverArt
}),
)
} finally {
resolve()
}
}).then(() => {
set(
produce<MusicSlice>(state => {
delete state.albumCoverArtRequests[id]
}),
)
})
set(
produce<MusicSlice>(state => {
state.albumCoverArtRequests[id] = promise
}),
)
return await promise
},
getAlbumCoverArt: async id => {
if (!id) {
return
}
const existing = get().albumCoverArt[id]
if (existing) {
return existing
}
await get().fetchAlbumCoverArt(id)
return get().albumCoverArt[id]
},
mapSongCoverArtFromAlbum: async songs => {
const mapped: Song[] = []
for (const s of songs) {
mapped.push({
...s,
coverArt: await get().getAlbumCoverArt(s.albumId),
})
}
return mapped
},
})