more fixes and changes, crash, design …

src/components/ShareBtn/ShareBtn.js

@@ -1,10 +1,16 @@
 import React, { useCallback } from "react";
 import { BlurView } from "expo-blur";
-import { Pressable } from "react-native";
+import { Pressable, Text } from "react-native";
 import { Entypo } from "@expo/vector-icons";
+import { FONT_FAMILY } from "../../styles/Fonts";
 import { openShareSheet } from "../../utils/shareSheet";
 
-export default function ShareBtn({ style, onPress = null }) {
+export default function ShareBtn({
+  style,
+  onPress = null,
+  label = null,
+  iconOnly = false,
+}) {
   const handlePress = useCallback(() => {
     if (typeof onPress === "function") {
       onPress();
@@ -25,14 +31,33 @@ export default function ShareBtn({ style, onPress = null }) {
         intensity={20}
         tint="dark"
         style={{
-          padding: 12,
+          padding: iconOnly ? 10 : label ? 10 : 12,
+          paddingHorizontal: iconOnly ? 10 : label ? 16 : 12,
           borderRadius: 15,
           overflow: "hidden",
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "center",
+          borderWidth: iconOnly ? 1 : 0,
+          borderColor: iconOnly ? "rgba(255, 255, 255, 0.1)" : "transparent",
+          backgroundColor: iconOnly
+            ? "rgba(12, 14, 18, 0.72)"
+            : "transparent",
         }}
       >
+        {label && !iconOnly ? (
+          <Text
+            style={{
+              fontSize: 14,
+              color: "#ffffff",
+              fontFamily: FONT_FAMILY.InterMedium,
+              marginRight: 8,
+            }}
+            numberOfLines={1}
+          >
+            {label}
+          </Text>
+        ) : null}
         <Entypo name="share-alternative" size={18} color="white" />
       </BlurView>
     </Pressable>

src/navigation/Routes.js

@@ -64,7 +64,7 @@ export const Routes = {
 
   Create: "Create",
   HitParade: "HitParade",
-  Playbacks: "Playback",
+  Playbacks: "Playbacks",
 
   Library: "Library",
   AllMyPlaylist: "AllMyPlaylist",

src/providers/StripeProvider.js

@@ -1,10 +1,11 @@
 import React from "react";
-import { Linking, StyleSheet, View } from "react-native";
+import { Linking, Platform, StyleSheet, View } from "react-native";
 import {
   EmbeddedCheckout,
   EmbeddedCheckoutProvider,
 } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
+import * as WebBrowser from "expo-web-browser";
 
 import Overlay from "../components/Overlay";
 import Button from "../components/Button";
@@ -80,6 +81,26 @@ const StripeProvider = ({ children }) => {
       throw new Error("Navigation Stripe impossible dans cet environnement.");
     }
 
+    const isMobileApp =
+      Platform.OS === "ios" || Platform.OS === "android";
+
+    if (isMobileApp) {
+      try {
+        await WebBrowser.openBrowserAsync(checkoutUrl, {
+          enableDefaultShareMenu: false,
+          dismissButtonStyle: "close",
+          presentationStyle:
+            WebBrowser?.WebBrowserPresentationStyle?.PAGE_SHEET,
+        });
+        return;
+      } catch (webBrowserError) {
+        console.warn(
+          "[StripeProvider] WebBrowser checkout fallback",
+          webBrowserError,
+        );
+      }
+    }
+
     const canOpen = await Linking.canOpenURL(checkoutUrl);
     if (!canOpen) {
       throw new Error("Impossible d'ouvrir l'URL de paiement.");

src/screens/Home/Home.js

@@ -5,8 +5,8 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
 import { Image as ExpoImage } from "expo-image";
+import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background, cardsImg, icons } from "../../assets";
 import Alert from "../../components/Alert";
@@ -16,6 +16,7 @@ import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import GradientButton from "../../components/GradientButton";
 import MoreMenu from "../../components/MoreMenu";
 import ProjectDropDown from "../../components/ProjectDropDown/ProjectDropDown";
+import CoinPackModal from "../../components/modal/CoinPackModal";
 import { projectsRef, usersRef } from "../../config/firebase";
 import { isWeb } from "../../hooks/useLayoutType.js";
 import Page from "../../layouts/Page";
@@ -23,12 +24,15 @@ import LandingPage from "../LandingPage";
 import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation/Routes";
 import { useUser } from "../../providers/UserDataProvider";
+import CreditAmount from "../../components/CreditAmount";
+import ShareBtn from "../../components/ShareBtn/ShareBtn";
 import { Palette, gutters } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import {
   getCreationStageStates,
   getStageAction,
 } from "../../utils/projectStages";
+import { openCoinPackModal } from "../../utils/coinPackModal";
 import StageCard from "./components/StageCard";
 import ClubCard from "./components/ClubCard";
 
@@ -424,6 +428,8 @@ const Home = ({ navigation, route }) => {
     [stageStatesByKey],
   );
 
+  const [isCoinModalVisible, setCoinModalVisible] = useState(false);
+
   const handleStagePress = useCallback(
     (stageKey, isLocked) => {
       if (isLocked) {
@@ -451,6 +457,18 @@ const Home = ({ navigation, route }) => {
     navigate(Routes.Payments);
   }, []);
 
+  const handleOpenCoinModal = useCallback(() => {
+    if (isWeb) {
+      openCoinPackModal();
+      return;
+    }
+    setCoinModalVisible(true);
+  }, []);
+
+  const handleCloseCoinModal = useCallback(() => {
+    setCoinModalVisible(false);
+  }, []);
+
   const stageCardContainerStyle = isWeb ? styles.cardsGrid : styles.cardsStack;
   const stageCardItemStyle = isWeb
     ? styles.webStageCard
@@ -476,8 +494,45 @@ const Home = ({ navigation, route }) => {
     </View>
   );
 
+  const coinBalance = useMemo(() => {
+    const value = currentUserData?.coins;
+    if (typeof value === "number" && Number.isFinite(value)) {
+      return value;
+    }
+    if (typeof value === "string") {
+      const parsed = Number(value);
+      if (Number.isFinite(parsed)) {
+        return parsed;
+      }
+    }
+    return 0;
+  }, [currentUserData?.coins]);
+
+  const mobileInfoRow = !isWeb ? (
+    <View style={styles.mobileInfoRow}>
+      <Pressable
+        onPress={handleOpenCoinModal}
+        accessibilityRole="button"
+        style={styles.mobileCoinButton}
+      >
+        <CreditAmount
+          value={coinBalance}
+          style={styles.mobileCoinAmount}
+          textStyle={styles.mobileCoinText}
+          iconSize={20}
+          iconPosition="left"
+        />
+      </Pressable>
+      <ShareBtn
+        style={styles.mobileShareButton}
+        iconOnly
+      />
+    </View>
+  ) : null;
+
   const topBar = (
     <View style={styles.topBar}>
+      {mobileInfoRow}
       <ProjectDropDown
         style={styles.projectDropDown}
         projects={projects}
@@ -542,72 +597,82 @@ const Home = ({ navigation, route }) => {
     </>
   );
 
-  return adventureStarted ? (
-    <View style={styles.root}>
-      <Page
-        shareBtn
-        headerType="NONE"
-        scrollEnabled={false}
-        containerStyle={styles.page}
-        contentContainerStyle={styles.pageContent}
-        maxWidth={1600}
-        width="100%"
-        backgroundColor="#303438"
-      >
-        <View style={styles.inner}>
-          <ExpoImage
-            source={homeBackgroundImage}
-            contentFit="cover"
-            style={styles.centerImage}
-          />
-          {isWeb ? (
-            <View style={styles.contentOverlay}>
-              {topBar}
-              {journeyContent}
-            </View>
-          ) : (
-            <View style={[styles.contentOverlay, styles.mobileContent]}>
-              {topBar}
-              <ScrollView
-                style={styles.mobileScrollView}
-                contentContainerStyle={styles.mobileScrollContent}
-                showsVerticalScrollIndicator={false}
-              >
-                {journeyContent}
-              </ScrollView>
-            </View>
-          )}
-        </View>
-      </Page>
-    </View>
-  ) : (
+  return (
     <>
-      <Page
-        shareBtn
-        title="Landing Page"
-        backgroundImg={landingBackgroundImage}
-        contentContainerStyle={styles.pageContent}
-        backgroundColor="#303438"
-      >
-        <View
-          style={{
-            flex: 1,
-            justifyContent: "center",
-            alignItems: "center",
-          }}
-        >
-          <GradientButton
-            url={videoUrl}
-            title="Commencer l'aventure MusicLand"
-            onPress={handleStartVisit}
-          />
+      {adventureStarted ? (
+        <View style={styles.root}>
+          <Page
+            shareBtn
+            headerType="NONE"
+            scrollEnabled={false}
+            containerStyle={styles.page}
+            contentContainerStyle={styles.pageContent}
+            maxWidth={1600}
+            width="100%"
+            backgroundColor="#303438"
+          >
+            <View style={styles.inner}>
+              <ExpoImage
+                source={homeBackgroundImage}
+                contentFit="cover"
+                style={styles.centerImage}
+              />
+              {isWeb ? (
+                <View style={styles.contentOverlay}>
+                  {topBar}
+                  {journeyContent}
+                </View>
+              ) : (
+                <View style={[styles.contentOverlay, styles.mobileContent]}>
+                  {topBar}
+                  <ScrollView
+                    style={styles.mobileScrollView}
+                    contentContainerStyle={styles.mobileScrollContent}
+                    showsVerticalScrollIndicator={false}
+                  >
+                    {journeyContent}
+                  </ScrollView>
+                </View>
+              )}
+            </View>
+          </Page>
         </View>
-      </Page>
-      <FullscreenIntroVideo
-        url={videoUrl}
-        visible={isIntroVideoVisible}
-        onClose={handleIntroVideoClose}
-      />
+      ) : (
+        <>
+          <Page
+            shareBtn
+            title="Landing Page"
+            backgroundImg={landingBackgroundImage}
+            contentContainerStyle={styles.pageContent}
+            backgroundColor="#303438"
+          >
+            <View
+              style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            >
+              <GradientButton
+                url={videoUrl}
+                title="Commencer l'aventure MusicLand"
+                onPress={handleStartVisit}
+              />
+            </View>
+          </Page>
+          <FullscreenIntroVideo
+            url={videoUrl}
+            visible={isIntroVideoVisible}
+            onClose={handleIntroVideoClose}
+          />
+        </>
+      )}
+      {!isWeb ? (
+        <CoinPackModal
+          visible={isCoinModalVisible}
+          onClose={handleCloseCoinModal}
+        />
+      ) : null}
     </>
   );
 };
@@ -659,10 +724,10 @@ const styles = StyleSheet.create({
   },
   topBar: {
     width: "100%",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    justifyContent: "center",
+    flexDirection: isWeb ? "row" : "column",
+    flexWrap: isWeb ? "wrap" : "nowrap",
+    alignItems: isWeb ? "center" : "stretch",
+    justifyContent: isWeb ? "center" : "flex-start",
     gap: 12,
     marginTop: isWeb ? 24 : 0,
     marginBottom: isWeb ? 8 : 16,
@@ -674,6 +739,38 @@ const styles = StyleSheet.create({
     maxWidth: 420,
     flexGrow: 1,
   },
+  mobileInfoRow: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+  },
+  mobileCoinButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 20,
+    backgroundColor: "rgba(12, 14, 18, 0.72)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    flexShrink: 1,
+  },
+  mobileCoinAmount: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  mobileCoinText: {
+    fontSize: 18,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  mobileShareButton: {
+    flexShrink: 0,
+  },
   mobileContent: {
     flex: 1,
     width: "100%",
@@ -684,7 +781,7 @@ const styles = StyleSheet.create({
   },
   mobileScrollContent: {
     paddingHorizontal: gutters,
-    paddingTop: 24,
+    paddingTop: 0,
     paddingBottom: gutters * 6,
   },
   subtitleWrapper: {

src/screens/Payments.js

@@ -1,6 +1,7 @@
 import React from "react";
 import {
   ActivityIndicator,
+  FlatList,
   Pressable,
   StyleSheet,
   Text,
@@ -9,6 +10,7 @@ import {
 import { useRoute } from "@react-navigation/native";
 import { BlurView } from "expo-blur";
 import { Image as ExpoImage } from "expo-image";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import GradientButton from "../components/GradientButton";
 import CreditAmount from "../components/CreditAmount";
 import Page from "../layouts/Page";
@@ -279,9 +281,14 @@ const PLAN_SEGMENTS = [
 const HERO_IMAGE_WIDTH = isWeb ? 1280 : 520;
 const HERO_IMAGE_HEIGHT = isWeb ? 760 : 360;
 const PAGE_BACKGROUND_COLOR = "#303438";
+const SUBSCRIPTION_DISCLAIMER =
+  "Résiliable en un clic à tout moment. Les prix sont indiqués TTC. Contacte-nous pour des besoins spécifiques (facturation annuelle, volume, offres éducation).";
+const CARD_MIN_HEIGHT = isWeb ? 320 : 240;
 
 export default function Payments() {
   const route = useRoute();
+  const insets = useSafeAreaInsets();
+  const isMobile = !isWeb;
   const initialPack = React.useMemo(() => {
     const rawPack = route?.params?.pack;
     return typeof rawPack === "string" ? rawPack.toLowerCase() : null;
@@ -290,7 +297,7 @@ export default function Payments() {
   const initialSubscriptionPack =
     initialPack && initialPack !== "packs" ? initialPack : null;
 
-  const backgroundImage = background.bgTrans;
+  const backgroundImage = isMobile ? background.homeBG : background.bgTrans;
   const {
     subscriptions,
     isCatalogLoading,
@@ -458,6 +465,144 @@ export default function Payments() {
   const actionButtonTitle = isProcessing
     ? "Redirection..."
     : "Choisir cet abonnement";
+  const currentPlanCount = currentPlans.length;
+  const mobileActionSafePadding = React.useMemo(
+    () => Math.max(insets.bottom, gutters),
+    [insets.bottom],
+  );
+
+  const mobileListContentInset = React.useMemo(
+    () => ({
+      paddingBottom: mobileActionSafePadding + gutters * 3,
+    }),
+    [mobileActionSafePadding],
+  );
+
+  const renderHeaderSection = React.useCallback(() => {
+    return (
+      <>
+        <View style={styles.header}>
+          <Text style={styles.title}>
+            Choisissez l’abonnement qui vous correspond
+          </Text>
+        </View>
+        {combinedErrorMessage ? (
+          <Text style={styles.errorText}>{combinedErrorMessage}</Text>
+        ) : null}
+      </>
+    );
+  }, [combinedErrorMessage]);
+
+  const renderSegmentedControl = React.useCallback(() => {
+    return (
+      <View
+        style={[
+          styles.segmentedControl,
+          isMobile && styles.segmentedControlMobile,
+        ]}
+      >
+        {PLAN_SEGMENTS.map(({ key, label }) => {
+          const isActive = billingPeriod === key;
+          return (
+            <Pressable
+              key={key}
+              onPress={() => setBillingPeriod(key)}
+              style={[
+                styles.segmentButton,
+                isActive && styles.segmentButtonActive,
+              ]}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
+            >
+              <Text
+                style={[
+                  styles.segmentLabel,
+                  isActive && styles.segmentLabelActive,
+                ]}
+              >
+                {label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    );
+  }, [billingPeriod, isMobile]);
+
+  const renderMobilePlanItem = React.useCallback(
+    ({ item }) => (
+      <View style={styles.mobileCard}>
+        <SubscriptionCard
+          plan={item}
+          selected={selectedPriceId === item.priceId}
+          onSelect={handleSelect}
+        />
+      </View>
+    ),
+    [handleSelect, selectedPriceId],
+  );
+
+  const renderMobileEmptyComponent = React.useCallback(() => {
+    return (
+      <View style={styles.mobileEmptyWrapper}>
+        {isLoadingPlans ? (
+          <ActivityIndicator color={Palette.white} />
+        ) : (
+          <Text style={styles.emptyState}>
+            Aucun abonnement Stripe disponible pour le moment.
+          </Text>
+        )}
+      </View>
+    );
+  }, [isLoadingPlans]);
+
+  const renderMobileFooterComponent = React.useCallback(() => {
+    return (
+      <View style={styles.mobileFooter}>
+        {isLoadingPlans && currentPlanCount > 0 ? (
+          <View style={styles.inlineLoader}>
+            <ActivityIndicator color={Palette.white} size="small" />
+          </View>
+        ) : null}
+        <Text style={styles.disclaimer}>{SUBSCRIPTION_DISCLAIMER}</Text>
+      </View>
+    );
+  }, [currentPlanCount, isLoadingPlans]);
+
+  const renderMobileTopSticky = React.useCallback(() => {
+    return (
+      <View style={styles.mobileStickyHeader}>
+        {renderHeaderSection()}
+        {renderSegmentedControl()}
+      </View>
+    );
+  }, [renderHeaderSection, renderSegmentedControl]);
+
+  const renderMobileBottomActions = React.useCallback(() => {
+    return (
+      <View
+        style={[
+          styles.mobileActions,
+          { paddingBottom: mobileActionSafePadding },
+        ]}
+      >
+        <GradientButton
+          title={actionButtonTitle}
+          onPress={handleCheckout}
+          disabled={isActionDisabled}
+          gradientStyle={[
+            styles.actionButtonGradient,
+            styles.mobileActionButtonGradient,
+          ]}
+        />
+      </View>
+    );
+  }, [
+    actionButtonTitle,
+    handleCheckout,
+    isActionDisabled,
+    mobileActionSafePadding,
+  ]);
 
   return (
     <View style={styles.root}>
@@ -467,100 +612,88 @@ export default function Payments() {
         scrollEnabled={false}
         width={isWeb ? 960 : undefined}
         containerStyle={styles.page}
-        contentContainerStyle={styles.pageContent}
+        contentContainerStyle={[
+          styles.pageContent,
+          isMobile && styles.pageContentMobile,
+        ]}
         backgroundColor={PAGE_BACKGROUND_COLOR}
+        topStickyContent={isMobile ? renderMobileTopSticky : undefined}
       >
-        <View style={styles.inner}>
+        <View style={[styles.inner, isMobile && styles.mobileInner]}>
           <ExpoImage
             source={backgroundImage}
             contentFit="cover"
             style={styles.centerImage}
           />
 
-          <View style={styles.content}>
-            <View style={styles.header}>
-              <Text style={styles.title}>
-                Choisissez l’abonnement qui vous correspond
-              </Text>
-            </View>
-
-            {combinedErrorMessage ? (
-              <Text style={styles.errorText}>{combinedErrorMessage}</Text>
-            ) : null}
-
-            {isLoadingPlans && !currentPlans.length ? (
-              <View style={styles.loaderContainer}>
-                <ActivityIndicator color={Palette.white} />
-              </View>
-            ) : null}
-
-            {!isLoadingPlans && currentPlans.length === 0 ? (
-              <Text style={styles.emptyState}>
-                Aucun abonnement Stripe disponible pour le moment.
-              </Text>
-            ) : null}
-
-            <View style={styles.segmentedControl}>
-              {PLAN_SEGMENTS.map(({ key, label }) => {
-                const isActive = billingPeriod === key;
-                return (
-                  <Pressable
-                    key={key}
-                    onPress={() => setBillingPeriod(key)}
-                    style={[
-                      styles.segmentButton,
-                      isActive && styles.segmentButtonActive,
-                    ]}
-                    accessibilityRole="button"
-                    accessibilityState={{ selected: isActive }}
-                  >
-                    <Text
-                      style={[
-                        styles.segmentLabel,
-                        isActive && styles.segmentLabelActive,
-                      ]}
-                    >
-                      {label}
-                    </Text>
-                  </Pressable>
-                );
-              })}
-            </View>
-
-            <View style={[styles.packs, isWeb && styles.packsWeb]}>
-              {currentPlans.map((plan) => (
-                <SubscriptionCard
-                  key={plan.priceId}
-                  plan={plan}
-                  selected={selectedPriceId === plan.priceId}
-                  onSelect={handleSelect}
-                />
-              ))}
-            </View>
-
-            {isLoadingPlans && currentPlans.length > 0 ? (
-              <View style={styles.inlineLoader}>
-                <ActivityIndicator color={Palette.white} size="small" />
-              </View>
-            ) : null}
-
-            <View style={styles.actions}>
-              <GradientButton
-                title={actionButtonTitle}
-                onPress={handleCheckout}
-                disabled={isActionDisabled}
-                gradientStyle={styles.actionButtonGradient}
+          <View style={[styles.content, isMobile && styles.mobileContent]}>
+            {isMobile ? (
+              <FlatList
+                data={currentPlans}
+                keyExtractor={(plan) => plan.priceId}
+                renderItem={renderMobilePlanItem}
+                style={styles.mobileList}
+                contentContainerStyle={[
+                  styles.mobileListContent,
+                  mobileListContentInset,
+                ]}
+                ListEmptyComponent={renderMobileEmptyComponent}
+                ListFooterComponent={renderMobileFooterComponent}
+                showsVerticalScrollIndicator={false}
               />
-            </View>
+            ) : (
+              <>
+                {renderHeaderSection()}
 
-            <Text style={styles.disclaimer}>
-              Résiliable en un clic à tout moment. Les prix sont indiqués TTC.
-              Contacte-nous pour des besoins spécifiques (facturation annuelle,
-              volume, offres éducation).
-            </Text>
+                {isLoadingPlans && currentPlanCount === 0 ? (
+                  <View style={styles.loaderContainer}>
+                    <ActivityIndicator color={Palette.white} />
+                  </View>
+                ) : null}
+
+                {!isLoadingPlans && currentPlanCount === 0 ? (
+                  <Text style={styles.emptyState}>
+                    Aucun abonnement Stripe disponible pour le moment.
+                  </Text>
+                ) : null}
+
+                {renderSegmentedControl()}
+
+                <View style={[styles.packs, isWeb && styles.packsWeb]}>
+                  {currentPlans.map((plan) => (
+                    <SubscriptionCard
+                      key={plan.priceId}
+                      plan={plan}
+                      selected={selectedPriceId === plan.priceId}
+                      onSelect={handleSelect}
+                    />
+                  ))}
+                </View>
+
+                {isLoadingPlans && currentPlanCount > 0 ? (
+                  <View style={styles.inlineLoader}>
+                    <ActivityIndicator color={Palette.white} size="small" />
+                  </View>
+                ) : null}
+
+                <View style={styles.actions}>
+                  <GradientButton
+                    title={actionButtonTitle}
+                    onPress={handleCheckout}
+                    disabled={isActionDisabled}
+                    gradientStyle={styles.actionButtonGradient}
+                  />
+                </View>
+
+                <Text style={styles.disclaimer}>
+                  {SUBSCRIPTION_DISCLAIMER}
+                </Text>
+              </>
+            )}
           </View>
         </View>
       </Page>
+      {isMobile ? renderMobileBottomActions() : null}
     </View>
   );
 }
@@ -578,6 +711,10 @@ const styles = StyleSheet.create({
     paddingTop: 48,
     paddingBottom: 48,
   },
+  pageContentMobile: {
+    paddingTop: gutters,
+    paddingBottom: gutters * 2,
+  },
   inner: {
     flex: 1,
     width: "100%",
@@ -588,6 +725,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: gutters,
     position: "relative",
   },
+  mobileInner: {
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+  },
   content: {
     width: "100%",
     gap: 32,
@@ -596,6 +737,12 @@ const styles = StyleSheet.create({
     position: "relative",
     zIndex: 1,
   },
+  mobileContent: {
+    flex: 1,
+    gap: 0,
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+  },
   centerImage: {
     width: HERO_IMAGE_WIDTH,
     height: HERO_IMAGE_HEIGHT,
@@ -616,7 +763,8 @@ const styles = StyleSheet.create({
   },
   title: {
     fontFamily: FONT_FAMILY.InterBold,
-    fontSize: 32,
+    fontSize: isWeb ? 32 : 24,
+    lineHeight: isWeb ? 40 : 28,
     color: Palette.white,
     textAlign: "center",
   },
@@ -650,11 +798,12 @@ const styles = StyleSheet.create({
   segmentedControl: {
     flexDirection: "row",
     alignSelf: "center",
+    justifyContent: "center",
     padding: 4,
     borderRadius: 999,
     backgroundColor: "rgba(255, 255, 255, 0.08)",
-    marginTop: 12,
-    marginBottom: 8,
+    marginTop: isWeb ? 12 : 8,
+    marginBottom: isWeb ? 8 : 4,
   },
   segmentButton: {
     paddingVertical: 8,
@@ -683,7 +832,7 @@ const styles = StyleSheet.create({
     flex: 1,
     width: "100%",
     minWidth: 0,
-    minHeight: 320,
+    minHeight: CARD_MIN_HEIGHT,
     borderRadius: 24,
     overflow: "hidden",
     borderWidth: 1,
@@ -706,15 +855,15 @@ const styles = StyleSheet.create({
   },
   cardBlur: {
     flex: 1,
-    paddingHorizontal: gutters * 1.2,
-    paddingVertical: gutters,
-    gap: 20,
+    paddingHorizontal: gutters,
+    paddingVertical: isWeb ? gutters : Math.max(gutters * 0.2, 10),
+    gap: isWeb ? 18 : 10,
     justifyContent: "center",
     backgroundColor: "rgba(48, 52, 56, 0.55)",
     borderRadius: 24,
   },
   cardContent: {
-    gap: 16,
+    gap: isWeb ? 16 : 4,
   },
   cardHeader: {
     gap: 6,
@@ -728,7 +877,7 @@ const styles = StyleSheet.create({
   },
   planName: {
     fontFamily: FONT_FAMILY.InterBold,
-    fontSize: 24,
+    fontSize: isWeb ? 24 : 20,
     color: Palette.white,
     flexShrink: 1,
   },
@@ -744,7 +893,7 @@ const styles = StyleSheet.create({
     color: "rgba(255, 255, 255, 0.75)",
   },
   priceBlock: {
-    gap: 4,
+    gap: isWeb ? 4 : 1,
   },
   priceRow: {
     flexDirection: "row",
@@ -768,7 +917,7 @@ const styles = StyleSheet.create({
   },
   priceValue: {
     fontFamily: FONT_FAMILY.InterBold,
-    fontSize: 22,
+    fontSize: isWeb ? 22 : 20,
     color: Palette.white,
   },
   period: {
@@ -805,4 +954,58 @@ const styles = StyleSheet.create({
     lineHeight: 18,
     textAlign: "center",
   },
+  mobileStickyHeader: {
+    width: "100%",
+    gap: 6,
+    paddingBottom: gutters * 0.2,
+    backgroundColor: PAGE_BACKGROUND_COLOR,
+    alignItems: "center",
+  },
+  segmentedControlMobile: {
+    alignSelf: "center",
+    marginBottom: 0,
+  },
+  mobileList: {
+    flex: 1,
+    width: "100%",
+  },
+  mobileListContent: {
+    flexGrow: 1,
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+  mobileCard: {
+    marginBottom: gutters * 0.6,
+  },
+  mobileEmptyWrapper: {
+    paddingVertical: gutters * 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  mobileFooter: {
+    width: "100%",
+    paddingTop: gutters,
+    gap: gutters,
+    alignItems: "center",
+  },
+  mobileActions: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 10,
+    paddingHorizontal: gutters,
+    paddingTop: gutters * 0.4,
+    backgroundColor: PAGE_BACKGROUND_COLOR,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "rgba(255, 255, 255, 0.12)",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 12,
+  },
+  mobileActionButtonGradient: {
+    width: "100%",
+  },
 });

src/screens/Playback/Playback.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Image, StyleSheet, View } from "react-native";
 import { ai, background } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
@@ -6,13 +6,42 @@ import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import Page from "../../layouts/Page";
+import { isWeb } from "../../hooks/useLayoutType";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
+import { useUser } from "../../providers/UserDataProvider";
 import { gutters } from "../../styles";
 
 const Playback = ({ route }) => {
-  const { project } = route.params;
-  const [showIntro, setShowIntro] = useState(true);
+  const { project } = route.params || {};
+  const { videos } = useUser();
+  const [showIntro, setShowIntro] = useState(false);
+
+  const introVideoUrl = useMemo(() => {
+    if (!videos) {
+      return null;
+    }
+    return isWeb ? videos?.benhaiWeb || null : videos?.benhai || null;
+  }, [videos]);
+
+  useEffect(() => {
+    if (!introVideoUrl) {
+      setShowIntro(false);
+      return;
+    }
+    setShowIntro(true);
+  }, [introVideoUrl]);
+
+  const handleCloseIntro = useCallback(() => {
+    setShowIntro(false);
+  }, []);
+
+  const handleShowGuide = useCallback(() => {
+    if (!introVideoUrl) {
+      return;
+    }
+    setShowIntro(true);
+  }, [introVideoUrl]);
 
   const onPressRecord = useCallback(() => {
     navigate(Routes.RecordPlayback, { project });
@@ -36,14 +65,15 @@ const Playback = ({ route }) => {
           />
           <BorderGradientButton
             title="Guide du Playbacker"
-            onPress={() => setShowIntro(true)}
+            onPress={handleShowGuide}
           />
           {/* <BorderGradientButton title="Importer une vidéo" /> */}
         </View>
       </View>
       <FullscreenIntroVideo
-        visible={showIntro}
-        onClose={() => setShowIntro(false)}
+        url={introVideoUrl}
+        visible={showIntro && !!introVideoUrl}
+        onClose={handleCloseIntro}
       />
     </Page>
   );

src/screens/Playback/RecordPlayback.web.js

@@ -24,6 +24,8 @@ import { goBack, navigate } from "../../navigation/NavigationService";
 import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { background } from "../../assets";
+import playbackBG2 from "../../assets/UI/playbackBG2.png";
 
 const TIME_BEFORE_INCREMENT_MS = 20000;
 const LOG_PREFIX = "[RecordPlayback.web]";
@@ -169,7 +171,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "mediaRecorder:stopPrevious:error",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
     }
 
@@ -187,7 +189,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "mediaRecorder:createError",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
       setMediaError(e instanceof Error ? e : new Error(String(e || "")));
       return false;
@@ -209,7 +211,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "mediaRecorder:error",
-        String(err?.message || err || "")
+        String(err?.message || err || ""),
       );
       setMediaError(err instanceof Error ? err : new Error(String(err || "")));
     };
@@ -230,7 +232,7 @@ const RecordPlayback = ({ route }) => {
         console.log(
           LOG_PREFIX,
           "mediaRecorder:onstop:createBlobError",
-          String(e?.message || e || "")
+          String(e?.message || e || ""),
         );
         releaseRecordingUrl();
       }
@@ -253,7 +255,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "mediaRecorder:startError",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
       if (stopRecordingResolveRef.current) {
         stopRecordingResolveRef.current(null);
@@ -283,7 +285,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "mediaRecorder:stopError",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
     }
 
@@ -298,7 +300,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "mediaRecorder:waitStopError",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
     } finally {
       stopRecordingPromiseRef.current = null;
@@ -320,7 +322,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "resetSession:error",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
     }
     try {
@@ -330,7 +332,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "resetSession:recorderError",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
     }
     console.log(LOG_PREFIX, "resetSession:end");
@@ -360,7 +362,7 @@ const RecordPlayback = ({ route }) => {
           setLooping(!!originalLoopingValueRef.current.value);
         }
       };
-    }, [setLooping])
+    }, [setLooping]),
   );
 
   useFocusEffect(
@@ -370,7 +372,7 @@ const RecordPlayback = ({ route }) => {
         console.log(LOG_PREFIX, "focusEffect:cleanup");
         void resetSessionRef.current?.();
       };
-    }, [])
+    }, []),
   );
 
   useEffect(() => {
@@ -385,7 +387,7 @@ const RecordPlayback = ({ route }) => {
         console.log(
           LOG_PREFIX,
           "requestingCameraPermission:error",
-          String(e?.message || e || "")
+          String(e?.message || e || ""),
         );
       }
     })();
@@ -410,7 +412,7 @@ const RecordPlayback = ({ route }) => {
       !navigator.mediaDevices?.getUserMedia
     ) {
       setMediaError(
-        new Error("La capture vidéo n'est pas supportée sur ce navigateur")
+        new Error("La capture vidéo n'est pas supportée sur ce navigateur"),
       );
       setMediaReady(false);
       return;
@@ -460,7 +462,7 @@ const RecordPlayback = ({ route }) => {
         console.log(
           LOG_PREFIX,
           "previewVideo:attachError",
-          String(e?.message || e || "")
+          String(e?.message || e || ""),
         );
       }
     } else {
@@ -502,7 +504,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "stopAndNavigate:pauseError",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
     }
 
@@ -516,7 +518,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "stopAndNavigate:recorderError",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
     }
 
@@ -562,7 +564,7 @@ const RecordPlayback = ({ route }) => {
           console.log(
             LOG_PREFIX,
             "progressLoop:correctInitialJumpError",
-            String(e?.message || e || "")
+            String(e?.message || e || ""),
           );
         }
       }
@@ -644,7 +646,7 @@ const RecordPlayback = ({ route }) => {
                 console.log(
                   LOG_PREFIX,
                   "listenLoop:incrementViews:error",
-                  String(e?.message || e || "")
+                  String(e?.message || e || ""),
                 );
               }
             }
@@ -654,7 +656,7 @@ const RecordPlayback = ({ route }) => {
         console.log(
           LOG_PREFIX,
           "listenLoop:error",
-          String(e?.message || e || "")
+          String(e?.message || e || ""),
         );
       }
     }, 500);
@@ -683,7 +685,7 @@ const RecordPlayback = ({ route }) => {
       console.log(
         LOG_PREFIX,
         "startPlayback:error",
-        String(e?.message || e || "")
+        String(e?.message || e || ""),
       );
       setIsRecording(false);
       setIsPreparing(false);
@@ -702,7 +704,7 @@ const RecordPlayback = ({ route }) => {
               },
             },
           ],
-          { cancelable: false }
+          { cancelable: false },
         );
       }
     }
@@ -743,6 +745,7 @@ const RecordPlayback = ({ route }) => {
       maxWidth={800}
       containerStyle={{ margin: 0, padding: 0, backgroundColor: Palette.black }}
       headerType="NONE"
+      backgroundImg={background.playbackBG2}
     >
       <MusicLandHeader progress={9} onPressBack={goBack} />
 
@@ -767,7 +770,7 @@ const RecordPlayback = ({ route }) => {
             height: "100%",
             objectFit: "cover",
             transform: "scaleX(-1)",
-            backgroundColor: "#000000",
+            backgroundColor: "transparent",
           }}
         />
 
@@ -793,7 +796,7 @@ const RecordPlayback = ({ route }) => {
                   left: 0,
                   right: 0,
                   bottom: 0,
-                  backgroundColor: "#00000099",
+                  backgroundColor: "transparent",
                   alignItems: "center",
                   justifyContent: "center",
                   paddingHorizontal: gutters,
@@ -820,7 +823,7 @@ const RecordPlayback = ({ route }) => {
                   left: 0,
                   right: 0,
                   bottom: 0,
-                  backgroundColor: "#00000066",
+                  backgroundColor: "transparent",
                   alignItems: "center",
                   justifyContent: "center",
                 }}

src/screens/Studio/ComposeSong.js

@@ -115,7 +115,7 @@ const ComposeSong = () => {
   const persistMusicConfig = async () => {
     try {
       if (!selectedProjectId) return;
-      await updateProjectData({
+      const payload = {
         musicConfig: {
           title: musicConfig?.title || "",
           lyrics: Array.isArray(musicConfig?.lyrics) ? musicConfig.lyrics : [],
@@ -128,8 +128,13 @@ const ComposeSong = () => {
         },
         musicStatus: null,
         sunoTaskId: firebase.firestore.FieldValue.delete(),
-        musicUrls: firebase.firestore.FieldValue.delete(),
-      });
+      };
+
+      if (!isRegenerationFlow) {
+        payload.musicUrls = firebase.firestore.FieldValue.delete();
+      }
+
+      await updateProjectData(payload);
     } catch (e) {}
   };
 

src/screens/Studio/ComposeSong.web.js

@@ -175,7 +175,7 @@ const ComposeSong = () => {
   const persistMusicConfig = useCallback(async () => {
     try {
       if (!selectedProjectId) return;
-      await updateProjectData({
+      const payload = {
         musicConfig: {
           title: musicConfig?.title || "",
           lyrics: Array.isArray(musicConfig?.lyrics) ? musicConfig.lyrics : [],
@@ -188,10 +188,20 @@ const ComposeSong = () => {
         },
         musicStatus: null,
         sunoTaskId: firebase.firestore.FieldValue.delete(),
-        musicUrls: firebase.firestore.FieldValue.delete(),
-      });
+      };
+
+      if (!isRegenerationFlow) {
+        payload.musicUrls = firebase.firestore.FieldValue.delete();
+      }
+
+      await updateProjectData(payload);
     } catch (_error) {}
-  }, [musicConfig, selectedProjectId, updateProjectData]);
+  }, [
+    isRegenerationFlow,
+    musicConfig,
+    selectedProjectId,
+    updateProjectData,
+  ]);
 
   const spendCoinsForGeneration = useCallback(async () => {
     if (!currentUID) {

src/screens/Studio/SongReady.js

@@ -11,9 +11,7 @@ import GradientButton from "../../components/GradientButton";
 import ValidateModal from "../../components/modal/ValidateModal";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import Slider from "../../components/Slider";
-import CreditAmount from "../../components/CreditAmount";
 import { isWeb } from "../../hooks/useLayoutType";
-import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
@@ -21,11 +19,20 @@ import { useUser } from "../../providers/UserDataProvider";
 import { Palette, Style } from "../../styles";
 import { gutters, size } from "../../styles/Style";
 import { FONT_FAMILY } from "../../styles/Fonts";
+import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const MUSIC_GENERATION_COIN_COST = 8;
 const SONG_OPTIONS_PER_GENERATION = 2;
 const REGENERATE_MODAL_MAX_WIDTH = 540;
+const formatTime = (ms) => {
+  const totalSeconds = Math.max(0, Math.floor((ms || 0) / 1000));
+  const minutes = Math.floor(totalSeconds / 60)
+    .toString()
+    .padStart(1, "0");
+  const seconds = (totalSeconds % 60).toString().padStart(2, "0");
+  return `${minutes}:${seconds}`;
+};
 
 const SongReady = () => {
   const {
@@ -38,219 +45,72 @@ const SongReady = () => {
   const [showRegenerateModal, setShowRegenerateModal] = useState(false);
   const [musicUrls, setMusicUrls] = useState([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [isPlaying, setIsPlaying] = useState({ 0: false, 1: false });
-  const [progressInfo, setProgressInfo] = useState({
-    0: { pos: 0, dur: 0 },
-    1: { pos: 0, dur: 0 },
-  });
+  const playerRefs = useRef({});
 
-  const player0 = useSharedAudioPlayer(
-    musicUrls[0] ? { uri: musicUrls[0] } : undefined,
-    {
-      id: musicUrls[0] ? `songready-${musicUrls[0]}` : undefined,
-      title:
-        (Array.isArray(selectedProject?.musicTitles)
-          ? selectedProject?.musicTitles?.[0]
-          : null) ||
-        selectedProject?.title ||
-        "Option 1",
-      artwork: selectedProject?.coverUrl || null,
-      coverUrl: selectedProject?.coverUrl || null,
-      metadata: { index: 0, projectId },
+  const registerPlayer = useCallback((index, player) => {
+    if (player) {
+      playerRefs.current[index] = player;
+    } else {
+      delete playerRefs.current[index];
+    }
+  }, []);
+
+  const pauseAllExcept = useCallback(async (keepIndex = null) => {
+    const tasks = Object.entries(playerRefs.current).map(
+      async ([key, player]) => {
+        const idx = Number(key);
+        if (!player || idx === keepIndex) return;
+        try {
+          await player.pause?.();
+        } catch (error) {
+          console.log("SongReady pause error", error?.message);
+        }
+      },
+    );
+    await Promise.all(tasks);
+  }, []);
+
+  const pauseAllPlayers = useCallback(async () => {
+    await pauseAllExcept(null);
+  }, [pauseAllExcept]);
+
+  const handleTogglePlayback = useCallback(
+    async (index, isPlayingNow) => {
+      const player = playerRefs.current[index];
+      if (!player) return;
+      if (isPlayingNow) {
+        try {
+          await player.pause?.();
+        } catch (error) {
+          console.log("SongReady pause toggle", error?.message);
+        }
+        return;
+      }
+      await pauseAllExcept(index);
+      try {
+        await player.play?.();
+      } catch (error) {
+        console.log("SongReady play error", error?.message);
+      }
     },
+    [pauseAllExcept],
   );
-  const player1 = useSharedAudioPlayer(
-    musicUrls[1] ? { uri: musicUrls[1] } : undefined,
-    {
-      id: musicUrls[1] ? `songready-${musicUrls[1]}` : undefined,
-      title:
-        (Array.isArray(selectedProject?.musicTitles)
-          ? selectedProject?.musicTitles?.[1]
-          : null) ||
-        selectedProject?.title ||
-        "Option 2",
-      artwork: selectedProject?.coverUrl || null,
-      coverUrl: selectedProject?.coverUrl || null,
-      metadata: { index: 1, projectId },
-    },
-  );
-  const wasPlayingBeforeSeek = useRef({ 0: false, 1: false });
-  const prefetchedRef = useRef({
-    0: { url: null, done: false },
-    1: { url: null, done: false },
-  });
 
   // Sync URLs from provider's selectedProject
   useEffect(() => {
     const urls = Array.isArray(selectedProject?.musicUrls)
-      ? selectedProject.musicUrls.slice(0, 2)
+      ? selectedProject.musicUrls
+          .filter((url) => typeof url === "string" && url.trim())
+          .map((url) => url.trim())
       : [];
     setMusicUrls(urls);
+    setSelectedIndex((prev) => {
+      if (!urls.length) return 0;
+      return Math.min(prev, urls.length - 1);
+    });
   }, [selectedProject?.musicUrls]);
 
-  const firstUrl = musicUrls[0] ?? null;
-  const secondUrl = musicUrls[1] ?? null;
 
-  useEffect(() => {
-    let isCancelled = false;
-
-    const waitForDuration = async (index) => {
-      const getDurationSeconds = () => {
-        const targetPlayer = index === 0 ? player0 : player1;
-        if (!targetPlayer) return 0;
-        const raw = Number(targetPlayer.duration || 0);
-        return Number.isFinite(raw) ? raw : 0;
-      };
-
-      const start = Date.now();
-      while (!isCancelled) {
-        const durationSeconds = getDurationSeconds();
-        if (durationSeconds > 0) {
-          const durationMs = Math.round(durationSeconds * 1000);
-          setProgressInfo((prev) => {
-            const current = prev?.[index] || { pos: 0, dur: 0 };
-            if (Math.abs(current.dur - durationMs) < 5) return prev;
-            return {
-              ...prev,
-              [index]: {
-                ...current,
-                dur: durationMs,
-              },
-            };
-          });
-          return true;
-        }
-        if (Date.now() - start > 6000) {
-          break;
-        }
-        await new Promise((resolve) => setTimeout(resolve, 150));
-      }
-      return false;
-    };
-
-    const prefetch = async () => {
-      const entries = [
-        [0, firstUrl, player0],
-        [1, secondUrl, player1],
-      ];
-
-      for (const [idx, url, player] of entries) {
-        const cacheEntry = prefetchedRef.current[idx];
-
-        if (!url || !player?.load) {
-          if (cacheEntry) {
-            cacheEntry.url = url ?? null;
-            cacheEntry.done = false;
-          }
-          continue;
-        }
-
-        if (cacheEntry && cacheEntry.url === url && cacheEntry.done) {
-          continue;
-        }
-
-        if (cacheEntry) {
-          cacheEntry.url = url;
-          cacheEntry.done = false;
-        }
-
-        try {
-          await player.load({ startPositionMs: 0 });
-          const resolved = await waitForDuration(idx);
-          if (cacheEntry && !isCancelled) {
-            cacheEntry.done = resolved;
-          }
-        } catch (err) {
-          if (cacheEntry) {
-            cacheEntry.done = false;
-          }
-          if (!isCancelled) {
-            console.log("SongReady preload error", err?.message);
-          }
-        }
-
-        if (isCancelled) {
-          break;
-        }
-      }
-    };
-
-    prefetch();
-
-    return () => {
-      isCancelled = true;
-    };
-  }, [firstUrl, secondUrl, player0, player1]);
-
-  // Sync progression depuis les players
-  useEffect(() => {
-    // Ensure we consistently work with milliseconds whatever the platform
-    const toMs = (t) => {
-      const n = Number(t || 0);
-      if (!isFinite(n) || n <= 0) return 0;
-      return n >= 1000 ? n : n * 1000;
-    };
-
-    const id = setInterval(() => {
-      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);
-    return () => clearInterval(id);
-  }, [player0, player1]);
-
-  const togglePlay = async (idx) => {
-    setSelectedIndex(idx);
-    const url = musicUrls[idx];
-    if (!url) return;
-    try {
-      // Pause l'autre piste si elle joue
-      const other = idx === 0 ? 1 : 0;
-      if (isPlaying[other]) {
-        if (other === 0) await player0?.pause?.();
-        else await player1?.pause?.();
-        setIsPlaying((p) => ({ ...p, [other]: false }));
-      }
-      const player = idx === 0 ? player0 : player1;
-      if (!player) return;
-      if (player.playing) {
-        await player.pause?.();
-        setIsPlaying((p) => ({ ...p, [idx]: false }));
-      } else {
-        await player.play?.();
-        setIsPlaying((p) => ({ ...p, [idx]: true }));
-      }
-    } catch (e) {
-      console.log("Audio error", e?.message);
-    }
-  };
-
-  const fmt = (ms) => {
-    const total = Math.max(0, Math.floor((ms || 0) / 1000));
-    const m = Math.floor(total / 60)
-      .toString()
-      .padStart(1, "0");
-    const s = (total % 60).toString().padStart(2, "0");
-    return `${m}:${s}`;
-  };
-
-  const onSeek = async (idx, ratio) => {
-    try {
-      const info = progressInfo[idx] || {};
-      const dur = info.dur || 0;
-      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) {
-      console.log("Seek error", e?.message);
-    }
-  };
 
   const validateSelection = async () => {
     try {
@@ -277,8 +137,7 @@ const SongReady = () => {
         shouldSetTooltip: false,
       });
 
-      await player0?.pause?.();
-      await player1?.pause?.();
+      await pauseAllPlayers();
       navigate(Routes.ChooseCoverType);
     } catch (e) {
       console.log("Validate error", e?.message);
@@ -289,22 +148,16 @@ const SongReady = () => {
   useFocusEffect(
     useCallback(() => {
       return () => {
-        try {
-          player0?.pause?.();
-          player1?.pause?.();
-        } catch {}
+        pauseAllPlayers();
       };
-    }, [player0, player1]),
+    }, [pauseAllPlayers]),
   );
 
   useEffect(() => {
     return () => {
-      try {
-        player0?.pause?.();
-        player1?.pause?.();
-      } catch {}
+      pauseAllPlayers();
     };
-  }, [player0, player1]);
+  }, [pauseAllPlayers]);
 
   const handleChooseTrack = () => {
     if (isWeb) {
@@ -334,8 +187,7 @@ const SongReady = () => {
   const handleConfirmRegenerate = async () => {
     setShowRegenerateModal(false);
     try {
-      await player0?.pause?.();
-      await player1?.pause?.();
+      await pauseAllPlayers();
     } catch {}
     navigate(Routes.ComposeSong, { isRegeneration: true });
   };
@@ -368,8 +220,7 @@ const SongReady = () => {
       <MusicLandHeader
         onPressBack={async () => {
           try {
-            await player0?.pause?.();
-            await player1?.pause?.();
+            await pauseAllPlayers();
           } catch {}
           navigate(Routes.Home);
         }}
@@ -384,146 +235,19 @@ const SongReady = () => {
           }}
         />
         <View style={{ gap: 16 }}>
-          {[0, 1].map((idx) => {
-            const isSelected = selectedIndex === idx;
-            return (
-              <Pressable
-                key={idx}
-                onPress={() => setSelectedIndex(idx)}
-                style={({ pressed }) => [
-                  {
-                    borderRadius: 20,
-                    borderWidth: isSelected ? 2 : 1,
-                    borderColor: isSelected
-                      ? Palette.primary
-                      : Palette.ultraLightWhite,
-                    overflow: "hidden",
-                  },
-                  pressed && { opacity: 0.96 },
-                ]}
-              >
-                <BlurView
-                  intensity={40}
-                  tint="dark"
-                  style={{
-                    borderRadius: 18,
-                    overflow: "hidden",
-                    padding: 12,
-                    backgroundColor: "#FFFFFF0A",
-                  }}
-                  // experimentalBlurMethod={
-                  //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-                  // }
-                >
-                  <View
-                    style={{
-                      flexDirection: "row",
-                      alignItems: "center",
-                      gap: 12,
-                    }}
-                  >
-                    <Pressable
-                      onPress={() => togglePlay(idx)}
-                      style={{
-                        ...Style.containerCenter,
-                        ...size({ size: 48 }),
-                      }}
-                    >
-                      <Image
-                        source={isPlaying[idx] ? icons.pause : icons.play}
-                      />
-                    </Pressable>
-                    <View style={{ flex: 1 }}>
-                      <Text
-                        style={{
-                          color: "white",
-                          marginBottom: responsiveHeight(1),
-                        }}
-                      >{`Morceau ${idx + 1}`}</Text>
-                      <Slider
-                        value={fmt(progressInfo[idx]?.pos)}
-                        maxValue={fmt(progressInfo[idx]?.dur)}
-                        progress={
-                          progressInfo[idx]?.dur
-                            ? (progressInfo[idx].pos || 0) /
-                              progressInfo[idx].dur
-                            : 0
-                        }
-                        seekEnabled={!!musicUrls[idx]}
-                        onSeekStart={async () => {
-                          setSelectedIndex(idx);
-                          try {
-                            const player = idx === 0 ? player0 : player1;
-                            wasPlayingBeforeSeek.current[idx] =
-                              !!player?.playing;
-                            if (player?.playing) {
-                              await player.pause?.();
-                              setIsPlaying((p) => ({ ...p, [idx]: false }));
-                            }
-                          } catch (e) {
-                            console.log(
-                              "SongReady pause on seek start",
-                              e?.message,
-                            );
-                          }
-                        }}
-                        onSeek={(ratio) => onSeek(idx, ratio)}
-                        onSeekEnd={async () => {
-                          try {
-                            const player = idx === 0 ? player0 : player1;
-                            if (player && wasPlayingBeforeSeek.current[idx]) {
-                              if (player.resume) {
-                                await player.resume?.();
-                              } else {
-                                await player.play?.();
-                              }
-                              setIsPlaying((p) => ({ ...p, [idx]: true }));
-                            }
-                            wasPlayingBeforeSeek.current[idx] = false;
-                          } catch (e) {
-                            console.log(
-                              "SongReady resume after seek",
-                              e?.message,
-                            );
-                          }
-                        }}
-                      />
-                    </View>
-                    <Pressable
-                      onPress={() => setSelectedIndex(idx)}
-                      style={{
-                        ...Style.containerCenter,
-                        ...size({ size: 24 }),
-                      }}
-                    >
-                      <View
-                        style={{
-                          width: 18,
-                          height: 18,
-                          borderRadius: 9,
-                          borderWidth: 2,
-                          borderColor: isSelected ? Palette.primary : "white",
-                          alignItems: "center",
-                          justifyContent: "center",
-                        }}
-                      >
-                        {isSelected && (
-                          <View
-                            style={{
-                              width: 10,
-                              height: 10,
-                              borderRadius: 5,
-                              backgroundColor: Palette.primary,
-                            }}
-                          />
-                        )}
-                      </View>
-                    </Pressable>
-                  </View>
-                </BlurView>
-              </Pressable>
-            );
-          })}
+          {musicUrls.map((url, idx) => (
+            <SongOptionCard
+              key={`${url || "song"}-${idx}`}
+              index={idx}
+              url={url}
+              isSelected={selectedIndex === idx}
+              onSelect={setSelectedIndex}
+              registerPlayer={registerPlayer}
+              onTogglePlayback={handleTogglePlayback}
+              projectId={projectId}
+              selectedProject={selectedProject}
+            />
+          ))}
         </View>
       </View>
       <View
@@ -562,6 +286,230 @@ const SongReady = () => {
   );
 };
 
+const SongOptionCard = ({
+  index,
+  url,
+  isSelected,
+  onSelect,
+  registerPlayer,
+  onTogglePlayback,
+  projectId,
+  selectedProject,
+}) => {
+  const trackTitle =
+    (Array.isArray(selectedProject?.musicTitles)
+      ? selectedProject.musicTitles?.[index]
+      : null) ||
+    selectedProject?.title ||
+    `Morceau ${index + 1}`;
+
+  const player = useSharedAudioPlayer(url ? { uri: url } : undefined, {
+    id: url ? `songready-${url}` : undefined,
+    title: trackTitle,
+    artwork: selectedProject?.coverUrl || null,
+    coverUrl: selectedProject?.coverUrl || null,
+    metadata: { index, projectId },
+  });
+
+  const [progressInfo, setProgressInfo] = useState({ pos: 0, dur: 0 });
+  const [isPlaying, setIsPlaying] = useState(false);
+  const wasPlayingBeforeSeek = useRef(false);
+
+  useEffect(() => {
+    registerPlayer(index, player);
+    return () => registerPlayer(index, null);
+  }, [index, player, registerPlayer]);
+
+  useEffect(() => {
+    if (!player || !url) return;
+    const preload = async () => {
+      try {
+        await player.load?.({ startPositionMs: 0 });
+      } catch (error) {
+        console.log("SongReady preload error", error?.message);
+      }
+    };
+    preload();
+  }, [player, url]);
+
+  useEffect(() => {
+    if (!player) {
+      setIsPlaying(false);
+      setProgressInfo({ pos: 0, dur: 0 });
+      return undefined;
+    }
+    const id = setInterval(() => {
+      const durationMs = Math.max(
+        0,
+        Math.round((Number(player.duration) || 0) * 1000),
+      );
+      const positionMs = Math.max(
+        0,
+        Math.round((Number(player.currentTime) || 0) * 1000),
+      );
+      setProgressInfo((prev) => {
+        if (
+          Math.abs((prev?.dur || 0) - durationMs) < 5 &&
+          Math.abs((prev?.pos || 0) - positionMs) < 5
+        ) {
+          return prev;
+        }
+        return { pos: positionMs, dur: durationMs };
+      });
+      setIsPlaying((prev) => {
+        const next = !!player.playing;
+        if (prev !== next) {
+          return next;
+        }
+        return prev;
+      });
+    }, 300);
+    return () => clearInterval(id);
+  }, [player]);
+
+  const handleSeek = async (ratio) => {
+    if (!player || !progressInfo?.dur) return;
+    const dur = progressInfo.dur || 0;
+    const pos = Math.max(0, Math.floor(dur * ratio));
+    try {
+      await player.seekTo?.(Math.floor(pos / 1000));
+      setProgressInfo((prev) => ({ ...prev, pos }));
+    } catch (error) {
+      console.log("SongReady seek error", error?.message);
+    }
+  };
+
+  const handleSeekStart = async () => {
+    onSelect(index);
+    if (!player) return;
+    try {
+      wasPlayingBeforeSeek.current = !!player.playing;
+      if (player.playing) {
+        await player.pause?.();
+      }
+    } catch (error) {
+      console.log("SongReady pause on seek start", error?.message);
+    }
+  };
+
+  const handleSeekEnd = async () => {
+    if (!player) return;
+    try {
+      if (wasPlayingBeforeSeek.current) {
+        if (player.resume) {
+          await player.resume?.();
+        } else {
+          await player.play?.();
+        }
+      }
+    } catch (error) {
+      console.log("SongReady resume after seek", error?.message);
+    } finally {
+      wasPlayingBeforeSeek.current = false;
+    }
+  };
+
+  const handleToggle = () => {
+    onSelect(index);
+    onTogglePlayback?.(index, isPlaying);
+  };
+
+  return (
+    <Pressable
+      onPress={() => onSelect(index)}
+      style={({ pressed }) => [
+        {
+          borderRadius: 20,
+          borderWidth: isSelected ? 2 : 1,
+          borderColor: isSelected ? Palette.primary : Palette.ultraLightWhite,
+          overflow: "hidden",
+        },
+        pressed && { opacity: 0.96 },
+      ]}
+    >
+      <BlurView
+        intensity={40}
+        tint="dark"
+        style={{
+          borderRadius: 18,
+          overflow: "hidden",
+          padding: 12,
+          backgroundColor: "#FFFFFF0A",
+        }}
+      >
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 12,
+          }}
+        >
+          <Pressable
+            onPress={handleToggle}
+            style={{
+              ...Style.containerCenter,
+              ...size({ size: 48 }),
+            }}
+          >
+            <Image source={isPlaying ? icons.pause : icons.play} />
+          </Pressable>
+          <View style={{ flex: 1 }}>
+            <Text
+              style={{
+                color: "white",
+                marginBottom: responsiveHeight(1),
+              }}
+            >{`Morceau ${index + 1}`}</Text>
+            <Slider
+              value={formatTime(progressInfo?.pos)}
+              maxValue={formatTime(progressInfo?.dur)}
+              progress={
+                progressInfo?.dur
+                  ? (progressInfo.pos || 0) / progressInfo.dur
+                  : 0
+              }
+              seekEnabled={!!url}
+              onSeekStart={handleSeekStart}
+              onSeek={handleSeek}
+              onSeekEnd={handleSeekEnd}
+            />
+          </View>
+          <Pressable
+            onPress={() => onSelect(index)}
+            style={{
+              ...Style.containerCenter,
+              ...size({ size: 24 }),
+            }}
+          >
+            <View
+              style={{
+                width: 18,
+                height: 18,
+                borderRadius: 9,
+                borderWidth: 2,
+                borderColor: isSelected ? Palette.primary : "white",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {isSelected && (
+                <View
+                  style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: 5,
+                    backgroundColor: Palette.primary,
+                  }}
+                />
+              )}
+            </View>
+          </Pressable>
+        </View>
+      </BlurView>
+    </Pressable>
+  );
+};
+
 const RegenerateModal = ({ visible, onClose, onConfirm }) => {
   return (
     <Modal

src/screens/Studio/Studio.js

@@ -142,7 +142,7 @@ const Studio = () => {
             />
             {!selectedProject?.coverUrl && (
               <GradientButton
-                title="Générer une pochette"
+                title="Générer la pochette"
                 containerStyle={{
                   marginTop: responsiveHeight(2),
                 }}

src/screens/Writing/CreateLyricsWithAi.js

@@ -154,9 +154,7 @@ const CreateLyricsWithAi = () => {
       Array.isArray(customStructure) &&
       fallbackStructure?.length &&
       (customStructure.length !== fallbackStructure.length ||
-        customStructure.some(
-          (value, idx) => value !== fallbackStructure[idx]
-        ))
+        customStructure.some((value, idx) => value !== fallbackStructure[idx]))
     ) {
       setCustomStructure(fallbackStructure);
     }
@@ -371,11 +369,7 @@ const CreateLyricsWithAi = () => {
       keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
       backgroundImg={background.writingBG}
     >
-      <MusicLandHeader
-        onPressBack={onPressBack}
-        progress={progress}
-        logo={icons.musicLandWriting}
-      />
+      <MusicLandHeader onPressBack={onPressBack} progress={progress} />
       <View
         style={{
           flex: 1,

src/screens/Writing/CreateLyricsWithAi.web.js

@@ -420,11 +420,7 @@ const CreateLyricsWithAi = () => {
       keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
       backgroundImg={background.libraryBgWeb}
     >
-      <MusicLandHeader
-        onPressBack={onPressBack}
-        progress={progress}
-        // logo={icons.musicLandWriting}
-      />
+      <MusicLandHeader onPressBack={onPressBack} progress={progress} />
       <View
         style={{
           flex: 1,

src/screens/Writing/WritingLyrics.js

@@ -12,7 +12,7 @@ import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUserData } from "../../providers/UserDataProvider";
 import { Palette, gutters } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
-import FullscreenIntroVideo from "../../components/FullscreenIntroVideo.web";
+import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 
 const CTA_BUTTON_HEIGHT = 58;
 const CTA_BUTTON_MAX_WIDTH = 520;

src/screens/cover/ChooseCoverType.js

@@ -293,7 +293,7 @@ export const ChooseCoverType = () => {
           /> */}
           <GradientButton
             title={
-              hasFinalCover ? "Pochette déjà validée" : "Générer une pochette"
+              hasFinalCover ? "Pochette déjà validée" : "Générer la pochette"
             }
             onPress={handleGenerateCover}
             disabled={hasFinalCover}