buid and fix bottom sheet and react native compressor

src/components/AppActionSheet.js

@@ -49,7 +49,10 @@ const AppActionSheet = ({
   return (
     <ActionSheet
       id={id}
-      containerStyle={{ backgroundColor: Palette.tran }}
+      containerStyle={[
+        { backgroundColor: Palette.tran },
+        isWeb && { alignItems: "center" },
+      ]}
       gestureEnabled
       indicatorStyle={{
         top: 20,
@@ -61,18 +64,18 @@ const AppActionSheet = ({
     >
       <BlurView
         intensity={Platform.OS === "ios" || isWeb ? 20 : 10}
-        style={{
-          paddingTop: 36,
-          paddingHorizontal: 14,
-          paddingBottom: gutters + (insets?.bottom || 0),
-          backgroundColor: Palette.glass,
-          borderTopLeftRadius: 20,
-          borderTopRightRadius: 20,
-          overflow: "hidden",
-        }}
-        // experimentalBlurMethod={
-        //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-        // }
+        style={[
+          {
+            paddingTop: 36,
+            paddingHorizontal: 14,
+            paddingBottom: gutters + (insets?.bottom || 0),
+            backgroundColor: Palette.glass,
+            borderTopLeftRadius: 20,
+            borderTopRightRadius: 20,
+            overflow: "hidden",
+          },
+          isWeb && { width: 700 },
+        ]}
       >
         {children}
       </BlurView>
@@ -99,8 +102,7 @@ const styles = StyleSheet.create({
     padding: 24,
   },
   webModalCard: {
-    width: 480,
-    maxWidth: "90%",
+    maxWidth: 500,
     borderRadius: 28,
     overflow: "hidden",
     backgroundColor: Palette.glass,

src/components/modal/MusicOptionsModal.js

@@ -0,0 +1,130 @@
+import React, { useCallback } from "react";
+import { Pressable, Text, View } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import AppActionSheet from "../AppActionSheet";
+
+const OptionButton = ({ label, onPress, disabled = false }) => (
+  <Pressable
+    onPress={onPress}
+    disabled={disabled}
+    style={({ pressed }) => ({
+      paddingVertical: 14,
+      paddingHorizontal: 18,
+      borderRadius: 16,
+      backgroundColor: "rgba(255,255,255,0.08)",
+      opacity: disabled ? 0.5 : 1,
+      transform: [{ scale: pressed ? 0.97 : 1 }],
+    })}
+  >
+    <Text
+      style={{
+        fontSize: 16,
+        color: Palette.white,
+        fontFamily: FONT_FAMILY.InterMedium,
+        textAlign: "center",
+      }}
+    >
+      {label}
+    </Text>
+  </Pressable>
+);
+
+const MusicOptionsModal = ({ payload }) => {
+  const {
+    onReport,
+    onAddToPlaylist,
+    onDownload,
+    downloadDisabled = false,
+    projectId = null,
+    ownerId = null,
+    title = null,
+  } = payload || {};
+
+  const trigger = useCallback((action) => {
+    Promise.resolve(SheetManager.hide("MusicOptions"))
+      .catch(() => {})
+      .finally(() => {
+        if (typeof action === "function") {
+          setTimeout(action, 220);
+        }
+      });
+  }, []);
+
+  const handleReport = useCallback(() => {
+    const run = () => {
+      if (typeof onReport === "function") {
+        onReport();
+        return;
+      }
+      if (projectId) {
+        SheetManager.show("Report", {
+          payload: {
+            targetType: "music",
+            projectId,
+            title,
+            ownerId,
+          },
+        });
+      }
+    };
+    trigger(run);
+  }, [onReport, ownerId, projectId, title, trigger]);
+
+  const handleAddToPlaylist = useCallback(() => {
+    const run = () => {
+      if (typeof onAddToPlaylist === "function") {
+        onAddToPlaylist();
+        return;
+      }
+      if (projectId) {
+        SheetManager.show("Playlist", { payload: { projectId } });
+      } else {
+        SheetManager.show("Playlist");
+      }
+    };
+    trigger(run);
+  }, [onAddToPlaylist, projectId, trigger]);
+
+  const handleDownload = useCallback(() => {
+    if (downloadDisabled) return;
+    const run = () => {
+      if (typeof onDownload === "function") {
+        onDownload();
+      }
+    };
+    trigger(run);
+  }, [downloadDisabled, onDownload, trigger]);
+
+  return (
+    <AppActionSheet id="MusicOptions">
+      <View style={{ gap: 20 }}>
+        <Text
+          style={{
+            fontSize: 20,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+            textAlign: "center",
+          }}
+        >
+          Options
+        </Text>
+        <View style={{ gap: 12 }}>
+          <OptionButton label="Signaler" onPress={handleReport} />
+          <OptionButton
+            label="Ajouter à une playlist"
+            onPress={handleAddToPlaylist}
+          />
+          <OptionButton
+            label="Télécharger"
+            onPress={handleDownload}
+            disabled={downloadDisabled}
+          />
+        </View>
+      </View>
+    </AppActionSheet>
+  );
+};
+
+export default MusicOptionsModal;