feat: views and single scroll hitparade and playback

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 = () => (