feat: restart on web

src/screens/Playback/RecordPlayback.js

@@ -10,12 +10,13 @@ import React, {
 } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Svg, { Circle, Path, G, Defs, Rect, ClipPath } from "react-native-svg";
+import Svg, { Circle } from "react-native-svg";
 import alert from "../../components/Alert";
 import GradientButton from "../../components/GradientButton";
 import KaraokeLyrics from "../../components/KaraokeLyrics";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { increment, projectsRef } from "../../config/firebase";
+import RestartSpinnerIcon from "../../assets/UI/RestartSpinnerIcon";
 import usePlayer from "../../hooks/usePlayer";
 import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import { Routes } from "../../navigation";
@@ -887,60 +888,6 @@ const ProgressRing = ({ size = 50, strokeWidth = 12, progress = 0 }) => {
   );
 };
 
-const RestartSpinnerIcon = ({
-  size = 30,
-  color = "#F94697", // couleur unie
-  background = "transparent",
-}) => {
-  return (
-    <View
-      style={{
-        width: size + 8,
-        height: size + 8,
-        borderRadius: size,
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: background,
-      }}
-    >
-      <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-        <G clipPath="url(#clip0)">
-          {/* Cercle re-dessiné sans opacité */}
-          <Path
-            d="
-              M19.7285 10.9286
-              C20.4412 13.5975 19.7507 16.5633 17.6569 18.6571
-              C14.5327 21.7813 9.46734 21.7813 6.34315 18.6571
-              C3.21895 15.5329 3.21895 10.4676 6.34315 7.34338
-              C9.46734 4.21918 14.5327 4.21918 17.6569 7.34338
-              L18.364 8.05048
-            "
-            stroke={color}
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-
-          {/* Flèche */}
-          <Path
-            d="M14.1214 8.05026H18.364V3.80762"
-            stroke={color}
-            strokeWidth={2}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </G>
-
-        <Defs>
-          <ClipPath id="clip0">
-            <Rect width="24" height="24" fill="white" />
-          </ClipPath>
-        </Defs>
-      </Svg>
-    </View>
-  );
-};
-
 export default RecordPlayback;
 
 // Render previous/current/next line to reduce jumpiness