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