Thomas Demirdjian
653 lines
20 KiB
JavaScript
653 lines
20 KiB
JavaScript
import { useRoute } from "@react-navigation/native";
|
|
import { BlurView } from "expo-blur";
|
|
import * as ImagePicker from "expo-image-picker";
|
|
import React, { useEffect, useMemo, useState } from "react";
|
|
import {
|
|
ActivityIndicator,
|
|
FlatList,
|
|
Image,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
} from "react-native";
|
|
import { SheetManager } from "react-native-actions-sheet";
|
|
import { Feather } from "@expo/vector-icons";
|
|
import { responsiveHeight } from "react-native-responsive-dimensions";
|
|
import { useGlobal } from "reactn";
|
|
import { background, icons } from "../../assets";
|
|
import BorderGradient from "../../components/BorderGradient/BorderGradient";
|
|
import GradientButton from "../../components/GradientButton";
|
|
import MoreMenu from "../../components/MoreMenu";
|
|
import PressableScale from "../../components/PressableScale";
|
|
import ProfilePicture from "../../components/ProfilePicture";
|
|
import firebase, {
|
|
projectsRef,
|
|
serverTimestamp,
|
|
usersRef,
|
|
} from "../../config/firebase";
|
|
import loaderMessages from "../../config/loaderMessages";
|
|
import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
|
|
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";
|
|
import { useUser } from "../../providers/UserDataProvider";
|
|
import { Palette } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import Style, { gutters, size } from "../../styles/Style";
|
|
import { getArtistDisplayName } from "../../utils/artistName";
|
|
import { getProjectLikes, LIKE_TARGET } from "../../utils/likes";
|
|
import MusicCard from "../Library/components/MusicCard";
|
|
const Profile = () => {
|
|
const { params } = useRoute();
|
|
const [selected, setSelected] = useState("Chansons");
|
|
const { isWeb } = useLayoutType();
|
|
const {
|
|
userProjects: selfProjects,
|
|
userPlaybacks: selfPlaybacks,
|
|
followingCount,
|
|
currentUserData,
|
|
getUserByUid,
|
|
followUser,
|
|
unfollowUser,
|
|
} = useUser();
|
|
const [currentUID] = useGlobal("currentUID");
|
|
const targetUserId = params?.userId || currentUID || null;
|
|
const isSelf = !!currentUID && targetUserId === currentUID;
|
|
const [, setTooltip] = useGlobal("_tooltip");
|
|
const [userData, setUserData] = useState(null);
|
|
const [isFollowing, setIsFollowing] = useState(false);
|
|
const [followers, setFollowers] = useState(0);
|
|
const [following, setFollowing] = useState(0);
|
|
const [menuPosition, setMenuPosition] = useState(null);
|
|
const [showMenu, setShowMenu] = useState(false);
|
|
const [selectedProjectId, setSelectedProjectId] = useState(null);
|
|
const [updatingPhoto, setUpdatingPhoto] = useState(false);
|
|
const [webUploadMessage, setWebUploadMessage] = useState("");
|
|
const selfDisplayName = useMemo(
|
|
() => getArtistDisplayName(currentUserData, "MusicLand"),
|
|
[currentUserData]
|
|
);
|
|
const targetDisplayName = useMemo(
|
|
() => getArtistDisplayName(userData, "MusicLand"),
|
|
[userData]
|
|
);
|
|
const profileTitle = useMemo(
|
|
() => getArtistDisplayName(isSelf ? currentUserData : userData, "Profil"),
|
|
[currentUserData, isSelf, userData]
|
|
);
|
|
const navigateToMusicDetails = useNavigateToMusicDetails();
|
|
const onPressMenu = (item) => {
|
|
setSelected(item);
|
|
};
|
|
const handleOpenSettings = () => {
|
|
navigate(Routes.Settings);
|
|
};
|
|
|
|
// Chargement des données utilisateur si on consulte un autre profil
|
|
useEffect(() => {
|
|
const fetch = async () => {
|
|
if (!targetUserId) return;
|
|
if (isSelf) {
|
|
setUserData(currentUserData || null);
|
|
setFollowers(
|
|
Array.isArray(currentUserData?.followedBy)
|
|
? currentUserData.followedBy.length
|
|
: 0
|
|
);
|
|
return;
|
|
}
|
|
const data = await getUserByUid(targetUserId);
|
|
setUserData(data || null);
|
|
const list = Array.isArray(data?.followedBy) ? data.followedBy : [];
|
|
setFollowers(list.length);
|
|
setIsFollowing(currentUID ? list.includes(currentUID) : false);
|
|
};
|
|
fetch();
|
|
}, [targetUserId, isSelf, currentUserData?.followedBy?.length || 0]);
|
|
|
|
// Live following count pour l'utilisateur consulté (autre que soi)
|
|
const followingQueryRef = useMemo(() => {
|
|
try {
|
|
return targetUserId
|
|
? usersRef.where("followedBy", "array-contains", targetUserId)
|
|
: null;
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}, [targetUserId]);
|
|
|
|
useDataFromRef({
|
|
ref: followingQueryRef,
|
|
simpleRef: false,
|
|
listener: true,
|
|
condition: !!followingQueryRef && !isSelf,
|
|
refreshArray: [targetUserId],
|
|
onUpdate: (list) => setFollowing(Array.isArray(list) ? list.length : 0),
|
|
});
|
|
|
|
const handleFollowUser = async () => {
|
|
if (!currentUID || !targetUserId || isSelf) return;
|
|
if (isFollowing) {
|
|
await unfollowUser(targetUserId);
|
|
setIsFollowing(false);
|
|
setFollowers((v) => Math.max(0, (v || 0) - 1));
|
|
} else {
|
|
await followUser(targetUserId);
|
|
setIsFollowing(true);
|
|
setFollowers((v) => (v || 0) + 1);
|
|
}
|
|
};
|
|
|
|
const onChangeProfilePicture = async (message = "") => {
|
|
if (!isSelf || updatingPhoto) return;
|
|
|
|
try {
|
|
setUpdatingPhoto(true);
|
|
setWebUploadMessage(isWeb && message ? message : "");
|
|
const uid = currentUID;
|
|
if (!uid) return;
|
|
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
|
allowsEditing: true,
|
|
aspect: [4, 4],
|
|
quality: 1,
|
|
});
|
|
|
|
const pickedUri = result?.assets?.[0]?.uri || null;
|
|
if (!pickedUri) return;
|
|
|
|
const { resultURI = null } = await uploadFileToFirebase({
|
|
uri: pickedUri,
|
|
path: `users/${uid}/profilePicture.png`,
|
|
});
|
|
|
|
if (!resultURI) {
|
|
throw new Error("Téléversement de l'image impossible");
|
|
}
|
|
|
|
await usersRef.doc(uid).set(
|
|
{
|
|
profilePictureURL: resultURI,
|
|
updatedAt: serverTimestamp(),
|
|
},
|
|
{ merge: true }
|
|
);
|
|
|
|
const authUser = firebase.auth().currentUser;
|
|
if (authUser) {
|
|
await authUser.updateProfile({ photoURL: resultURI });
|
|
}
|
|
|
|
setTooltip({ text: "Photo de profil mise à jour", type: "success" });
|
|
} catch (e) {
|
|
setTooltip({
|
|
text: e?.message || "Erreur changement photo de profil",
|
|
type: "error",
|
|
});
|
|
} finally {
|
|
setUpdatingPhoto(false);
|
|
setWebUploadMessage("");
|
|
}
|
|
};
|
|
|
|
// Composant factorisé pour afficher la liste de musiques
|
|
const MusicListSection = ({
|
|
data,
|
|
emptyText,
|
|
likeTarget = LIKE_TARGET.SONG,
|
|
}) => (
|
|
<ScrollView style={{ flex: 1, marginBottom: 70 }}>
|
|
{Array.isArray(data) && data.length > 0 ? (
|
|
<FlatList
|
|
data={data}
|
|
contentContainerStyle={{
|
|
gap: 10,
|
|
marginBottom: 80,
|
|
}}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<MusicCard
|
|
title={item?.title || "Sans titre"}
|
|
subtitle={isSelf ? selfDisplayName : targetDisplayName}
|
|
imageUri={item?.coverUrl || null}
|
|
projectId={item?.id}
|
|
likedBy={getProjectLikes(item, likeTarget)}
|
|
likeTarget={likeTarget}
|
|
onPress={() =>
|
|
navigateToMusicDetails({
|
|
projectId: item.id,
|
|
songUrl: item?.songUrl,
|
|
project: item,
|
|
queueProjects: data,
|
|
queueSource: {
|
|
id: isSelf ? "profile-self" : "profile-other",
|
|
type: "collection",
|
|
name: isSelf
|
|
? "Mes musiques"
|
|
: targetDisplayName || "Profil",
|
|
},
|
|
})
|
|
}
|
|
onPressMore={(posTop) => {
|
|
setSelectedProjectId(item.id);
|
|
setMenuPosition(posTop);
|
|
setShowMenu(
|
|
(prev) => !prev || posTop?.top !== (menuPosition?.top ?? null)
|
|
);
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
) : (
|
|
<EmptyText text={emptyText} />
|
|
)}
|
|
<MoreMenu
|
|
visible={showMenu}
|
|
top={menuPosition?.top ?? 0}
|
|
position={menuPosition}
|
|
onClose={() => setShowMenu(false)}
|
|
inPlaylist={false}
|
|
projectId={selectedProjectId}
|
|
extraItems={
|
|
isSelf
|
|
? [
|
|
{
|
|
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>
|
|
);
|
|
|
|
// Données projets/profils selon si c'est soi ou un autre utilisateur
|
|
const projectsQueryRef = useMemo(() => {
|
|
try {
|
|
if (!targetUserId || isSelf) return null;
|
|
return projectsRef
|
|
.where("userId", "==", targetUserId)
|
|
.orderBy("updatedAt", "desc");
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}, [targetUserId, isSelf]);
|
|
|
|
const { data: otherUserProjects = [] } = useDataFromRef({
|
|
ref: projectsQueryRef,
|
|
simpleRef: false,
|
|
listener: true,
|
|
condition: !!projectsQueryRef,
|
|
refreshArray: [targetUserId],
|
|
});
|
|
|
|
const displayedProjects = isSelf ? selfProjects : otherUserProjects;
|
|
const displayedPlaybacksSource = isSelf ? selfPlaybacks : otherUserProjects;
|
|
const displayedPlaybacks = Array.isArray(displayedPlaybacksSource)
|
|
? displayedPlaybacksSource.filter((project) => project?.playbackUrl)
|
|
: [];
|
|
|
|
return (
|
|
<Page
|
|
backgroundImg={isWeb ? background.profileWebBG : background.profileWebBG}
|
|
headerType="NAVIGATE"
|
|
hideBackButton={params?.noBack}
|
|
contentContainerStyle={{
|
|
paddingBottom: gutters * 2,
|
|
}}
|
|
containerStyle={{
|
|
backgroundColor: isWeb ? "transparent" : "#0000004D",
|
|
}}
|
|
rightComponent={() =>
|
|
!isWeb && isSelf ? (
|
|
<PressableScale onPress={handleOpenSettings}>
|
|
<Feather name="settings" size={24} color={Palette.white} />
|
|
</PressableScale>
|
|
) : null
|
|
}
|
|
>
|
|
<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"
|
|
// }
|
|
>
|
|
{isWeb && isSelf && (
|
|
<PressableScale
|
|
style={{
|
|
zIndex: 2,
|
|
position: "absolute",
|
|
right: 10,
|
|
top: 10,
|
|
}}
|
|
onPress={handleOpenSettings}
|
|
>
|
|
<Feather name="settings" size={24} color={Palette.white} />
|
|
</PressableScale>
|
|
)}
|
|
|
|
<View style={{ alignItems: "center" }}>
|
|
<View style={styles.avatarWrapper}>
|
|
<ProfilePicture
|
|
uri={
|
|
isSelf
|
|
? currentUserData?.profilePictureURL || null
|
|
: userData?.profilePictureURL || null
|
|
}
|
|
size={108}
|
|
imageProps={{ priority: "high" }}
|
|
/>
|
|
{isSelf && (
|
|
<Pressable
|
|
style={styles.editAvatarButton}
|
|
onPress={() =>
|
|
onChangeProfilePicture(
|
|
loaderMessages.profilePhotoUploadWeb
|
|
)
|
|
}
|
|
disabled={updatingPhoto}
|
|
hitSlop={10}
|
|
>
|
|
<View style={styles.editAvatarBackground}>
|
|
{updatingPhoto ? (
|
|
<ActivityIndicator size="small" color={Palette.white} />
|
|
) : (
|
|
<Image
|
|
source={icons.edit}
|
|
style={styles.editAvatarIcon}
|
|
resizeMode="contain"
|
|
/>
|
|
)}
|
|
</View>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
{isWeb && updatingPhoto && webUploadMessage ? (
|
|
<Text style={styles.webLoaderText}>{webUploadMessage}</Text>
|
|
) : null}
|
|
<Text
|
|
style={{
|
|
fontSize: 22,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
}}
|
|
>
|
|
{profileTitle}
|
|
</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
...Style.containerRow,
|
|
gap: 10,
|
|
marginTop: 10,
|
|
paddingHorizontal: isWeb && 30,
|
|
}}
|
|
>
|
|
<View style={{ flex: 1, alignItems: "center" }}>
|
|
<Text style={styles.value}>
|
|
{Array.isArray(displayedProjects)
|
|
? displayedProjects.length
|
|
: 0}
|
|
</Text>
|
|
<Text style={styles.label}>projets</Text>
|
|
</View>
|
|
<Pressable
|
|
style={{ flex: 1, alignItems: "center" }}
|
|
onPress={() =>
|
|
push(Routes.Follows, {
|
|
selected: "Abonnés",
|
|
...(isSelf ? {} : { userId: targetUserId }),
|
|
})
|
|
}
|
|
>
|
|
<Text style={styles.value}>
|
|
{isSelf
|
|
? currentUserData?.followedBy?.length || 0
|
|
: followers}
|
|
</Text>
|
|
<Text style={styles.label}>abonnés</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
style={{ flex: 1, alignItems: "center" }}
|
|
onPress={() =>
|
|
push(Routes.Follows, {
|
|
selected: "Abonnements",
|
|
...(isSelf ? {} : { userId: targetUserId }),
|
|
})
|
|
}
|
|
>
|
|
<Text style={styles.value}>
|
|
{isSelf ? followingCount : following}
|
|
</Text>
|
|
<Text style={styles.label}>abonnements</Text>
|
|
</Pressable>
|
|
</View>
|
|
{isSelf ? (
|
|
<GradientButton
|
|
title="Découvrir les abonnements"
|
|
size="large"
|
|
onPress={() => push(Routes.Payments)}
|
|
containerStyle={{
|
|
marginTop: 18,
|
|
width: "80%",
|
|
alignSelf: "center",
|
|
}}
|
|
gradientStyle={{ width: "100%" }}
|
|
/>
|
|
) : null}
|
|
{!isSelf && (
|
|
<Pressable onPress={handleFollowUser}>
|
|
<View
|
|
style={{
|
|
height: 36,
|
|
borderRadius: 100,
|
|
overflow: "hidden",
|
|
backgroundColor: "#FFFFFF22",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: "80%",
|
|
alignSelf: "center",
|
|
marginTop: 18,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
}}
|
|
>
|
|
{isFollowing ? "Suivi(e)" : "Suivre"}
|
|
</Text>
|
|
</View>
|
|
</Pressable>
|
|
)}
|
|
</BlurView>
|
|
</View>
|
|
<View
|
|
style={{
|
|
...Style.containerRow,
|
|
gap: 6,
|
|
}}
|
|
>
|
|
{/*{["Chansons", "Playbacks", "Clips"].map((item, index) => (*/}
|
|
{["Chansons", "Playbacks"].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" && (
|
|
<MusicListSection
|
|
data={displayedPlaybacks}
|
|
emptyText="Aucun playback pour le moment"
|
|
likeTarget={LIKE_TARGET.PLAYBACK}
|
|
/>
|
|
)}
|
|
{selected === "Chansons" && (
|
|
<MusicListSection
|
|
data={displayedProjects}
|
|
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,
|
|
},
|
|
avatarWrapper: {
|
|
position: "relative",
|
|
...size({ size: 108 }),
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
editAvatarButton: {
|
|
position: "absolute",
|
|
bottom: 4,
|
|
right: 4,
|
|
},
|
|
editAvatarBackground: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
backgroundColor: Palette.transparentBlack,
|
|
borderWidth: 1,
|
|
borderColor: Palette.white,
|
|
...Style.containerCenter,
|
|
},
|
|
editAvatarIcon: {
|
|
...size({ size: 16 }),
|
|
tintColor: Palette.white,
|
|
},
|
|
webLoaderText: {
|
|
marginTop: 8,
|
|
color: Palette.white,
|
|
fontSize: 12,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
textAlign: "center",
|
|
opacity: 0.85,
|
|
},
|
|
});
|