Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2025-12-27 00:59:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

swtiched back to 2 sizes for images

Browse Source 
siwtched to Image for now to avoid double caching from FastImage
This commit is contained in:
austinried 2021-08-19 11:21:53 +09:00
parent 25b95a4b65
commit 79a42b9adb
12 changed files with 155 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/components/CoverArt.tsx
View File

@ -1,15 +1,16 @@
import { useArtistArtFile, useCoverArtFile } from '@app/hooks/music'
import { CacheFile, CacheRequest } from '@app/models/music'
import { useArtistArtFile, useCoverArtFile } from '@app/hooks/cache'
import { CacheFile, CacheImageSize, CacheRequest } from '@app/models/cache'
import colors from '@app/styles/colors'
import React, { useState } from 'react'
import { ActivityIndicator, StyleSheet, View, ViewStyle } from 'react-native'
import FastImage, { ImageStyle } from 'react-native-fast-image'
import { ActivityIndicator, StyleSheet, View, ViewStyle, Image, ImageStyle, ImageSourcePropType } from 'react-native'
import FastImage from 'react-native-fast-image'
type BaseProps = {
style?: ViewStyle
imageStyle?: ImageStyle
resizeMode?: keyof typeof FastImage.resizeMode
round?: boolean
size?: CacheImageSize
}
type ArtistCoverArtProps = BaseProps & {
@ -22,21 +23,27 @@ type CoverArtProps = BaseProps & {
coverArt?: string
}
const Image = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest } } & BaseProps>(
const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest } } & BaseProps>(
({ cache, style, imageStyle, resizeMode }) => {
const [error, setError] = useState(false)
let source
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}` }
source = { uri: `file://${cache.file.path}`, cache: 'reload' }
} else {
source = require('@res/fallback.png')
}
return (
<>
<FastImage
<Image
source={source}
fadeDuration={150}
resizeMode={resizeMode || FastImage.resizeMode.contain}
style={[{ height: style?.height, width: style?.width }, imageStyle]}
onError={() => setError(true)}
@ -53,15 +60,15 @@ const Image = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequest }
)
const ArtistImage = React.memo<ArtistCoverArtProps>(props => {
const cache = useArtistArtFile(props.artistId)
const cache = useArtistArtFile(props.artistId, props.size)
return <Image cache={cache} {...props} />
return <ImageSource cache={cache} {...props} />
})
const CoverArtImage = React.memo<CoverArtProps>(props => {
const cache = useCoverArtFile(props.coverArt)
const cache = useCoverArtFile(props.coverArt, props.size)
return <Image cache={cache} {...props} />
return <ImageSource cache={cache} {...props} />
})
const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps>(props => {

73
app/hooks/cache.ts Normal file
View File

@ -0,0 +1,73 @@
import { CacheImageSize, CacheItemTypeKey } from '@app/models/cache'
import { selectCache } from '@app/state/cache'
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(
useCallback(
(store: Store) => {
const activeServerId = store.settings.activeServer
if (!activeServerId) {
return
}
return store.cacheFiles[activeServerId][key][id]
},
[key, id],
),
)
const request = useStore(
useCallback(
(store: Store) => {
const activeServerId = store.settings.activeServer
if (!activeServerId) {
return
}
return store.cacheRequests[activeServerId][key][id]
},
[key, id],
),
)
return { file, request }
}
export const useCoverArtFile = (coverArt = '-1', size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'coverArt' : 'coverArtThumb'
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, client, coverArt, file, type])
return { file, request }
}
export const useArtistArtFile = (artistId: string, size: CacheImageSize = 'thumbnail') => {
const type: CacheItemTypeKey = size === 'original' ? 'artistArt' : 'artistArtThumb'
const artistInfo = useArtistInfo(artistId)
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)
}
}, [artistId, artistInfo, cacheItem, file, type])
return { file, request }
}

62
app/hooks/music.ts
View File

