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/layouts/AppLayout.js
+28 -27
View File
@@ -1,52 +1,51 @@
import { View, Image } from 'react-native';
import { useGlobal } from 'reactn';
import { Motion } from '@legendapp/motion';
import { Image, View } from "react-native";
import { useGlobal } from "reactn";
import useLayoutType from '../hooks/useLayoutType';
import useLayoutType from "../hooks/useLayoutType";
import Home from '../screens/Home';
import { Palette, Style } from '../styles';
import { background as backgrounds } from '../assets';
import { background as backgrounds } from "../assets";
import { Style } from "../styles";
export default ({ currentUID = null, children }) => {
const { isWeb = false } = useLayoutType();
// Web: full-screen background with a centered content area (30% width)
const [webBackgroundImg] = useGlobal('webBackgroundImg');
const [webBackgroundImg] = useGlobal("webBackgroundImg");
if (isWeb) {
return (
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
minHeight: '100svh',
position: 'relative',
}}>
alignItems: "center",
justifyContent: "center",
minHeight: "100svh",
position: "relative",
}}
>
{/* Full-viewport background for web */}
<Image
source={webBackgroundImg || backgrounds.homeBG}
resizeMode='cover'
resizeMode="cover"
style={{
position: 'absolute',
position: "absolute",
top: 0,
left: 0,
width: '100%',
height: '100%',
width: "100%",
height: "100%",
}}
/>
{/* Centered content column (phone-like width) */}
<View
style={{
width: '30%',
width: isWeb ? "60%" : "30%",
minWidth: 360,
maxWidth: 520,
height: '100svh',
backgroundColor: 'transparent',
}}>
maxWidth: isWeb ? 800 : 520,
height: "100svh",
backgroundColor: "transparent",
}}
>
<View style={{ flex: 1 }}>{children}</View>
</View>
</View>
@@ -59,17 +58,19 @@ export default ({ currentUID = null, children }) => {
<View
style={{
flex: 1,
flexDirection: 'row-reverse',
}}>
flexDirection: "row-reverse",
}}
>
<View
style={{
flex: 2,
position: 'relative',
position: "relative",
...Style.defaultBorder,
borderTopWidth: 0,
borderBottomWidth: 0,
...sharedPanelStyle,
}}>
}}
>
{children}
</View>
</View>
src/layouts/Page.js
+27 -27
View File
@@ -1,21 +1,19 @@
/* eslint-disable react/display-name */
import React, { useState, useEffect } from 'reactn';
import { setGlobal } from 'reactn';
import { Image, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Motion } from '@legendapp/motion';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { Image, View } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { SafeAreaView } from "react-native-safe-area-context";
import React, { setGlobal, useEffect, useState } from "reactn";
import { responsiveHeight } from '../actions/responsiveSizes.js';
import { responsiveHeight } from "../actions/responsiveSizes.js";
import { Fonts, gutters } from '../styles';
import { gutters } from "../styles";
import BaseHeader from '../components/BaseHeader';
import NavigateHeader from '../components/NavigateHeader';
import BaseHeader from "../components/BaseHeader";
import NavigateHeader from "../components/NavigateHeader";
import { isDesktop, isWeb } from '../hooks/useLayoutType.js';
import { useUserData } from '../providers/UserDataProvider.js';
import { background } from '../assets/index.js';
import { background } from "../assets/index.js";
import { isDesktop, isWeb } from "../hooks/useLayoutType.js";
import { useUserData } from "../providers/UserDataProvider.js";
export default ({
children,
@@ -23,11 +21,11 @@ export default ({
topStickyContent = null,
bottomStickyContent = null,
title = '',
title = "",
rightComponent = null,
containerType = 'SAFE_AREA_VIEW',
headerType = 'BASE',
containerType = "SAFE_AREA_VIEW",
headerType = "BASE",
containerStyle = {},
headerStyle = {},
@@ -45,7 +43,7 @@ export default ({
const [scrollPosition, setScrollPosition] = useState(0);
const PageContainer =
containerType === 'SAFE_AREA_VIEW' ? SafeAreaView : View;
containerType === "SAFE_AREA_VIEW" ? SafeAreaView : View;
const ContentContainer = scrollEnabled ? KeyboardAwareScrollView : View;
@@ -68,24 +66,25 @@ export default ({
{!isWeb && (
<Image
source={backgroundImg}
style={{ width: '100%', height: '100%', position: 'absolute' }}
style={{ width: "100%", height: "100%", position: "absolute" }}
/>
)}
<PageContainer
{...(containerType === 'SAFE_AREA_VIEW' ? { edges: ['top'] } : {})}
{...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}
style={{
height: '100%',
height: "100%",
paddingTop: isWeb ? gutters / 2 : 0,
padding: gutters,
paddingBottom: 0,
...(isWeb ? { maxHeight: '100vh', width: '100%' } : {}),
...(isWeb ? { maxHeight: "100vh", width: "100%" } : {}),
...(!currentUID && isDesktop
? { maxWidth: 500, alignSelf: 'center' }
? { maxWidth: 500, alignSelf: "center" }
: {}),
...containerStyle,
}}>
{headerType !== 'NONE' ? (
headerType === 'BASE' ? (
}}
>
{headerType !== "NONE" ? (
headerType === "BASE" ? (
<BaseHeader containerStyle={{ ...headerStyle }} />
) : (
<NavigateHeader
@@ -109,9 +108,10 @@ export default ({
scrollEventThrottle: 80,
showsVerticalScrollIndicator: false,
contentContainerStyle: { paddingBottom: responsiveHeight(55) },
keyboardDismissMode: 'on-drag',
keyboardDismissMode: "on-drag",
}
: {})}>
: {})}
>
{children}
</ContentContainer>
</PageContainer>
src/screens/HitParade/HitParade.js
+2 -5
View File
@@ -23,9 +23,6 @@ const HitParade = () => {
condition: true,
});
const { data: topPlaybacks } = useDataFromRef({
// Firestore n'autorise pas 2 inégalités (>, <, >=, <=, !=) sur des champs différents.
// On ne garde qu'une inégalité côté requête (views > 0) et on filtre ensuite côté client.
// On surdimensionne le limit pour s'assurer d'obtenir 10 playbacks après filtrage.
ref: projectsRef.where("views", ">", 0).orderBy("views", "desc").limit(50),
format: (docs) => docs.filter((d) => d?.playbackUrl != null).slice(0, 10),
simpleRef: false,
@@ -76,7 +73,7 @@ const HitParade = () => {
style={{
...Style.containerRow,
justifyContent: "space-between",
gap: "10%",
// gap: "5%",
width: "auto",
}}
>
@@ -88,7 +85,7 @@ const HitParade = () => {
onPress={() => setSelected(item)}
tint={selected === item ? "light" : "dark"}
containerStyle={{
width: "50%",
width: "47%",
}}
titleStyle={{
fontSize: 16,
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,
},