update

src/screens/Library/AllMyLikedMusic.js

@@ -1,11 +1,18 @@
-import { View, Text } from "react-native";
-import React from "react";
+import { View, Text, Pressable } from "react-native";
+import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
-import { gutters } from "../../styles";
+import { gutters, Palette } from "../../styles";
 import MusicCard from "./components/MusicCard";
+import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { SheetManager } from "react-native-actions-sheet";
 
 const AllMyLikedMusic = () => {
+  const [top, setTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+
   return (
     <Page
       headerType="NAVIGATION"
@@ -16,8 +23,65 @@ const AllMyLikedMusic = () => {
       <View style={{ flex: 1 }}>
         <View style={{ gap: 10 }}>
           {Array.from({ length: 3 }).map((_, index) => (
-            <MusicCard key={index} />
+            <MusicCard
+              key={index}
+              onPressMore={(posTop) => {
+                setTop(posTop);
+                if (showMenu) {
+                  if (posTop === top) {
+                    setShowMenu(false);
+                  } else {
+                    setShowMenu(false);
+                    setTimeout(() => {
+                      setShowMenu(true);
+                    }, 300);
+                  }
+                } else {
+                  setShowMenu(true);
+                }
+              }}
+            />
           ))}
+          {showMenu && (
+            <Animated.View
+              entering={FadeIn.duration(300).easing(Easing.ease)}
+              exiting={FadeOut.duration(300).easing(Easing.ease)}
+              style={{
+                position: "absolute",
+                right: 0,
+                top: top,
+                zIndex: 2,
+              }}
+            >
+              <Pressable
+                onPress={() => {
+                  setShowMenu(false);
+                  SheetManager.show("Delete");
+                }}
+              >
+                <BlurView
+                  intensity={20}
+                  style={{
+                    paddingHorizontal: 12,
+                    paddingVertical: 10,
+                    backgroundColor: Palette.glass,
+                    borderRadius: 12,
+                    overflow: "hidden",
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 14,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                    }}
+                  >
+                    Supprimer de la playlist
+                  </Text>
+                </BlurView>
+              </Pressable>
+            </Animated.View>
+          )}
         </View>
       </View>
     </Page>

src/screens/Library/MusicDetails.js

@@ -13,15 +13,31 @@ 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";
 
 const MusicDetails = () => {
+  const params = useRoute().params;
+  const action = params?.action;
   const [fav, setFav] = useState(false);
 
   return (
     <Page
       headerType="NAVIGATION"
-      title="Recherche"
-      backgroundImg={background.libraryBG2}
+      title={action === "userProfile" ? "Mon profil" : "Recherche"}
+      backgroundImg={
+        action === "userProfile" ? background.profileBG : background.libraryBG2
+      }
+      {...(action === "userProfile" && {
+        containerStyle: {
+          backgroundColor: "#0000004D",
+        },
+        rightComponent: () => (
+          <Pressable onPress={() => SheetManager.show("DeleteAudio")}>
+            <Image source={icons.trash} />
+          </Pressable>
+        ),
+      })}
     >
       <ScrollView
         contentContainerStyle={{

src/screens/Library/components/MusicCard.js

@@ -1,5 +1,5 @@
 import { View, Text, Image, Pressable, StyleSheet } from "react-native";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Palette, Style } from "../../../styles";
 import { icons, img } from "../../../assets";
 import { size } from "../../../styles/Style";
@@ -8,52 +8,82 @@ import { FONT_FAMILY } from "../../../styles/Fonts";
 
 const MusicCard = ({ onPress, onPressMore }) => {
   const [selected, setSelected] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [layout, setLayout] = useState(null);
+  const [menuPos, setMenuPos] = useState(0);
+
+  useEffect(() => {
+    if (layout) {
+      const top = layout?.y + 45;
+      setMenuPos(top);
+    }
+  }, [layout]);
+
+  const onPressMenu = () => {
+    onPressMore?.(menuPos);
+  };
 
   return (
-    <Pressable
-      style={{
-        ...Style.containerRow,
-        gap: 6,
-      }}
-      onPress={onPress}
-    >
-      <Image
-        source={img.placeholder2}
-        style={{ ...size({ size: 60 }), borderRadius: 12 }}
-      />
-      <View style={styles.blurContainer}>
-        <BlurView
-          intensity={20}
-          style={{
-            flex: 1,
-            ...Style.containerSpaceBetween,
-            paddingHorizontal: 8,
-          }}
-        >
-          <View>
-            <Text style={styles.title}>Alors on danse</Text>
-            <Text style={styles.subTitle}>Stromae</Text>
-          </View>
-          <View
+    <>
+      <Pressable
+        style={{
+          ...Style.containerRow,
+          gap: 6,
+        }}
+        onPress={onPress}
+        onLayout={(e) => setLayout(e.nativeEvent.layout)}
+      >
+        <Image
+          source={img.placeholder2}
+          style={{ ...size({ size: 60 }), borderRadius: 12 }}
+        />
+        <View style={styles.blurContainer}>
+          <BlurView
+            intensity={20}
             style={{
-              ...Style.containerRow,
-              gap: 12,
+              flex: 1,
+              ...Style.containerSpaceBetween,
+              paddingHorizontal: 8,
             }}
           >
-            <Pressable onPress={() => setSelected(!selected)}>
-              <Image
-                source={selected ? icons.heart : icons.heartOutline}
-                style={size({ size: 24 })}
-                resizeMode="contain"
-              />
-            </Pressable>
-            <Pressable onPress={onPressMore}>
-              <Image source={icons.more} />
-            </Pressable>
-          </View>
-        </BlurView>
-      </View>
-    </Pressable>
+            <View>
+              <Text style={styles.title}>Alors on danse</Text>
+              <Text style={styles.subTitle}>Stromae</Text>
+            </View>
+            <View
+              style={{
+                ...Style.containerRow,
+                gap: 12,
+              }}
+            >
+              <Pressable onPress={() => setSelected(!selected)}>
+                <Image
+                  source={selected ? icons.heart : icons.heartOutline}
+                  style={size({ size: 24 })}
+                  resizeMode="contain"
+                />
+              </Pressable>
+              <Pressable onPress={onPressMenu}>
+                <Image source={icons.more} />
+              </Pressable>
+            </View>
+          </BlurView>
+        </View>
+      </Pressable>
+      {/* {open && (
+        <View
+          style={{
+            width: 100,
+            height: 50,
+            backgroundColor: "red",
+            position: "absolute",
+            right: 0,
+            top: menuPos,
+            zIndex: 2,
+          }}
+        />
+      )} */}
+    </>
   );
 };
 
@@ -76,4 +106,7 @@ const styles = StyleSheet.create({
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
   },
+  filterContainer: {
+    backgroundColor: Palette.tran,
+  },
 });