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

fix tickets add reort mail and design fixes

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-10-29 15:36:12 +01:00
parent d1be3c19a2
commit ce285881ca
35 changed files with 1069 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/qa/step2-navigation.md
+29
View File
@@ -0,0 +1,29 @@
# Étape 2 – Blocage après "Suivant"
## Reproduction
- Plateforme : Web & mobile (Expo) – navigation `Routes.CreateLyricsWithAi`.
- Préconditions : Projet sans paroles existantes.
- Étapes :
1. Lancer l'atelier d'écriture et sélectionner un objectif (Étape 1).
2. Renseigner un contexte dans l'input (Étape 2).
3. Appuyer sur `Suivant`.
- Résultat observé : le bouton devient inactif, l'écran reste figé sur l'étape 2 et il est impossible de poursuivre car le swipe est désactivé.
## Analyse & cause racine
- L'étape dépend de `SwiperFlatList` avec `disableGesture={true}` : seule la navigation programmée via `scrollToIndex` permet d'avancer.
- L'appel `scrollRef.current.scrollToIndex` levait par intermittence une exception (`Invariant Violation: scrollToIndex out of range`) lorsque la mesure des vues n'était pas prête au moment du clic.
- L'erreur était avalée silencieusement (`catch {}`) ce qui laissait l'index interne sur `1` et donc l'utilisateur bloqué sur Étape 2.
## Correctif
- Ajout d'une logique de re-tentative autour de `scrollToIndex` avec journalisation pour diagnostiquer les cas anormaux.
- Clamp de l'index (`Math.min(idx + 1, MAX_STEP_INDEX)`) pour éviter toute sortie de plage.
- Progression recalculée en même temps que la navigation afin d'éviter les états intermédiaires incohérents.
## Validation manuelle
1. Rejouer le scénario de reproduction sur web et mobile (Expo Go).
2. Vérifier la console : absence d'avertissements `[CreateLyricsWithAi] scrollToIndex failed`.
3. Confirmer que l'écran passe correctement à "Étape 3: Quelle émotion veux-tu transmettre ?" et que le bouton `Suivant` se réactive après sélection d'une émotion.
4. Revenir en arrière (`Précédent`) pour s'assurer que l'étape 2 reste éditable et que l'avancement se met à jour (progression dynamique).
## Points de suivi
- Ajouter une suite E2E complète une fois l'infrastructure de tests dispo (Detox/Playwright) pour vérifier la navigation multi-étapes sans interaction manuelle.
functions/assets/musicLandLogo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 KiB

functions/assets/musicLandProduction.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

