diff --git a/src/hooks/useNavigateToMusicDetails.js b/src/hooks/useNavigateToMusicDetails.js new file mode 100644 index 0000000..de9a153 --- /dev/null +++ b/src/hooks/useNavigateToMusicDetails.js @@ -0,0 +1,30 @@ +import { useCallback } from "react"; +import { useGlobal } from "reactn"; +import { Routes } from "../navigation"; +import { navigate } from "../navigation/NavigationService"; + +const useNavigateToMusicDetails = () => { + const [, setTooltip] = useGlobal("_tooltip"); + + return useCallback( + ({ projectId, songUrl }) => { + if (!projectId) { + return false; + } + + if (songUrl != null && songUrl !== "") { + navigate(Routes.MusicDetails, { projectId }); + return true; + } + + setTooltip({ + type: "error", + text: "Les paroles pour cette musique n'ont pas été générées", + }); + return false; + }, + [setTooltip] + ); +}; + +export default useNavigateToMusicDetails; diff --git a/src/screens/HitParade/HitParade.js b/src/screens/HitParade/HitParade.js index da91ca4..7ef14ee 100644 --- a/src/screens/HitParade/HitParade.js +++ b/src/screens/HitParade/HitParade.js @@ -13,6 +13,7 @@ import { background, icons } from "../../assets"; import BorderGradientButton from "../../components/BorderGradientButton"; import { projectsRef } from "../../config/firebase"; import useDataFromRef from "../../hooks/useDataFromRef"; +import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails"; import Page from "../../layouts/Page"; import { Routes } from "../../navigation"; import { navigate } from "../../navigation/NavigationService"; @@ -21,10 +22,9 @@ import { FONT_FAMILY } from "../../styles/Fonts"; import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; import PlaybacksCard from "./components/PlaybacksCard"; import SongCard from "./components/SongCard"; - const HitParade = () => { const [selected, setSelected] = useState("Chansons"); - + const navigateToMusicDetails = useNavigateToMusicDetails(); const { data: topSongs } = useDataFromRef({ ref: projectsRef.where("views", ">", 0).orderBy("views", "desc").limit(10), simpleRef: false, @@ -74,7 +74,12 @@ const HitParade = () => { title={item?.title || "Sans titre"} artist={item?.userName} coverUrl={item?.coverUrl || null} - onPress={() => navigate(Routes.MusicDetails, { projectId: item.id })} + onPress={() => + navigateToMusicDetails({ + projectId: item.id, + songUrl: item?.songUrl, + }) + } /> )} /> @@ -118,7 +123,10 @@ const HitParade = () => { artist={"MusicLand"} coverUrl={item?.coverUrl || null} onPress={() => - navigate(Routes.MusicDetails, { projectId: item.id }) + navigateToMusicDetails({ + projectId: item.id, + songUrl: item?.songUrl, + }) } /> ))} @@ -128,18 +136,21 @@ const HitParade = () => { {songsCol2.length > 0 && ( {songsCol2.map((item, idx) => ( - - navigate(Routes.MusicDetails, { projectId: item.id }) - } - /> - ))} - + + navigateToMusicDetails({ + projectId: item.id, + songUrl: item?.songUrl, + }) + } + /> + ))} + )} diff --git a/src/screens/Library/AllMyList.js b/src/screens/Library/AllMyList.js index 8a2ac93..a533935 100644 --- a/src/screens/Library/AllMyList.js +++ b/src/screens/Library/AllMyList.js @@ -6,6 +6,7 @@ import MoreMenu from "../../components/MoreMenu"; import Page from "../../layouts/Page"; import { Routes } from "../../navigation"; import { navigate } from "../../navigation/NavigationService"; +import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails"; import { useUser } from "../../providers/UserDataProvider"; import { gutters } from "../../styles"; import MusicCard from "./components/MusicCard"; @@ -20,6 +21,7 @@ export default function AllMyList() { const { userProjects, userLikedProjects, userPlaybacks, userLikedPlaybacks } = useUser(); + const navigateToMusicDetails = useNavigateToMusicDetails(); const items = (() => { if (scope === "playback") { @@ -45,7 +47,10 @@ export default function AllMyList() { if (scope === "playback") { navigate(Routes.Playbacks, { projectId: item.id }); } else { - navigate(Routes.MusicDetails, { projectId: item.id }); + navigateToMusicDetails({ + projectId: item.id, + songUrl: item?.songUrl, + }); } }; diff --git a/src/screens/Library/AllMyPlaylist.web.js b/src/screens/Library/AllMyPlaylist.web.js index 1895ff5..081ab53 100644 --- a/src/screens/Library/AllMyPlaylist.web.js +++ b/src/screens/Library/AllMyPlaylist.web.js @@ -7,9 +7,8 @@ import MoreMenu from "../../components/MoreMenu"; import { playlistsRef, projectsRef } from "../../config/firebase"; import useDataFromArrayDocId from "../../hooks/useDataFromArrayId"; import useDataFromRef from "../../hooks/useDataFromRef"; +import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails"; import Page from "../../layouts/Page"; -import { Routes } from "../../navigation"; -import { navigate } from "../../navigation/NavigationService"; import { useUser } from "../../providers/UserDataProvider"; import { gutters, Palette, Style } from "../../styles"; import { FONT_FAMILY } from "../../styles/Fonts"; @@ -40,6 +39,7 @@ const AllMyPlaylist = ({ route }) => { const [menuPosition, setMenuPosition] = useState(null); const [showMenu, setShowMenu] = useState(false); const [selectedProjectId, setSelectedProjectId] = useState(null); + const navigateToMusicDetails = useNavigateToMusicDetails(); console.log("musics are : ", musics); return ( { projectId={p?.id} likedBy={p?.likedBy || []} onPress={() => - navigate(Routes.MusicDetails, { projectId: p.id }) + navigateToMusicDetails({ + projectId: p.id, + songUrl: p?.songUrl, + }) } onPressMore={(posTop) => { setSelectedProjectId(p.id); diff --git a/src/screens/Library/Library.js b/src/screens/Library/Library.js index d466edc..9828193 100644 --- a/src/screens/Library/Library.js +++ b/src/screens/Library/Library.js @@ -88,7 +88,7 @@ const Library = () => { {hasBackTracks && } {hasLikedMusic && } {hasMyClips && } - {hasPlaylists && } + {hasLikedPlayback && } {hasLikedClips && } diff --git a/src/screens/Library/PlaylistDetails.js b/src/screens/Library/PlaylistDetails.js index b4a176c..68773ba 100644 --- a/src/screens/Library/PlaylistDetails.js +++ b/src/screens/Library/PlaylistDetails.js @@ -9,8 +9,8 @@ import { background, icons } from "../../assets"; import MoreMenu from "../../components/MoreMenu"; import { playlistsRef, projectsRef } from "../../config/firebase"; import Page from "../../layouts/Page"; -import { Routes } from "../../navigation"; -import { goBack, navigate } from "../../navigation/NavigationService"; +import { goBack } from "../../navigation/NavigationService"; +import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails"; import { gutters } from "../../styles"; import MusicCard from "./components/MusicCard"; @@ -39,6 +39,7 @@ const PlaylistDetails = () => { const [menuPosition, setMenuPosition] = useState(null); const [showMenu, setShowMenu] = useState(false); const [selectedProjectId, setSelectedProjectId] = useState(null); + const navigateToMusicDetails = useNavigateToMusicDetails(); const confirmDelete = () => { SheetManager.show("Delete", { @@ -87,7 +88,12 @@ const PlaylistDetails = () => { imageUri={p?.coverUrl || null} projectId={p?.id} likedBy={p?.likedBy || []} - onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })} + onPress={() => + navigateToMusicDetails({ + projectId: p.id, + songUrl: p?.songUrl, + }) + } onPressMore={(posTop) => { setSelectedProjectId(p.id); setMenuPosition(posTop); diff --git a/src/screens/Library/components/LikedMusic.js b/src/screens/Library/components/LikedMusic.js index 578f12a..f5a6956 100644 --- a/src/screens/Library/components/LikedMusic.js +++ b/src/screens/Library/components/LikedMusic.js @@ -8,6 +8,7 @@ import { } from "react-native"; import { img } from "../../../assets"; import useLayoutType from "../../../hooks/useLayoutType"; +import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails"; import { Routes } from "../../../navigation"; import { navigate } from "../../../navigation/NavigationService"; import { useUser } from "../../../providers/UserDataProvider"; @@ -26,6 +27,7 @@ const LikedMusic = () => { 0, Math.floor((containerWidth - gap * (numColumns - 1)) / numColumns) ); + const navigateToMusicDetails = useNavigateToMusicDetails(); return ( { - navigate(Routes.MusicDetails, { projectId: item.id }) + navigateToMusicDetails({ + projectId: item.id, + songUrl: item?.songUrl, + }) } > {item?.coverUrl ? ( diff --git a/src/screens/Library/components/MyMusic.js b/src/screens/Library/components/MyMusic.js index ddc1867..53121a9 100644 --- a/src/screens/Library/components/MyMusic.js +++ b/src/screens/Library/components/MyMusic.js @@ -4,6 +4,7 @@ import { SheetManager } from "react-native-actions-sheet"; import { useGlobal } from "reactn"; import MoreMenu from "../../../components/MoreMenu"; import { projectsRef } from "../../../config/firebase"; +import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails"; import { Routes } from "../../../navigation"; import { navigate } from "../../../navigation/NavigationService"; import { useUser } from "../../../providers/UserDataProvider"; @@ -17,6 +18,7 @@ const MyMusic = () => { const projects = Array.isArray(userProjects) ? userProjects.slice(0, 3) : []; const [, setTooltip] = useGlobal("_tooltip"); + const navigateToMusicDetails = useNavigateToMusicDetails(); return ( { imageUri={p?.coverUrl || null} projectId={p?.id} likedBy={p?.likedBy || []} - onPress={() => navigate(Routes.MusicDetails, { projectId: p.id })} + onPress={() => + navigateToMusicDetails({ + projectId: p.id, + songUrl: p?.songUrl, + }) + } onPressMore={(posTop) => { setSelectedProjectId(p.id); setMenuPosition(posTop); diff --git a/src/screens/Library/components/SearchResultsList.js b/src/screens/Library/components/SearchResultsList.js index 8d4ce0b..ef8e6a6 100644 --- a/src/screens/Library/components/SearchResultsList.js +++ b/src/screens/Library/components/SearchResultsList.js @@ -3,6 +3,7 @@ import { Pressable, ScrollView, Text, View } from "react-native"; import { Image as ExpoImage } from "expo-image"; import { img } from "../../../assets"; import MoreMenu from "../../../components/MoreMenu"; +import useNavigateToMusicDetails from "../../../hooks/useNavigateToMusicDetails"; import { Routes } from "../../../navigation"; import { navigate } from "../../../navigation/NavigationService"; import { Palette, Style } from "../../../styles"; @@ -42,9 +43,17 @@ const SearchResultsList = ({ const [showMenu, setShowMenu] = useState(false); const [selectedProjectId, setSelectedProjectId] = useState(null); - const handleProjectPress = (projectId) => { - navigate(Routes.MusicDetails, { projectId }); - onResultSelected?.(); + const navigateToMusicDetails = useNavigateToMusicDetails(); + + const handleProjectPress = (project) => { + const didNavigate = navigateToMusicDetails({ + projectId: project?.id, + songUrl: project?.songUrl, + }); + + if (didNavigate) { + onResultSelected?.(); + } }; const handleProfilePress = (userId) => { @@ -87,7 +96,7 @@ const SearchResultsList = ({ imageUri={project?.coverUrl || null} projectId={project?.id} likedBy={project?.likedBy || []} - onPress={() => handleProjectPress(project.id)} + onPress={() => handleProjectPress(project)} onPressMore={(positionTop) => { setSelectedProjectId(project.id); setMenuPosition(positionTop); @@ -138,7 +147,7 @@ const SearchResultsList = ({ imageUri={project?.coverUrl || null} projectId={project?.id} likedBy={project?.likedBy || []} - onPress={() => handleProjectPress(project.id)} + onPress={() => handleProjectPress(project)} onPressMore={(positionTop) => { setSelectedProjectId(project.id); setMenuPosition(positionTop); diff --git a/src/screens/Profile/Profile.js b/src/screens/Profile/Profile.js index 074be09..701c782 100644 --- a/src/screens/Profile/Profile.js +++ b/src/screens/Profile/Profile.js @@ -21,6 +21,7 @@ import PressableScale from "../../components/PressableScale"; import { projectsRef, usersRef } from "../../config/firebase"; import useDataFromRef from "../../hooks/useDataFromRef"; import useLayoutType from "../../hooks/useLayoutType"; +import useNavigateToMusicDetails from "../../hooks/useNavigateToMusicDetails"; import Page from "../../layouts/Page"; import { Routes } from "../../navigation"; import { navigate, push } from "../../navigation/NavigationService"; @@ -53,6 +54,7 @@ const Profile = () => { const [menuPosition, setMenuPosition] = useState(null); const [showMenu, setShowMenu] = useState(false); const [selectedProjectId, setSelectedProjectId] = useState(null); + const navigateToMusicDetails = useNavigateToMusicDetails(); const onPressMenu = (item) => { setSelected(item); }; @@ -134,7 +136,10 @@ const Profile = () => { projectId={item?.id} likedBy={item?.likedBy || []} onPress={() => - navigate(Routes.MusicDetails, { projectId: item.id }) + navigateToMusicDetails({ + projectId: item.id, + songUrl: item?.songUrl, + }) } onPressMore={(posTop) => { setSelectedProjectId(item.id);