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

app layout

Browse Source
This commit is contained in:
leon-morival
2025-09-30 09:58:20 +02:00
parent dd8e8049c4
commit 3dcf5453ca
5 changed files with 153 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Profile/Profile.js
+91 -82
View File
@@ -1,37 +1,37 @@
import { useRoute } from '@react-navigation/native';
import { BlurView } from 'expo-blur';
import { Image as ExpoImage } from 'expo-image';
import React, { useEffect, useMemo, useState } from 'react';
import { useRoute } from "@react-navigation/native";
import { BlurView } from "expo-blur";
import { Image as ExpoImage } from "expo-image";
import React, { useEffect, useMemo, 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, usersRef } from '../../config/firebase';
import useDataFromRef from '../../hooks/useDataFromRef';
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';
} 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, usersRef } from "../../config/firebase";
import useDataFromRef from "../../hooks/useDataFromRef";
import useLayoutType from "../../hooks/useLayoutType";
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 { params } = useRoute();
const [selected, setSelected] = useState('Chansons');
const [selected, setSelected] = useState("Chansons");
const { isWeb } = useLayoutType();
const {
userProjects: selfProjects,
userPlaybacks: selfPlaybacks,
@@ -41,10 +41,10 @@ const Profile = () => {
followUser,
unfollowUser,
} = useUser();
const [currentUID] = useGlobal('currentUID');
const [currentUID] = useGlobal("currentUID");
const targetUserId = params?.userId || currentUID || null;
const isSelf = !!currentUID && targetUserId === currentUID;
const [, setTooltip] = useGlobal('_tooltip');
const [, setTooltip] = useGlobal("_tooltip");
const [userData, setUserData] = useState(null);
const [isFollowing, setIsFollowing] = useState(false);
const [followers, setFollowers] = useState(0);
@@ -82,7 +82,7 @@ const Profile = () => {
const followingQueryRef = useMemo(() => {
try {
return targetUserId
? usersRef.where('followedBy', 'array-contains', targetUserId)
? usersRef.where("followedBy", "array-contains", targetUserId)
: null;
} catch (e) {
return null;
@@ -124,10 +124,10 @@ const Profile = () => {
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<MusicCard
title={item?.title || 'Sans titre'}
title={item?.title || "Sans titre"}
subtitle={
(isSelf ? currentUserData?.userName : userData?.userName) ||
'MusicLand'
"MusicLand"
}
imageUri={item?.coverUrl || null}
projectId={item?.id}
@@ -156,25 +156,25 @@ const Profile = () => {
isSelf
? [
{
label: 'Supprimer',
label: "Supprimer",
onPress: () =>
SheetManager.show('Delete', {
SheetManager.show("Delete", {
payload: {
title: 'Supprimer le projet',
title: "Supprimer le projet",
message:
'Cette action supprimera définitivement ce projet.',
"Cette action supprimera définitivement ce projet.",
onConfirm: async () => {
try {
if (!selectedProjectId) return;
await projectsRef.doc(selectedProjectId).delete();
setTooltip({
type: 'success',
text: 'Projet supprimé',
type: "success",
text: "Projet supprimé",
});
} catch (e) {
setTooltip({
type: 'error',
text: e?.message || 'Suppression impossible',
type: "error",
text: e?.message || "Suppression impossible",
});
}
},
@@ -196,7 +196,8 @@ const Profile = () => {
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
opacity: 0.8,
}}>
}}
>
{text}
</Text>
</View>
@@ -207,8 +208,8 @@ const Profile = () => {
try {
if (!targetUserId || isSelf) return null;
return projectsRef
.where('userId', '==', targetUserId)
.orderBy('updatedAt', 'desc');
.where("userId", "==", targetUserId)
.orderBy("updatedAt", "desc");
} catch (e) {
return null;
}
@@ -228,23 +229,24 @@ const Profile = () => {
return (
<Page
backgroundImg={background.profileBG}
headerType='NAVIGATE'
headerType="NAVIGATE"
hideBackButton={params?.noBack}
contentContainerStyle={{
paddingBottom: gutters * 2,
}}
containerStyle={{
backgroundColor: '#0000004D',
backgroundColor: isWeb ? "transparent" : "#0000004D",
}}
rightComponent={() =>
isSelf ? (
<Pressable onPress={() => SheetManager.show('ProfileSettings')}>
<Pressable onPress={() => SheetManager.show("ProfileSettings")}>
<Image source={icons.more} style={{ ...size({ size: 24 }) }} />
</Pressable>
) : null
}>
}
>
<View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
<View style={{ borderRadius: 20, overflow: 'hidden' }}>
<View style={{ borderRadius: 20, overflow: "hidden" }}>
<BlurView
intensity={20}
style={{
@@ -256,7 +258,7 @@ const Profile = () => {
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
// }
>
<View style={{ alignItems: 'center' }}>
<View style={{ alignItems: "center" }}>
<ExpoImage
source={
(
@@ -271,9 +273,9 @@ const Profile = () => {
}
: img.profile
}
cachePolicy='memory-disk'
priority='high'
contentFit='cover'
cachePolicy="memory-disk"
priority="high"
contentFit="cover"
transition={100}
style={{
...size({ size: 108 }),
@@ -285,13 +287,14 @@ const Profile = () => {
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}>
}}
>
{(isSelf ? currentUserData?.userName : userData?.userName) ||
'Profil'}
"Profil"}
</Text>
</View>
<View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
<View style={{ flex: 1, alignItems: 'center' }}>
<View style={{ flex: 1, alignItems: "center" }}>
<Text style={styles.value}>
{Array.isArray(displayedProjects)
? displayedProjects.length
@@ -300,13 +303,14 @@ const Profile = () => {
<Text style={styles.label}>projets</Text>
</View>
<Pressable
style={{ flex: 1, alignItems: 'center' }}
style={{ flex: 1, alignItems: "center" }}
onPress={() =>
push(Routes.Follows, {
selected: 'Abonnés',
selected: "Abonnés",
...(isSelf ? {} : { userId: targetUserId }),
})
}>
}
>
<Text style={styles.value}>
{isSelf
? currentUserData?.followedBy?.length || 0
@@ -315,13 +319,14 @@ const Profile = () => {
<Text style={styles.label}>abonnés</Text>
</Pressable>
<Pressable
style={{ flex: 1, alignItems: 'center' }}
style={{ flex: 1, alignItems: "center" }}
onPress={() =>
push(Routes.Follows, {
selected: 'Abonnements',
selected: "Abonnements",
...(isSelf ? {} : { userId: targetUserId }),
})
}>
}
>
<Text style={styles.value}>
{isSelf ? followingCount : following}
</Text>
@@ -334,21 +339,23 @@ const Profile = () => {
style={{
height: 36,
borderRadius: 100,
overflow: 'hidden',
backgroundColor: '#FFFFFF22',
alignItems: 'center',
justifyContent: 'center',
width: '80%',
alignSelf: 'center',
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 ? 'Ne plus suivre' : 'Suivre'}
}}
>
{isFollowing ? "Ne plus suivre" : "Suivre"}
</Text>
</View>
</Pressable>
@@ -359,18 +366,20 @@ const Profile = () => {
style={{
...Style.containerRow,
gap: 6,
}}>
}}
>
{/*{["Chansons", "Playbacks", "Clips"].map((item, index) => (*/}
{['Chansons', 'Playbacks'].map((item, index) => (
{["Chansons", "Playbacks"].map((item, index) => (
<Pressable
key={index}
onPress={() => onPressMenu(item)}
style={{ flex: 1 }}>
style={{ flex: 1 }}
>
<BorderGradient
gradientProps={{
colors:
selected === item
? ['#FFFFFF00', '#FFFFFF']
? ["#FFFFFF00", "#FFFFFF"]
: [Palette.tran, Palette.tran],
locations: [0, 1],
start: { x: 0, y: 0 },
@@ -392,22 +401,22 @@ const Profile = () => {
</Pressable>
))}
</View>
{selected === 'Playbacks' && (
{selected === "Playbacks" && (
<MusicListSection
data={displayedPlaybacks}
emptyText='Aucun playback pour le moment'
emptyText="Aucun playback pour le moment"
/>
)}
{selected === 'Chansons' && (
{selected === "Chansons" && (
<MusicListSection
data={displayedProjects}
emptyText='Aucune chanson pour le moment'
emptyText="Aucune chanson pour le moment"
/>
)}
{selected === 'Clips' && (
{selected === "Clips" && (
<View style={{ flex: 1 }}>
<EmptyText text={'Aucun clip pour le moment'} />
<EmptyText text={"Aucun clip pour le moment"} />
</View>
)}
</View>
@@ -437,20 +446,20 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderRadius: 10,
height: 33,
position: 'absolute',
position: "absolute",
zIndex: 1,
width: '100%',
width: "100%",
},
blurContainer: {
height: 33,
zIndex: -1,
borderRadius: 10,
overflow: 'hidden',
overflow: "hidden",
backgroundColor: Palette.glass,
},
blurView: {
width: '100%',
height: '100%',
width: "100%",
height: "100%",
paddingHorizontal: 10,
...Style.containerCenter,
},