mirror of
https://github.com/austinried/subtracks.git
synced 2026-02-10 15:02:42 +01:00
fix artist image render error
separate cache state into its own slice
This commit is contained in:
austinried
234
app/state/cache.ts
Normal file
234
app/state/cache.ts
Normal file
@@ -0,0 +1,234 @@
|
||||
import { Song } from '@app/models/music'
|
||||
import PromiseQueue from '@app/util/PromiseQueue'
|
||||
import { SetState, GetState } from 'zustand'
|
||||
import { Store } from './store'
|
||||
import produce from 'immer'
|
||||
import RNFS from 'react-native-fs'
|
||||
|
||||
const imageDownloadQueue = new PromiseQueue(10)
|
||||
|
||||
export type DownloadFile = {
|
||||
path: string
|
||||
date: number
|
||||
progress: number
|
||||
promise?: Promise<void>
|
||||
}
|
||||
|
||||
export type CacheSlice = {
|
||||
coverArtDir?: string
|
||||
artistArtDir?: string
|
||||
songsDir?: string
|
||||
|
||||
cachedCoverArt: { [coverArt: string]: DownloadFile }
|
||||
downloadedCoverArt: { [coverArt: string]: DownloadFile }
|
||||
|
||||
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 }
|
||||
|
||||
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 selectCache = {
|
||||
cacheCoverArt: (store: CacheSlice) => store.cacheCoverArt,
|
||||
getCoverArtPath: (store: CacheSlice) => store.getCoverArtPath,
|
||||
cacheArtistArt: (store: CacheSlice) => store.cacheArtistArt,
|
||||
|
||||
fetchAlbumCoverArt: (store: CacheSlice) => store.fetchAlbumCoverArt,
|
||||
}
|
||||
|
||||
export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): CacheSlice => ({
|
||||
cachedCoverArt: {},
|
||||
downloadedCoverArt: {},
|
||||
|
||||
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(
|
||||
() =>
|
||||
RNFS.downloadFile({
|
||||
fromUrl: client.getCoverArtUri({ id: coverArt }),
|
||||
toFile: path,
|
||||
}).promise,
|
||||
)
|
||||
.then(() => {
|
||||
set(
|
||||
produce<CacheSlice>(state => {
|
||||
state.cachedCoverArt[coverArt].progress = 1
|
||||
delete state.cachedCoverArt[coverArt].promise
|
||||
}),
|
||||
)
|
||||
})
|
||||
set(
|
||||
produce<CacheSlice>(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}`
|
||||
|
||||
const existing = get().cachedArtistArt[artistId]
|
||||
if (existing) {
|
||||
if (existing.promise !== undefined) {
|
||||
return await existing.promise
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const promise = imageDownloadQueue
|
||||
.enqueue(
|
||||
() =>
|
||||
RNFS.downloadFile({
|
||||
fromUrl: url,
|
||||
toFile: path,
|
||||
}).promise,
|
||||
)
|
||||
.then(() => {
|
||||
set(
|
||||
produce<CacheSlice>(state => {
|
||||
state.cachedArtistArt[artistId].progress = 1
|
||||
delete state.cachedArtistArt[artistId].promise
|
||||
}),
|
||||
)
|
||||
})
|
||||
set(
|
||||
produce<CacheSlice>(state => {
|
||||
state.cachedArtistArt[artistId] = {
|
||||
path,
|
||||
date: Date.now(),
|
||||
progress: 0,
|
||||
promise,
|
||||
}
|
||||
}),
|
||||
)
|
||||
},
|
||||
|
||||
cachedSongs: {},
|
||||
downloadedSongs: {},
|
||||
|
||||
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<CacheSlice>(state => {
|
||||
state.albumCoverArt[id] = response.data.album.coverArt
|
||||
}),
|
||||
)
|
||||
} finally {
|
||||
resolve()
|
||||
}
|
||||
}).then(() => {
|
||||
set(
|
||||
produce<CacheSlice>(state => {
|
||||
delete state.albumCoverArtRequests[id]
|
||||
}),
|
||||
)
|
||||
})
|
||||
set(
|
||||
produce<CacheSlice>(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
|
||||
},
|
||||
})
|
||||
@@ -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
|
||||
},
|
||||
})
|
||||
|
||||
@@ -3,11 +3,13 @@ import { createSettingsSlice, SettingsSlice } from '@app/state/settings'
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage'
|
||||
import create from 'zustand'
|
||||
import { persist, StateStorage } from 'zustand/middleware'
|
||||
import { CacheSlice, createCacheSlice } from './cache'
|
||||
import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
|
||||
|
||||
export type Store = SettingsSlice &
|
||||
MusicSlice &
|
||||
TrackPlayerSlice & {
|
||||
TrackPlayerSlice &
|
||||
CacheSlice & {
|
||||
hydrated: boolean
|
||||
setHydrated: (hydrated: boolean) => void
|
||||
}
|
||||
@@ -36,6 +38,7 @@ export const useStore = create<Store>(
|
||||
...createSettingsSlice(set, get),
|
||||
...createMusicSlice(set, get),
|
||||
...createTrackPlayerSlice(set, get),
|
||||
...createCacheSlice(set, get),
|
||||
|
||||
hydrated: false,
|
||||
setHydrated: hydrated => set({ hydrated }),
|
||||
|
||||
Reference in New Issue
Block a user