@ -1,7 +1,4 @@
import { CacheItemTypeKey } from '@app/models/music'
import { selectCache } from '@app/state/cache'
import { selectMusic } from '@app/state/music'
import { selectSettings } from '@app/state/settings'
import { Store, useStore } from '@app/state/store'
import { useCallback, useEffect } from 'react'
@ -63,62 +60,3 @@ export const useStarred = (id: string, type: string) => {
),
)
}
const useFileRequest = (key: CacheItemTypeKey, id: string) => {
const file = useStore(
useCallback(
(store: Store) => {
const activeServerId = store.settings.activeServer
if (!activeServerId) {
return
}
return store.cacheFiles[activeServerId][key][id]
},
[key, id],
),
)
const request = useStore(
useCallback(
(store: Store) => {
const activeServerId = store.settings.activeServer
if (!activeServerId) {
return
}
return store.cacheRequests[activeServerId][key][id]
},
[key, id],
),
)
return { file, request }
}
export const useCoverArtFile = (coverArt: string = '-1') => {
const { file, request } = useFileRequest('coverArt', coverArt)
const client = useStore(selectSettings.client)
const cacheItem = useStore(selectCache.cacheItem)
useEffect(() => {
if (!file && client) {
cacheItem('coverArt', coverArt, () => client.getCoverArtUri({ id: coverArt }))
}
}, [cacheItem, client, coverArt, file])
return { file, request }
}
export const useArtistArtFile = (artistId: string) => {
const artistInfo = useArtistInfo(artistId)
const { file, request } = useFileRequest('artistArt', artistId)
const cacheItem = useStore(selectCache.cacheItem)
useEffect(() => {
if (!file && artistInfo && artistInfo.largeImageUrl) {
cacheItem('artistArt', artistId, artistInfo.largeImageUrl)
}
}, [artistId, artistInfo, artistInfo?.largeImageUrl, cacheItem, file])
return { file, request }
}

39
app/models/cache.ts Normal file
View File

@ -0,0 +1,39 @@
import { Album, PlaylistListItem, Artist, Song } from './music'
export enum CacheItemType {
coverArt = 'coverArt',
coverArtThumb = 'coverArtThumb',
artistArt = 'artistArt',
artistArtThumb = 'artistArtThumb',
song = 'song',
}
export type CacheItemTypeKey = keyof typeof CacheItemType
export type CacheImageSize = 'thumbnail' | 'original'
export type CacheFile = {
path: string
date: number
permanent: boolean
}
export type CacheRequest = {
progress: number
promise?: Promise<void>
}
export type DownloadedAlbum = Album & {
songs: string[]
}
export type DownloadedPlaylist = PlaylistListItem & {
songs: string[]
}
export type DownloadedArtist = Artist & {
topSongs: string[]
albums: string[]
}
export type DownloadedSong = Song

35
app/models/music.ts
View File

