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

start refacto home and fix description

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-09-30 13:37:12 +02:00
parent 3dcf5453ca
commit 306918de00
21 changed files with 1219 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Home.js → src/screens/Home/Home.js
+13 -13
View File
@@ -1,26 +1,26 @@
import { View, Text, Image, Platform } from "react-native";
import React, { useMemo, useState } from "react";
import Page from "../layouts/Page";
import { background, img } from "../assets";
import Page from "../../layouts/Page";
import { background, img } from "../../assets";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { navigate } from "../navigation/NavigationService";
import { Routes } from "../navigation";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import { FlatList, Alert } from "react-native";
import { BlurView } from "expo-blur";
import { useUser } from "../providers/UserDataProvider";
import MusicCard from "./Library/components/MusicCard";
import GradientButton from "../components/GradientButton";
import MoreMenu from "../components/MoreMenu";
import { projectsRef } from "../config/firebase";
import { useUser } from "../../providers/UserDataProvider";
import MusicCard from "../Library/components/MusicCard";
import GradientButton from "../../components/GradientButton";
import MoreMenu from "../../components/MoreMenu";
import { projectsRef } from "../../config/firebase";
import { useGlobal } from "reactn";
const Home = () => {
const { userProjects = [], resetSelectedProject, selectProject } = useUser();
const projects = useMemo(
() => (Array.isArray(userProjects) ? userProjects : []),
[userProjects]
[userProjects],
);
const [, setTooltip] = useGlobal("_tooltip");
const [menuTop, setMenuTop] = useState(0);
@@ -124,7 +124,7 @@ const Home = () => {
},
},
],
{ cancelable: true }
{ cancelable: true },
),
},
]}
src/screens/Home/Home.web.js
+333
View File
@@ -0,0 +1,333 @@
import React, { useCallback, useMemo } from "react";
import {
FlatList,
Image,
StyleSheet,
Text,
View,
useWindowDimensions,
} from "react-native";
import { BlurView } from "expo-blur";
import Page from "../../layouts/Page";
import { background, img } from "../../assets";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
import { useUser } from "../../providers/UserDataProvider";
import ProjectDropDown from "../../components/ProjectDropDown/ProjectDropDown";
const ITEM_SPACING = 24;
const Home = () => {
const {
userProjects = [],
resetSelectedProject,
selectProject,
selectedProject,
selectedProjectId,
} = useUser();
const projects = useMemo(
() => (Array.isArray(userProjects) ? userProjects : []),
[userProjects],
);
const { width: windowWidth } = useWindowDimensions();
const carouselItems = useMemo(
() => [
{
id: "project-vision",
title: "Composez sans limites",
description:
"Créez instantanément des maquettes professionnelles et explorez de nouveaux genres.",
image: img.placeholder,
},
{
id: "project-community",
title: "Collaborez en équipe",
description:
"Partagez vos projets, échangez des idées et co-créez en temps réel.",
image: img.placeholder2,
},
{
id: "project-ai",
title: "Optimisé par l'IA",
description:
"Accédez à des suggestions intelligentes pour les paroles, arrangements et mixages.",
image: img.placeholder3,
},
{
id: "project-stage",
title: "Prêt pour la scène",
description:
"Finalisez vos titres et exportez-les facilement pour le live ou le streaming.",
image: img.placeholder4,
},
],
[],
);
const carouselItemWidth = useMemo(() => {
const baseWidth = Math.min(windowWidth * 0.9, 640);
return Math.max(baseWidth, 320);
}, [windowWidth]);
const carouselItemHeight = useMemo(() => {
const baseHeight = Math.min(windowWidth * 0.6, 360);
return Math.max(baseHeight, 240);
}, [windowWidth]);
const snapInterval = useMemo(
() => carouselItemHeight + ITEM_SPACING,
[carouselItemHeight],
);
const currentProject = useMemo(() => {
if (!projects.length) return null;
const activeId = selectedProject?.id || selectedProjectId;
if (!activeId) {
return projects[0];
}
return projects.find((project) => project?.id === activeId) || projects[0];
}, [projects, selectedProject?.id, selectedProjectId]);
const formatDate = useCallback((timestamp) => {
try {
const value = timestamp?.toDate ? timestamp.toDate() : timestamp;
const date = value ? new Date(value) : null;
if (!date || Number.isNaN(date.getTime())) {
return "";
}
const day = date.getDate().toString().padStart(2, "0");
const month = (date.getMonth() + 1).toString().padStart(2, "0");
return `${day}/${month}`;
} catch (error) {
console.warn("Home.web: formatDate error", error);
return "";
}
}, []);
const handleSelectProject = (project) => {
if (!project?.id) return;
selectProject(project.id);
};
const handleModifyProject = (project) => {
if (!project?.id) return;
selectProject(project.id);
navigate(Routes.FlowSelection);
};
const handleCreateNew = () => {
resetSelectedProject();
navigate(Routes.FlowSelection);
};
const renderCarouselItem = useCallback(
({ item, index }) => {
const isImageOnRight = index % 2 === 1;
let imageSize = Math.min(carouselItemHeight - 24, 280);
let availableWidth = carouselItemWidth - imageSize - 48;
if (availableWidth < 140) {
const minImageSize = Math.max(carouselItemWidth - 140 - 48, 140);
imageSize = Math.min(imageSize, minImageSize);
availableWidth = carouselItemWidth - imageSize - 48;
}
const blurWidth = Math.min(Math.max(availableWidth, 120), 260);
const blurHeight = Math.max(
Math.min(imageSize * 0.75, carouselItemHeight - 48),
140,
);
return (
<View
style={[
{ width: carouselItemWidth, height: carouselItemHeight },
isImageOnRight ? styles.carouselItemRight : styles.carouselItemLeft,
]}
>
<Image
source={item.image}
style={[
styles.carouselImage,
{ width: imageSize, height: imageSize },
isImageOnRight
? styles.carouselImageRight
: styles.carouselImageLeft,
]}
resizeMode="cover"
/>
<BlurView
intensity={30}
tint="dark"
style={[
styles.carouselBlur,
{ width: blurWidth, height: blurHeight },
isImageOnRight
? styles.carouselBlurRight
: styles.carouselBlurLeft,
]}
>
<View style={styles.carouselTextContainer}>
<Text style={styles.carouselTitle}>{item.title}</Text>
<Text style={styles.carouselDescription}>{item.description}</Text>
</View>
</BlurView>
</View>
);
},
[carouselItemHeight, carouselItemWidth],
);
const keyExtractor = useCallback((item) => item.id, []);
return (
<Page shareBtn backgroundImg={background.homeBGWeb} headerType="NONE">
<View style={styles.root}>
<View style={styles.dropdownArea}>
<ProjectDropDown
style={styles.dropdownContainer}
projects={projects}
selectedProject={currentProject}
onSelectProject={handleSelectProject}
onModifyProject={handleModifyProject}
onCreateProject={handleCreateNew}
formatDate={formatDate}
/>
</View>
<View style={styles.carouselSection}>
<FlatList
data={carouselItems}
keyExtractor={keyExtractor}
renderItem={renderCarouselItem}
showsVerticalScrollIndicator={false}
snapToInterval={snapInterval}
snapToAlignment="start"
decelerationRate="fast"
disableIntervalMomentum={true}
pagingEnabled
style={[styles.carouselList, { height: carouselItemHeight }]}
contentContainerStyle={{
paddingVertical: ITEM_SPACING / 2,
alignItems: "center",
}}
ItemSeparatorComponent={() => (
<View style={{ height: ITEM_SPACING }} />
)}
/>
</View>
</View>
</Page>
);
};
export default Home;
const styles = StyleSheet.create({
root: {
flex: 1,
paddingHorizontal: 24,
position: "relative",
justifyContent: "flex-start",
alignItems: "center",
width: "100%",
},
heroImage: {
position: "absolute",
top: -60,
alignSelf: "center",
width: "80%",
maxWidth: 920,
height: 420,
opacity: 0.9,
},
dropdownArea: {
width: "100%",
alignItems: "center",
justifyContent: "center",
paddingTop: 72,
zIndex: 2,
},
dropdownContainer: {
width: "100%",
},
shareIcon: {
width: 18,
height: 18,
tintColor: Palette.white,
},
carouselSection: {
width: "100%",
marginTop: 48,
},
carouselList: {
width: "100%",
},
carouselItem: {
borderRadius: 18,
backgroundColor: "rgba(0, 0, 0, 0.18)",
borderWidth: 1,
borderColor: "rgba(255, 255, 255, 0.1)",
paddingVertical: 24,
paddingHorizontal: 16,
alignItems: "center",
justifyContent: "center",
},
carouselItemRight: {
flexDirection: "row-reverse",
alignItems: "center",
},
carouselItemLeft: {
flexDirection: "row",
alignItems: "center",
},
carouselImage: {
borderRadius: 28,
shadowColor: "#000",
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.25,
shadowRadius: 20,
},
carouselImageRight: {
marginLeft: 20,
},
carouselImageLeft: {
marginRight: 20,
},
carouselBlur: {
borderRadius: 20,
overflow: "hidden",
paddingHorizontal: 18,
paddingVertical: 16,
justifyContent: "center",
alignItems: "flex-start",
backgroundColor: "rgba(0, 0, 0, 0.25)",
gap: 8,
},
carouselBlurRight: {
marginRight: 12,
},
carouselBlurLeft: {
marginLeft: 12,
},
carouselTextContainer: {
width: "100%",
},
carouselTitle: {
fontSize: 20,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
marginBottom: 8,
},
carouselDescription: {
fontSize: 14,
lineHeight: 20,
color: "rgba(255, 255, 255, 0.7)",
fontFamily: FONT_FAMILY.InterRegular,
},
});
src/screens/Library/components/MusicCard.js
-1
View File
@@ -1,7 +1,6 @@
import { BlurView } from "expo-blur";
import React, { useEffect, useRef, useState } from "react";
import {
Platform,
Pressable,
StyleSheet,
Text,
src/screens/Login.js
+52 -54
View File
@@ -1,34 +1,32 @@
/* eslint-disable react/display-name */
import { GoogleSigninButton } from "@react-native-google-signin/google-signin";
import * as AuthSession from "expo-auth-session";
import * as GoogleAuth from "expo-auth-session/providers/google";
import * as WebBrowser from "expo-web-browser";
import React, { useEffect, useState } from "react";
import { Pressable, Text, View } from "react-native";
import { useGlobal } from "reactn";
import { background } from "../assets";
import GradientButton from "../components/GradientButton.js";
import { Input } from "../components/Input.js";
import ItemContainer from "../components/ItemContainer/ItemContainer.js";
import firebase, { usersRef } from "../config/firebase";
import { GoogleSigninButton } from '@react-native-google-signin/google-signin';
import * as AuthSession from 'expo-auth-session';
import * as GoogleAuth from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';
import React, { useEffect, useState } from 'react';
import { Pressable, Text, View } from 'react-native';
import { useGlobal } from 'reactn';
import { background } from '../assets';
import GradientButton from '../components/GradientButton.js';
import { Input } from '../components/Input.js';
import ItemContainer from '../components/ItemContainer/ItemContainer.js';
import firebase, { usersRef } from '../config/firebase';
import {
GOOGLE_ANDROID_CLIENT_ID,
GOOGLE_IOS_CLIENT_ID,
GOOGLE_WEB_CLIENT_ID,
} from "../data/keys";
import { isWeb } from "../hooks/useLayoutType";
import Page from "../layouts/Page.js";
import { Routes } from "../navigation";
import { navigate } from "../navigation/NavigationService.js";
import { FONT_FAMILY } from "../styles/Fonts.js";
import Palette from "../styles/Palette.js";
} from '../data/keys';
import { isWeb } from '../hooks/useLayoutType';
import Page from '../layouts/Page.js';
import { Routes } from '../navigation';
import { navigate } from '../navigation/NavigationService.js';
import { FONT_FAMILY } from '../styles/Fonts.js';
import Palette from '../styles/Palette.js';
export default ({ navigation }) => {
WebBrowser.maybeCompleteAuthSession();
const [, setTooltip] = useGlobal("_tooltip");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [, setTooltip] = useGlobal('_tooltip');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
// Let the provider compute a compliant redirect URI for native (com.googleusercontent.apps.<client-id>:/oauth2redirect)
// Avoid forcing a custom scheme like musicland:// which Google can reject for native apps.
@@ -41,12 +39,12 @@ export default ({ navigation }) => {
// Use Authorization Code + PKCE to comply with Google OAuth for native apps
responseType: AuthSession.ResponseType.Code,
usePKCE: true,
scopes: ["openid", "profile", "email"],
scopes: ['openid', 'profile', 'email'],
});
const afterLoginNavigate = async () => {
const uid = firebase.auth().currentUser?.uid;
if (!uid) throw new Error("Aucun utilisateur après connexion");
if (!uid) throw new Error('Aucun utilisateur après connexion');
const snap = await usersRef.doc(uid).get();
const hasUserName = !!snap.data()?.userName;
if (hasUserName) {
@@ -62,8 +60,8 @@ export default ({ navigation }) => {
await firebase.auth().signInWithEmailAndPassword(email.trim(), password);
await afterLoginNavigate();
} catch (e) {
console.log("Login error", e?.message);
setTooltip({ text: e?.message || "Connexion impossible", type: "error" });
console.log('Login error', e?.message);
setTooltip({ text: e?.message || 'Connexion impossible', type: 'error' });
} finally {
setLoading(false);
}
@@ -74,24 +72,24 @@ export default ({ navigation }) => {
setLoading(true);
if (isWeb) {
const provider = new firebase.auth.GoogleAuthProvider();
provider.addScope("profile");
provider.addScope("email");
provider.addScope('profile');
provider.addScope('email');
await firebase.auth().signInWithPopup(provider);
await afterLoginNavigate();
setLoading(false);
} else {
// Use defaults from the request; don't override with proxy here
const result = await promptAsync();
if (result?.type !== "success") {
if (result?.type !== 'success') {
// Cancelled or errored during the browser flow
setLoading(false);
}
}
} catch (e) {
console.log("Google Login error", e?.message);
console.log('Google Login error', e?.message);
setTooltip({
text: e?.message || "Connexion Google impossible. Merci de réessayer.",
type: "error",
text: e?.message || 'Connexion Google impossible. Merci de réessayer.',
type: 'error',
});
setLoading(false);
}
@@ -101,7 +99,7 @@ export default ({ navigation }) => {
useEffect(() => {
const handleNativeGoogleResponse = async () => {
try {
if (response?.type === "success") {
if (response?.type === 'success') {
// If using Expo proxy, tokens can be present already.
let idToken =
response?.authentication?.idToken || response?.params?.id_token;
@@ -116,13 +114,13 @@ export default ({ navigation }) => {
const clientId = request?.clientId;
const discovery = {
authorizationEndpoint:
"https://accounts.google.com/o/oauth2/v2/auth",
tokenEndpoint: "https://oauth2.googleapis.com/token",
revocationEndpoint: "https://oauth2.googleapis.com/revoke",
'https://accounts.google.com/o/oauth2/v2/auth',
tokenEndpoint: 'https://oauth2.googleapis.com/token',
revocationEndpoint: 'https://oauth2.googleapis.com/revoke',
};
// Light debug: helps identify redirect/client mismatches in dev.
console.log("Google token exchange", {
console.log('Google token exchange', {
clientId,
redirectUri: request?.redirectUri,
hasCodeVerifier: !!request?.codeVerifier,
@@ -135,13 +133,13 @@ export default ({ navigation }) => {
redirectUri: request?.redirectUri,
extraParams: { code_verifier: request?.codeVerifier },
},
discovery
discovery,
);
idToken = tokenResponse?.id_token;
}
if (!idToken)
throw new Error("Jeton Google manquant (échange/retour)");
throw new Error('Jeton Google manquant (échange/retour)');
const credential =
firebase.auth.GoogleAuthProvider.credential(idToken);
@@ -149,10 +147,10 @@ export default ({ navigation }) => {
await afterLoginNavigate();
}
} catch (e) {
console.log("Google native sign-in error", e?.message);
console.log('Google native sign-in error', e?.message);
setTooltip({
text: e?.message || "Connexion Google impossible",
type: "error",
text: e?.message || 'Connexion Google impossible',
type: 'error',
});
} finally {
setLoading(false);
@@ -230,8 +228,8 @@ export default ({ navigation }) => {
<GradientButton
title="Se connecter"
containerStyle={{
width: "80%",
alignSelf: "center",
width: '80%',
alignSelf: 'center',
}}
onPress={onLogin}
disabled={loading || !email || !password}
@@ -245,16 +243,16 @@ export default ({ navigation }) => {
onPress={onLoginWithGoogle}
disabled={loading}
/> */}
<GoogleSigninButton
style={{ width: "80%", height: 50, alignSelf: "center" }}
color={GoogleSigninButton.Color.Dark}
onPress={onLoginWithGoogle}
disabled={loading}
/>
{/*<GoogleSigninButton*/}
{/* style={{ width: "80%", height: 50, alignSelf: "center" }}*/}
{/* color={GoogleSigninButton.Color.Dark}*/}
{/* onPress={onLoginWithGoogle}*/}
{/* disabled={loading}*/}
{/*/>*/}
<View
style={{
alignItems: "center",
alignItems: 'center',
gap: 4,
}}
>
@@ -266,7 +264,7 @@ export default ({ navigation }) => {
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
}}
>
Pas encore de compte?{" "}
Pas encore de compte?{' '}
<Text
style={{
fontFamily: FONT_FAMILY.InterSemiBold,
src/screens/Writing/CreatingLyrics.js
+1
View File
@@ -89,6 +89,7 @@ const CreatingLyrics = ({ active, config, selections }) => {
title: result?.title || "",
titleLower: (result?.title || "").toLowerCase(),
lyrics: Array.isArray(result?.lyrics) ? result.lyrics : [],
description: result?.lyricsDescription,
config: config || null,
selections: selections || null,
hasLyrics: false,