From 482dd3f96411698d632815937de272fec2025811 Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Wed, 3 Sep 2025 16:36:00 +0200
Subject: [PATCH] styels

---
 src/screens/HitParade/HitParade.js           |  4 +-
 src/screens/Library/MusicDetails.js          |  4 +-
 src/screens/Library/components/BackTracks.js | 52 +++++++++++++++-----
 src/screens/Library/components/LikedMusic.js | 35 ++++++++-----
 src/screens/Profile/Profile.js               |  3 +-
 5 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/src/screens/HitParade/HitParade.js b/src/screens/HitParade/HitParade.js
index 4d779fc..d359d35 100644
--- a/src/screens/HitParade/HitParade.js
+++ b/src/screens/HitParade/HitParade.js
@@ -66,6 +66,8 @@ const HitParade = () => {
             style={{
               ...Style.containerRow,
               justifyContent: "space-between",
+              gap: "10%",
+              width: "auto",
             }}
           >
             {/*{["Chansons", "Playbacks", "Clips"].map((item, index) => (*/}
@@ -76,7 +78,7 @@ const HitParade = () => {
                 onPress={() => setSelected(item)}
                 tint={selected === item ? "light" : "dark"}
                 containerStyle={{
-                  width: 100,
+                  width: "50%",
                 }}
                 titleStyle={{
                   fontSize: 16,
diff --git a/src/screens/Library/MusicDetails.js b/src/screens/Library/MusicDetails.js
index 9123dfb..c78aae9 100644
--- a/src/screens/Library/MusicDetails.js
+++ b/src/screens/Library/MusicDetails.js
@@ -525,8 +525,8 @@ export default MusicDetails;
 
 const styles = StyleSheet.create({
   img: {
-    width: 292,
-    height: 290,
+    width: 160,
+    height: 160,
     borderRadius: 24,
     alignSelf: "center",
   },
diff --git a/src/screens/Library/components/BackTracks.js b/src/screens/Library/components/BackTracks.js
index 1e9ffc5..fa98f91 100644
--- a/src/screens/Library/components/BackTracks.js
+++ b/src/screens/Library/components/BackTracks.js
@@ -1,21 +1,47 @@
-import { View, Text, Image } from "react-native";
-import React from "react";
-import { img } from "../../../assets";
+import React, { useState } from "react";
+import { FlatList, Image, Text, View, useWindowDimensions } from "react-native";
+import { useUserData } from "../../../providers/UserDataProvider";
 import { Style } from "../../../styles";
 import CardContainer from "./CardContainer";
-
 const BackTracks = () => {
+  const { userPlaybacks } = useUserData();
+  const items = Array.isArray(userPlaybacks) ? userPlaybacks.slice(0, 3) : [];
+  const { width: screenWidth } = useWindowDimensions();
+  const [containerWidth, setContainerWidth] = useState(screenWidth);
+  const numColumns = 3;
+  const gap = 8;
+  const itemWidth = Math.max(
+    0,
+    Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
+  );
+
   return (
     <CardContainer label="Mes Playbacks">
-      <View style={{ ...Style.containerRow, gap: 6 }}>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <View style={{ flex: 1 }} key={index}>
-            <Image
-              source={img.placeholder3}
-              style={{ width: "100%", height: 172, borderRadius: 10 }}
-            />
-          </View>
-        ))}
+      <View>
+        {items.length > 0 ? (
+          <FlatList
+            onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+            data={items}
+            numColumns={numColumns}
+            key={numColumns}
+            columnWrapperStyle={{ gap }}
+            keyExtractor={(item) => item.id}
+            renderItem={({ item }) => (
+              <View style={{ width: itemWidth }} key={item.id}>
+                <Image
+                  source={{ uri: item.coverUrl || "" }}
+                  style={{
+                    width: "100%",
+                    height: Math.round((itemWidth * 16) / 9),
+                    borderRadius: 10,
+                  }}
+                />
+              </View>
+            )}
+          />
+        ) : (
+          <Text>Aucun playback pour l'instant</Text>
+        )}
       </View>
     </CardContainer>
   );
diff --git a/src/screens/Library/components/LikedMusic.js b/src/screens/Library/components/LikedMusic.js
index de5c311..4900e10 100644
--- a/src/screens/Library/components/LikedMusic.js
+++ b/src/screens/Library/components/LikedMusic.js
@@ -1,6 +1,11 @@
-import React from "react";
-import { FlatList, Pressable, useWindowDimensions, Image as RNImage } from "react-native";
 import { Image as ExpoImage } from "expo-image";
+import React, { useState } from "react";
+import {
+  FlatList,
+  Pressable,
+  Image as RNImage,
+  useWindowDimensions,
+} from "react-native";
 import { img } from "../../../assets";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
@@ -10,29 +15,33 @@ import CardContainer from "./CardContainer";
 const LikedMusic = () => {
   const { userLikedProjects = [] } = useUser();
   const items = Array.isArray(userLikedProjects)
-    ? userLikedProjects.slice(0, 6)
+    ? userLikedProjects.slice(0, 3)
     : [];
   const { width: screenWidth } = useWindowDimensions();
+  const [containerWidth, setContainerWidth] = useState(screenWidth);
   const numColumns = 3;
-  const gap = 6;
-  const containerGap = 10;
-  const totalGap = gap * (numColumns - 1) + containerGap * 2;
-  const itemWidth = (screenWidth - totalGap) / numColumns;
+  const gap = 8;
+  const itemWidth = Math.max(
+    0,
+    Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns)
+  );
   return (
     <CardContainer
       label="Musiques likées"
       onPress={() => navigate(Routes.AllMyLikedMusic)}
     >
       <FlatList
+        onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
         scrollEnabled={false}
         data={items}
         numColumns={numColumns}
-        contentContainerStyle={{ gap: containerGap }}
-        columnWrapperStyle={{ gap }}
+        key={numColumns}
+        contentContainerStyle={{}}
+        columnWrapperStyle={numColumns > 1 ? { gap } : null}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (
           <Pressable
-            style={{ flex: 1 }}
+            style={{ width: itemWidth }}
             onPress={() =>
               navigate(Routes.MusicDetails, { projectId: item.id })
             }
@@ -45,7 +54,8 @@ const LikedMusic = () => {
                 contentFit="cover"
                 transition={100}
                 style={{
-                  height: itemWidth - containerGap,
+                  width: "100%",
+                  height: itemWidth,
                   borderRadius: 10,
                 }}
               />
@@ -53,7 +63,8 @@ const LikedMusic = () => {
               <RNImage
                 source={img.placeholder3}
                 style={{
-                  height: itemWidth - containerGap,
+                  width: "100%",
+                  height: itemWidth,
                   borderRadius: 10,
                 }}
               />
diff --git a/src/screens/Profile/Profile.js b/src/screens/Profile/Profile.js
index 481b163..e7b7155 100644
--- a/src/screens/Profile/Profile.js
+++ b/src/screens/Profile/Profile.js
@@ -65,7 +65,7 @@ const Profile = () => {
         setFollowers(
           Array.isArray(currentUserData?.followedBy)
             ? currentUserData.followedBy.length
-            : 0,
+            : 0
         );
         return;
       }
@@ -119,6 +119,7 @@ const Profile = () => {
           data={data}
           contentContainerStyle={{
             gap: 10,
+            marginBottom: 80,
           }}
           keyExtractor={(item) => item.id}
           renderItem={({ item }) => (