music options

src/components/MoreMenu.js

@@ -0,0 +1,151 @@
+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 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";
+
+const MoreMenu = ({
+  visible = false,
+  top = 0,
+  onClose = () => {},
+  inPlaylist = false,
+  playlistId = null,
+  projectId = null,
+  extraItems = [],
+}) => {
+  if (!visible) return null;
+  const { setTooltip } = useMinuit();
+
+  const removeFromPlaylist = async () => {
+    try {
+      if (inPlaylist && playlistId && projectId) {
+        await playlistsRef
+          .doc(playlistId)
+          .update({ musics: arrayRemove(projectId), updatedAt: new Date() });
+        setTooltip({ type: "success", text: "Supprimé de la playlist" });
+      }
+    } catch (e) {
+      console.log("Remove from playlist error", e?.message);
+      setTooltip({ type: "error", text: e?.message || "Suppression impossible" });
+    } finally {
+      onClose?.();
+    }
+  };
+
+  const addToPlaylist = () => {
+    if (projectId) {
+      SheetManager.show("Playlist", { payload: { projectId } });
+    } else {
+      SheetManager.show("Playlist");
+    }
+    onClose?.();
+  };
+
+  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={{ 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?.();
+                }
+              }}
+            >
+              <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>
+  );
+};
+
+export default MoreMenu;

src/components/modal/PlaylistModal.js

@@ -12,6 +12,7 @@ import { SheetManager } from "react-native-actions-sheet";
 import SwiperFlatList from "react-native-swiper-flatlist";
 import { icons } from "../../assets";
 import { arrayUnion, playlistsRef } from "../../config/firebase";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit";
 import { useUserData } from "../../providers/UserDataProvider";
 import { createPlaylist } from "../../screens/Library/Playlists/playlist";
 import { Palette } from "../../styles";
@@ -30,6 +31,7 @@ const PlaylistModal = (props) => {
   const [isCreating, setIsCreating] = useState(false);
   const { currentUID, userPlaylists = [] } = useUserData();
   const startAtCreate = props?.payload?.startAtCreate || false;
+  const { setTooltip } = useMinuit();
 
   return (
     <AppActionSheet id="Playlist">
@@ -104,9 +106,19 @@ const PlaylistModal = (props) => {
                       musics: arrayUnion(projectId),
                       updatedAt: new Date(),
                     });
+                    const addedPlaylist = (Array.isArray(userPlaylists)
+                      ? userPlaylists
+                      : []
+                    ).find((p) => p?.id === selectedId);
+                    const name = addedPlaylist?.name || "la playlist";
+                    setTooltip({
+                      type: "success",
+                      text: `Ajouté à “${name}”`,
+                    });
                   }
                 } catch (e) {
                   console.log("Add to playlist error", e?.message);
+                  setTooltip({ type: "error", text: e?.message || "Ajout impossible" });
                 } finally {
                   SheetManager.hide("Playlist");
                 }
@@ -175,20 +187,28 @@ const PlaylistModal = (props) => {
                 if (!playlist?.trim()?.length || !currentUID) return;
                 try {
                   setIsCreating(true);
+                  const name = playlist.trim();
                   await createPlaylist({
                     createdBy: currentUID,
-                    name: playlist.trim(),
+                    name,
                     musics: props?.payload?.projectId
                       ? [props.payload.projectId]
                       : [],
                     createdAt: new Date(),
                     updatedAt: new Date(),
                   });
+                  setTooltip({
+                    type: "success",
+                    text: props?.payload?.projectId
+                      ? `Playlist “${name}” créée et musique ajoutée`
+                      : `Playlist “${name}” créée`,
+                  });
                   setPlaylist("");
                   SheetManager.hide("Playlist");
                   scrollRef.current.scrollToIndex({ index: 0, animated: true });
                 } catch (e) {
                   console.log(e);
+                  setTooltip({ type: "error", text: e?.message || "Création impossible" });
                 } finally {
                   setIsCreating(false);
                 }

src/screens/Library/AllMyLikedMusic.js

@@ -1,8 +1,6 @@
 import { BlurView } from "expo-blur";
 import React, { useState } from "react";
-import { Platform, Pressable, Text, View } from "react-native";
+import { View } from "react-native";
-import { SheetManager } from "react-native-actions-sheet";
-import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
 import { background } from "../../assets";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
@@ -11,10 +9,12 @@ import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import MusicCard from "./components/MusicCard";
+import MoreMenu from "../../components/MoreMenu";
 
 const AllMyLikedMusic = () => {
   const [top, setTop] = useState(0);
   const [showMenu, setShowMenu] = useState(false);
+  const [selectedProjectId, setSelectedProjectId] = useState(null);
   const { userLikedProjects: projects } = useUser();
 
   return (
@@ -39,65 +39,19 @@ const AllMyLikedMusic = () => {
                   navigate(Routes.MusicDetails, { projectId: item.id })
                 }
                 onPressMore={(posTop) => {
+                  setSelectedProjectId(item.id);
                   setTop(posTop);
-                  if (showMenu) {
+                  setShowMenu((prev) => !prev || posTop !== top);
-                    if (posTop === top) {
-                      setShowMenu(false);
-                    } else {
-                      setShowMenu(false);
-                      setTimeout(() => {
-                        setShowMenu(true);
-                      }, 300);
-                    }
-                  } else {
-                    setShowMenu(true);
-                  }
                 }}
               />
             ))}
