feat: play from dropdown

src/components/ProjectDropDown/ProjectDropDown.js

@@ -1,8 +1,10 @@
 import { BlurView } from "expo-blur";
 import { Portal } from "@gorhom/portal";
 import React, {
+  forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
@@ -78,7 +80,9 @@ const defaultFormatDate = (timestamp) => {
   }
 };
 
-const ProjectDropDown = ({
+const ProjectDropDown = forwardRef(
+  (
+    {
       style,
       projects = [],
       selectedProject,
@@ -87,7 +91,9 @@ const ProjectDropDown = ({
       onCreateProject,
       formatDate = defaultFormatDate,
       allowEmptySelection = false,
-}) => {
+    },
+    ref
+  ) => {
     const [isOpen, setIsOpen] = useState(false);
     const [triggerLayout, setTriggerLayout] = useState(null);
     const [triggerWindowLayout, setTriggerWindowLayout] = useState(null);
@@ -145,6 +151,14 @@ const ProjectDropDown = ({
 
     const closeDropdown = useCallback(() => setIsOpen(false), []);
 
+    useImperativeHandle(
+      ref,
+      () => ({
+        close: closeDropdown,
+      }),
+      [closeDropdown]
+    );
+
     const handleSelect = useCallback(
       (project) => {
         if (!project?.id) return;
@@ -353,7 +367,8 @@ const ProjectDropDown = ({
         </View>
       </View>
     );
-};
+  }
+);
 
 export default ProjectDropDown;
 

src/screens/Home/Home.js

@@ -33,6 +33,7 @@ import {
   getStageAction,
 } from "../../utils/projectStages";
 import { openCoinPackModal } from "../../utils/coinPackModal";
+import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails";
 import StageCard from "./components/StageCard";
 import ClubCard from "./components/ClubCard";
 
@@ -66,7 +67,7 @@ const STAGE_CARD_CONTENT = [
     key: "beatmaker",
     step: "ÉTAPE 2",
     description:
-      "Bienvenue au studio MusicLand.\nNous mettons en musique tes paroles en fonction de tes inspirations, ça va être top !",
+      "Je suis Malik, responsable du studio de MusicLand.\nJe vais mettre en musique tes paroles en fonction de tes goûts musicaux, ça va être top !",
     image: cardsImg.studio,
     imagePosition: "right",
     textAlign: "right",
@@ -86,7 +87,7 @@ const STAGE_CARD_CONTENT = [
     key: "publisher",
     step: "ÉTAPE 4",
     description:
-      "À la sortie du studio, l'équipe production te propose les prochaines étapes pour partager ta musique avec le monde.",
+      "Je suis Mr Benhaï, Producteur de MusicLand, et je vais te faire une proposition qui pourrait t’intéresser. On se retrouve à la sortie du studio !",
     image: cardsImg.production,
     imagePosition: "right",
     textAlign: "right",
@@ -115,6 +116,7 @@ const Home = ({ navigation, route }) => {
   } = useUser();
   const { setTooltip } = useMinuit();
   const [videoUrl, setVideoUrl] = useState(null);
+  const navigateToMusicDetails = useNavigateToMusicDetails();
 
   if (!currentUID) {
     return <LandingPage />;
@@ -174,6 +176,7 @@ const Home = ({ navigation, route }) => {
   const [menuAnchor, setMenuAnchor] = useState(null);
   const [menuProject, setMenuProject] = useState(null);
   const menuAnchorRef = useRef(null);
+  const projectDropdownRef = useRef(null);
   const [hasLocalAdventureFlag, setHasLocalAdventureFlag] = useState(false);
 
   const handleSelectProject = useCallback(
@@ -232,8 +235,27 @@ const Home = ({ navigation, route }) => {
 
   const moreMenuItems = useMemo(() => {
     if (!menuProject?.id) return [];
-    return [
-      {
+
+    const items = [];
+    const hasSongUrl =
+      typeof menuProject?.songUrl === "string" &&
+      menuProject.songUrl.length > 0;
+
+    if (hasSongUrl) {
+      items.push({
+        label: "Jouer la musique",
+        onPress: () => {
+          projectDropdownRef.current?.close?.();
+          navigateToMusicDetails({
+            projectId: menuProject.id,
+            songUrl: menuProject.songUrl,
+            project: menuProject,
+          });
+        },
+      });
+    }
+
+    items.push({
       label: "Supprimer",
       onPress: () =>
         Alert(
@@ -251,9 +273,10 @@ const Home = ({ navigation, route }) => {
           ],
           { cancelable: true },
         ),
-      },
-    ];
-  }, [handleDeleteProject, menuProject?.id]);
+    });
+
+    return items;
+  }, [handleDeleteProject, menuProject, navigateToMusicDetails]);
 
   useEffect(() => {
     if (!route?.params?.showLyricsCongrats) {
@@ -495,6 +518,7 @@ const Home = ({ navigation, route }) => {
     <View style={styles.topBar}>
       {mobileInfoRow}
       <ProjectDropDown
+        ref={projectDropdownRef}
         style={styles.projectDropDown}
         projects={projects}
         selectedProject={currentProject}