music card style

src/data/data.js

@@ -419,7 +419,7 @@ export const CHOOSE_GENRE = [
 
 export const VOICE = [
   {
-    title: "base",
+    title: "BASE",
     data: [
       "Une voix féminine interpretra ta chanson.",
       "Une voix masculine interpretera ta chanson.",
@@ -448,7 +448,7 @@ export const VOICE = [
     ],
   },
   {
-    title: "Technique",
+    title: "TECHNIQUE",
     data: [
       "Chant chargé d'émotion.",
       "Technique vocale rugueuse pour le métal ou le rock.",

src/screens/Home/HomeSave.js

@@ -4,9 +4,9 @@ import { FlatList, Image, Platform, Text, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { useGlobal } from "reactn";
 import { background, img } from "../../assets";
+import alert from "../../components/Alert";
 import GradientButton from "../../components/GradientButton";
 import MoreMenu from "../../components/MoreMenu";
-import alert from "../../components/Alert";
 import { projectsRef } from "../../config/firebase";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
@@ -73,7 +73,7 @@ const HomeSave = () => {
                 renderItem={({ item }) => (
                   <MusicCard
                     title={item?.title || "Sans titre"}
-                    subtitle={"MusicLand"}
+                    subtitle={item?.userName}
                     imageUri={item?.coverUrl || null}
                     projectId={item?.id}
                     likedBy={item?.likedBy || []}

src/screens/Library/AllMyList.js

@@ -3,10 +3,10 @@ import React, { useState } from "react";
 import { View } from "react-native";
 import { background } from "../../assets";
 import MoreMenu from "../../components/MoreMenu";
+import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
-import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters } from "../../styles";
 import MusicCard from "./components/MusicCard";
@@ -69,7 +69,7 @@ export default function AllMyList() {
                 key={item.id}
                 title={item?.title || "Sans titre"}
                 imageUri={item?.coverUrl || null}
-                subtitle={"MusicLand"}
+                subtitle={item?.userName}
                 projectId={item?.id}
                 likedBy={item?.likedBy || []}
                 onPress={() => onPressItem(item)}
@@ -78,7 +78,7 @@ export default function AllMyList() {
                   setMenuPosition(posTop);
                   setShowMenu(
                     (prev) =>
-                      !prev || posTop?.top !== (menuPosition?.top ?? null),
+                      !prev || posTop?.top !== (menuPosition?.top ?? null)
                   );
                 }}
               />

src/screens/Library/AllMyPlaylist.web.js

@@ -200,7 +200,7 @@ const AllMyPlaylist = ({ route }) => {
               <MusicCard
                 key={p.id}
                 title={p?.title}
-                subtitle={"MusicLand"}
+                subtitle={p?.userName}
                 imageUri={p?.coverUrl || null}
                 projectId={p?.id}
                 likedBy={p?.likedBy || []}

src/screens/Library/PlaylistDetails.js

@@ -8,9 +8,9 @@ import { useGlobal } from "reactn";
 import { background, icons } from "../../assets";
 import MoreMenu from "../../components/MoreMenu";
 import { playlistsRef, projectsRef } from "../../config/firebase";
+import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import Page from "../../layouts/Page";
 import { goBack } from "../../navigation/NavigationService";
-import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import { gutters } from "../../styles";
 import MusicCard from "./components/MusicCard";
 
@@ -84,7 +84,7 @@ const PlaylistDetails = () => {
             <MusicCard
               key={p.id}
               title={p?.title}
-              subtitle={"MusicLand"}
+              subtitle={p?.userName}
               imageUri={p?.coverUrl || null}
               projectId={p?.id}
               likedBy={p?.likedBy || []}
@@ -98,8 +98,7 @@ const PlaylistDetails = () => {
                 setSelectedProjectId(p.id);
                 setMenuPosition(posTop);
                 setShowMenu(
-                  (prev) =>
-                    !prev || posTop?.top !== (menuPosition?.top ?? null),
+                  (prev) => !prev || posTop?.top !== (menuPosition?.top ?? null)
                 );
               }}
             />

src/screens/Library/components/MusicCard.js

@@ -141,7 +141,7 @@ const MusicCard = ({
             //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
             // }
           >
-            <View>
+            <View style={{ gap: 3, flexShrink: 1 }}>
               <Text numberOfLines={2} style={styles.title}>
                 {title || "Sans titre"}
               </Text>

src/screens/Library/components/MyMusic.js

@@ -38,7 +38,7 @@ const MyMusic = () => {
             <MusicCard
               key={p.id}
               title={p?.title}
-              subtitle={"MusicLand"}
+              subtitle={p?.userName}
               imageUri={p?.coverUrl || null}
               projectId={p?.id}
               likedBy={p?.likedBy || []}

src/screens/Library/components/SearchResultsList.js

@@ -1,6 +1,6 @@
+import { Image as ExpoImage } from "expo-image";
 import React, { useState } from "react";
 import { Pressable, ScrollView, Text, View } from "react-native";
-import { Image as ExpoImage } from "expo-image";
 import { img } from "../../../assets";
 import MoreMenu from "../../../components/MoreMenu";
 import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails";
@@ -71,7 +71,8 @@ const SearchResultsList = ({
   };
 
   const shouldShowMusics =
-    (!selected && (musics.length > 0 || musicsLoading)) || selected === "Musiques";
+    (!selected && (musics.length > 0 || musicsLoading)) ||
+    selected === "Musiques";
 
   const shouldShowPlaybacks =
     (!selected && (playbacks.length > 0 || playbacksLoading)) ||
@@ -95,13 +96,13 @@ const SearchResultsList = ({
               }}
             >
               {musics.length > 0 && (
-                <View style={{ gap: 10 }}>
+                <View style={{ gap: 1 }}>
                   {Array.isArray(musics) &&
                     musics.slice(0, 6).map((project) => (
                       <MusicCard
                         key={project.id}
                         title={project?.title || "Sans titre"}
-                        subtitle={"MusicLand"}
+                        subtitle={project?.userName}
                         imageUri={project?.coverUrl || null}
                         projectId={project?.id}
                         likedBy={project?.likedBy || []}
@@ -112,7 +113,7 @@ const SearchResultsList = ({
                           setShowMenu(
                             (previous) =>
                               !previous ||
-                              positionTop?.top !== (menuPosition?.top ?? null),
+                              positionTop?.top !== (menuPosition?.top ?? null)
                           );
                         }}
                       />
@@ -152,7 +153,7 @@ const SearchResultsList = ({
                       <MusicCard
                         key={project.id}
                         title={project?.title || "Sans titre"}
-                        subtitle={"MusicLand"}
+                        subtitle={project?.userName}
                         imageUri={project?.coverUrl || null}
                         projectId={project?.id}
                         likedBy={project?.likedBy || []}
@@ -163,7 +164,7 @@ const SearchResultsList = ({
                           setShowMenu(
                             (previous) =>
                               !previous ||
-                              positionTop?.top !== (menuPosition?.top ?? null),
+                              positionTop?.top !== (menuPosition?.top ?? null)
                           );
                         }}
                       />