From d1be65cb3f808a55748210ed17ee8158196e64d2 Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Thu, 23 Oct 2025 14:34:37 +0200
Subject: [PATCH] playbacks ok web

---
 src/screens/Playback/RecordPlayback.web.js   |  4 +-
 src/screens/Playback/RecordedPlayback.web.js | 54 ++++++++++++++------
 src/screens/Production/DownloadSongs.js      | 13 +++--
 3 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/src/screens/Playback/RecordPlayback.web.js b/src/screens/Playback/RecordPlayback.web.js
index 2183ac0..8ef8d9d 100644
--- a/src/screens/Playback/RecordPlayback.web.js
+++ b/src/screens/Playback/RecordPlayback.web.js
@@ -26,6 +26,7 @@ import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const TIME_BEFORE_INCREMENT_MS = 20000;
 const LOG_PREFIX = "[RecordPlayback.web]";
+const WEB_PREVIEW_WIDTH = 360;
 
 const toSeconds = (v) => {
   const n = Number(v ?? 0);
@@ -709,7 +710,8 @@ const RecordPlayback = ({ route }) => {
 
       <View
         style={{
-          width: isWeb ? 420 : "100%",
+          width: isWeb ? WEB_PREVIEW_WIDTH : "100%",
+          maxWidth: "100%",
           aspectRatio: 9 / 16,
           overflow: "hidden",
           borderRadius: 12,
diff --git a/src/screens/Playback/RecordedPlayback.web.js b/src/screens/Playback/RecordedPlayback.web.js
index 4c9b1cc..00c3f55 100644
--- a/src/screens/Playback/RecordedPlayback.web.js
+++ b/src/screens/Playback/RecordedPlayback.web.js
@@ -1,4 +1,3 @@
-import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Text, View } from "react-native";
 import { background } from "../../assets";
@@ -10,6 +9,8 @@ import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { gutters, Palette } from "../../styles";
+import { isWeb } from "../../hooks/useLayoutType";
+import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 
 const fmtSeconds = (s) => {
   const total = Math.max(0, Math.floor(Number(s || 0)));
@@ -24,6 +25,8 @@ const toSeconds = (value) => {
   return n > 10000 ? n / 1000 : n; // heuristique ms → s
 };
 
+const WEB_PREVIEW_WIDTH = 360;
+
 const RecordedPlayback = ({ route }) => {
   const { videoUri, project } = route.params || {};
   const songUrl = project?.songUrl || null;
@@ -156,11 +159,14 @@ const RecordedPlayback = ({ route }) => {
           {videoUri ? (
             <View
               style={{
-                width: "80%",
+                width: isWeb ? WEB_PREVIEW_WIDTH : "80%",
+                maxWidth: "100%",
                 aspectRatio: 9 / 16,
-                borderRadius: 16,
+                borderRadius: 12,
                 backgroundColor: "#00000066",
                 overflow: "hidden",
+                alignSelf: "center",
+                position: "relative",
               }}
             >
               <video
@@ -171,7 +177,7 @@ const RecordedPlayback = ({ route }) => {
                 style={{
                   width: "100%",
                   height: "100%",
-                  objectFit: "contain",
+                  objectFit: "cover",
                   backgroundColor: "black",
                 }}
                 controls={false}
@@ -181,13 +187,15 @@ const RecordedPlayback = ({ route }) => {
             // Placeholder quand pas de vidéo sur web
             <View
               style={{
-                width: "80%",
+                width: isWeb ? WEB_PREVIEW_WIDTH : "80%",
+                maxWidth: "100%",
                 aspectRatio: 9 / 16,
-                borderRadius: 16,
+                borderRadius: 12,
                 backgroundColor: "#00000066",
                 alignItems: "center",
                 justifyContent: "center",
                 overflow: "hidden",
+                alignSelf: "center",
               }}
             >
               <Text style={{ color: Palette.white, opacity: 0.8 }}>
@@ -196,19 +204,33 @@ const RecordedPlayback = ({ route }) => {
             </View>
           )}
 
-          <Slider
-            value={fmtSeconds(progress.posS)} // mm:ss (seconds)
-            maxValue={fmtSeconds(progress.durS)} // mm:ss (seconds)
-            progress={sliderProgress}
-            seekEnabled={!!songUrl}
-            onSeek={onSeek}
-            onSeekStart={onSeekStart}
-            onSeekEnd={onSeekEnd}
-          />
+          <View
+            style={{
+              width: isWeb ? WEB_PREVIEW_WIDTH : "80%",
+              maxWidth: "100%",
+              alignSelf: "center",
+            }}
+          >
+            <Slider
+              value={fmtSeconds(progress.posS)} // mm:ss (seconds)
+              maxValue={fmtSeconds(progress.durS)} // mm:ss (seconds)
+              progress={sliderProgress}
+              seekEnabled={!!songUrl}
+              onSeek={onSeek}
+              onSeekStart={onSeekStart}
+              onSeekEnd={onSeekEnd}
+            />
+          </View>
         </View>
 
         <View
-          style={{ width: "80%", alignSelf: "center", marginTop: 4, gap: 12 }}
+          style={{
+            width: isWeb ? WEB_PREVIEW_WIDTH : "80%",
+            maxWidth: "100%",
+            alignSelf: "center",
+            marginTop: 4,
+            gap: 12,
+          }}
         >
           <GradientButton
             title="Je valide"
diff --git a/src/screens/Production/DownloadSongs.js b/src/screens/Production/DownloadSongs.js
index e6a38c8..72937f4 100644
--- a/src/screens/Production/DownloadSongs.js
+++ b/src/screens/Production/DownloadSongs.js
@@ -10,7 +10,7 @@ import {
 } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { responsiveHeight } from "react-native-responsive-dimensions";
-import { background, img } from "../../assets";
+import { background } from "../../assets";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import firebase, { projectsRef, serverTimestamp } from "../../config/firebase";
 import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
@@ -106,7 +106,10 @@ const DownloadSongs = ({ route }) => {
           storagePath: `users/${currentUID}/projects/${project.id}/playback.mp4`,
         };
 
-        console.log("[DownloadSongs] calling upload-mergeVideoAndAudio", payload);
+        console.log(
+          "[DownloadSongs] calling upload-mergeVideoAndAudio",
+          payload
+        );
 
         const { data: result } = await callable(payload);
 
@@ -186,7 +189,7 @@ const DownloadSongs = ({ route }) => {
           }}
         >
           <Image
-            source={img.placeholder2}
+            source={{ uri: project?.coverUrl }}
             style={{
               ...size({ size: 158 }),
               borderRadius: 13,
@@ -195,8 +198,8 @@ const DownloadSongs = ({ route }) => {
           />
           <View style={{ gap: 12, paddingVertical: 12 }}>
             <Text style={styles.title}>
-              Prêt à télécharger{" "}
-              {action === "playback" ? "ton  Playback" : "ta chanson"} ?
+              Prêt à télécharger
+              {action === "playback" ? " ton  Playback" : " ta chanson"} ?
             </Text>
             <View style={{ gap: 10 }}>
               <Pressable