second flow

src/screens/Studio/ComposeSong.web.js

@@ -0,0 +1,217 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Dimensions, FlatList, View } from "react-native";
+import { background } from "../../assets";
+import GradientButton from "../../components/GradientButton";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import firebase from "../../config/firebase";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { useUser } from "../../providers/UserDataProvider";
+import { gutters } from "../../styles";
+import ChooseGenre from "./ChooseGenre";
+import ChooseInstruments from "./ChooseInstruments";
+import ChooseRhythm from "./ChooseRhythm";
+import CustomizeVoice from "./CustomizeVoice";
+
+const { width: windowWidth } = Dimensions.get("window");
+
+const ComposeSong = () => {
+  const scrollRef = useRef(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [progress, setProgress] = useState(18);
+  const [parentLayout, setParentLayout] = useState(null);
+  const containerWidth = parentLayout?.width || windowWidth || 1;
+  const { selectedProjectId, selectedProject, updateProjectData } = useUser();
+
+  const [genres, setGenres] = useState([]);
+  const [voice, setVoice] = useState({});
+  const [instruments, setInstruments] = useState([]);
+  const [rhythm, setRhythm] = useState(null);
+
+  const isStepValid = useMemo(() => {
+    switch (selectedIndex) {
+      case 0:
+        return Array.isArray(genres) && genres.length > 0;
+      case 1:
+        return !!(voice && typeof voice === "object" && voice.base);
+      case 2:
+        return Array.isArray(instruments) && instruments.length > 0;
+      case 3:
+        return !!rhythm;
+      default:
+        return true;
+    }
+  }, [selectedIndex, genres, voice, instruments, rhythm]);
+
+  const musicConfig = useMemo(() => {
+    let lyricsArr = [];
+    if (Array.isArray(selectedProject?.lyrics)) {
+      lyricsArr = selectedProject.lyrics.map((s) => ({
+        type: (s?.type || "").toLowerCase(),
+        lyrics: s?.lyrics || "",
+      }));
+    } else {
+      const c = selectedProject?.lyrics?.couplet;
+      const r = selectedProject?.lyrics?.refrain;
+      if (c) lyricsArr.push({ type: "couplet", lyrics: c });
+      if (r) lyricsArr.push({ type: "refrain", lyrics: r });
+    }
+    const voiceArray = Object.entries(voice || {})
+      .filter(([, v]) => typeof v === "string" && v.trim())
+      .map(([category, value]) => ({ category, value }));
+
+    return {
+      title: selectedProject?.title || "",
+      lyrics: lyricsArr,
+      genres: Array.isArray(genres) ? genres : [],
+      voice: voiceArray,
+      instruments: Array.isArray(instruments) ? instruments : [],
+      tempo: rhythm || undefined,
+      projectId: selectedProjectId || undefined,
+    };
+  }, [selectedProject, genres, voice, instruments, rhythm, selectedProjectId]);
+
+  const steps = useMemo(
+    () => [
+      {
+        key: "genres",
+        render: () => <ChooseGenre selected={genres} setSelected={setGenres} />,
+      },
+      {
+        key: "voice",
+        render: () => (
+          <CustomizeVoice selected={voice} setSelected={setVoice} />
+        ),
+      },
+      {
+        key: "instruments",
+        render: () => (
+          <ChooseInstruments
+            selected={instruments}
+            setSelected={setInstruments}
+          />
+        ),
+      },
+      {
+        key: "rhythm",
+        render: () => (
+          <ChooseRhythm selected={rhythm} setSelected={setRhythm} />
+        ),
+      },
+    ],
+    [genres, voice, instruments, rhythm]
+  );
+
+  useEffect(() => {
+    const nextProgress = 18 + selectedIndex * 9;
+    if (nextProgress !== progress) {
+      setProgress(nextProgress);
+    }
+    try {
+      scrollRef.current?.scrollToIndex?.({
+        index: selectedIndex,
+        animated: true,
+      });
+    } catch (_) {}
+  }, [selectedIndex, progress, containerWidth]);
+
+  const getItemLayout = useCallback(
+    (_data, index) => ({
+      length: containerWidth,
+      offset: containerWidth * index,
+      index,
+    }),
+    [containerWidth]
+  );
+
+  const onPressNext = async () => {
+    if (selectedIndex === steps.length - 1) {
+      try {
+        if (selectedProjectId) {
+          await updateProjectData({
+            musicConfig: {
+              title: musicConfig?.title || "",
+              lyrics: Array.isArray(musicConfig?.lyrics)
+                ? musicConfig.lyrics
+                : [],
+              genres: Array.isArray(musicConfig?.genres)
+                ? musicConfig.genres
+                : [],
+              voice: Array.isArray(musicConfig?.voice) ? musicConfig.voice : [],
+              instruments: Array.isArray(musicConfig?.instruments)
+                ? musicConfig.instruments
+                : [],
+              tempo: musicConfig?.tempo || "",
+            },
+            musicStatus: null,
+            sunoTaskId: firebase.firestore.FieldValue.delete(),
+            musicUrls: firebase.firestore.FieldValue.delete(),
+          });
+        }
+      } catch (e) {}
+      navigate(Routes.GeneratingSong, { config: musicConfig });
+      return;
+    }
+    setSelectedIndex((prev) => Math.min(prev + 1, steps.length - 1));
+  };
+
+  const onPressBack = () => {
+    if (selectedIndex > 0) {
+      setSelectedIndex((prev) => Math.max(prev - 1, 0));
+    } else {
+      goBack();
+    }
+  };
+
+  return (
+    <Page backgroundImg={background.studioBG2} headerType="NONE">
+      <MusicLandHeader onPressBack={onPressBack} progress={progress} />
+      <View style={{ flex: 1, paddingBottom: gutters, gap: 48 }}>
+        <View
+          style={{ flex: 1 }}
+          onLayout={(event) => setParentLayout(event.nativeEvent.layout)}
+        >
+          <FlatList
+            ref={scrollRef}
+            data={steps}
+            keyExtractor={(item) => item.key}
+            horizontal
+            pagingEnabled
+            scrollEnabled={false}
+            showsHorizontalScrollIndicator={false}
+            initialScrollIndex={selectedIndex}
+            getItemLayout={getItemLayout}
+            style={{ width: containerWidth }}
+            renderItem={({ item }) => (
+              <View
+                style={{
+                  width: containerWidth,
+                  height: parentLayout?.height,
+                  paddingHorizontal: gutters,
+                }}
+              >
+                {item.render()}
+              </View>
+            )}
+          />
+        </View>
+        {selectedIndex !== steps.length && (
+          <GradientButton
+            title={selectedIndex === steps.length - 1 ? "Générer" : "Suivant"}
+            onPress={onPressNext}
+            disabled={!isStepValid}
+          />
+        )}
+      </View>
+    </Page>
+  );
+};
+
+export default ComposeSong;

src/screens/Studio/GeneratingSong.js

@@ -2,14 +2,16 @@ import { useIsFocused } from "@react-navigation/native";
 import { BlurView } from "expo-blur";
 import moment from "moment";
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Alert, Image, Platform, Text, View } from "react-native";
+import { Image, Platform, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { ai, background } from "../../assets";
+import AppAlert from "../../components/Alert";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import ProgressBar from "../../components/ProgressBar";
 import firebase, { projectsRef } from "../../config/firebase";
+import { isWeb } from "../../hooks/useLayoutType";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
@@ -36,7 +38,7 @@ const GeneratingSong = () => {
     const totalMs = 8 * 60 * 1000;
     const clearTimer = () => {
       if (progressTimerRef.current) {
-        clearInterval(progressTimerRef.current);
+        global.clearInterval(progressTimerRef.current);
         progressTimerRef.current = null;
       }
     };
@@ -80,7 +82,7 @@ const GeneratingSong = () => {
 
     update();
     clearTimer();
-    progressTimerRef.current = setInterval(update, 1000);
+    progressTimerRef.current = global.setInterval(update, 1000);
     return () => clearTimer();
   }, [selectedProject?.musicStatus, selectedProject?.generationStartAt]);
 
@@ -163,11 +165,11 @@ const GeneratingSong = () => {
       .catch(() => {})
       .finally(() => {
         // Keep locked while status transitions to GENERATING; will be prevented by guards
-        setTimeout(() => {
+        global.setTimeout(() => {
           callingRef.current = false;
         }, 500);
       });
-  }, []);
+  }, [startMusicGeneration]);
 
   // Trigger generation only when focused; ask once while idle
   useEffect(() => {
@@ -183,7 +185,7 @@ const GeneratingSong = () => {
 
     if (titleOk && isIdle && !askedRef.current) {
       askedRef.current = true;
-      Alert.alert("Attention", "Une génération va être lancée. Continuer ?", [
+      AppAlert("Attention", "Une génération va être lancée. Continuer ?", [
         {
           text: "Non",
           style: "cancel",
@@ -194,7 +196,12 @@ const GeneratingSong = () => {
         { text: "Oui", onPress: () => startMusicGenerationOnce() },
       ]);
     }
-  }, [isFocused, selectedProject?.title, selectedProject?.musicStatus]);
+  }, [
+    isFocused,
+    selectedProject?.title,
+    selectedProject?.musicStatus,
+    startMusicGenerationOnce,
+  ]);
 
   return (
     <Page headerType="NONE" backgroundImg={background.studioBG2}>
@@ -227,7 +234,11 @@ const GeneratingSong = () => {
           >
             <Image
               source={ai.theo}
-              style={{ width: "100%", height: "100%", right: -10 }}
+              style={{
+                width: "100%",
+                height: isWeb ? 300 : "100%",
+                right: -10,
+              }}
               resizeMode="contain"
             />
           </View>

src/screens/Studio/SongReady.js

@@ -1,3 +1,4 @@
+/* global setInterval, clearInterval */
 import { useFocusEffect } from "@react-navigation/native";
 import { useAudioPlayer } from "expo-audio";
 import { BlurView } from "expo-blur";
@@ -51,11 +52,18 @@ const SongReady = () => {
 
   // Sync progression depuis les players
   useEffect(() => {
+    // expo-audio returns seconds on native, but on web values can be milliseconds
+    const toMs = (t) => {
+      const n = Number(t || 0);
+      if (!isFinite(n) || n <= 0) return 0;
+      return Platform.OS === "web" ? n : n * 1000;
+    };
+
     const id = setInterval(() => {
-      const d0 = (player0?.duration || 0) * 1000;
-      const p0 = (player0?.currentTime || 0) * 1000;
-      const d1 = (player1?.duration || 0) * 1000;
-      const p1 = (player1?.currentTime || 0) * 1000;
+      const d0 = toMs(player0?.duration);
+      const p0 = toMs(player0?.currentTime);
+      const d1 = toMs(player1?.duration);
+      const p1 = toMs(player1?.currentTime);
       setProgressInfo({ 0: { pos: p0, dur: d0 }, 1: { pos: p1, dur: d1 } });
       setIsPlaying({ 0: !!player0?.playing, 1: !!player1?.playing });
     }, 300);
@@ -103,6 +111,7 @@ const SongReady = () => {
       const pos = Math.floor(dur * ratio);
       const player = idx === 0 ? player0 : player1;
       if (player && dur > 0) {
+        // seekTo expects seconds
         await player.seekTo?.(Math.floor((pos || 0) / 1000));
       }
     } catch (e) {

src/screens/cover/PhotoCover.js

@@ -1,20 +1,21 @@
-import { ActivityIndicator, Text, View } from "react-native";
-import React from "react";
-import MusicLandHeader from "../../components/MusicLandHeader";
-import { background } from "../../assets";
-import Page from "../../layouts/Page";
-import { goBack, navigate } from "../../navigation/NavigationService";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { gutters, Palette, Style } from "../../styles";
-import BorderGradientButton from "../../components/BorderGradientButton";
-import { Routes } from "../../navigation";
-import GradientButton from "../../components/GradientButton";
-import * as ImagePicker from "expo-image-picker";
-import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
-import { useUserData } from "../../providers/UserDataProvider";
-import useMinuit from "react-native-minuit/src/hooks/useMinuit";
-import firebase, { tasksRef } from "../../config/firebase";
 import { Image as ExpoImage } from "expo-image";
+import * as ImagePicker from "expo-image-picker";
+import React from "react";
+import { ActivityIndicator, Text, View } from "react-native";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit";
+import { background } from "../../assets";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import GradientButton from "../../components/GradientButton";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import firebase, { tasksRef } from "../../config/firebase";
+import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
+import { isWeb } from "../../hooks/useLayoutType";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { useUserData } from "../../providers/UserDataProvider";
+import { gutters, Palette, Style } from "../../styles";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const PhotoCover = () => {
   const { selectedProject, selectedProjectId, updateProjectData } =
@@ -81,7 +82,12 @@ const PhotoCover = () => {
                 priority="high"
                 contentFit="cover"
                 transition={120}
-                style={{ width: "100%", height: 300, borderRadius: 20 }}
+                style={{
+                  width: isWeb ? 300 : "100%",
+                  height: 300,
+                  borderRadius: 20,
+                  alignSelf: "center",
+                }}
               />
             ) : (
               <View

src/screens/cover/PouchReady.js

@@ -1,26 +1,20 @@
-import {
-  View,
-  Text,
-  Image,
-  ActivityIndicator,
-  Alert,
-  setTimeout,
-} from "react-native";
+import { useIsFocused } from "@react-navigation/native";
 import { Image as ExpoImage } from "expo-image";
 import React, { useEffect } from "react";
-import { useIsFocused } from "@react-navigation/native";
-import Page from "../../layouts/Page";
-import { background, icons, img } from "../../assets";
-import MusicLandHeader from "../../components/MusicLandHeader";
-import { goBack, navigate } from "../../navigation/NavigationService";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { gutters, Palette, Style } from "../../styles";
+import { ActivityIndicator, Alert, Text, View } from "react-native";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import { background, icons } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
-import { Routes } from "../../navigation";
+import MusicLandHeader from "../../components/MusicLandHeader";
 import firebase, { tasksRef } from "../../config/firebase";
+import { isWeb } from "../../hooks/useLayoutType";
+import Page from "../../layouts/Page";
+import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
-import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import { gutters, Palette, Style } from "../../styles";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const PouchReady = () => {
   const { selectedProjectId, selectedProject, updateProjectData } = useUser();
@@ -101,12 +95,17 @@ const PouchReady = () => {
                 priority="high"
                 contentFit="cover"
                 transition={120}
-                style={{ width: "100%", height: 300, borderRadius: 20 }}
+                style={{
+                  width: isWeb ? 300 : "100%",
+                  height: 300,
+                  borderRadius: 20,
+                  alignSelf: "center",
+                }}
               />
             ) : (
               <View
                 style={{
-                  width: "100%",
+                  width: isWeb ? 300 : "100%",
                   height: 300,
                   borderRadius: 20,
                   backgroundColor: "#00000040",

src/screens/cover/ValidateCover.js

@@ -1,16 +1,17 @@
-import { View, Image } from "react-native";
 import React from "react";
-import MusicLandHeader from "../../components/MusicLandHeader";
+import { Image, View } from "react-native";
+import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background, img } from "../../assets";
-import Page from "../../layouts/Page";
-import { goBack, navigate } from "../../navigation/NavigationService";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { gutters, Style } from "../../styles";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { isWeb } from "../../hooks/useLayoutType";
+import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
+import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUserData } from "../../providers/UserDataProvider";
-import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import { gutters, Style } from "../../styles";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const ValidateCover = () => {
   const { selectedProject, updateProjectData } = useUserData();
@@ -57,10 +58,11 @@ const ValidateCover = () => {
             <Image
               source={img.placeholder}
               style={{
-                width: "100%",
+                width: isWeb ? 300 : "100%",
                 height: 300,
                 borderRadius: 20,
                 transform: [{ rotateY: "180deg" }],
+                alignSelf: "center",
               }}
             />
             <View
@@ -68,7 +70,12 @@ const ValidateCover = () => {
             >
               <Image
                 source={{ uri: selectedProject?.cover?.result }}
-                style={{ width: "100%", height: "100%", borderRadius: 20 }}
+                style={{
+                  width: isWeb ? 300 : "100%",
+                  height: "100%",
+                  borderRadius: 20,
+                  alignSelf: "center",
+                }}
               />
             </View>
             {/*<View*/}