feat: restart on web

src/screens/Playback/RecordPlayback.web.js

@@ -7,7 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Text, View } from "react-native";
+import { Text, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Svg, { Circle } from "react-native-svg";
 import alert from "../../components/Alert";
@@ -26,6 +26,7 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import { background } from "../../assets";
 import playbackBG2 from "../../assets/UI/playbackBG2.png";
+import RestartSpinnerIcon from "../../assets/UI/RestartSpinnerIcon";
 
 const TIME_BEFORE_INCREMENT_MS = 20000;
 const LOG_PREFIX = "[RecordPlayback.web]";
@@ -736,6 +737,23 @@ const RecordPlayback = ({ route }) => {
       });
     }, 1000);
   }, [songUrl, canRecord, resetSession, startPlayback]);
+
+  const handleRestartRecording = useCallback(async () => {
+    console.log(LOG_PREFIX, "restartButton:pressed", {
+      isPreparing,
+      isRecording,
+    });
+    try {
+      await startCountdownThenRecord();
+    } catch (e) {
+      console.log(
+        LOG_PREFIX,
+        "restartButton:error",
+        String(e?.message || e || ""),
+      );
+    }
+  }, [isPreparing, isRecording, startCountdownThenRecord]);
+
   const progressRatio = dur > 0 ? Math.min(1, pos / dur) : 0;
 
   return (
@@ -873,7 +891,7 @@ const RecordPlayback = ({ route }) => {
             />
           )}
 
-          {/* Progress circulaire */}
+          {/* Progress circulaire + restart */}
           {permissionsGranted && (isRecording || isPreparing) && (
             <View
               style={{
@@ -887,27 +905,38 @@ const RecordPlayback = ({ route }) => {
             >
               <View
                 style={{
-                  width: 100,
-                  height: 100,
-                  borderRadius: 105,
+                  width: 120,
+                  height: 120,
+                  borderRadius: 120,
                   alignItems: "center",
                   justifyContent: "center",
                 }}
               >
                 <ProgressRing
-                  size={100}
+                  size={120}
                   strokeWidth={8}
                   progress={progressRatio}
                 />
-                <View
+                <TouchableOpacity
+                  activeOpacity={0.9}
+                  onPress={handleRestartRecording}
                   style={{
                     position: "absolute",
-                    width: 50,
-                    height: 50,
-                    borderRadius: 55,
+                    width: 70,
+                    height: 70,
+                    borderRadius: 80,
+                    alignItems: "center",
+                    justifyContent: "center",
                     backgroundColor: Palette.white,
+                    shadowColor: "#000000",
+                    shadowOpacity: 0.12,
+                    shadowRadius: 10,
+                    shadowOffset: { width: 0, height: 4 },
+                    elevation: 4,
                   }}
-                />
+                >
+                  <RestartSpinnerIcon />
+                </TouchableOpacity>
               </View>
             </View>
           )}
@@ -981,7 +1010,7 @@ const ProgressRing = ({ size = 50, strokeWidth = 12, progress = 0 }) => {
       style={{
         transform: [{ rotate: "-90deg" }],
         backgroundColor: "#ffffff3d",
-        borderRadius: 55,
+        borderRadius: size / 2,
       }}
     >
       <Circle