leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

music options

Browse Source
This commit is contained in:
leon-morival
2025-08-29 12:08:46 +02:00
parent 023177ea22
commit 20b132f5ab
11 changed files with 276 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Library/AllMyLikedMusic.js
+12 -58
View File
@@ -1,8 +1,6 @@
import { BlurView } from "expo-blur";
import React, { useState } 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 { View } from "react-native";
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) {
if (posTop === top) {
setShowMenu(false);
} else {
setShowMenu(false);
setTimeout(() => {
setShowMenu(true);
}, 300);
}
} else {
setShowMenu(true);
}
setShowMenu((prev) => !prev || posTop !== top);
}}
/>
))}
{showMenu && (
<Animated.View
entering={FadeIn.duration(300).easing(Easing.ease)}
exiting={FadeOut.duration(300).easing(Easing.ease)}
style={{
position: "absolute",
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>
)}
<MoreMenu
visible={showMenu}
top={top}
onClose={() => setShowMenu(false)}
inPlaylist={false}
projectId={selectedProjectId}
/>
</View>
</View>
</Page>
src/screens/Library/PlaylistDetails.js
+20 -3
View File
@@ -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
+16
View File
@@ -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
+1 -1
View File
@@ -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
+17 -2
View File
@@ -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
+38 -85
View File
@@ -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,96 +202,48 @@ const Profile = () => {
}
onPressMore={(posTop) => {
setSelectedProjectId(item.id);
if (showMenu) {
if (posTop === menuTop) {
setShowMenu(false);
} else {
setShowMenu(false);
setTimeout(() => {
setMenuTop(posTop);
setShowMenu(true);
}, 200);
}
} else {
setMenuTop(posTop);
setShowMenu(true);
}
setMenuTop(posTop);
setShowMenu((prev) => !prev || posTop !== menuTop);
}}
/>
)}
/>
{showMenu && (
<Animated.View
entering={FadeIn.duration(200).easing(Easing.ease)}
exiting={FadeOut.duration(200).easing(Easing.ease)}
style={{ position: "absolute", right: 0, top: menuTop, zIndex: 2 }}
>
<BlurView
intensity={20}
style={{
paddingHorizontal: 12,
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.",
[
{ text: "Annuler", style: "cancel", onPress: () => {} },
{
text: "Supprimer",
onPress: async () => {
try {
if (!selectedProjectId) return;
await projectsRef.doc(selectedProjectId).delete();
setTooltip({ type: "success", text: "Projet supprimé" });
} catch (e) {
setTooltip({
type: "error",
text: e?.message || "Suppression impossible",
});
}
},
<MoreMenu
visible={showMenu}
top={menuTop}
onClose={() => setShowMenu(false)}
inPlaylist={false}
projectId={selectedProjectId}
extraItems={[
{
label: "Supprimer",
onPress: () =>
alert(
"Confirmer la suppression",
"Cette action supprimera définitivement ce projet.",
[
{ text: "Annuler", style: "cancel", onPress: () => {} },
{
text: "Supprimer",
onPress: async () => {
try {
if (!selectedProjectId) return;
await projectsRef.doc(selectedProjectId).delete();
setTooltip({ type: "success", text: "Projet supprimé" });
} catch (e) {
setTooltip({
type: "error",
text: e?.message || "Suppression impossible",
});
}
},
],
{ cancelable: true },
);
}}
>
<Text
style={{
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Supprimer
</Text>
</Pressable>
</BlurView>
</Animated.View>
)}
},
],
{ cancelable: true },
),
},
]}
/>
</View>
)}
</View>