functions/config/keys.js
+1 -1
View File
@@ -1,5 +1,5 @@
exports.GEMINI_API_KEY = "AIzaSyBoPQC5ZaMKP73TlKGpZQp1mAw8ArHiH9Y";
// exports.SUNO_API_KEY = "543b5650b30d93e98d8046a830244c80"; client api key
exports.SUNO_API_KEY = "5a689606d3c59f58268b4963d5107361"; // api key
exports.RESEND_API_KEY = "re_";
functions/helpers/email.js
+15
View File
@@ -1,3 +1,12 @@
const fs = require("fs");
const path = require("path");
const musicLandLogoBase64 = fs.readFileSync(
path.join(__dirname, "../assets/musicLandLogo.png"),
{ encoding: "base64" },
);
const musicLandLogoSrc = `data:image/png;base64,${musicLandLogoBase64}`;
function basicTemplate({ title = "", content = "", button = null }) {
const btn = button?.url
? `<p><a href="${button.url}" style="display:inline-block;padding:10px 16px;background:#6C5CE7;color:#fff;border-radius:8px;text-decoration:none">${
@@ -6,6 +15,9 @@ function basicTemplate({ title = "", content = "", button = null }) {
: "";
return `<!doctype html><html><body style="font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#111">
<div style="max-width:640px;margin:40px auto;padding:24px;border:1px solid #eee;border-radius:12px">
<div style="text-align:center;margin-bottom:20px">
<img src="${musicLandLogoSrc}" alt="MusicLand" style="height:40px" />
</div>
<h2 style="margin:0 0 16px">${title}</h2>
<div>${content}</div>
${btn}
@@ -22,6 +34,9 @@ function welcomeTemplate({ firstName = "", lastName = "" }) {
<div style="max-width:640px;margin:0 auto;padding:40px 24px">
<div style="background:#151520;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.08)">
<div style="padding:32px 28px">
<div style="text-align:center;margin-bottom:24px">
<img src="${musicLandLogoSrc}" alt="MusicLand" style="height:48px" />
</div>
<p style="margin:0 0 12px;font-size:16px;letter-spacing:0.2px">${greeting}</p>
<h1 style="margin:0 0 16px;font-size:28px;line-height:1.2">Bienvenue sur MusicLand</h1>
<p style="margin:0 0 16px;font-size:16px;line-height:1.6;color:rgba(255,255,255,0.85)">
functions/src/notifications.js
+24 -19
View File
@@ -27,6 +27,7 @@ exports.sendNotificationWhenDocIsCreated = onDocumentCreated(
receiverCollection = "users",
message = "",
data: notifData = {},
mailOnly = false,
} = event.data.data();
if (!receiver || !message) {
@@ -40,27 +41,29 @@ exports.sendNotificationWhenDocIsCreated = onDocumentCreated(
emailNotifications = false,
} = (await db.collection(receiverCollection).doc(receiver).get()).data();
const tokensSet = new Set(
[]
.concat(Array.isArray(pushTokens) ? pushTokens : [])
.concat(pushToken ? [pushToken] : [])
.filter(Boolean),
);
const tokens = Array.from(tokensSet);
if (!mailOnly) {
const tokensSet = new Set(
[]
.concat(Array.isArray(pushTokens) ? pushTokens : [])
.concat(pushToken ? [pushToken] : [])
.filter(Boolean),
);
const tokens = Array.from(tokensSet);
if (!tokens?.length) {
console.warn("User push token not found");
return null;
if (!tokens?.length) {
console.warn("User push token not found");
return null;
}
await sendExpoNotification({
tokens,
receiverId: receiver,
receiverCollection,
title: title || "MusicLand",
message: message,
data: notifData || {},
});
}
await sendExpoNotification({
tokens,
receiverId: receiver,
receiverCollection,
title: title || "MusicLand",
message: message,
data: notifData || {},
});
if (emailNotifications && !!email) {
try {
if (!email) {
@@ -219,6 +222,7 @@ const sendNotification = async ({
receiverCollection = "users",
title = "",
message = null,
mailOnly = false,
data = {},
}) => {
try {
@@ -234,6 +238,7 @@ const sendNotification = async ({
time: admin.firestore.FieldValue.serverTimestamp(),
read: false,
readAt: null,
mailOnly,
data,
};
const { id } = await refList.notifications.add(payload);
functions/src/users.js
+7 -1
View File
@@ -23,12 +23,18 @@ exports.onUserCreated = onDocumentCreated("users/{userID}", async (event) => {
return;
}
try {
await resendClient.emails.send({
console.log(`Sending welcome email to ${email}`);
const { data, error } = await resendClient.emails.send({
from: WELCOME_EMAIL_FROM,
to: [email],
subject: WELCOME_EMAIL_SUBJECT,
html: welcomeTemplate({ firstName, lastName }),
});
if (error) {
console.log("Failed to send welcome email:", error);
return;
}
console.log("Welcome email sent:", data);
} catch (error) {
console.log("Failed to send welcome email:", error);
}
src/assets/comments.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 457 KiB

src/components/AppActionSheet.js
+16 -3
View File
@@ -1,26 +1,38 @@
import { Portal } from "@gorhom/portal";
import { BlurView } from "expo-blur";
import React from "react";
import React, { useCallback } from "react";
import { Platform, Pressable, StyleSheet, View } from "react-native";
import ActionSheet from "react-native-actions-sheet";
import ActionSheet, { SheetManager } from "react-native-actions-sheet";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { isWeb } from "../hooks/useLayoutType";
import { gutters, Palette } from "../styles";
const AppActionSheet = ({
id,
children,
webModal = false,
onClose = () => {},
...sheetProps
}) => {
const insets = useSafeAreaInsets();
const handleRequestClose = useCallback(() => {
if (id) {
Promise.resolve(SheetManager.hide(id))
.catch(() => {})
.finally(() => {
onClose?.();
});
return;
}
onClose?.();
}, [id, onClose]);
if (isWeb && webModal) {
return (
<Portal>
<View style={styles.webOverlay}>
<Pressable
onPress={onClose}
onPress={handleRequestClose}
accessibilityRole="button"
style={styles.webBackdrop}
/>
@@ -36,6 +48,7 @@ const AppActionSheet = ({
return (
<ActionSheet
id={id}
containerStyle={{ backgroundColor: Palette.tran }}
gestureEnabled
indicatorStyle={{
src/components/BorderGradientButton.js
+21 -3
View File
@@ -6,6 +6,18 @@ import { FONT_FAMILY } from "../styles/Fonts";
import { size } from "../styles/Style";
import BorderGradient from "./BorderGradient/BorderGradient";
const HEIGHT_BY_SIZE = {
small: 40,
medium: 50,
large: 58,
};
const FONT_SIZE_BY_SIZE = {
small: 13,
medium: 15,
large: 17,
};
const BorderGradientButton = ({
title = "J’ai déjà mes paroles",
onPress,
@@ -15,7 +27,13 @@ const BorderGradientButton = ({
tint = "dark",
disabled = false,
maxWidth = null,
size = "medium",
}) => {
const resolvedSize = HEIGHT_BY_SIZE[size] ? size : "medium";
const buttonHeight = HEIGHT_BY_SIZE[resolvedSize];
const fontSize = FONT_SIZE_BY_SIZE[resolvedSize];
const iconSize = resolvedSize === "small" ? 14 : 16;
return (
<Pressable
onPress={onPress}
@@ -34,7 +52,7 @@ const BorderGradientButton = ({
locations: [0, 1],
}}
style={{
height: 50,
height: buttonHeight,
borderRadius: 14,
borderWidth: 1,
zIndex: 1,
@@ -61,10 +79,10 @@ const BorderGradientButton = ({
gap: 11,
}}
>
{icon && <Image source={icon} style={size({ size: 16 })} />}
{icon && <Image source={icon} style={size({ size: iconSize })} />}
<Text
style={{
fontSize: 15,
fontSize,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
...titleStyle,
src/components/GradientButton.js
+23 -2
View File
@@ -5,6 +5,18 @@ import { FONT_FAMILY } from "../styles/Fonts";
import { size } from "../styles/Style";
import { LinearGradient } from "./LinearGradient/LinearGradient";
const HEIGHT_BY_SIZE = {
small: 44,
medium: 50,
large: 58,
};
const FONT_SIZE_BY_SIZE = {
small: 14,
medium: 15,
large: 17,
};
const GradientButton = ({
title = "",
colors = ["#F94697", "#7023F7"],
@@ -14,7 +26,14 @@ const GradientButton = ({
icon,
disabled = false,
maxWidth = null,
size = "medium",
textStyle = {},
gradientStyle = {},
}) => {
const resolvedSize = HEIGHT_BY_SIZE[size] ? size : "medium";
const buttonHeight = HEIGHT_BY_SIZE[resolvedSize];
const fontSize = FONT_SIZE_BY_SIZE[resolvedSize];
return (
<Pressable
onPress={onPress}
@@ -30,9 +49,10 @@ const GradientButton = ({
style={{
...Style.containerCenter,
...Style.containerRow,
height: 50,
height: buttonHeight,
borderRadius: 14,
gap: 10,
...gradientStyle,
}}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
@@ -41,10 +61,11 @@ const GradientButton = ({
{icon && <Image source={icon} style={size({ size: 16 })} />}
<Text
style={{
fontSize: 15,
fontSize,
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
paddingHorizontal: 10,
...textStyle,
}}
>
{title}
src/components/ListSelection/ListSelection.js
+2 -1
View File
@@ -166,6 +166,7 @@ const ListSelection = ({
const itemKey = buildItemKey(String(val ?? ""), cat);
const isHovered = isWeb && !disableHover && hoveredKey === itemKey;
const showHoverOutline = isHovered && !sel;
const showSelectionOutline = !isWeb && sel;
const baseContent = renderSimpleContent(item);
const headerContainerStyle = {
@@ -205,7 +206,7 @@ const ListSelection = ({
{withWebBlueGradientIfSelected(baseContent, sel)}
</CreateLyricsHeader>
{showHoverOutline && (
{(showHoverOutline || showSelectionOutline) && (
<View
pointerEvents="none"
style={{
src/components/ShareBtn/ShareBtn.web.js
+6 -2
View File
@@ -6,7 +6,11 @@ import { FONT_FAMILY } from "../../styles/Fonts";
import { Entypo } from "@expo/vector-icons";
import { openShareSheet } from "../../utils/shareSheet";
export default function ShareBtn({ style, onPress = null }) {
export default function ShareBtn({
style,
onPress = null,
label = "Partager l’expérience",
}) {
const handlePress = useCallback(() => {
if (typeof onPress === "function") {
onPress();
@@ -41,7 +45,7 @@ export default function ShareBtn({ style, onPress = null }) {
marginRight: 5,
}}
>
{"Partager l’expérience"}
{label}
</Text>
<Entypo name="share-alternative" size={16} color="white" />
</BlurView>
src/components/modal/DeleteAccountModal.js
+3 -3
View File
@@ -30,7 +30,7 @@ const DeleteAccountModal = () => {
onPress: () => {
alert(
"Confirmation",
"Dernière vérification: supprimer définitivement votre profil ?",
"Dernière vérification : souhaitez-vous supprimer définitivement votre profil ?",
[
{ text: "Non", style: "cancel", onPress: () => {} },
{
@@ -85,8 +85,8 @@ const DeleteAccountModal = () => {
textAlign: "center",
}}
>
Es-tu sur de vouloir supprimer ton compte?{"\n"}Attention, cette
action est irréversible!
Es-tu sûr de vouloir supprimer ton compte ?{"\n"}Attention, cette
action est irréversible !
</Text>
</View>
<View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
src/components/modal/ReportModal.js
+268
View File
@@ -0,0 +1,268 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { SheetManager } from "react-native-actions-sheet";
import {
KeyboardAvoidingView,
Modal,
Platform,
Pressable,
StyleSheet,
Text,
TextInput,
View,
} from "react-native";
import { useGlobal } from "reactn";
import BorderGradientButton from "../BorderGradientButton";
import GradientButton from "../GradientButton";
import { REPORT_OPTIONS } from "../../constants/reportOptions";
import { reportsRef, serverTimestamp } from "../../config/firebase";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
const SHEET_ID = "Report";
const ReportModal = ({ payload }) => {
const [, setTooltip] = useGlobal("_tooltip");
const [selectedReason, setSelectedReason] = useState(REPORT_OPTIONS[0].key);
const [details, setDetails] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [isVisible, setIsVisible] = useState(true);
const resetForm = useCallback(() => {
setSelectedReason(REPORT_OPTIONS[0].key);
setDetails("");
setIsSubmitting(false);
}, []);
const targetContext = useMemo(() => {
return {
type: payload?.targetType || "music",
projectId: payload?.projectId || null,
playbackId: payload?.playbackId || null,
title: payload?.title || "",
ownerId: payload?.ownerId || null,
};
}, [payload]);
const closeSheet = useCallback(() => {
setIsVisible(false);
Promise.resolve(SheetManager.hide(SHEET_ID))
.catch(() => {})
.finally(() => {
resetForm();
});
}, [resetForm]);
useEffect(() => {
setIsVisible(true);
}, [payload]);
const handleSubmit = useCallback(async () => {
if (isSubmitting) return;
if (selectedReason === "other" && !details.trim()) return;
try {
setIsSubmitting(true);
const selectedOption = REPORT_OPTIONS.find(
(option) => option.key === selectedReason,
);
await reportsRef.add({
...targetContext,
reason: selectedReason,
reasonLabel: selectedOption?.label || selectedReason,
details: details.trim() || null,
platform: Platform.OS,
createdAt: serverTimestamp(),
});
setTooltip({
type: "success",
text: "Merci pour ton signalement, notre équipe va l'examiner.",
});
closeSheet();
} catch (error) {
setTooltip({
type: "error",
text:
error?.message ||
"Impossible d'envoyer le signalement pour le moment.",
});
} finally {
setIsSubmitting(false);
}
}, [
details,
closeSheet,
isSubmitting,
selectedReason,
setTooltip,
targetContext,
]);
const showDetailsField = selectedReason === "other";
return (
<Modal
visible={isVisible}
transparent
animationType="fade"
onRequestClose={closeSheet}
onDismiss={resetForm}
>
<View style={styles.overlay}>
<Pressable style={styles.backdrop} onPress={closeSheet} />
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : undefined}
style={styles.modalWrapper}
>
<View style={styles.card}>
<View style={{ gap: 8 }}>
<Text style={styles.heading}>Signaler ce contenu</Text>
{targetContext?.title ? (
<Text style={styles.subheading}>{targetContext.title}</Text>
) : null}
</View>
<View style={{ gap: 12 }}>
{REPORT_OPTIONS.map((option) => {
const isSelected = option.key === selectedReason;
return (
<Pressable
key={option.key}
style={[
styles.optionRow,
isSelected ? styles.optionRowSelected : null,
]}
onPress={() => setSelectedReason(option.key)}
>
<View
style={[
styles.radio,
isSelected ? styles.radioSelected : null,
]}
/>
<Text style={styles.optionLabel}>{option.label}</Text>
</Pressable>
);
})}
</View>
{showDetailsField ? (
<View style={{ gap: 6 }}>
<Text style={styles.fieldLabel}>Détails (optionnel)</Text>
<TextInput
style={styles.textArea}
placeholder="Explique-nous rapidement le problème…"
placeholderTextColor="rgba(255, 255, 255, 0.55)"
multiline
onChangeText={setDetails}
value={details}
/>
</View>
) : null}
<View style={{ gap: 12 }}>
<GradientButton
title={isSubmitting ? "Envoi en cours…" : "Envoyer"}
onPress={handleSubmit}
disabled={
isSubmitting ||
(selectedReason === "other" && details.trim().length === 0)
}
gradientStyle={{ minWidth: 160 }}
/>
<BorderGradientButton
title="Annuler"
onPress={closeSheet}
containerStyle={{ width: "100%" }}
/>
</View>
</View>
</KeyboardAvoidingView>
</View>
</Modal>
);
};
const styles = StyleSheet.create({
overlay: {
flex: 1,
backgroundColor: "rgba(0, 0, 0, 0.6)",
justifyContent: "center",
paddingHorizontal: 24,
position: "relative",
},
backdrop: {
...StyleSheet.absoluteFillObject,
},
modalWrapper: {
justifyContent: "center",
alignItems: "center",
},
card: {
gap: 20,
borderRadius: 24,
padding: 24,
backgroundColor: "rgba(18, 16, 24, 0.94)",
width: "100%",
maxWidth: 420,
alignSelf: "center",
},
heading: {
fontSize: 20,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
textAlign: "center",
},
subheading: {
fontSize: 16,
color: Palette.transparentWhite,
fontFamily: FONT_FAMILY.InterMedium,
textAlign: "center",
},
optionRow: {
flexDirection: "row",
alignItems: "center",
paddingVertical: 10,
paddingHorizontal: 12,
borderRadius: 12,
backgroundColor: "rgba(255, 255, 255, 0.05)",
gap: 12,
},
optionRowSelected: {
backgroundColor: "rgba(251, 104, 168, 0.18)",
},
radio: {
width: 16,
height: 16,
borderRadius: 8,
borderWidth: 2,
borderColor: Palette.transparentWhite,
},
radioSelected: {
borderColor: Palette.primary,
backgroundColor: Palette.primary,
},
optionLabel: {
flex: 1,
fontSize: 15,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
fieldLabel: {
fontSize: 14,
color: Palette.transparentWhite,
fontFamily: FONT_FAMILY.InterMedium,
},
textArea: {
minHeight: 90,
borderRadius: 12,
borderWidth: 1,
borderColor: "rgba(255, 255, 255, 0.12)",
padding: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
fontSize: 14,
textAlignVertical: "top",
backgroundColor: "rgba(0, 0, 0, 0.25)",
},
});
export default ReportModal;
src/config/firebase.js
+1
View File
@@ -52,6 +52,7 @@ export const playlistsRef = firestore.collection("playlists");
export const chatsRef = firestore.collection("chats");
export const videosRef = firestore.collection("videos");
export const notificationsRef = firestore.collection("notifications");
export const reportsRef = firestore.collection("reports");
export const { arrayUnion, arrayRemove, increment, serverTimestamp } =
firebase.firestore.FieldValue;
src/config/initialGlobalState.js
+2
View File
@@ -1,4 +1,5 @@
import { Palette } from "../styles";
import { musiclandProductionBaseUrl } from "../data";
export default {
currentUID: null,
@@ -16,6 +17,7 @@ export default {
url: null,
title: "",
},
productionBaseUrl: musiclandProductionBaseUrl,
_isLoading: false,
_loadingMessage: null,
src/constants/reportOptions.js
+18
View File
@@ -0,0 +1,18 @@
export const REPORT_OPTIONS = [
{
key: "copyright",
label: "Ce morceau enfreint mes droits d'auteur",
},
{
key: "problematic_content",
label: "Le contenu de ce morceau est problématique",
},
{
key: "spam",
label: "Il s'agit de spam ou de contenu promotionnel non sollicité",
},
{
key: "other",
label: "Autre…",
},
];
src/constants/strings.js
+35
View File
@@ -0,0 +1,35 @@
export const strings = {
writing: {
steps: {
contextTitle: "Étape 2: Quel est le contexte ?",
contextSubtitle:
"Ajoute quelques détails pour nous guider (ex.: anniversaire, équipe de sport ou d’entreprise…)",
contextExamples:
"Exemples : « Anniversaire de Clara – ton joyeux et pop », « Hymne d’équipe – style rap énergique », « Esprit d’entreprise – ambiance motivante »",
emotionTitle: "Étape 3: Quelle émotion veux-tu transmettre ?",
emotionSubtitle: "Sélectionne une seule intention émotionnelle.",
},
labels: {
otherObjective: "As-tu un autre objectif ?",
otherObjectivePlaceholder: "Décrire l’objectif",
},
onboarding: {
heroTitle: "Bienvenue dans ton atelier d'écriture",
heroSubtitle:
"C'est ici qu'ensemble nous allons écrire ta chanson, alors vas-y, suis le Guide et Étape 1 Quel est ton objectif?",
primaryCta: "Je crée mes paroles",
secondaryCta: "J’ai déjà mes paroles",
secondaryNote:
"*Si tu as déjà des paroles tu auras l’occasion de les intégrer le moment venu*",
},
lyrics: {
title: "Proposition de paroles",
instructions:
"Relis et personnalise les paroles proposées. Tu peux soit personnaliser la version actuelle, soit lancer une nouvelle génération.",
personalizationBanner:
"Personnalisation : tu peux modifier chaque section et si tu as tes paroles intègre les à la structure proposée",
},
},
};
export default strings;
src/data/index.js
+3 -1
View File
@@ -13,7 +13,9 @@ export const firebaseDashboardUrl =
export const appleAppStoreUrl = "https://apps.apple.com/app";
export const algoliaAppUrl = "https://dashboard.algolia.com/apps";
export const musiclandShareUrl = "https://musicland.ai";
export const musiclandProductionBaseUrl =
"https://musicland-one.vercel.app";
export const musiclandShareUrl = musiclandProductionBaseUrl;
export const musiclandShareHeading = "Partagez l'expérience MusicLand";
export const musiclandShareMessage =
"Invite tes proches a decouvrir MusicLand et cree des experiences musicales ensemble.";
src/providers/PlayerProvider.js
+2
View File
@@ -54,6 +54,8 @@ const HIDDEN_ROUTE_NAMES = new Set([
Routes.ChangePassword,
Routes.Notifications,
Routes.Language,
Routes.Login,
Routes.Register,
]);
const noopAsync = async () => {};
src/providers/UniversalLinkProvider.js
+31 -6
View File
@@ -2,7 +2,8 @@ import { useContext, useState, useEffect } from "reactn";
import * as Linking from "expo-linking";
import { UserDataContext } from "./UserDataProvider";
import { isWeb } from "../hooks/useLayoutType";
import { navigateToTask } from "../navigation/NavigationService";
import { navigate, navigateToTask } from "../navigation/NavigationService";
import { Routes } from "../navigation/Routes";
import { SplashAnimationContext } from "./SplashAnimationProvider";
const appJson = require("../../app.json");
@@ -16,6 +17,7 @@ const UniversalLinkProvider = ({ children }) => {
const { isFullyLoaded } = useContext(SplashAnimationContext);
const [tempTaskData, setTempTaskData] = useState(null);
const [pendingMusicId, setPendingMusicId] = useState(null);
useEffect(() => {
const handleDeepLink = async (event) => {
@@ -51,13 +53,13 @@ const UniversalLinkProvider = ({ children }) => {
}
} catch (error) {
console.error("Redirection error:", error);
handleParams(path);
handleParams(path, queryParams);
}
} else {
handleParams(path);
handleParams(path, queryParams);
}
} else {
handleParams(path);
handleParams(path, queryParams);
}
};
@@ -86,8 +88,31 @@ const UniversalLinkProvider = ({ children }) => {
}
}, [tempTaskData, currentUID, isFullyLoaded]);
const handleParams = (path) => {
// console.log("path", path);
useEffect(() => {
if (!pendingMusicId || !isFullyLoaded) {
return;
}
navigate(Routes.MusicDetails, {
projectId: pendingMusicId,
autoPlay: true,
action: "share",
});
setPendingMusicId(null);
}, [isFullyLoaded, pendingMusicId]);
const handleParams = (path, _queryParams = {}) => {
if (typeof path === "string" && path.length > 0) {
const normalized = path.replace(/^\/+/, "");
const [first, second] = normalized.split("/");
if (first?.toLowerCase() === "music" && second) {
try {
setPendingMusicId(decodeURIComponent(second));
} catch (_) {
setPendingMusicId(second);
}
}
}
cleanURL();
};
src/screens/Library/MusicDetails.js
+89 -11
View File
@@ -17,6 +17,7 @@ import {
import { useGlobal } from "reactn";
import { background, icons } from "../../assets";
import PressableScale from "../../components/PressableScale";
import ShareBtn from "../../components/ShareBtn/ShareBtn";
import Slider from "../../components/Slider";
import {
arrayRemove,
@@ -37,6 +38,11 @@ import {
getSegmentMeta,
normalizeStructureType,
} from "../../utils/songStructure";
import {
createMusicSharePayload,
openShareSheet,
} from "../../utils/shareSheet";
import { Feather } from "@expo/vector-icons";
// 20 secondes
const timeBeforeIncrement = 20000;
@@ -44,6 +50,7 @@ const timeBeforeIncrement = 20000;
const MusicDetails = ({ route }) => {
const { params } = route || {};
const action = params?.action;
const autoPlayRequested = params?.autoPlay;
const projectId = params?.projectId || null;
const [fav, setFav] = useState(false);
const [currentUID] = useGlobal("currentUID");
@@ -51,6 +58,7 @@ const MusicDetails = ({ route }) => {
const listenedMsRef = useRef(0);
const incrementDoneRef = useRef(false);
const timerRef = useRef(null);
const hasAutoPlayedRef = useRef(false);
const { data: project } = useDataFromRef({
ref: projectId ? projectsRef.doc(projectId) : null,
@@ -105,6 +113,33 @@ const MusicDetails = ({ route }) => {
};
}, [trackId, songUrl, title, artist, coverUrl, projectId]);
const sharePayload = useMemo(
() =>
createMusicSharePayload({
projectId,
title,
artist,
}),
[projectId, title, artist]
);
const handleShare = useCallback(() => {
if (!sharePayload) return;
openShareSheet(sharePayload);
}, [sharePayload]);
const handleReport = useCallback(() => {
if (!projectId) return;
SheetManager.show("Report", {
payload: {
targetType: "music",
projectId,
title,
ownerId: project?.userId || owner?.id || null,
},
});
}, [owner?.id, project?.userId, projectId, title]);
const {
isCurrent: isCurrentTrack,
isPlaying: isTrackPlaying,
@@ -137,6 +172,7 @@ const MusicDetails = ({ route }) => {
useEffect(() => {
listenedMsRef.current = 0;
incrementDoneRef.current = false;
hasAutoPlayedRef.current = false;
}, [trackId]);
// Start/stop a timer to accumulate listened milliseconds while playing
@@ -247,6 +283,34 @@ const MusicDetails = ({ route }) => {
[durationMs, trackDescriptor, isCurrentTrack, ensureLoaded, seekTrackTo]
);
useEffect(() => {
if (!autoPlayRequested || hasAutoPlayedRef.current) return;
if (!trackDescriptor || !songUrl) return;
const run = async () => {
try {
if (!isCurrentTrack) {
await ensureLoaded({ startPositionMs: 0, autoPlay: true });
} else if (!isTrackPlaying) {
await resumeTrack();
}
hasAutoPlayedRef.current = true;
} catch (e) {
console.log("MusicDetails autoplay error", e?.message);
}
};
run();
}, [
autoPlayRequested,
trackDescriptor,
songUrl,
isCurrentTrack,
ensureLoaded,
isTrackPlaying,
resumeTrack,
]);
const handleSliderSeekEnd = useCallback(async () => {
try {
if (wasPlayingBeforeSeek.current) {
@@ -627,17 +691,24 @@ const MusicDetails = ({ route }) => {
style={styles.img}
/>
)}
<View style={{ ...Style.containerSpaceBetween }}>
<View>
<Text style={styles.title}>{title}</Text>
<Text style={styles.name}>{artist}</Text>
</View>
<View style={{ ...Style.containerRow, gap: 12 }}>
<PressableScale
onPress={async () => {
if (!projectId || !currentUID) return;
const next = !fav;
setFav(next);
<View style={{ gap: 12 }}>
<View
style={{
...Style.containerRow,
justifyContent: "space-between",
alignItems: "center",
}}
>
<View>
<Text style={styles.title}>{title}</Text>
<Text style={styles.name}>{artist}</Text>
</View>
<View style={{ ...Style.containerRow, gap: 16 }}>
<PressableScale
onPress={async () => {
if (!projectId || !currentUID) return;
const next = !fav;
setFav(next);
try {
await projectsRef.doc(projectId).update({
likedBy: next
@@ -655,6 +726,12 @@ const MusicDetails = ({ route }) => {
resizeMode="contain"
/>
</PressableScale>
<PressableScale onPress={handleReport}>
<Feather name="flag" size={22} color={Palette.white} style={{ marginHorizontal: 2 }} />
</PressableScale>
{!!sharePayload && (
<ShareBtn style={{ borderRadius: 18 }} onPress={handleShare} />
)}
<Pressable
onPress={() =>
SheetManager.show("Playlist", { payload: { projectId } })
@@ -666,6 +743,7 @@ const MusicDetails = ({ route }) => {
resizeMode="contain"
/>
</Pressable>
</View>
</View>
</View>
</View>
src/screens/Library/MusicDetails.web.js
+226
View File
@@ -24,6 +24,7 @@ import { useGlobal } from "reactn";
import { background, icons } from "../../assets";
import PressableScale from "../../components/PressableScale";
import Slider from "../../components/Slider";
import Svg, { Circle } from "react-native-svg";
import {
arrayRemove,
arrayUnion,
@@ -45,6 +46,11 @@ import {
normalizeStructureType,
segmentRequiresLyrics,
} from "../../utils/songStructure";
import {
createMusicSharePayload,
openShareSheet,
} from "../../utils/shareSheet";
import { Feather } from "@expo/vector-icons";
// 20 secondes
const timeBeforeIncrement = 20000;
@@ -52,14 +58,17 @@ const timeBeforeIncrement = 20000;
const MusicDetails = ({ route }) => {
const { params } = route || {};
const action = params?.action;
const autoPlayRequested = params?.autoPlay;
const projectId = params?.projectId || null;
const [fav, setFav] = useState(false);
const [currentUID] = useGlobal("currentUID");
const [, setTooltip] = useGlobal("_tooltip");
const wasPlayingBeforeSeek = React.useRef(false);
const lastSeekTargetMs = React.useRef(null);
const listenedMsRef = React.useRef(0);
const incrementDoneRef = React.useRef(false);
const timerRef = React.useRef(null);
const hasAutoPlayedRef = React.useRef(false);
const { data: project } = useDataFromRef({
ref: projectId ? projectsRef.doc(projectId) : null,
@@ -116,6 +125,108 @@ const MusicDetails = ({ route }) => {
};
}, [trackId, songUrl, title, artist, coverUrl, projectId]);
const sharePayload = useMemo(
() =>
createMusicSharePayload({
projectId,
title,
artist,
}),
[projectId, title, artist]
);
const handleShare = useCallback(() => {
if (!sharePayload) return;
openShareSheet(sharePayload);
}, [sharePayload]);
const [isDownloading, setIsDownloading] = useState(false);
const [downloadProgress, setDownloadProgress] = useState(0);
const handleDownload = useCallback(async () => {
if (!songUrl || isDownloading) return;
try {
setIsDownloading(true);
setDownloadProgress(0);
const response = await fetch(songUrl);
if (!response.ok) {
throw new Error(`download_failed_${response.status}`);
}
const contentType = response.headers.get("content-type") || "audio/mpeg";
const total = Number(response.headers.get("content-length")) || 0;
const sanitizedTitle = String(title || "musicland-track")
.replace(/[\\/:*?"<>|]+/g, "-")
.trim()
.slice(0, 80);
const fileName = `${sanitizedTitle || "musicland-track"}.mp3`;
if (response.body && typeof response.body.getReader === "function") {
const reader = response.body.getReader();
const chunks = [];
let received = 0;
let pseudoProgress = 0;
while (true) {
const { done, value } = await reader.read();
if (done) break;
if (value) {
chunks.push(value);
received += value.length;
if (total > 0) {
setDownloadProgress(Math.min(1, received / total));
} else {
pseudoProgress = Math.min(0.95, pseudoProgress + 0.05);
setDownloadProgress(pseudoProgress);
}
}
}
const blob = new Blob(chunks, { type: contentType });
setDownloadProgress(1);
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
} else {
const blob = await response.blob();
setDownloadProgress(1);
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
} catch (error) {
console.error("MusicDetails.download", error);
setTooltip({
type: "error",
text: "Téléchargement impossible",
});
} finally {
setIsDownloading(false);
setTimeout(() => setDownloadProgress(0), 400);
}
}, [isDownloading, setTooltip, songUrl, title]);
const handleReport = useCallback(() => {
if (!projectId) return;
SheetManager.show("Report", {
payload: {
targetType: "music",
projectId,
title,
ownerId: project?.userId || owner?.id || null,
},
});
}, [owner?.id, project?.userId, projectId, title]);
const {
isCurrent: isCurrentTrack,
isPlaying: isTrackPlaying,
@@ -150,6 +261,7 @@ const MusicDetails = ({ route }) => {
useEffect(() => {
listenedMsRef.current = 0;
incrementDoneRef.current = false;
hasAutoPlayedRef.current = false;
}, [trackId]);
// Start/stop a timer to accumulate listened milliseconds while playing
@@ -282,6 +394,38 @@ const MusicDetails = ({ route }) => {
[trackDescriptor, durationMs, isCurrentTrack, ensureLoaded, seekTrackTo]
);
useEffect(() => {
if (!autoPlayRequested || hasAutoPlayedRef.current) {
return;
}
if (!trackDescriptor || !songUrl) {
return;
}
const run = async () => {
try {
if (!isCurrentTrack) {
await ensureLoaded({ startPositionMs: 0, autoPlay: true });
} else if (!isPlaying) {
await resumeTrack();
}
hasAutoPlayedRef.current = true;
} catch (e) {
console.log("MusicDetails autoplay error", e?.message);
}
};
run();
}, [
autoPlayRequested,
ensureLoaded,
isCurrentTrack,
isPlaying,
resumeTrack,
songUrl,
trackDescriptor,
]);
const handleSliderSeekEnd = useCallback(async () => {
const targetMs =
typeof lastSeekTargetMs.current === "number"
@@ -677,6 +821,14 @@ const MusicDetails = ({ route }) => {
backgroundImg={
action === "userProfile" ? background.profileBG : background.libraryBG2
}
shareBtn={
sharePayload
? {
label: "Partager le morceau",
onPress: handleShare,
}
: false
}
{...(action === "userProfile" && {
containerStyle: {
backgroundColor: "#0000004D",
@@ -761,6 +913,45 @@ const MusicDetails = ({ route }) => {
resizeMode="contain"
/>
</Pressable>
<PressableScale onPress={handleReport}>
<Feather
name="flag"
size={22}
color={Palette.white}
style={{ marginHorizontal: 2 }}
/>
</PressableScale>
<View
style={{
width: 36,
height: 36,
alignItems: "center",
justifyContent: "center",
}}
>
{isDownloading ? (
<DownloadProgressRing
progress={downloadProgress}
size={36}
strokeWidth={3}
/>
) : null}
<Pressable
onPress={handleDownload}
disabled={isDownloading || !songUrl}
style={{
width: 36,
height: 36,
borderRadius: 18,
alignItems: "center",
justifyContent: "center",
backgroundColor: "rgba(255,255,255,0.08)",
opacity: isDownloading || !songUrl ? 0.6 : 1,
}}
>
<Feather name="download" size={18} color={Palette.white} />
</Pressable>
</View>
<Pressable
onPress={() =>
SheetManager.show("Playlist", { payload: { projectId } })
@@ -975,3 +1166,38 @@ const styles = StyleSheet.create({
marginBottom: 6,
},
});
const DownloadProgressRing = ({ progress = 0, size = 36, strokeWidth = 3 }) => {
const radius = size / 2 - strokeWidth / 2;
const circumference = 2 * Math.PI * radius;
const clamped = Math.max(0, Math.min(1, progress || 0));
const offset = circumference * (1 - clamped);
return (
<Svg
width={size}
height={size}
style={{ position: "absolute", top: 0, left: 0 }}
>
<Circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke="rgba(255, 255, 255, 0.15)"
strokeWidth={strokeWidth}
fill="transparent"
/>
<Circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke={Palette.primary}
strokeWidth={strokeWidth}
strokeDasharray={`${circumference} ${circumference}`}
strokeDashoffset={offset}
strokeLinecap="round"
fill="transparent"
/>
</Svg>
);
};
src/screens/Playbacks/Playbacks.js
+28
View File
@@ -28,6 +28,8 @@ import {
LIKE_TARGET,
toggleProjectLike,
} from "../../utils/likes";
import { SheetManager } from "react-native-actions-sheet";
import { Feather } from "@expo/vector-icons";
const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
const { currentUID, followUser, unfollowUser } = useUser() || {};
@@ -142,6 +144,18 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
} catch (e) {}
};
}, [videoPlayer]);
const handleReport = useCallback(() => {
if (!item?.id) return;
SheetManager.show("Report", {
payload: {
targetType: "playback",
projectId: item?.id || null,
playbackId: item?.id || null,
title: item?.title || "",
ownerId: item?.userId || null,
},
});
}, [item?.id, item?.title, item?.userId]);
// Build alignedWords from item musicTimestamps
const alignedWords = useMemo(() => {
@@ -365,6 +379,20 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
>
<Image source={icons.share} style={size({ size: 26 })} />
</Pressable>
<Pressable onPress={handleReport} style={{ alignItems: "center" }}>
<Feather name="flag" size={26} color={Palette.white} />
<Text
style={{
color: Palette.white,
fontSize: 11,
marginTop: 4,
fontFamily: FONT_FAMILY.InterMedium,
textAlign: "center",
}}
>
Signaler
</Text>
</Pressable>
</View>
<View style={{ paddingHorizontal: 28 }}>
<BlurView
src/screens/Playbacks/components/PlaybackItem.web.js
+22
View File
@@ -30,6 +30,8 @@ import {
LIKE_TARGET,
toggleProjectLike,
} from "../../../utils/likes";
import { SheetManager } from "react-native-actions-sheet";
import { Feather } from "@expo/vector-icons";
// Debug logging toggle for web playback
const DEBUG_PLAYBACK_WEB = true;
@@ -252,6 +254,19 @@ const PlaybackItem = ({
const descriptionText =
item?.description || item?.title || "Description chanson";
const handleReport = useCallback(() => {
if (!item?.id) return;
SheetManager.show("Report", {
payload: {
targetType: "playback",
projectId: item?.id || null,
playbackId: item?.id || null,
title: item?.title || "",
ownerId: item?.userId || null,
},
});
}, [item?.id, item?.title, item?.userId]);
const handleLayout = useCallback((event) => {
const { width = 0, height = 0 } = event?.nativeEvent?.layout || {};
setLayoutSize((prev) => ({
@@ -486,6 +501,13 @@ const PlaybackItem = ({
resizeMode="contain"
/>
</Pressable>
<Pressable
onPress={handleReport}
style={[styles.actionButton, styles.actionSpacing]}
>
<Feather name="flag" size={20} color={Palette.white} />
<Text style={styles.actionLabel}>Signaler</Text>
</Pressable>
</View>
<View style={styles.lyricsContainer}>
src/screens/Studio/GeneratingSong.js
+1 -10
View File
@@ -240,16 +240,7 @@ const GeneratingSong = () => {
if (titleOk && isIdle && !askedRef.current) {
askedRef.current = true;
AppAlert("Attention", "Une génération va être lancée. Continuer ?", [
{
text: "Non",
style: "cancel",
onPress: () => {
askedRef.current = false;
},
},
{ text: "Oui", onPress: () => startMusicGenerationOnce() },
]);
startMusicGenerationOnce();
}
}, [
isFocused,
src/screens/Writing/CreateLyricsWithAi.js
+35 -51
View File
@@ -8,8 +8,7 @@ import MusicLandHeader from "../../components/MusicLandHeader";
import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from "../../data/data";
import useLayoutType from "../../hooks/useLayoutType";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
import { goBack } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { gutters } from "../../styles";
import { sanitizeStructureList } from "../../utils/songStructure";
@@ -23,13 +22,13 @@ import SongStyle from "./SongStyle";
import SongTo from "./SongTo";
import SpecificityContext from "./SpecificityContext";
const { width: windowWidth } = Dimensions.get("window");
const MAX_STEP_INDEX = 8;
const CreateLyricsWithAi = () => {
const { isWeb } = useLayoutType();
const { selectedProject, updateProjectData } = useUser();
const hasLyrics = selectedProject?.hasLyrics === true;
const { selectedProject } = useUser();
const scrollRef = useRef(null);
const [selectedIndex, setSelectedIndex] = useState(hasLyrics ? 5 : 0);
const [selectedIndex, setSelectedIndex] = useState(0);
const [progress, setProgress] = useState(16);
const [parentLayout, setparentLayout] = useState(null);
const containerWidth = windowWidth;
@@ -188,13 +187,6 @@ const CreateLyricsWithAi = () => {
}
}, [structure]);
// Si déjà des paroles, forcer l'accès à partir de l'étape 5 et ignorer 0-4
React.useEffect(() => {
if (hasLyrics && selectedIndex < 5) {
setSelectedIndex(5);
}
}, [hasLyrics]);
const lyricsConfig = useMemo(() => {
const resolvedObjective = shouldUseOtherObjective
? persistedOtherObjective || undefined
@@ -297,37 +289,7 @@ const CreateLyricsWithAi = () => {
]);
const onPressNext = async () => {
// Si l'utilisateur a déjà des paroles et vient de finir CustomizeSongStructure (index 6),
// sauter Rhymes et CreatingLyrics et aller directement sur Lyrics
if (hasLyrics && selectedIndex === 6) {
const chosenStructure = sanitizeStructureList(
Array.isArray(customStructure) && customStructure.length > 0
? customStructure
: Array.isArray(parsedStructure)
? parsedStructure
: []
);
await updateProjectData({
config: { structure: chosenStructure },
selections: {
objective,
otherObjective: persistedOtherObjective,
context,
emotion,
style,
otherStyle: persistedOtherStyle,
audience,
structure,
parsedStructure,
customStructure: sanitizeStructureList(customStructure),
rhymes,
},
hasLyrics: true,
});
navigate(Routes.Lyrics);
return;
}
setSelectedIndex((idx) => idx + 1);
setSelectedIndex((idx) => Math.min(idx + 1, MAX_STEP_INDEX));
};
const onPressBack = () => {
@@ -344,14 +306,36 @@ const CreateLyricsWithAi = () => {
// Sync scroll position and progress with selectedIndex
React.useEffect(() => {
if (!parentLayout?.height) return;
try {
const nextProgress = 16 + selectedIndex * 9;
setProgress(nextProgress);
scrollRef.current?.scrollToIndex?.({
index: selectedIndex,
animated: true,
});
} catch (_) {}
const nextProgress = Math.max(0, Math.min(100, 16 + selectedIndex * 9));
setProgress(nextProgress);
const ref = scrollRef.current;
if (!ref || typeof ref.scrollToIndex !== "function") {
return;
}
let cancelled = false;
const attemptScroll = (retries = 0) => {
if (cancelled) return;
try {
ref.scrollToIndex({ index: selectedIndex, animated: true });
} catch (error) {
if (retries < 3) {
setTimeout(() => attemptScroll(retries + 1), 40);
} else {
console.warn("[CreateLyricsWithAi] scrollToIndex failed", {
index: selectedIndex,
error,
});
}
}
};
attemptScroll();
return () => {
cancelled = true;
};
}, [selectedIndex, parentLayout?.height]);
return (
src/screens/Writing/CreateLyricsWithAi.web.js
+6 -43
View File
@@ -6,8 +6,7 @@ import GradientButton from "../../components/GradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from "../../data/data";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
import { goBack } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { gutters } from "../../styles";
import { sanitizeStructureList } from "../../utils/songStructure";
@@ -21,10 +20,11 @@ import SongStyle from "./SongStyle";
import SongTo from "./SongTo";
import SpecificityContext from "./SpecificityContext";
const MAX_STEP_INDEX = 8;
const CreateLyricsWithAi = () => {
const { selectedProject, updateProjectData } = useUser();
const hasLyrics = selectedProject?.hasLyrics === true;
const [selectedIndex, setSelectedIndex] = useState(hasLyrics ? 5 : 0);
const { selectedProject } = useUser();
const [selectedIndex, setSelectedIndex] = useState(0);
// Collected state across steps
const [objective, setObjective] = useState(null); // from Goals list
@@ -187,13 +187,6 @@ const CreateLyricsWithAi = () => {
}
}, [structure]);
// Si déjà des paroles, forcer l'accès à partir de l'étape 5 et ignorer 0-4
React.useEffect(() => {
if (hasLyrics && selectedIndex < 5) {
setSelectedIndex(5);
}
}, [hasLyrics]);
const progress = useMemo(
() => 16 + selectedIndex * 9,
[selectedIndex]
@@ -301,37 +294,7 @@ const CreateLyricsWithAi = () => {
]);
const onPressNext = async () => {
// Si l'utilisateur a déjà des paroles et vient de finir CustomizeSongStructure (index 6),
// sauter Rhymes et CreatingLyrics et aller directement sur Lyrics
if (hasLyrics && selectedIndex === 6) {
const chosenStructure = sanitizeStructureList(
Array.isArray(customStructure) && customStructure.length > 0
? customStructure
: Array.isArray(parsedStructure)
? parsedStructure
: []
);
await updateProjectData({
config: { structure: chosenStructure },
selections: {
objective,
otherObjective: persistedOtherObjective,
context,
emotion,
style,
otherStyle: persistedOtherStyle,
audience,
structure,
parsedStructure,
customStructure: sanitizeStructureList(customStructure),
rhymes,
},
hasLyrics: true,
});
navigate(Routes.Lyrics);
return;
}
setSelectedIndex((idx) => idx + 1);
setSelectedIndex((idx) => Math.min(idx + 1, MAX_STEP_INDEX));
};
const onPressBack = () => {
src/screens/Writing/EmotionConvey.js
+3 -2
View File
@@ -3,6 +3,7 @@ import { View } from "react-native";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import ListSelection from "../../components/ListSelection/ListSelection";
import { EMOTION_CONVEY } from "../../data/data";
import { strings } from "../../constants/strings";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
const EmotionConvey = ({
@@ -19,8 +20,8 @@ const EmotionConvey = ({
return (
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
title={`Quelle émotion veux-tu\ntransmettre ?`}
subTitle="Sélectionne une seule intention émotionnelle."
title={strings.writing.steps.emotionTitle}
subTitle={strings.writing.steps.emotionSubtitle}
/>
<View
src/screens/Writing/Goals.js
+22 -5
View File
@@ -1,8 +1,9 @@
import React, { useMemo, useState } from "react";
import { Platform, ScrollView, StyleSheet, View } from "react-native";
import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import ListSelection from "../../components/ListSelection/ListSelection";
import { GOALS, OTHER_OBJECTIVE_OPTION } from "../../data/data";
import { strings } from "../../constants/strings";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
@@ -39,9 +40,14 @@ const Goals = ({
<ScrollView contentContainerStyle={{ flex: 1, gap: 16, marginTop: 16 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader
title="Quel est le contexte ?"
subTitle="Besoin d'idées ? Pense à un anniversaire, une équipe de sport ou ton entreprise."
title={strings.writing.steps.contextTitle}
subTitle={strings.writing.steps.contextSubtitle}
/>
<View style={styles.examplesContainer}>
<Text style={styles.examplesText}>
{strings.writing.steps.contextExamples}
</Text>
</View>
<ItemContainer>
<ListSelection
options={goalsOptions}
@@ -55,8 +61,8 @@ const Goals = ({
</ItemContainer>
</View>
<CustomInput
label="As-tu un autre objectif ?"
placeholder="Décrire l’objectif"
label={strings.writing.labels.otherObjective}
placeholder={strings.writing.labels.otherObjectivePlaceholder}
value={otherObjective}
setValue={handleOtherObjectiveChange}
height={Platform.OS === "web" ? 160 : undefined}
@@ -95,4 +101,15 @@ const styles = StyleSheet.create({
fontFamily: FONT_FAMILY.InterRegular,
textAlign: "center",
},
examplesContainer: {
backgroundColor: Palette.ultraLightWhite,
borderRadius: 12,
padding: 12,
},
examplesText: {
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
lineHeight: 20,
},
});
src/screens/Writing/Lyrics.js
+21 -17
View File
@@ -8,6 +8,7 @@ import GradientButton from "../../components/GradientButton";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
import MusicLandHeader from "../../components/MusicLandHeader";
import firebase, { projectsRef } from "../../config/firebase";
import { strings } from "../../constants/strings";
import { isWeb } from "../../hooks/useLayoutType";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
@@ -363,24 +364,17 @@ const Lyrics = ({ navigation }) => {
}}
>
<View style={styles.headerContainer}>
<Text style={styles.headerTitle}>Proposition de paroles</Text>
<Text style={styles.instructions}>
Relis attentivement la proposition générée avant de valider.
<Text style={styles.headerTitle}>
{strings.writing.lyrics.title}
</Text>
<Text style={styles.instructions}>
<Text style={styles.instructionsHighlight}>
Personnalisation :
</Text>{" "}
modifie le titre et chaque section pour que les paroles te
ressemblent.
</Text>
<Text style={styles.instructions}>
<Text style={styles.instructionsHighlight}>
Nouvelle génération :
</Text>{" "}
appuie sur "Générer d'autres paroles" si tu souhaites une autre
suggestion.
{strings.writing.lyrics.instructions}
</Text>
<View style={styles.personalizationBanner}>
<Text style={styles.personalizationText}>
{strings.writing.lyrics.personalizationBanner}
</Text>
</View>
</View>
<CustomInput
label="Titre"
@@ -489,8 +483,18 @@ const styles = StyleSheet.create({
fontSize: 14,
lineHeight: 20,
},
instructionsHighlight: {
fontFamily: FONT_FAMILY.InterSemiBold,
personalizationBanner: {
backgroundColor: Palette.ultraLightWhite,
borderRadius: 12,
paddingVertical: 10,
paddingHorizontal: 12,
marginTop: 4,
},
personalizationText: {
color: Palette.white,
fontFamily: FONT_FAMILY.InterMedium,
fontSize: 14,
lineHeight: 20,
},
instrumentalBlock: {
padding: 16,
src/screens/Writing/WritingLyrics.js
+65 -21
View File
@@ -1,5 +1,5 @@
import React from "react";
import { Image, StyleSheet, View } from "react-native";
import { Image, StyleSheet, Text, View } from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { ai, background, icons } from "../../assets";
import BorderGradientButton from "../../components/BorderGradientButton";
@@ -10,22 +10,24 @@ import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
import { useUserData } from "../../providers/UserDataProvider";
import { gutters } from "../../styles";
import { strings } from "../../constants/strings";
import { Palette, gutters } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
const WritingLyrics = () => {
const { createNewProject, selectedProject, updateProjectData } =
useUserData();
const { setIsLoading } = useMinuit();
async function createAndNavigate({ hasLyrics = false }) {
const startWriting = React.useCallback(async () => {
try {
await setIsLoading(true);
if (selectedProject) {
updateProjectData({ hasLyrics });
updateProjectData({ hasLyrics: false });
setTimeout(() => navigate(Routes.CreateLyricsWithAi), 500);
return;
}
const newProjectId = await createNewProject({ hasLyrics });
const newProjectId = await createNewProject({ hasLyrics: false });
if (!newProjectId) {
return;
}
@@ -35,7 +37,7 @@ const WritingLyrics = () => {
} finally {
await setIsLoading(false);
}
}
}, [createNewProject, navigate, selectedProject, setIsLoading, updateProjectData]);
return (
<Page
@@ -48,27 +50,34 @@ const WritingLyrics = () => {
progress={9}
logo={icons.musicLandWriting}
/>
<View
style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
>
<View
style={{
paddingBottom: gutters * 2,
paddingHorizontal: gutters,
gap: 12,
}}
>
<View style={styles.contentWrapper}>
<View style={styles.heroContainer}>
<Text style={styles.heroTitle}>
{strings.writing.onboarding.heroTitle}
</Text>
<Text style={styles.heroSubtitle}>
{strings.writing.onboarding.heroSubtitle}
</Text>
</View>
<View style={styles.ctaGroup}>
<GradientButton
maxWidth={500}
size="large"
maxWidth={520}
containerStyle={{ alignSelf: "center", width: "100%" }}
title="Écrire des paroles avec une IA"
onPress={() => createAndNavigate({ hasLyrics: false })}
title={strings.writing.onboarding.primaryCta}
onPress={startWriting}
textStyle={{ fontFamily: FONT_FAMILY.InterSemiBold }}
/>
<BorderGradientButton
maxWidth={500}
onPress={() => createAndNavigate({ hasLyrics: true })}
size="small"
title={strings.writing.onboarding.secondaryCta}
disabled
containerStyle={{ alignSelf: "center", width: "100%" }}
maxWidth={360}
/>
<Text style={styles.secondaryNote}>
{strings.writing.onboarding.secondaryNote}
</Text>
</View>
</View>
</Page>
@@ -85,4 +94,39 @@ const styles = StyleSheet.create({
bottom: -40,
right: -30,
},
contentWrapper: {
flex: 1,
justifyContent: "space-between",
paddingTop: gutters * 6,
paddingBottom: gutters * 2,
paddingHorizontal: gutters,
gap: 32,
},
heroContainer: {
gap: 12,
maxWidth: 560,
},
heroTitle: {
fontSize: 28,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
},
heroSubtitle: {
fontSize: 16,
lineHeight: 24,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
opacity: 0.88,
},
ctaGroup: {
gap: 12,
},
secondaryNote: {
textAlign: "center",
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
fontSize: 14,
opacity: 0.85,
fontStyle: "italic",
},
});
src/utils/Sheet.js
+2
View File
@@ -7,6 +7,7 @@ import DeleteAudioModal from "../components/modal/DeleteAudioModal";
import PlaylistModal from "../components/modal/PlaylistModal";
import PlaybackPickerModal from "../components/modal/PlaybackPickerModal";
import ShareModal from "../components/modal/ShareModal";
import ReportModal from "../components/modal/ReportModal";
registerSheet("Delete", DeleteModal);
registerSheet("ProfileSettings", ProfileSettingsModal);
@@ -16,5 +17,6 @@ registerSheet("DeleteAudio", DeleteAudioModal);
registerSheet("Playlist", PlaylistModal);
registerSheet("PlaybackPicker", PlaybackPickerModal);
registerSheet("Share", ShareModal);
registerSheet("Report", ReportModal);
export {};
src/utils/shareSheet.js
+42
View File
@@ -14,6 +14,48 @@ const defaultPayload = {
qrUrl: musiclandShareUrl,
};
const trimTrailingSlash = (value) =>
typeof value === "string" ? value.replace(/\/+$/, "") : "";
const resolveBaseShareUrl = () => {
if (typeof window !== "undefined" && window.location?.origin) {
const origin = window.location.origin;
if (/localhost|127\.0\.0\.1/i.test(origin)) {
return origin;
}
}
return musiclandShareUrl;
};
export const createMusicSharePayload = ({
projectId,
title,
artist,
} = {}) => {
if (!projectId) return null;
const baseUrl = trimTrailingSlash(resolveBaseShareUrl());
const shareUrl = `${baseUrl}/music/${projectId}`;
let shareMessage = musiclandShareMessage;
if (title) {
shareMessage = `Découvre "${title}"`;
if (artist) {
shareMessage += ` de ${artist}`;
}
shareMessage += " sur MusicLand.";
}
return {
heading: "Partager le morceau",
shareTitle: title ? `${title} - MusicLand` : "MusicLand",
shareMessage,
url: shareUrl,
qrUrl: shareUrl,
linkLabel: shareUrl,
};
};
export const openShareSheet = (payload = {}) => {
SheetManager.show("Share", {
payload: {