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

fix list and improve cloud functions

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-10-01 15:29:24 +02:00
parent 2908afc259
commit 0bc186413b
18 changed files with 382 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/UI/loginBgWeb.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 MiB

src/assets/index.js
+1
View File
@@ -223,6 +223,7 @@ export const background = {
hitParadeBG,
homeBG,
homeBGWeb: require("./UI/homeBGWeb.png"),
loginBgWeb: require("./UI/loginBgWeb.png"),
};
export const ai = {
src/components/FeatureCarousel/FeatureCarousel.js
+217 -39
View File
@@ -1,5 +1,17 @@
import React, { useCallback, useEffect, useMemo, useRef } from "react";
import { FlatList, StyleSheet, View, useWindowDimensions } from "react-native";
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import {
FlatList,
Platform,
StyleSheet,
View,
useWindowDimensions,
} from "react-native";
import PersonaCard from "../cards/PersonaCard/PersonaCard";
import { ai } from "../../assets";
import { getCreationStageStates } from "../../utils/projectStages";
@@ -53,29 +65,207 @@ const FeatureCarousel = ({
})),
[stageStates],
);
const { height: windowHeight } = useWindowDimensions();
const itemHeight = Math.max(windowHeight, 1);
const isWeb = Platform.OS === "web";
const [viewportHeight, setViewportHeight] = useState(() =>
Math.max(windowHeight, 1),
);
const updateSnapHeight = useCallback((height) => {
if (!height || Number.isNaN(height)) {
return;
}
setViewportHeight((prev) => {
if (prev == null || Math.abs(prev - height) > 0.5) {
return height;
}
return prev;
});
}, []);
useEffect(() => {
updateSnapHeight(Math.max(windowHeight, 1));
}, [updateSnapHeight, windowHeight]);
const itemHeight = Math.max(viewportHeight, 1);
const listRef = useRef(null);
const pendingScrollRef = useRef(false);
const activeIndexRef = useRef(activeIndex);
const alignTimeoutRef = useRef(null);
const activeIndexRef = useRef(
typeof activeIndex === "number" ? activeIndex : 0,
);
const onActiveIndexChangeRef = useRef(onActiveIndexChange);
useEffect(() => {
activeIndexRef.current = activeIndex;
}, [activeIndex]);
useEffect(() => {
onActiveIndexChangeRef.current = onActiveIndexChange;
}, [onActiveIndexChange]);
useEffect(() => {
if (typeof activeIndex === "number") {
activeIndexRef.current = activeIndex;
}
}, [activeIndex]);
const clampIndex = useCallback(
(index) => {
if (!carouselItems.length) {
return 0;
}
if (index < 0) {
return 0;
}
if (index >= carouselItems.length) {
return carouselItems.length - 1;
}
return index;
},
[carouselItems.length],
);
const clearPendingAlignment = useCallback(() => {
if (alignTimeoutRef.current != null) {
clearTimeout(alignTimeoutRef.current);
alignTimeoutRef.current = null;
}
}, []);
useEffect(() => () => clearPendingAlignment(), [clearPendingAlignment]);
const scrollToIndex = useCallback(
(index, animated = true, heightOverride) => {
const ref = listRef.current;
if (!ref) {
return;
}
const clamped = clampIndex(index);
const height =
heightOverride && heightOverride > 0 ? heightOverride : itemHeight;
if (isWeb) {
if (!height) {
return;
}
updateSnapHeight(height);
try {
ref.scrollToOffset({ offset: clamped * height, animated: false });
} catch (_error) {
// Ignore scroll errors when list is not ready yet.
}
activeIndexRef.current = clamped;
return;
}
try {
pendingScrollRef.current = !!animated;
ref.scrollToIndex({ index: clamped, animated });
activeIndexRef.current = clamped;
} catch (_error) {
pendingScrollRef.current = false;
}
},
[clampIndex, isWeb, itemHeight, updateSnapHeight],
);
useEffect(() => {
if (
listRef.current == null ||
typeof activeIndex !== "number" ||
activeIndex < 0 ||
activeIndex >= carouselItems.length ||
(isWeb && !itemHeight)
) {
return;
}
scrollToIndex(activeIndex);
}, [activeIndex, carouselItems.length, isWeb, itemHeight, scrollToIndex]);
useEffect(() => {
if (listRef.current == null || (isWeb && !itemHeight)) {
return;
}
scrollToIndex(activeIndexRef.current, false);
}, [carouselItems.length, isWeb, itemHeight, scrollToIndex]);
const alignToOffset = useCallback(
(offset, layoutHeight) => {
const height =
layoutHeight && layoutHeight > 0 ? layoutHeight : itemHeight;
if (!height) {
return;
}
updateSnapHeight(height);
const nextIndex = clampIndex(Math.round(offset / height));
const hasChanged = nextIndex !== activeIndexRef.current;
if (hasChanged) {
activeIndexRef.current = nextIndex;
const callback = onActiveIndexChangeRef.current;
if (callback) {
callback(nextIndex);
}
}
if (isWeb || hasChanged) {
scrollToIndex(nextIndex, !isWeb, height);
}
},
[clampIndex, isWeb, itemHeight, scrollToIndex, updateSnapHeight],
);
const handleScrollEnd = useCallback(
(event) => {
clearPendingAlignment();
const offsetY = event?.nativeEvent?.contentOffset?.y ?? 0;
const layoutHeight = event?.nativeEvent?.layoutMeasurement?.height;
alignToOffset(offsetY, layoutHeight);
},
[alignToOffset, clearPendingAlignment],
);
const handleScroll = useCallback(
(event) => {
if (!isWeb) {
return;
}
const offsetY = event?.nativeEvent?.contentOffset?.y ?? 0;
const layoutHeight = event?.nativeEvent?.layoutMeasurement?.height;
clearPendingAlignment();
alignTimeoutRef.current = setTimeout(() => {
alignToOffset(offsetY, layoutHeight);
alignTimeoutRef.current = null;
}, 80);
},
[alignToOffset, clearPendingAlignment, isWeb],
);
const handleLayout = useCallback(
(event) => {
const layoutHeight = event?.nativeEvent?.layout?.height ?? 0;
if (layoutHeight > 0) {
updateSnapHeight(layoutHeight);
}
},
[updateSnapHeight],
);
const keyExtractor = useCallback((item) => item.key, []);
const renderItem = useCallback(
({ item, index }) => (
<PersonaCard item={item} index={index} isLock={item.isLocked} />
<PersonaCard
item={item}
index={index}
isLock={item.isLocked}
height={itemHeight}
/>
),
[],
[itemHeight],
);
const getItemLayout = useCallback(
@@ -108,26 +298,15 @@ const FeatureCarousel = ({
};
}
useEffect(() => {
if (
listRef.current == null ||
typeof activeIndex !== "number" ||
activeIndex < 0 ||
activeIndex >= carouselItems.length
) {
return;
const snapOffsets = useMemo(() => {
if (!itemHeight || !isWeb) {
return undefined;
}
try {
pendingScrollRef.current = true;
listRef.current.scrollToIndex({ index: activeIndex, animated: true });
} catch (_error) {
pendingScrollRef.current = false;
// Ignore scroll errors when list is not ready yet.
}
}, [activeIndex, carouselItems.length]);
return carouselItems.map((_, index) => index * itemHeight);
}, [carouselItems.length, isWeb, itemHeight]);
return (
<View style={[styles.container, style]}>
<View style={[styles.container, style]} onLayout={handleLayout}>
<FlatList
ref={listRef}
data={carouselItems}
@@ -137,16 +316,22 @@ const FeatureCarousel = ({
viewabilityConfig={viewabilityConfig.current}
getItemLayout={getItemLayout}
showsVerticalScrollIndicator={false}
pagingEnabled
pagingEnabled={!isWeb}
bounces={false}
overScrollMode="never"
initialNumToRender={1}
maxToRenderPerBatch={2}
windowSize={3}
scrollEventThrottle={16}
snapToAlignment="start"
snapToInterval={itemHeight}
decelerationRate="fast"
snapToAlignment={isWeb ? undefined : "start"}
snapToInterval={!isWeb && itemHeight ? itemHeight : undefined}
snapToOffsets={snapOffsets}
disableIntervalMomentum={!isWeb}
decelerationRate={!isWeb ? "fast" : undefined}
style={styles.list}
contentContainerStyle={styles.listContent}
onScroll={isWeb ? handleScroll : undefined}
onMomentumScrollEnd={handleScrollEnd}
onScrollEndDrag={isWeb ? handleScrollEnd : undefined}
/>
</View>
);
@@ -162,11 +347,4 @@ const styles = StyleSheet.create({
list: {
flex: 1,
},
listContent: {
flexGrow: 1,
},
cardRight: {
flexDirection: "row-reverse",
alignItems: "center",
},
});
src/components/ProjectDropDown/ProjectDropDown.js
+1 -10
View File
@@ -14,8 +14,6 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import GradientButton from "../GradientButton";
const BUTTON_BLUR_INTENSITY = 20;
const ROW_BLUR_INTENSITY = 5;
const ROW_BLUR_SELECTED_INTENSITY = 45;
const defaultFormatDate = (timestamp) => {
try {
@@ -191,7 +189,6 @@ export default ProjectDropDown;
const ProjectRow = ({
project,
formatDate,
isSelected,
onSelect,
onModify,
isTitle = false,
@@ -252,13 +249,7 @@ const ProjectRow = ({
source={coverUri ? { uri: coverUri } : img.placeholder}
style={styles.projectImage}
/>
<BlurView
intensity={
isSelected ? ROW_BLUR_SELECTED_INTENSITY : ROW_BLUR_INTENSITY
}
tint="dark"
style={styles.projectInfo}
>
<BlurView tint="dark" style={styles.projectInfo}>
<View style={styles.projectTexts}>
<Text style={styles.projectTitle} numberOfLines={1}>
{title}
src/components/cards/PersonaCard/PersonaCard.js
+5 -4
View File
@@ -1,5 +1,5 @@
import React from "react";
import { Text, useWindowDimensions, View } from "react-native";
import { Platform, Text, useWindowDimensions, View } from "react-native";
import { Image } from "expo-image";
import { BlurView } from "expo-blur";
import { gutters, Palette } from "../../../styles";
@@ -7,16 +7,17 @@ import { FONT_FAMILY } from "../../../styles/Fonts";
import FontAwesome from "@expo/vector-icons/FontAwesome";
import palette from "../../../styles/Palette";
export default function PersonaCard({ item, isLock = false }) {
export default function PersonaCard({ item, isLock = false, height }) {
const { height: windowHeight } = useWindowDimensions();
const baseHeight = Math.max(height ?? windowHeight, 1);
const cardHeight = Platform.OS === "web" ? Math.round(baseHeight) : baseHeight;
return (
<View
style={{
justifyContent: "center",
alignItems: "center",
height: windowHeight,
marginTop: -20,
height: cardHeight,
}}
>
<View
src/components/cards/PersonaCard/PersonaCard.web.js
-1
View File
@@ -18,7 +18,6 @@ export default function PersonaCard({ item, index, isLock = true }) {
justifyContent: "center",
alignItems: "center",
height: windowHeight,
marginTop: 50,
}}
>
<View
src/screens/Login.js
+49 -48
View File
@@ -1,32 +1,32 @@
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 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";
import ItemContainer from "../components/ItemContainer/ItemContainer";
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.
@@ -39,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) {
@@ -60,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);
}
@@ -72,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);
}
@@ -99,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;
@@ -114,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,
@@ -139,7 +139,7 @@ export default ({ navigation }) => {
}
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);
@@ -147,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);
@@ -165,13 +165,14 @@ export default ({ navigation }) => {
return (
<Page
backgroundImg={background.homeBG}
width={isWeb ? 600 : null}
backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
headerType="NAVIGATION"
title="Connexion"
hideBackButton
>
<View style={{ flex: 1, paddingTop: 20 }}>
<ItemContainer height={600} disableKeyboardHeight>
<ItemContainer height={600} width={800} disableKeyboardHeight>
<View style={{ gap: 30, paddingTop: 5, paddingHorizontal: 5 }}>
<View style={{ gap: 2 }}>
<Text
@@ -181,7 +182,7 @@ export default ({ navigation }) => {
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
Bonjour !
{"Bonjour !"}
</Text>
<Text
style={{
@@ -228,8 +229,8 @@ export default ({ navigation }) => {
<GradientButton
title="Se connecter"
containerStyle={{
width: '80%',
alignSelf: 'center',
width: "80%",
alignSelf: "center",
}}
onPress={onLogin}
disabled={loading || !email || !password}
@@ -252,7 +253,7 @@ export default ({ navigation }) => {
<View
style={{
alignItems: 'center',
alignItems: "center",
gap: 4,
}}
>
@@ -264,7 +265,7 @@ export default ({ navigation }) => {
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
}}
>
Pas encore de compte?{' '}
Pas encore de compte?{" "}
<Text
style={{
fontFamily: FONT_FAMILY.InterSemiBold,
src/screens/Profile/Profile.js
+7 -2
View File
@@ -65,7 +65,7 @@ const Profile = () => {
setFollowers(
Array.isArray(currentUserData?.followedBy)
? currentUserData.followedBy.length
: 0
: 0,
);
return;
}
@@ -263,7 +263,12 @@ const Profile = () => {
// }
>
{isWeb && (
<Pressable onPress={() => SheetManager.show("ProfileSettings")}>
<Pressable
style={{
zIndex: 2,
}}
onPress={() => SheetManager.show("ProfileSettings")}
>
<Image
source={icons.more}
style={{
src/screens/Register.js
+3 -1
View File
@@ -9,13 +9,15 @@ import BorderGradientButton from "../components/BorderGradientButton";
import { navigate } from "../navigation/NavigationService";
import { Routes } from "../navigation";
import ItemContainer from "../components/ItemContainer/ItemContainer";
import { isWeb } from "../hooks/useLayoutType";
const Register = () => {
const [email, setEmail] = useState("");
return (
<Page
backgroundImg={background.homeBG}
width={isWeb ? 600 : null}
backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
headerType="NAVIGATION"
title="Inscription"
>