From 9f3b71371695286329e4eebd6eb9c868c9806969 Mon Sep 17 00:00:00 2001
From: Leon <leon.morival@gmail.com>
Date: Thu, 15 Jan 2026 11:25:33 +0100
Subject: [PATCH] feat: views and single scroll hitparade and playback

---
 src/screens/HitParade/HitParade.js            | 46 ++++++++++++++-----
 src/screens/HitParade/components/SongCard.js  | 18 ++++++--
 .../Playbacks/components/PlaybackCharts.js    | 46 ++++++++++++++-----
 3 files changed, 83 insertions(+), 27 deletions(-)

diff --git a/src/screens/HitParade/HitParade.js b/src/screens/HitParade/HitParade.js
index 3a87ac2..290b525 100644
--- a/src/screens/HitParade/HitParade.js
+++ b/src/screens/HitParade/HitParade.js
@@ -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 = () => (
diff --git a/src/screens/HitParade/components/SongCard.js b/src/screens/HitParade/components/SongCard.js
index 3537769..797a6e7 100644
--- a/src/screens/HitParade/components/SongCard.js
+++ b/src/screens/HitParade/components/SongCard.js
@@ -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' }} />
diff --git a/src/screens/Playbacks/components/PlaybackCharts.js b/src/screens/Playbacks/components/PlaybackCharts.js
index 8210233..8eb7297 100644
--- a/src/screens/Playbacks/components/PlaybackCharts.js
+++ b/src/screens/Playbacks/components/PlaybackCharts.js
@@ -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 = () => (