leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: views and single scroll hitparade and playback

Browse Source
This commit is contained in:
Leon
2026-01-15 11:25:33 +01:00
parent 32bf5ad18e
commit 9f3b713716
3 changed files with 83 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/HitParade/HitParade.js
+34 -12
View File
@@ -197,6 +197,7 @@ const HitParade = () => {
artist={item?.userName}
coverUrl={item?.coverUrl || null}
subscriptionLevel={getCreatorLevel(item)}
views={item?.monthViews}
onPress={() =>
navigateToMusicDetails({
projectId: item?.id,
@@ -218,6 +219,7 @@ const HitParade = () => {
artist={item?.userName}
coverUrl={item?.coverUrl || null}
subscriptionLevel={getCreatorLevel(item)}
views={item?.views}
onPress={() =>
navigateToMusicDetails({
projectId: item?.id,
@@ -448,24 +450,26 @@ const HitParade = () => {
)
const renderWebContent = () => (
<ScrollView
contentContainerStyle={{
flexGrow: 1,
<View
style={{
flex: 1,
gap: 24,
paddingBottom: responsiveHeight(20),
position: 'relative',
zIndex: 5,
}}
showsVerticalScrollIndicator={false}
style={{ flex: 1, position: 'relative', zIndex: 5 }}
>
{renderHero()}
<View
style={{
flex: 1,
flexDirection: 'row',
gap: 16,
alignItems: 'flex-start',
overflow: 'hidden',
}}
>
<View style={{ flex: 1, gap: 12 }}>
<View style={{ flex: 1, height: '100%', gap: 12 }}>
<BlurView
intensity={50}
tint="dark"
@@ -489,9 +493,15 @@ const HitParade = () => {
</Text>
{/* </BorderGradient> */}
</BlurView>
{renderSongList()}
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 20 }}
style={{ flex: 1 }}
>
{renderSongList()}
</ScrollView>
</View>
<View style={{ flex: 1, gap: 12 }}>
<View style={{ flex: 1, height: '100%', gap: 12 }}>
<BlurView
intensity={50}
tint="dark"
@@ -515,9 +525,15 @@ const HitParade = () => {
</Text>
{/* </BorderGradient> */}
</BlurView>
{renderTopMonthColumns()}
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 20 }}
style={{ flex: 1 }}
>
{renderTopMonthColumns()}
</ScrollView>
</View>
<View style={{ flex: 1, gap: 12 }}>
<View style={{ flex: 1, height: '100%', gap: 12 }}>
<BlurView
intensity={50}
tint="dark"
@@ -541,10 +557,16 @@ const HitParade = () => {
</Text>
{/* </BorderGradient> */}
</BlurView>
{renderAllTimeColumns()}
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 20 }}
style={{ flex: 1 }}
>
{renderAllTimeColumns()}
</ScrollView>
</View>
</View>
</ScrollView>
</View>
)
const renderMobileContent = () => (
src/screens/HitParade/components/SongCard.js
+15 -3
View File
@@ -15,6 +15,7 @@ const SongCard = ({
coverUrl = null,
onPress = null,
subscriptionLevel = null,
views = null,
}) => {
return (
<Pressable
@@ -48,9 +49,9 @@ const SongCard = ({
...Style.containerRow,
}}
tint="dark"
// experimentalBlurMethod={
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// }
// experimentalBlurMethod={
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// }
>
<View style={{ flex: 1, ...Style.containerRow, gap: 15 }}>
<Text
@@ -91,6 +92,17 @@ const SongCard = ({
>
{artist}
</Text>
{views !== null && (
<Text
style={{
fontSize: 12,
color: Palette.gray,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
• {views} vues
</Text>
)}
</View>
</View>
<SubscriptionBadge level={subscriptionLevel} size={36} style={{ marginLeft: 'auto' }} />
src/screens/Playbacks/components/PlaybackCharts.js
+34 -12
View File
@@ -372,6 +372,7 @@ const PlaybackCharts = ({ onPlaybackPress }) => {
artist={item?.userName}
coverUrl={item?.coverUrl || null}
subscriptionLevel={getCreatorLevel(item)}
views={item?.monthViews}
onPress={() => handlePlaybackSelected(item)}
/>
))}
@@ -388,6 +389,7 @@ const PlaybackCharts = ({ onPlaybackPress }) => {
artist={item?.userName}
coverUrl={item?.coverUrl || null}
subscriptionLevel={getCreatorLevel(item)}
views={item?.views}
onPress={() => handlePlaybackSelected(item)}
/>
))}
@@ -395,24 +397,26 @@ const PlaybackCharts = ({ onPlaybackPress }) => {
)
const renderWebContent = () => (
<ScrollView
contentContainerStyle={{
flexGrow: 1,
<View
style={{
flex: 1,
gap: 24,
paddingBottom: responsiveHeight(20),
position: 'relative',
zIndex: 5,
}}
showsVerticalScrollIndicator={false}
style={{ flex: 1, position: 'relative', zIndex: 5 }}
>
{renderHero()}
<View
style={{
flex: 1,
flexDirection: 'row',
gap: 16,
alignItems: 'flex-start',
overflow: 'hidden',
}}
>
<View style={{ flex: 1, gap: 12 }}>
<View style={{ flex: 1, height: '100%', gap: 12 }}>
<BlurView
intensity={50}
tint="dark"
@@ -434,9 +438,15 @@ const PlaybackCharts = ({ onPlaybackPress }) => {
Playbacks
</Text>
</BlurView>
{renderPlaybacksList()}
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 20 }}
style={{ flex: 1 }}
>
{renderPlaybacksList()}
</ScrollView>
</View>
<View style={{ flex: 1, gap: 12 }}>
<View style={{ flex: 1, height: '100%', gap: 12 }}>
<BlurView
intensity={50}
tint="dark"
@@ -458,9 +468,15 @@ const PlaybackCharts = ({ onPlaybackPress }) => {
Top du mois
</Text>
</BlurView>
{renderTopMonthColumns()}
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 20 }}
style={{ flex: 1 }}
>
{renderTopMonthColumns()}
</ScrollView>
</View>
<View style={{ flex: 1, gap: 12 }}>
<View style={{ flex: 1, height: '100%', gap: 12 }}>
<BlurView
intensity={50}
tint="dark"
@@ -482,10 +498,16 @@ const PlaybackCharts = ({ onPlaybackPress }) => {
All Time
</Text>
</BlurView>
{renderAllTimeColumns()}
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 20 }}
style={{ flex: 1 }}
>
{renderAllTimeColumns()}
</ScrollView>
</View>
</View>
</ScrollView>
</View>
)
const renderMobileContent = () => (