-          {showMenu && (
+          <MoreMenu
-            <Animated.View
+            visible={showMenu}
-              entering={FadeIn.duration(300).easing(Easing.ease)}
+            top={top}
-              exiting={FadeOut.duration(300).easing(Easing.ease)}
+            onClose={() => setShowMenu(false)}
-              style={{
+            inPlaylist={false}
-                position: "absolute",
+            projectId={selectedProjectId}
-                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",
-                  }}
-                  experimentalBlurMethod={
-                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-                  }
-                >
-                  <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/PlaylistDetails.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { View } from "react-native";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
@@ -8,6 +8,7 @@ import { useDataFromRef } from "react-native-minuit/src/hooks";
 import useDataFromArrayId from "react-native-minuit/src/hooks/useDataFromArrayId";
 import { playlistsRef, projectsRef } from "../../config/firebase";
 import MusicCard from "./components/MusicCard";
+import MoreMenu from "../../components/MoreMenu";
 import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 
@@ -32,6 +33,10 @@ const PlaylistDetails = () => {
     refreshArray: [playlistId, playlist?.musics?.length || 0],
   });
 
+  const [menuTop, setMenuTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+  const [selectedProjectId, setSelectedProjectId] = useState(null);
+
   return (
     <Page
       headerType="NAVIGATION"
@@ -50,13 +55,25 @@ const PlaylistDetails = () => {
               projectId={p?.id}
               likedBy={p?.likedBy || []}
               onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
-              onPressMore={() => {}}
+              onPressMore={(posTop) => {
+                setSelectedProjectId(p.id);
+                setMenuTop(posTop);
+                setShowMenu((prev) => !prev || posTop !== menuTop);
+              }}
             />
           ))}
+
+        <MoreMenu
+          visible={showMenu}
+          top={menuTop}
+          onClose={() => setShowMenu(false)}
+          inPlaylist
+          playlistId={playlistId}
+          projectId={selectedProjectId}
+        />
       </View>
     </Page>
   );
 };
 
 export default PlaylistDetails;
-

src/screens/Library/Research.js

@@ -17,12 +17,16 @@ import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import { BlurView } from "expo-blur";
 import ResearchHeader from "./components/ResearchHeader";
 import MusicCard from "./components/MusicCard";
