progress && remove video

src/components/MusicLandHeader.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Image, Pressable, Text, View } from "react-native";
+import { Image, Platform, Pressable, Text, View } from "react-native";
 import { icons } from "../assets";
 import { Palette, Style } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
@@ -12,6 +12,30 @@ const MusicLandHeader = ({
   progress = 1,
   logo = null,
 }) => {
+  const isWeb = Platform.OS === "web";
+  const backButtonStyle = isWeb
+    ? {
+        ...Style.containerRow,
+        gap: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        // backgroundColor: Palette.transparentWhite,
+        // borderRadius: mainBorderRadius,
+      }
+    : { width: 24, height: 24, ...Style.containerCenter };
+  const backIconSource = isWeb ? icons.arrowRight : icons.chevronDown;
+  const backIconStyle = isWeb
+    ? {
+        width: 16,
+        height: 16,
+        transform: [{ rotate: "180deg" }],
+      }
+    : {
+        width: 15,
+        height: 15,
+        transform: [{ rotate: "90deg" }],
+      };
+
   return (
     <View style={{ alignItems: "center", gap: 16 }}>
       <Image
@@ -19,15 +43,23 @@ const MusicLandHeader = ({
         style={{ alignSelf: "center", height: 150, resizeMode: "contain" }}
       />
       <View style={{ width: "100%", ...Style.containerRow, gap: 16 }}>
-        <Pressable
-          style={{ width: 24, height: 24, ...Style.containerCenter }}
-          onPress={onPressBack}
-        >
+        <Pressable style={backButtonStyle} onPress={onPressBack}>
           <Image
-            source={icons.chevronDown}
-            style={{ width: 15, height: 15, transform: [{ rotate: "90deg" }] }}
+            source={backIconSource}
+            style={backIconStyle}
             resizeMode="contain"
           />
+          {isWeb && (
+            <Text
+              style={{
+                fontSize: 14,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterSemiBold,
+              }}
+            >
+              Retour
+            </Text>
+          )}
         </Pressable>
         <View style={{ flex: 1 }}>
           <ProgressBar progress={progress} />

src/screens/Studio/GeneratingSong.js

@@ -36,6 +36,7 @@ const GeneratingSong = () => {
   // Progress based on 8 minutes cap or until status becomes GENERATED
   useEffect(() => {
     const totalMs = 8 * 60 * 1000;
+    const maxGeneratingProgress = 90;
     const clearTimer = () => {
       if (progressTimerRef.current) {
         global.clearInterval(progressTimerRef.current);
@@ -44,6 +45,10 @@ const GeneratingSong = () => {
     };
 
     const status = selectedProject?.musicStatus;
+    const readyUrls = Array.isArray(selectedProject?.musicUrls)
+      ? selectedProject.musicUrls.filter(Boolean)
+      : [];
+    const hasReadySong = readyUrls.length > 0 || !!selectedProject?.songUrl;
 
     if (status !== "GENERATING") {
       // Reset local start when leaving generating state
@@ -51,8 +56,14 @@ const GeneratingSong = () => {
     }
 
     if (status === "GENERATED") {
-      setProgress(100);
       clearTimer();
+      setProgress(hasReadySong ? 100 : maxGeneratingProgress);
+      return () => clearTimer();
+    }
+
+    if (status !== "GENERATING") {
+      clearTimer();
+      setProgress(0);
       return () => clearTimer();
     }
 
@@ -75,8 +86,8 @@ const GeneratingSong = () => {
       }
       const elapsed = moment().diff(moment(startDate));
       const raw = Math.floor((elapsed / totalMs) * 100);
-      // While status is GENERATING, block visual progress at 99%
-      const pct = Math.max(0, Math.min(99, raw));
+      // While status is GENERATING, block visual progress at 90%
+      const pct = Math.max(0, Math.min(maxGeneratingProgress, raw));
       setProgress(pct);
     };
 
@@ -84,7 +95,12 @@ const GeneratingSong = () => {
     clearTimer();
     progressTimerRef.current = global.setInterval(update, 1000);
     return () => clearTimer();
-  }, [selectedProject?.musicStatus, selectedProject?.generationStartAt]);
+  }, [
+    selectedProject?.musicStatus,
+    selectedProject?.generationStartAt,
+    selectedProject?.musicUrls,
+    selectedProject?.songUrl,
+  ]);
 
   // Auto navigate to SongReady when generation completed
   useEffect(() => {

src/screens/Writing/WritingLyrics.js

@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Image, StyleSheet, 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";
-import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { isWeb } from "../../hooks/useLayoutType";
@@ -18,14 +17,6 @@ const WritingLyrics = () => {
     useUserData();
   const { setIsLoading } = useMinuit();
 
-  const [showIntro, setShowIntro] = useState(false);
-
-  useEffect(() => {
-    if (selectedProject === null) {
-      setShowIntro(true);
-    }
-  }, [selectedProject]);
-
   async function createAndNavigate({ hasLyrics = false }) {
     try {
       await setIsLoading(true);
@@ -76,11 +67,6 @@ const WritingLyrics = () => {
           />
         </View>
       </View>
-      <FullscreenIntroVideo
-        url={require("../../../src/assets/video/testVideo.mp4")}
-        visible={showIntro}
-        onClose={() => setShowIntro(false)}
-      />
     </Page>
   );
 };