music options

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;
-