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)
This commit is contained in:
austinried
2022-03-20 15:27:27 +09:00
parent a15159014c
commit c9aea9065c
8 changed files with 78 additions and 74 deletions

View File

@@ -1,4 +1,4 @@
import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
import { CacheItemTypeKey } from '@app/models/cache'
import { selectCache } from '@app/state/cache'
import { selectSettings } from '@app/state/settings'
import { Store, useStore, useStoreDeep } from '@app/state/store'
@@ -35,20 +35,15 @@ const useFileRequest = (key: CacheItemTypeKey, id: string) => {
return { file, request }
}
export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb'
export const useCoverArtFile = (coverArt = '-1') => {
const type: CacheItemTypeKey = 'coverArt'
const { file, request } = useFileRequest(type, coverArt)
const client = useStore(selectSettings.client)
const cacheItem = useStore(selectCache.cacheItem)
useEffect(() => {
if (!file && client) {
cacheItem(type, coverArt, () =>
client.getCoverArtUri({
id: coverArt,
size: type === 'coverArtThumb' ? '256' : undefined,
}),
)
cacheItem(type, coverArt, () => client.getCoverArtUri({ id: coverArt }))
}
// intentionally leaving file out so it doesn't re-render if the request fails
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -57,8 +52,8 @@ export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbna
return { file, request }
}
export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
export const useArtistArtFile = (artistId: string) => {
const type: CacheItemTypeKey = 'artistArt'
const fetchArtistInfo = useStore(store => store.fetchLibraryArtistInfo)
const artistInfo = useStoreDeep(store => store.entities.artistInfo[artistId])
const { file, request } = useFileRequest(type, artistId)
@@ -70,10 +65,8 @@ export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumb
return
}
if (!file) {
cacheItem(type, artistId, async () => {
return type === 'artistArtThumb' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
})
if (!file && artistInfo.largeImageUrl) {
cacheItem(type, artistId, artistInfo.largeImageUrl)
}
// intentionally leaving file out so it doesn't re-render if the request fails
// eslint-disable-next-line react-hooks/exhaustive-deps