@ -8,6 +8,7 @@ export interface Artist {
export interface ArtistInfo extends Artist {
albums: Album[]
smallImageUrl?: string
largeImageUrl?: string
topSongs: Song[]
}
@ -70,37 +71,3 @@ export type ListableItem = Song | AlbumListItem | Artist | PlaylistListItem
export type HomeLists = { [key: string]: AlbumListItem[] }
export type StarrableItemType = 'song' | 'album' | 'artist'
export enum CacheItemType {
coverArt = 'coverArt',
artistArt = 'artistArt',
song = 'song',
}
export type CacheItemTypeKey = keyof typeof CacheItemType
export type CacheFile = {
path: string
date: number
permanent: boolean
}
export type CacheRequest = {
progress: number
promise?: Promise<void>
}
export type DownloadedAlbum = Album & {
songs: string[]
}
export type DownloadedPlaylist = PlaylistListItem & {
songs: string[]
}
export type DownloadedArtist = Artist & {
topSongs: string[]
albums: string[]
}
export type DownloadedSong = Song

1
app/screens/ArtistView.tsx
View File

@ -118,6 +118,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
onScroll={onScroll}>
<CoverArt
type="artist"
size="original"
artistId={artist.id}
style={styles.artistCover}
resizeMode={FastImage.resizeMode.cover}

5
app/screens/LibraryAlbums.tsx
View File

@ -49,7 +49,7 @@ const AlbumListRenderItem: React.FC<{
const AlbumsList = () => {
const fetchAlbums = useStore(selectMusic.fetchAlbums)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 60)
const { list, refreshing, refresh, fetchNextPage } = useFetchPaginatedList(fetchAlbums, 300)
const layout = useWindowDimensions()
@ -69,7 +69,8 @@ const AlbumsList = () => {
onRefresh={refresh}
overScrollMode="never"
onEndReached={fetchNextPage}
onEndReachedThreshold={1}
onEndReachedThreshold={6}
disableVirtualization={true}
getItemLayout={(_data, index) => ({
length: height,
offset: height * Math.floor(index / 3),

2
app/screens/NowPlayingView.tsx
View File

@ -95,7 +95,7 @@ const SongCoverArt = () => {
return (
<View style={coverArtStyles.container}>
<CoverArt type="cover" coverArt={track?.coverArt} style={coverArtStyles.image} />
<CoverArt type="cover" size="original" coverArt={track?.coverArt} style={coverArtStyles.image} />
</View>
)
}

7
app/screens/SongListView.tsx
View File

@ -4,7 +4,8 @@ import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
import ListItem from '@app/components/ListItem'
import ListPlayerControls from '@app/components/ListPlayerControls'
import NothingHere from '@app/components/NothingHere'
import { useAlbumWithSongs, useCoverArtFile, usePlaylistWithSongs } from '@app/hooks/music'
import { useCoverArtFile } from '@app/hooks/cache'
import { useAlbumWithSongs, usePlaylistWithSongs } from '@app/hooks/music'
import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
import { useStore } from '@app/state/store'
import { selectTrackPlayer } from '@app/state/trackplayer'
@ -74,7 +75,7 @@ const SongListDetails = React.memo<{
songList?: AlbumWithSongs | PlaylistWithSongs
subtitle?: string
}>(({ songList, subtitle, type }) => {
const coverArtFile = useCoverArtFile(songList?.coverArt)
const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
if (!songList) {
return <SongListDetailsFallback />
@ -83,7 +84,7 @@ const SongListDetails = React.memo<{
return (
<ImageGradientScrollView imagePath={coverArtFile?.file?.path} style={styles.container}>
<View style={styles.content}>
<CoverArt type="cover" coverArt={songList.coverArt} style={styles.cover} />
<CoverArt type="cover" size="original" coverArt={songList.coverArt} style={styles.cover} />
<Text style={styles.title}>{songList.name}</Text>
{subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
{songList.songs.length > 0 ? (

12
app/state/cache.ts
View File

@ -1,4 +1,4 @@
import { CacheFile, CacheItemType, CacheItemTypeKey, CacheRequest } from '@app/models/music'
import { CacheFile, 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,7 +6,7 @@ import RNFS from 'react-native-fs'
import { GetState, SetState } from 'zustand'
import { Store } from './store'
const imageDownloadQueue = new PromiseQueue(20)
const imageDownloadQueue = new PromiseQueue(50)
const songDownloadQueue = new PromiseQueue(1)
export type CacheDownload = CacheFile & CacheRequest
@ -168,7 +168,9 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
state.cacheFiles[serverId] = {
song: {},
coverArt: {},
coverArtThumb: {},
artistArt: {},
artistArtThumb: {},
}
}),
)
@ -183,14 +185,18 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
state.cacheDirs[serverId] = {
song: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/song`,
coverArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArt`,
coverArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/coverArtThumb`,
artistArt: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArt`,
artistArtThumb: `${RNFS.DocumentDirectoryPath}/servers/${serverId}/artistArtThumb`,
}
}
if (!state.cacheRequests[serverId]) {
state.cacheRequests[serverId] = {
song: {},
coverArt: {},
coverArtThumb: {},
artistArt: {},
artistArtThumb: {},
}
}
}),
@ -257,7 +263,9 @@ export const createCacheSlice = (set: SetState<Store>, get: GetState<Store>): Ca
set(
produce<CacheSlice>(state => {
state.cacheFiles[serverId].coverArt = {}
state.cacheFiles[serverId].coverArtThumb = {}
state.cacheFiles[serverId].artistArt = {}
state.cacheFiles[serverId].artistArtThumb = {}
}),
)
}

1
app/state/musicmap.ts
View File

@ -79,6 +79,7 @@ export const createMusicMapSlice = (set: SetState<Store>, get: GetState<Store>):
return {
...get().mapArtistID3toArtist(artist),
albums: mappedAlbums,
smallImageUrl: info.smallImageUrl,
largeImageUrl: info.largeImageUrl,
topSongs: (await get().mapChildrenToSongs(topSongs)).slice(0, 5),
}

3
app/subsonic/api.ts
View File

@ -120,6 +120,9 @@ export class SubsonicApiClient {
const params = new URLSearchParams()
for (const key of keys) {
if (obj[key] === undefined || obj[key] === null) {
continue
}
params.append(key, String(obj[key]))
}