310 lines
9.4 KiB
JavaScript
310 lines
9.4 KiB
JavaScript
import { BlurView } from "expo-blur";
|
|
import { Image as ExpoImage } from "expo-image";
|
|
import React, { useState } from "react";
|
|
import {
|
|
FlatList,
|
|
Image,
|
|
Platform,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} from "react-native";
|
|
import { SheetManager } from "react-native-actions-sheet";
|
|
import { responsiveHeight } from "react-native-responsive-dimensions";
|
|
import { useGlobal } from "reactn";
|
|
import { background, icons, img } from "../../assets";
|
|
import BorderGradient from "../../components/BorderGradient/BorderGradient";
|
|
import MoreMenu from "../../components/MoreMenu";
|
|
import { projectsRef } from "../../config/firebase";
|
|
import Page from "../../layouts/Page";
|
|
import { Routes } from "../../navigation";
|
|
import { navigate, push } from "../../navigation/NavigationService";
|
|
import { useUser } from "../../providers/UserDataProvider";
|
|
import { Palette } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import Style, { gutters, size } from "../../styles/Style";
|
|
import MusicCard from "../Library/components/MusicCard";
|
|
|
|
const Profile = () => {
|
|
const [selected, setSelected] = useState("Chansons");
|
|
const { userProjects, userPlaybacks, followingCount, currentUserData } =
|
|
useUser();
|
|
const [, setTooltip] = useGlobal("_tooltip");
|
|
const [menuTop, setMenuTop] = useState(0);
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
const [selectedProjectId, setSelectedProjectId] = useState(null);
|
|
const onPressMenu = (item) => {
|
|
setSelected(item);
|
|
};
|
|
|
|
// Composant factorisé pour afficher la liste de musiques
|
|
const MusicListSection = ({ data, emptyText }) => (
|
|
<ScrollView style={{ flex: 1 }}>
|
|
{Array.isArray(data) && data.length > 0 ? (
|
|
<FlatList
|
|
data={data}
|
|
contentContainerStyle={{
|
|
gap: 10,
|
|
}}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<MusicCard
|
|
title={item?.title || "Sans titre"}
|
|
subtitle={currentUserData?.userName || "MusicLand"}
|
|
imageUri={item?.coverUrl || null}
|
|
projectId={item?.id}
|
|
likedBy={item?.likedBy || []}
|
|
onPress={() =>
|
|
navigate(Routes.MusicDetails, { projectId: item.id })
|
|
}
|
|
onPressMore={(posTop) => {
|
|
setSelectedProjectId(item.id);
|
|
setMenuTop(posTop);
|
|
setShowMenu((prev) => !prev || posTop !== menuTop);
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
) : (
|
|
<EmptyText text={emptyText} />
|
|
)}
|
|
<MoreMenu
|
|
visible={showMenu}
|
|
top={menuTop}
|
|
onClose={() => setShowMenu(false)}
|
|
inPlaylist={false}
|
|
projectId={selectedProjectId}
|
|
extraItems={[
|
|
{
|
|
label: "Supprimer",
|
|
onPress: () =>
|
|
SheetManager.show("Delete", {
|
|
payload: {
|
|
title: "Supprimer le projet",
|
|
message: "Cette action supprimera définitivement ce projet.",
|
|
onConfirm: 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",
|
|
});
|
|
}
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
]}
|
|
/>
|
|
</ScrollView>
|
|
);
|
|
|
|
const EmptyText = ({ text }) => (
|
|
<View style={{ flex: 1, ...Style.containerCenter, paddingTop: 20 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
opacity: 0.8,
|
|
}}
|
|
>
|
|
{text}
|
|
</Text>
|
|
</View>
|
|
);
|
|
|
|
return (
|
|
<Page
|
|
backgroundImg={background.profileBG}
|
|
headerType="NAVIGATE"
|
|
hideBackButton
|
|
contentContainerStyle={{
|
|
paddingBottom: gutters * 2,
|
|
}}
|
|
containerStyle={{
|
|
backgroundColor: "#0000004D",
|
|
}}
|
|
rightComponent={() => (
|
|
<Pressable onPress={() => SheetManager.show("ProfileSettings")}>
|
|
<Image source={icons.more} style={{ ...size({ size: 24 }) }} />
|
|
</Pressable>
|
|
)}
|
|
>
|
|
<View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
|
|
<View style={{ borderRadius: 20, overflow: "hidden" }}>
|
|
<BlurView
|
|
intensity={20}
|
|
style={{
|
|
paddingVertical: 14,
|
|
backgroundColor: Palette.glass,
|
|
paddingHorizontal: 20,
|
|
}}
|
|
experimentalBlurMethod={
|
|
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
|
}
|
|
>
|
|
<View style={{ alignItems: "center" }}>
|
|
<ExpoImage
|
|
source={
|
|
currentUserData?.profilePictureURL
|
|
? {
|
|
uri: currentUserData?.profilePictureURL,
|
|
}
|
|
: img.profile
|
|
}
|
|
cachePolicy="memory-disk"
|
|
priority="high"
|
|
contentFit="cover"
|
|
transition={100}
|
|
style={{
|
|
...size({ size: 108 }),
|
|
borderRadius: 100,
|
|
}}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontSize: 22,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
}}
|
|
>
|
|
{currentUserData?.userName}
|
|
</Text>
|
|
</View>
|
|
<View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
|
|
<View style={{ flex: 1, alignItems: "center" }}>
|
|
<Text style={styles.value}>{userProjects?.length || 0}</Text>
|
|
<Text style={styles.label}>projets</Text>
|
|
</View>
|
|
<Pressable
|
|
style={{ flex: 1, alignItems: "center" }}
|
|
onPress={() => push(Routes.Follows, { selected: "Abonnés" })}
|
|
>
|
|
<Text style={styles.value}>
|
|
{currentUserData?.followedBy?.length || 0}
|
|
</Text>
|
|
<Text style={styles.label}>abonnés</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
style={{ flex: 1, alignItems: "center" }}
|
|
onPress={() =>
|
|
push(Routes.Follows, { selected: "Abonnements" })
|
|
}
|
|
>
|
|
<Text style={styles.value}>{followingCount}</Text>
|
|
<Text style={styles.label}>abonnements</Text>
|
|
</Pressable>
|
|
</View>
|
|
</BlurView>
|
|
</View>
|
|
<View
|
|
style={{
|
|
...Style.containerRow,
|
|
gap: 6,
|
|
}}
|
|
>
|
|
{["Chansons", "Playbacks", "Clips"].map((item, index) => (
|
|
<Pressable
|
|
key={index}
|
|
onPress={() => onPressMenu(item)}
|
|
style={{ flex: 1 }}
|
|
>
|
|
<BorderGradient
|
|
gradientProps={{
|
|
colors:
|
|
selected === item
|
|
? ["#FFFFFF00", "#FFFFFF"]
|
|
: [Palette.tran, Palette.tran],
|
|
locations: [0, 1],
|
|
start: { x: 0, y: 0 },
|
|
end: { x: 1, y: 0 },
|
|
}}
|
|
style={styles.borderGradient}
|
|
/>
|
|
<View style={styles.blurContainer}>
|
|
<BlurView
|
|
intensity={20}
|
|
style={styles.blurView}
|
|
experimentalBlurMethod={
|
|
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
|
}
|
|
>
|
|
<Text style={styles.menu}>{item}</Text>
|
|
</BlurView>
|
|
</View>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
{selected === "Playbacks" && (
|
|
<MusicàListàSection
|
|
data={userPlaybacks}
|
|
emptyText="Aucun playback pour le moment"
|
|
/>
|
|
)}
|
|
{selected === "Chansons" && (
|
|
<MusicListSection
|
|
data={userProjects}
|
|
emptyText="Aucune chanson pour le moment"
|
|
/>
|
|
)}
|
|
|
|
{selected === "Clips" && (
|
|
<View style={{ flex: 1 }}>
|
|
<EmptyText text={"Aucun clip pour le moment"} />
|
|
</View>
|
|
)}
|
|
</View>
|
|
</Page>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|
|
|
|
const styles = StyleSheet.create({
|
|
value: {
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
},
|
|
label: {
|
|
fontSize: 12,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
},
|
|
menu: {
|
|
fontSize: 12,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
},
|
|
borderGradient: {
|
|
borderWidth: 1,
|
|
borderRadius: 10,
|
|
height: 33,
|
|
position: "absolute",
|
|
zIndex: 1,
|
|
width: "100%",
|
|
},
|
|
blurContainer: {
|
|
height: 33,
|
|
zIndex: -1,
|
|
borderRadius: 10,
|
|
overflow: "hidden",
|
|
backgroundColor: Palette.glass,
|
|
},
|
|
blurView: {
|
|
width: "100%",
|
|
height: "100%",
|
|
paddingHorizontal: 10,
|
|
...Style.containerCenter,
|
|
},
|
|
});
|