buid and fix bottom sheet and react native compressor

src/screens/Library/MusicDetails.web.js

@@ -24,7 +24,6 @@ import { useGlobal } from "reactn";
 import { background, icons } from "../../assets";
 import PressableScale from "../../components/PressableScale";
 import Slider from "../../components/Slider";
-import Svg, { Circle } from "react-native-svg";
 import {
   arrayRemove,
   arrayUnion,
@@ -50,7 +49,6 @@ import {
   createMusicSharePayload,
   openShareSheet,
 } from "../../utils/shareSheet";
-import { Feather } from "@expo/vector-icons";
 
 // 20 secondes
 const timeBeforeIncrement = 20000;
@@ -227,6 +225,38 @@ const MusicDetails = ({ route }) => {
     });
   }, [owner?.id, project?.userId, projectId, title]);
 
+  const handleAddToPlaylist = useCallback(() => {
+    if (projectId) {
+      SheetManager.show("Playlist", { payload: { projectId } });
+    } else {
+      SheetManager.show("Playlist");
+    }
+  }, [projectId]);
+
+  const handleOpenOptions = useCallback(() => {
+    SheetManager.show("MusicOptions", {
+      payload: {
+        projectId,
+        title,
+        ownerId: project?.userId || owner?.id || null,
+        onReport: handleReport,
+        onAddToPlaylist: handleAddToPlaylist,
+        onDownload: handleDownload,
+        downloadDisabled: isDownloading || !songUrl,
+      },
+    });
+  }, [
+    handleAddToPlaylist,
+    handleDownload,
+    handleReport,
+    isDownloading,
+    owner?.id,
+    project?.userId,
+    projectId,
+    songUrl,
+    title,
+  ]);
+
   const {
     isCurrent: isCurrentTrack,
     isPlaying: isTrackPlaying,
@@ -913,56 +943,13 @@ const MusicDetails = ({ route }) => {
                       resizeMode="contain"
                     />
                   </Pressable>
-                  <PressableScale onPress={handleReport}>
-                    <Feather
-                      name="flag"
-                      size={22}
-                      color={Palette.white}
-                      style={{ marginHorizontal: 2 }}
-                    />
-                  </PressableScale>
-                  <View
-                    style={{
-                      width: 36,
-                      height: 36,
-                      alignItems: "center",
-                      justifyContent: "center",
-                    }}
-                  >
-                    {isDownloading ? (
-                      <DownloadProgressRing
-                        progress={downloadProgress}
-                        size={36}
-                        strokeWidth={3}
-                      />
-                    ) : null}
-                    <Pressable
-                      onPress={handleDownload}
-                      disabled={isDownloading || !songUrl}
-                      style={{
-                        width: 36,
-                        height: 36,
-                        borderRadius: 18,
-                        alignItems: "center",
-                        justifyContent: "center",
-                        backgroundColor: "rgba(255,255,255,0.08)",
-                        opacity: isDownloading || !songUrl ? 0.6 : 1,
-                      }}
-                    >
-                      <Feather name="download" size={18} color={Palette.white} />
-                    </Pressable>
-                  </View>
-                  <Pressable
-                    onPress={() =>
-                      SheetManager.show("Playlist", { payload: { projectId } })
-                    }
-                  >
+                  <PressableScale onPress={handleOpenOptions}>
                     <RNImage
                       source={icons.more}
                       style={{ ...size({ size: 24 }) }}
                       resizeMode="contain"
                     />
-                  </Pressable>
+                  </PressableScale>
                 </View>
               </View>
             </View>
@@ -1166,38 +1153,3 @@ const styles = StyleSheet.create({
     marginBottom: 6,
   },
 });
-
-const DownloadProgressRing = ({ progress = 0, size = 36, strokeWidth = 3 }) => {
-  const radius = size / 2 - strokeWidth / 2;
-  const circumference = 2 * Math.PI * radius;
-  const clamped = Math.max(0, Math.min(1, progress || 0));
-  const offset = circumference * (1 - clamped);
-
-  return (
-    <Svg
-      width={size}
-      height={size}
-      style={{ position: "absolute", top: 0, left: 0 }}
-    >
-      <Circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        stroke="rgba(255, 255, 255, 0.15)"
-        strokeWidth={strokeWidth}
-        fill="transparent"
-      />
-      <Circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        stroke={Palette.primary}
-        strokeWidth={strokeWidth}
-        strokeDasharray={`${circumference} ${circumference}`}
-        strokeDashoffset={offset}
-        strokeLinecap="round"
-        fill="transparent"
-      />
-    </Svg>
-  );
-};