+import MoreMenu from "../../components/MoreMenu";
 import { size } from "../../styles/Style";
 import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 
 const Research = () => {
   const [selected, setSelected] = useState(null);
+  const [menuTop, setMenuTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+  const [selectedProjectId, setSelectedProjectId] = useState(null);
 
   const onPressMenu = (item) => {
     if (selected === item) {
@@ -61,6 +65,11 @@ const Research = () => {
                       <MusicCard
                         key={index}
                         onPress={() => navigate(Routes.MusicDetails)}
+                        onPressMore={(posTop) => {
+                          setSelectedProjectId(null);
+                          setMenuTop(posTop);
+                          setShowMenu((prev) => !prev || posTop !== menuTop);
+                        }}
                       />
                     ))}
                   </View>
@@ -135,6 +144,13 @@ const Research = () => {
                 </CreateLyricsHeader>
               </View>
             )}
+            <MoreMenu
+              visible={showMenu}
+              top={menuTop}
+              onClose={() => setShowMenu(false)}
+              inPlaylist={false}
+              projectId={selectedProjectId}
+            />
           </ScrollView>
         </View>
       </View>

src/screens/Library/components/MusicCard.js

@@ -105,7 +105,7 @@ const MusicCard = ({
                 />
               </Pressable>
               <Pressable onPress={onPressMenu}>
-                <Image source={icons.more} />
+                <Image source={icons.more} style={size({ size: 24 })} />
               </Pressable>
             </View>
           </BlurView>

src/screens/Library/components/MyMusic.js

@@ -1,13 +1,17 @@
-import React from "react";
+import React, { useState } from "react";
 import { View } from "react-native";
 import { Routes } from "../../../navigation";
 import { navigate } from "../../../navigation/NavigationService";
 import { useUser } from "../../../providers/UserDataProvider";
 import CardContainer from "./CardContainer";
 import MusicCard from "./MusicCard";
+import MoreMenu from "../../../components/MoreMenu";
 
 const MyMusic = () => {
   const { userProjects = [] } = useUser();
+  const [menuTop, setMenuTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+  const [selectedProjectId, setSelectedProjectId] = useState(null);
   const projects = Array.isArray(userProjects) ? userProjects.slice(0, 3) : [];
   return (
     <CardContainer
@@ -25,9 +29,20 @@ const MyMusic = () => {
               projectId={p?.id}
               likedBy={p?.likedBy || []}
               onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })}
-              onPressMore={() => console.log("More options for", p.id)}
+              onPressMore={(posTop) => {
+                setSelectedProjectId(p.id);
+                setMenuTop(posTop);
+                setShowMenu((prev) => !prev || posTop !== menuTop);
+              }}
             />
           ))}
+        <MoreMenu
+          visible={showMenu}
+          top={menuTop}
+          onClose={() => setShowMenu(false)}
+          inPlaylist={false}
+          projectId={selectedProjectId}
+        />
       </View>
     </CardContainer>
   );

src/screens/Profile/Profile.js

@@ -17,6 +17,7 @@ import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
 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";
@@ -201,58 +202,22 @@ const Profile = () => {
                   }
                   onPressMore={(posTop) => {
                     setSelectedProjectId(item.id);
-                    if (showMenu) {
-                      if (posTop === menuTop) {
-                        setShowMenu(false);
-                      } else {
-                        setShowMenu(false);
-                        setTimeout(() => {
                     setMenuTop(posTop);
-                          setShowMenu(true);
+                    setShowMenu((prev) => !prev || posTop !== menuTop);
-                        }, 200);
-                      }
-                    } else {
-                      setMenuTop(posTop);
-                      setShowMenu(true);
-                    }
                   }}
                 />
               )}
             />
-            {showMenu && (
+            <MoreMenu
-              <Animated.View
+              visible={showMenu}
-                entering={FadeIn.duration(200).easing(Easing.ease)}
+              top={menuTop}
-                exiting={FadeOut.duration(200).easing(Easing.ease)}
+              onClose={() => setShowMenu(false)}
-                style={{ position: "absolute", right: 0, top: menuTop, zIndex: 2 }}
+              inPlaylist={false}
-              >
+              projectId={selectedProjectId}
-                <BlurView
+              extraItems={[
-                  intensity={20}
+                {
-                  style={{
+                  label: "Supprimer",
-                    paddingHorizontal: 12,
+                  onPress: () =>
-                    paddingVertical: 10,
-                    backgroundColor: Palette.glass,
-                    borderRadius: 12,
-                    overflow: "hidden",
-                    gap: 10,
-                  }}
-                  experimentalBlurMethod={
-                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-                  }
-                >
-                  <Pressable onPress={() => setShowMenu(false)}>
-                    <Text
-                      style={{
-                        fontSize: 14,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                      }}
-                    >
-                      Annuler
-                    </Text>
-                  </Pressable>
-                  <Pressable
-                    onPress={() => {
-                      setShowMenu(false);
                     alert(
                       "Confirmer la suppression",
                       "Cette action supprimera définitivement ce projet.",
@@ -275,22 +240,10 @@ const Profile = () => {
                         },
                       ],
                       { cancelable: true },
-                      );
+                    ),
-                    }}
+                },
-                  >
+              ]}
-                    <Text
+            />
-                      style={{
-                        fontSize: 14,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                      }}
-                    >
-                      Supprimer
-                    </Text>
-                  </Pressable>
-                </BlurView>
-              </Animated.View>
-            )}
           </View>
         )}
       </View>