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/assets/icons/heart.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 796 B

After

Width:  |  Height:  |  Size: 6.0 KiB

src/assets/icons/heartOutline.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 336 B

After

Width:  |  Height:  |  Size: 1.5 KiB

src/assets/icons/more.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 160 B

After

Width:  |  Height:  |  Size: 330 B

src/components/MoreMenu.js
+151
View File
@@ -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
+21 -1
View File
@@ -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);
}
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
+16 -63
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,58 +202,22 @@ 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);
}
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);
<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.",
@@ -275,22 +240,10 @@ const Profile = () => {
},
],
{ cancelable: true },
);
}}
>
<Text
style={{
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Supprimer
</Text>
</Pressable>
</BlurView>
</Animated.View>
)}
),
},
]}
/>
</View>
)}
</View>