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

imprv CoverArt perf and interface

Browse Source
This commit is contained in:
austinried 2021-07-18 16:35:02 +09:00
parent 62b27974a7
commit e6c76776a3
9 changed files with 96 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/components/ArtistArt.tsx
View File

@ -1,11 +1,12 @@
import { useAtomValue } from 'jotai/utils'
import React, { useState } from 'react'
import { ActivityIndicator, LayoutChangeEvent, StyleSheet, View } from 'react-native'
import FastImage from 'react-native-fast-image'
import LinearGradient from 'react-native-linear-gradient'
import CoverArt from '@app/components/CoverArt'
import { artistArtAtomFamily } from '@app/state/music'
import colors from '@app/styles/colors'
import CoverArt from '@app/components/CoverArt'
import { useLayout } from '@react-native-community/hooks'
import { useAtomValue } from 'jotai/utils'
import React from 'react'
import { ActivityIndicator, StyleSheet, View } from 'react-native'
import FastImage from 'react-native-fast-image'
import LinearGradient from 'react-native-linear-gradient'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
interface ArtistArtSizeProps {
@ -23,15 +24,11 @@ interface ArtistArtProps extends ArtistArtSizeProps {
}
const PlaceholderContainer: React.FC<ArtistArtSizeProps> = ({ height, width, children }) => {
const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
const onLayout = (event: LayoutChangeEvent) => {
setLayout(event.nativeEvent.layout)
}
const layout = useLayout()
return (
<LinearGradient
onLayout={onLayout}
onLayout={layout.onLayout}
colors={[colors.accent, colors.accentLow]}
style={[styles.placeholderContainer, { height, width }]}>
<IconFA5 name="microphone" color="black" size={layout.width / 1.8} style={styles.placeholderIcon} />
@ -142,10 +139,8 @@ const ArtistArt = React.memo<ArtistArtProps>(({ id, height, width, round }) => {
round = round === undefined ? true : round
const Placeholder = () => {
const none = <NoneUp height={height} width={width} />
if (!artistArt || !artistArt.albumCoverUris) {
return none
if (!artistArt) {
return <NoneUp height={height} width={width} />
}
const { albumCoverUris } = artistArt
@ -162,15 +157,14 @@ const ArtistArt = React.memo<ArtistArtProps>(({ id, height, width, round }) => {
return <OneUp height={height} width={width} albumCoverUris={albumCoverUris} />
}
return none
return <NoneUp height={height} width={width} />
}
return (
<View style={[styles.container, round ? { borderRadius: height / 2 } : {}]}>
<CoverArt
PlaceholderComponent={Placeholder}
height={height}
width={width}
FallbackComponent={Placeholder}
style={{ height, width }}
coverArtUri={artistArt?.uri}
resizeMode={FastImage.resizeMode.cover}
/>

107
app/components/CoverArt.tsx
View File

@ -1,77 +1,84 @@
import React, { useEffect, useState } from 'react'
import { ActivityIndicator, LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native'
import FastImage from 'react-native-fast-image'
import colors from '@app/styles/colors'
import IconFA5 from 'react-native-vector-icons/FontAwesome5'
import React, { useState } from 'react'
import { ActivityIndicator, StyleSheet, View } from 'react-native'
import FastImage, { ImageStyle } from 'react-native-fast-image'
import LinearGradient from 'react-native-linear-gradient'
type CoverImageProps = {
uri?: string
style?: ImageStyle
resizeMode?: keyof typeof FastImage.resizeMode
onProgress?: () => void
onLoadEnd?: () => void
onError?: () => void
}
const CoverImage = React.memo<CoverImageProps>(({ uri, style, resizeMode, onProgress, onLoadEnd, onError }) => (
<FastImage
source={{ uri }}
style={style}
resizeMode={resizeMode || FastImage.resizeMode.contain}
onProgress={onProgress}
onLoadEnd={onLoadEnd}
onError={onError}
/>
))
const Fallback = React.memo<{}>(({}) => {
return <LinearGradient colors={[colors.accent, colors.accentLow]} style={styles.fallback} />
})
const CoverArt: React.FC<{
PlaceholderComponent?: () => JSX.Element
FallbackComponent?: () => JSX.Element
placeholderIcon?: string
height?: string | number
width?: string | number
coverArtUri?: string
resizeMode?: keyof typeof FastImage.resizeMode
style?: ViewStyle
}> = ({ PlaceholderComponent, placeholderIcon, height, width, coverArtUri, resizeMode, style }) => {
const [placeholderVisible, setPlaceholderVisible] = useState(false)
const [loading, setLoading] = useState(true)
const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
style?: ImageStyle
}> = ({ FallbackComponent, coverArtUri, resizeMode, style }) => {
const [loading, setLoading] = useState(false)
const [fallbackVisible, setFallbackVisible] = useState(false)
useEffect(() => {
if (!coverArtUri) {
setLoading(false)
}
}, [coverArtUri, setLoading])
const Image = () => (
<FastImage
source={{ uri: coverArtUri, priority: 'high' }}
style={{ ...styles.image, opacity: placeholderVisible ? 0 : 1 }}
resizeMode={resizeMode || FastImage.resizeMode.contain}
onError={() => {
setLoading(false)
setPlaceholderVisible(true)
}}
onLoadEnd={() => setLoading(false)}
/>
)
const Placeholder = () => (
<LinearGradient colors={[colors.accent, colors.accentLow]} style={styles.placeholder}>
<IconFA5 name={placeholderIcon || 'record-vinyl'} color="black" size={layout.width / 1.5} />
</LinearGradient>
)
const onLayout = (event: LayoutChangeEvent) => {
setLayout(event.nativeEvent.layout)
}
const enableLoading = React.useCallback(() => setLoading(true), [])
const disableLoading = React.useCallback(() => setLoading(false), [])
const enableFallback = React.useCallback(() => setFallbackVisible(true), [])
return (
<View style={[style, { height, width }]} onLayout={onLayout}>
{coverArtUri ? <Image /> : <></>}
<View style={{ ...styles.placeholderContainer, opacity: placeholderVisible ? 1 : 0 }}>
{PlaceholderComponent ? <PlaceholderComponent /> : <Placeholder />}
</View>
<ActivityIndicator style={styles.indicator} animating={loading} size={'large'} color={colors.accent} />
<View style={style}>
<CoverImage
uri={coverArtUri}
style={style}
resizeMode={resizeMode}
onProgress={enableLoading}
onLoadEnd={disableLoading}
onError={enableFallback}
/>
{fallbackVisible ? (
FallbackComponent ? (
<View style={styles.fallback}>
<FallbackComponent />
</View>
) : (
<Fallback />
)
) : (
<></>
)}
<ActivityIndicator animating={loading} size="large" color={colors.accent} style={styles.indicator} />
</View>
)
}
const styles = StyleSheet.create({
container: {},
image: {
height: '100%',
width: '100%',
},
placeholderContainer: {
fallback: {
height: '100%',
width: '100%',
position: 'absolute',
},
placeholder: {
height: '100%',
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},

3
app/components/NowPlayingBar.tsx
View File

@ -69,8 +69,7 @@ const NowPlayingBar = () => {
<ProgressBar />
<View style={styles.subContainer}>
<CoverArt
height={styles.subContainer.height}
width={styles.subContainer.height}
style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
coverArtUri={track?.artworkThumb}
/>
<View style={styles.detailsContainer}>

4
app/components/SongItem.tsx
View File

@ -23,7 +23,7 @@ const SongItem: React.FC<{
return (
<View style={styles.container}>
<PressableOpacity onPress={onPress} style={styles.item}>
{showArt ? <CoverArt coverArtUri={song.coverArtThumbUri} style={styles.art} height={50} width={50} /> : <></>}
{showArt ? <CoverArt coverArtUri={song.coverArtThumbUri} style={styles.art} /> : <></>}
<View style={styles.text}>
<Text style={[styles.title, { color: currentTrack?.id === song.id ? colors.accent : colors.text.primary }]}>
{song.title}
@ -58,6 +58,8 @@ const styles = StyleSheet.create({
},
art: {
marginRight: 10,
height: 50,
width: 50,
},
text: {
flex: 1,

4
app/screens/AlbumView.tsx
View File

@ -28,9 +28,7 @@ const AlbumDetails: React.FC<{
imageKey={`${album.name}${album.artist}`}
style={styles.container}>
<View style={styles.content}>
<View style={styles.cover}>
<CoverArt coverArtUri={album.coverArtUri} height="100%" width="100%" />
</View>
<CoverArt coverArtUri={album.coverArtUri} style={styles.cover} />
<Text style={styles.title}>{album.name}</Text>
<Text style={styles.subtitle}>
{album.artist}

8
app/screens/ArtistView.tsx
View File

@ -26,7 +26,7 @@ const AlbumItem = React.memo<{
<PressableOpacity
onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
style={[styles.albumItem, { width }]}>
<CoverArt coverArtUri={album.coverArtThumbUri} height={height} width={width} />
<CoverArt coverArtUri={album.coverArtThumbUri} style={{ height, width }} />
<Text style={styles.albumTitle}>{album.name}</Text>
<Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
</PressableOpacity>
@ -73,11 +73,9 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
style={styles.scroll}
contentContainerStyle={styles.scrollContent}>
<CoverArt
PlaceholderComponent={ArtistCoverFallback}
FallbackComponent={ArtistCoverFallback}
coverArtUri={artist.largeImageUrl}
style={styles.artistCover}
height={artistCoverHeight}
width={coverLayout.width}
resizeMode={FastImage.resizeMode.cover}
/>
<View style={styles.titleContainer}>
@ -151,8 +149,8 @@ const styles = StyleSheet.create({
},
artistCover: {
position: 'absolute',
width: '100%',
height: artistCoverHeight,
width: '100%',
},
albums: {
width: '100%',

14
app/screens/Home.tsx
View File

@ -6,11 +6,19 @@ import { homeListsAtom, homeListsUpdatingAtom, useUpdateHomeLists } from '@app/s
import { homeListTypesAtom, useActiveServerRefresh } from '@app/state/settings'
import colors from '@app/styles/colors'
import font from '@app/styles/font'
import { GetAlbumListType } from '@app/subsonic/params'
import { useNavigation } from '@react-navigation/native'
import { useAtomValue } from 'jotai/utils'
import React from 'react'
import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
const titles: { [key in GetAlbumListType]?: string } = {
recent: 'Recent Albums',
random: 'Random Albums',
frequent: 'Frequent Albums',
starred: 'Starred Albums',
}
const AlbumItem = React.memo<{
album: AlbumListItem
}>(({ album }) => {
@ -21,7 +29,7 @@ const AlbumItem = React.memo<{
onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
key={album.id}
style={styles.item}>
<CoverArt coverArtUri={album.coverArtThumbUri} height={styles.item.width} width={styles.item.width} />
<CoverArt coverArtUri={album.coverArtThumbUri} style={{ height: styles.item.width, width: styles.item.width }} />
<Text style={styles.title} numberOfLines={1}>
{album.name}
</Text>
@ -33,7 +41,7 @@ const AlbumItem = React.memo<{
})
const Category = React.memo<{
name: string
name?: string
data: AlbumListItem[]
}>(({ name, data }) => {
return (
@ -75,7 +83,7 @@ const Home = () => {
}>
<View style={styles.content}>
{types.map(type => (
<Category key={type} name={type} data={type in lists ? lists[type] : []} />
<Category key={type} name={titles[type as GetAlbumListType]} data={type in lists ? lists[type] : []} />
))}
</View>
</GradientScrollView>

2
app/screens/LibraryAlbums.tsx
View File

@ -25,7 +25,7 @@ const AlbumItem = React.memo<{
<PressableOpacity
style={[styles.item, { maxWidth: size, height }]}
onPress={() => navigation.navigate('AlbumView', { id, title: name })}>
<CoverArt coverArtUri={coverArtUri} height={size} width={size} />
<CoverArt coverArtUri={coverArtUri} style={{ height: size, width: size }} />
<View style={styles.itemDetails}>
<Text style={styles.title} numberOfLines={1}>
{name}

6
app/screens/NowPlayingLayout.tsx
View File

@ -73,7 +73,7 @@ const SongCoverArt = () => {
return (
<View style={coverArtStyles.container}>
<CoverArt height="100%" width="100%" coverArtUri={track?.artwork as string} />
<CoverArt coverArtUri={track?.artwork as string} style={coverArtStyles.image} />
</View>
)
}
@ -84,6 +84,10 @@ const coverArtStyles = StyleSheet.create({
alignItems: 'center',
paddingBottom: 20,
},
image: {
height: '100%',
width: '100%',
},
})
const SongInfo = () => {