playbacks ok web

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,

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"