minor fix

src/components/MoreMenu.js

@@ -2,9 +2,9 @@ import { BlurView } from "expo-blur";
 import React from "react";
 import { Platform, Pressable, Text, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit";
 import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
 import { arrayRemove, playlistsRef } from "../config/firebase";
-import useMinuit from "react-native-minuit/src/hooks/useMinuit";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 
@@ -17,8 +17,8 @@ const MoreMenu = ({
   projectId = null,
   extraItems = [],
 }) => {
-  if (!visible) return null;
   const { setTooltip } = useMinuit();
+  if (!visible) return null;
 
   const removeFromPlaylist = async () => {
     try {
@@ -30,7 +30,10 @@ const MoreMenu = ({
       }
     } catch (e) {
       console.log("Remove from playlist error", e?.message);
-      setTooltip({ type: "error", text: e?.message || "Suppression impossible" });
+      setTooltip({
+        type: "error",
+        text: e?.message || "Suppression impossible",
+      });
     } finally {
       onClose?.();
     }
@@ -46,78 +49,35 @@ const MoreMenu = ({
   };
 
   return (
-    <Animated.View
-      entering={FadeIn.duration(300).easing(Easing.ease)}
-      exiting={FadeOut.duration(300).easing(Easing.ease)}
-      style={{ position: "absolute", right: 0, top, zIndex: 2 }}
+    <View
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 9999,
+        elevation: 9999,
+      }}
     >
-      <View style={{ gap: 2 }}>
-        {inPlaylist && (
-          <Pressable onPress={removeFromPlaylist}>
-            <BlurView
-              intensity={20}
-              style={{
-                paddingHorizontal: 12,
-                paddingVertical: 10,
-                backgroundColor: Palette.glass,
-                borderRadius: 12,
-                overflow: "hidden",
-              }}
-              experimentalBlurMethod={
-                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-              }
-            >
-              <Text
-                style={{
-                  fontSize: 14,
-                  color: Palette.white,
-                  fontFamily: FONT_FAMILY.InterRegular,
-                }}
-              >
-                Supprimer de la playlist
-              </Text>
-            </BlurView>
-          </Pressable>
-        )}
-
-        <Pressable onPress={addToPlaylist}>
-          <BlurView
-            intensity={20}
-            style={{
-              paddingHorizontal: 12,
-              paddingVertical: 10,
-              backgroundColor: Palette.glass,
-              borderRadius: 12,
-              overflow: "hidden",
-            }}
-            experimentalBlurMethod={
-              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-            }
-          >
-            <Text
-              style={{
-                fontSize: 14,
-                color: Palette.white,
-                fontFamily: FONT_FAMILY.InterRegular,
-              }}
-            >
-              Ajouter à une playlist
-            </Text>
-          </BlurView>
-        </Pressable>
-
-        {Array.isArray(extraItems) &&
-          extraItems.map((item, idx) => (
-            <Pressable
-              key={idx}
-              onPress={() => {
-                try {
-                  item?.onPress?.();
-                } finally {
-                  onClose?.();
-                }
-              }}
-            >
+      <Pressable
+        style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}
+        onPress={onClose}
+      />
+      <Animated.View
+        entering={FadeIn.duration(300).easing(Easing.ease)}
+        exiting={FadeOut.duration(300).easing(Easing.ease)}
+        style={{
+          position: "absolute",
+          right: 0,
+          top,
+          zIndex: 10000,
+          elevation: 10000,
+        }}
+      >
+        <View style={{ gap: 2 }}>
+          {inPlaylist && (
+            <Pressable onPress={removeFromPlaylist}>
               <BlurView
                 intensity={20}
                 style={{
@@ -138,13 +98,78 @@ const MoreMenu = ({
                     fontFamily: FONT_FAMILY.InterRegular,
                   }}
                 >
-                  {item?.label || "Action"}
+                  Supprimer de la playlist
                 </Text>
               </BlurView>
             </Pressable>
-          ))}
-      </View>
-    </Animated.View>
+          )}
+
+          <Pressable onPress={addToPlaylist}>
+            <BlurView
+              intensity={20}
+              style={{
+                paddingHorizontal: 12,
+                paddingVertical: 10,
+                backgroundColor: Palette.glass,
+                borderRadius: 12,
+                overflow: "hidden",
+              }}
+              experimentalBlurMethod={
+                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+              }
+            >
+              <Text
+                style={{
+                  fontSize: 14,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                }}
+              >
+                Ajouter à une playlist
+              </Text>
+            </BlurView>
+          </Pressable>
+
+          {Array.isArray(extraItems) &&
+            extraItems.map((item, idx) => (
+              <Pressable
+                key={idx}
+                onPress={() => {
+                  try {
+                    item?.onPress?.();
+                  } finally {
+                    onClose?.();
+                  }
+                }}
+              >
+                <BlurView
+                  intensity={20}
+                  style={{
+                    paddingHorizontal: 12,
+                    paddingVertical: 10,
+                    backgroundColor: Palette.glass,
+                    borderRadius: 12,
+                    overflow: "hidden",
+                  }}
+                  experimentalBlurMethod={
+                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  }
+                >
+                  <Text
+                    style={{
+                      fontSize: 14,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                    }}
+                  >
+                    {item?.label || "Action"}
+                  </Text>
+                </BlurView>
+              </Pressable>
+            ))}
+        </View>
+      </Animated.View>
+    </View>
   );
 };
 

src/screens/Library/MusicDetails.js

@@ -1,24 +1,29 @@
+import { useRoute } from "@react-navigation/core";
+import { Audio } from "expo-av";
+import React, { useEffect, useMemo, useState } from "react";
 import {
-  View,
-  Text,
-  ScrollView,
   Image,
   Pressable,
+  ScrollView,
   StyleSheet,
+  Text,
+  View,
 } from "react-native";
-import React, { useEffect, useMemo, useState } from "react";
-import Page from "../../layouts/Page";
-import { background, icons, img } from "../../assets";
-import { Palette } from "../../styles";
-import Style, { gutters, size } from "../../styles/Style";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import Slider from "../../components/Slider";
-import { useRoute } from "@react-navigation/core";
 import { SheetManager } from "react-native-actions-sheet";
-import firebase, { usersRef, projectsRef, arrayUnion, arrayRemove } from "../../config/firebase";
 import { useGlobal } from "reactn";
+import { background, icons, img } from "../../assets";
+import Slider from "../../components/Slider";
+import firebase, {
+  arrayRemove,
+  arrayUnion,
+  projectsRef,
+  usersRef,
+} from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
-import { Audio } from "expo-av";
+import Page from "../../layouts/Page";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import Style, { gutters, size } from "../../styles/Style";
 
 const MusicDetails = () => {
   const params = useRoute().params || {};
@@ -88,7 +93,7 @@ const MusicDetails = () => {
             const dur = status.durationMillis || 0;
             setProgressInfo({ pos, dur });
             setIsPlaying(!!status.isPlaying);
-          },
+          }
         );
         soundRef.current = sound;
       } catch (e) {
@@ -239,7 +244,7 @@ const MusicDetails = () => {
                 }
               >
                 <Image
-                  source={icons.check}
+                  source={icons.more}
                   style={{ ...size({ size: 24 }) }}
                   resizeMode="contain"
                 />

src/screens/Library/components/LikedMusic.js

@@ -1,17 +1,22 @@
-import { View, Image, FlatList, Pressable } from "react-native";
 import React from "react";
-import CardContainer from "./CardContainer";
-import { Style } from "../../../styles";
+import { FlatList, Image, Pressable, useWindowDimensions } from "react-native";
 import { img } from "../../../assets";
-import { navigate } from "../../../navigation/NavigationService";
 import { Routes } from "../../../navigation";
+import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
+import CardContainer from "./CardContainer";
 
 const LikedMusic = () => {
   const { userLikedProjects = [] } = useUser();
   const items = Array.isArray(userLikedProjects)
     ? userLikedProjects.slice(0, 6)
     : [];
+  const { width: screenWidth } = useWindowDimensions();
+  const numColumns = 3;
+  const gap = 6;
+  const containerGap = 10;
+  const totalGap = gap * (numColumns - 1) + containerGap * 2;
+  const itemWidth = (screenWidth - totalGap) / numColumns;
   return (
     <CardContainer
       label="Musiques likées"
@@ -20,18 +25,25 @@ const LikedMusic = () => {
       <FlatList
         scrollEnabled={false}
         data={items}
-        numColumns={3}
-        contentContainerStyle={{ gap: 10 }}
-        columnWrapperStyle={{ gap: 6 }}
+        numColumns={numColumns}
+        contentContainerStyle={{ gap: containerGap }}
+        columnWrapperStyle={{ gap }}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (
           <Pressable
             style={{ flex: 1 }}
-            onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })}
+            onPress={() =>
+              navigate(Routes.MusicDetails, { projectId: item.id })
+            }
           >
             <Image
-              source={item?.coverUrl ? { uri: item.coverUrl } : img.placeholder3}
-              style={{ width: "100%", height: 172, borderRadius: 10 }}
+              source={
+                item?.coverUrl ? { uri: item.coverUrl } : img.placeholder3
+              }
+              style={{
+                height: itemWidth - containerGap,
+                borderRadius: 10,
+              }}
             />
           </Pressable>
         )}

src/screens/Library/components/MusicCard.js

@@ -26,7 +26,6 @@ const MusicCard = ({
 }) => {
   const [currentUID] = useGlobal("currentUID");
   const [selected, setSelected] = useState(false);
-  const [open, setOpen] = useState(false);
   const [layout, setLayout] = useState(null);
   const [menuPos, setMenuPos] = useState(0);
 

src/screens/Profile/Profile.js

@@ -1,31 +1,31 @@
-import {
-  View,
-  Text,
-  Pressable,
-  Image,
-  FlatList,
-  StyleSheet,
-  Platform,
-} from "react-native";
-import React, { useState } from "react";
-import Page from "../../layouts/Page";
-import { background, icons, img } from "../../assets";
 import { BlurView } from "expo-blur";
+import React, { useState } from "react";
+import {
+  FlatList,
+  Image,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
 import { responsiveHeight } from "react-native-responsive-dimensions";
-import Style, { gutters, size } from "../../styles/Style";
+import { useGlobal } from "reactn";
+import { background, icons, img } from "../../assets";
+import alert from "../../components/Alert";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import MoreMenu from "../../components/MoreMenu";
+import { projectsRef } from "../../config/firebase";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { navigate } from "../../navigation/NavigationService";
+import { useUser } from "../../providers/UserDataProvider";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import Style, { gutters, size } from "../../styles/Style";
 import MusicCard from "../Library/components/MusicCard";
-import MoreMenu from "../../components/MoreMenu";
-import { useUser } from "../../providers/UserDataProvider";
-import { SheetManager } from "react-native-actions-sheet";
-import { navigate } from "../../navigation/NavigationService";
-import { Routes } from "../../navigation";
-import { useGlobal } from "reactn";
-import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
-import alert from "../../components/Alert";
-import { projectsRef } from "../../config/firebase";
 
 const Profile = () => {
   const [selected, setSelected] = useState("Chansons");
@@ -53,7 +53,7 @@ const Profile = () => {
       }}
       rightComponent={() => (
         <Pressable onPress={() => SheetManager.show("ProfileSettings")}>
-          <Image source={icons.more} />
+          <Image source={icons.more} style={{ ...size({ size: 24 }) }} />
         </Pressable>
       )}
     >
@@ -183,7 +183,7 @@ const Profile = () => {
           </View>
         )}
         {selected === "Chansons" && (
-          <View style={{ flex: 1 }}>
+          <ScrollView style={{ flex: 1 }}>
             <FlatList
               data={Array.isArray(userProjects) ? userProjects : []}
               contentContainerStyle={{
@@ -229,7 +229,10 @@ const Profile = () => {
                             try {
                               if (!selectedProjectId) return;
                               await projectsRef.doc(selectedProjectId).delete();
-                              setTooltip({ type: "success", text: "Projet supprimé" });
+                              setTooltip({
+                                type: "success",
+                                text: "Projet supprimé",
+                              });
                             } catch (e) {
                               setTooltip({
                                 type: "error",
@@ -239,12 +242,12 @@ const Profile = () => {
                           },
                         },
                       ],
-                      { cancelable: true },
+                      { cancelable: true }
                     ),
                 },
               ]}
             />
-          </View>
+          </ScrollView>
         )}
       </View>
     </Page>

src/screens/Profile/SingerProfile.js

@@ -1,22 +1,22 @@
-import {
-  View,
-  Text,
-  Pressable,
-  Image,
-  StyleSheet,
-  FlatList,
-  Platform,
-} from "react-native";
-import React, { useState } from "react";
-import Page from "../../layouts/Page";
-import { background, icons, img } from "../../assets";
-import { gutters, Palette } from "../../styles";
 import { BlurView } from "expo-blur";
-import Style, { size } from "../../styles/Style";
+import React, { useState } from "react";
+import {
+  FlatList,
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import GradientButton from "../../components/GradientButton";
+import { background, icons, img } from "../../assets";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import GradientButton from "../../components/GradientButton";
+import Page from "../../layouts/Page";
+import { gutters, Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import Style, { size } from "../../styles/Style";
 import MusicCard from "../Library/components/MusicCard";
 
 const SingerProfile = () => {
@@ -42,7 +42,7 @@ const SingerProfile = () => {
       }}
       rightComponent={() => (
         <Pressable>
-          <Image source={icons.more} />
+          <Image source={icons.more} style={{ ...size({ size: 24 }) }} />
         </Pressable>
       )}
     >