Skip to content

Commit 635001c

Browse files
sawyerfsawyerf
committed
Up: Genre item
1 parent 01c70f5 commit 635001c

5 files changed

Lines changed: 103 additions & 52 deletions

File tree

‎app/components/item/GenreItem.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react'
2+
import { Text, StyleSheet, Pressable } from 'react-native'
3+
import { useNavigation } from '@react-navigation/native'
4+
5+
import { useCachedFirst, urlCover } from '~/utils/api'
6+
import { ConfigContext } from '~/contexts/config'
7+
import ImageError from '~/components/ImageError'
8+
import mainStyles from '~/styles/main'
9+
import size from '~/styles/size'
10+
11+
const GenreItem = ({ genre, color }) => {
12+
const config = React.useContext(ConfigContext)
13+
const navigation = useNavigation()
14+
15+
const [album] = useCachedFirst(null, 'getAlbumList2', { type: 'byGenre', genre: genre.value, size: 1 }, (json, setData) => {
16+
if (json?.albumList2?.album?.length) setData(json?.albumList2?.album[0])
17+
else setData(null)
18+
})
19+
20+
return (
21+
<Pressable
22+
style={({ pressed }) => ([mainStyles.opacity({ pressed }), styles.genreBox, { backgroundColor: color }])}
23+
onPress={() => navigation.navigate('Genre', { name: genre.value, songCount: genre.songCount, albumCount: genre.albumCount })}
24+
>
25+
{
26+
album && (
27+
<>
28+
<ImageError source={{ uri: urlCover(config, album, 100) }} style={styles.albumCover} />
29+
<ImageError
30+
source={{ uri: urlCover(config, album.artistId, 100) }}
31+
style={[styles.artistCover, { borderColor: color }]}
32+
/>
33+
</>
34+
)
35+
}
36+
<Text numberOfLines={1} style={styles.genreText}>{genre.value}</Text>
37+
</Pressable>
38+
)
39+
}
40+
41+
const styles = StyleSheet.create({
42+
genreBox: {
43+
flex: 1,
44+
height: size.image.large,
45+
width: size.image.large,
46+
borderRadius: 3,
47+
paddingHorizontal: 40,
48+
position: 'relative',
49+
},
50+
genreText: {
51+
color: 'white',
52+
fontSize: size.text.large,
53+
fontWeight: 'bold',
54+
position: 'absolute',
55+
bottom: 10,
56+
left: 10,
57+
right: 10,
58+
},
59+
albumCover: {
60+
width: 100,
61+
aspectRatio: 1,
62+
position: 'absolute',
63+
top: 10,
64+
left: 10,
65+
borderRadius: 3,
66+
},
67+
artistCover: {
68+
width: 70,
69+
aspectRatio: 1,
70+
position: 'absolute',
71+
bottom: 32,
72+
right: 10,
73+
borderRadius: size.radius.circle,
74+
borderWidth: 4,
75+
},
76+
})
77+
78+
export default GenreItem

‎app/components/lists/HorizontalGenres.js‎

Lines changed: 20 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,35 @@
1-
import React from 'react';
2-
import { Text, StyleSheet, Pressable } from 'react-native';
3-
import { useNavigation } from '@react-navigation/native';
1+
import React from 'react'
42

5-
import { ThemeContext } from '~/contexts/theme';
6-
import CustomFlat from '~/components/lists/CustomFlat';
7-
import size from '~/styles/size';
8-
import mainStyles from '~/styles/main';
3+
import { ThemeContext } from '~/contexts/theme'
4+
import CustomFlat from '~/components/lists/CustomFlat'
5+
import GenreItem from '~/components/item/GenreItem'
6+
import size from '~/styles/size'
7+
8+
const colorBakcground = [
9+
'#FF5733',
10+
'#3357FF',
11+
'#FF33A1',
12+
'#A133FF',
13+
'#FF8F33',
14+
'#338FFF',
15+
'#FF33D4',
16+
'#D433FF',
17+
]
918

1019
const HorizontalGenres = ({ genres }) => {
11-
const navigation = useNavigation();
1220
const theme = React.useContext(ThemeContext)
1321

14-
const renderItem = React.useCallback(({ item }) => (
15-
<Pressable
16-
style={({ pressed }) => ([mainStyles.opacity({ pressed }), styles.genreBox(theme)])}
17-
onPress={() => navigation.navigate('Genre', { name: item.value, songCount: item.songCount, albumCount: item.albumCount })}
18-
>
19-
<Text numberOfLines={1} style={styles.genreText(theme)}>{item.value}</Text>
20-
</Pressable>
22+
const renderItem = React.useCallback(({ item, index }) => (
23+
<GenreItem genre={item} color={colorBakcground[index % colorBakcground.length]} />
2124
), [theme])
2225

2326
return (
2427
<CustomFlat
25-
style={styles.genreList}
26-
contentContainerStyle={styles.scrollContainer}
2728
data={genres}
2829
renderItem={renderItem}
30+
widthItem={size.image.large + 10}
2931
/>
3032
)
3133
}
3234

33-
const styles = StyleSheet.create({
34-
genreList: {
35-
width: '100%',
36-
},
37-
scrollContainer: {
38-
height: 55 * 2 + 10,
39-
paddingStart: 20,
40-
paddingEnd: 20,
41-
flexDirection: 'column',
42-
flexWrap: 'wrap',
43-
columnGap: 10,
44-
rowGap: 10,
45-
},
46-
genreBox: theme => ({
47-
flex: 1,
48-
height: 55,
49-
borderRadius: 3,
50-
paddingHorizontal: 40,
51-
backgroundColor: theme.primaryTouch,
52-
justifyContent: 'center',
53-
alignItems: 'center',
54-
}),
55-
genreText: theme => ({
56-
color: theme.innerTouch,
57-
fontSize: size.text.large,
58-
fontWeight: 'bold',
59-
}),
60-
})
61-
62-
export default HorizontalGenres;
35+
export default HorizontalGenres

‎app/screens/Pres/Genre.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,15 +94,15 @@ const Genre = ({ route: { params: { name, albumCount = 0, songCount = 0 } } }) =
9494
onPress={() => {
9595
navigation.navigate('GenreAlbum', { name, albums })
9696
}}
97-
button={albums.length === 20}
97+
button={albums?.length === 20}
9898
/>
9999
<HorizontalAlbums albums={albums} />
100100
<SectionTitle title={t("Artists")} />
101101
<HorizontalArtists artists={Object.entries(artists).map(([id, name]) => ({ id, name }))} />
102102
<SectionTitle
103103
title={t("Songs")}
104104
onPress={() => navigation.navigate('GenreSong', { genre: name, items: songs })}
105-
button={songs.length === 50}
105+
button={songs?.length === 50}
106106
/>
107107
<SongsList songs={songs} />
108108
</ScrollView>

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "castafiore",
3-
"version": "2025.10.10",
3+
"version": "2025.10.20",
44
"main": "index.js",
55
"homepage": ".",
66
"scripts": {

0 commit comments

Comments
 (0)