buid and fix bottom sheet and react native compressor

2025-10-31 14:28:10 +01:00
parent ce285881ca
commit 6f330c1df8
11 changed files with 387 additions and 180 deletions
@@ -8,6 +8,7 @@ import {
  StyleSheet,
  Text,
  View,
+  Linking,
 } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import {
@@ -17,7 +18,6 @@ import {
 import { useGlobal } from "reactn";
 import { background, icons } from "../../assets";
 import PressableScale from "../../components/PressableScale";
-import ShareBtn from "../../components/ShareBtn/ShareBtn";
 import Slider from "../../components/Slider";
 import {
  arrayRemove,
@@ -38,11 +38,6 @@ import {
  getSegmentMeta,
  normalizeStructureType,
 } from "../../utils/songStructure";
-import {
-  createMusicSharePayload,
-  openShareSheet,
-} from "../../utils/shareSheet";
-import { Feather } from "@expo/vector-icons";

 // 20 secondes
 const timeBeforeIncrement = 20000;
@@ -113,21 +108,6 @@ const MusicDetails = ({ route }) => {
    };
  }, [trackId, songUrl, title, artist, coverUrl, projectId]);

-  const sharePayload = useMemo(
-    () =>
-      createMusicSharePayload({
-        projectId,
-        title,
-        artist,
-      }),
-    [projectId, title, artist]
-  );
-
-  const handleShare = useCallback(() => {
-    if (!sharePayload) return;
-    openShareSheet(sharePayload);
-  }, [sharePayload]);
-
  const handleReport = useCallback(() => {
    if (!projectId) return;
    SheetManager.show("Report", {
@@ -140,6 +120,46 @@ 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 handleDownload = useCallback(async () => {
+    if (!songUrl) return;
+    try {
+      await Linking.openURL(songUrl);
+    } catch (error) {
+      console.log("MusicDetails download error", error?.message);
+    }
+  }, [songUrl]);
+
+  const handleOpenOptions = useCallback(() => {
+    SheetManager.show("MusicOptions", {
+      payload: {
+        projectId,
+        title,
+        ownerId: project?.userId || owner?.id || null,
+        onReport: handleReport,
+        onAddToPlaylist: handleAddToPlaylist,
+        onDownload: handleDownload,
+        downloadDisabled: !songUrl,
+      },
+    });
+  }, [
+    handleAddToPlaylist,
+    handleDownload,
+    handleReport,
+    owner?.id,
+    project?.userId,
+    projectId,
+    songUrl,
+    title,
+  ]);
+
  const {
    isCurrent: isCurrentTrack,
    isPlaying: isTrackPlaying,
@@ -709,40 +729,30 @@ const MusicDetails = ({ route }) => {
                    if (!projectId || !currentUID) return;
                    const next = !fav;
                    setFav(next);
-                  try {
-                    await projectsRef.doc(projectId).update({
-                      likedBy: next
-                        ? arrayUnion(currentUID)
-                        : arrayRemove(currentUID),
-                    });
-                  } catch (e) {
-                    setFav(!next);
-                  }
-                }}
-              >
-                <RNImage
-                  source={fav ? icons.heart : icons.heartOutline}
-                  style={{ ...size({ size: 24 }) }}
-                  resizeMode="contain"
-                />
-              </PressableScale>
-              <PressableScale onPress={handleReport}>
-                <Feather name="flag" size={22} color={Palette.white} style={{ marginHorizontal: 2 }} />
-              </PressableScale>
-              {!!sharePayload && (
-                <ShareBtn style={{ borderRadius: 18 }} onPress={handleShare} />
-              )}
-              <Pressable
-                onPress={() =>
-                  SheetManager.show("Playlist", { payload: { projectId } })
-                }
-              >
-                <RNImage
-                  source={icons.more}
-                  style={{ ...size({ size: 24 }) }}
-                  resizeMode="contain"
-                />
-              </Pressable>
+                    try {
+                      await projectsRef.doc(projectId).update({
+                        likedBy: next
+                          ? arrayUnion(currentUID)
+                          : arrayRemove(currentUID),
+                      });
+                    } catch (e) {
+                      setFav(!next);
+                    }
+                  }}
+                >
+                  <RNImage
+                    source={fav ? icons.heart : icons.heartOutline}
+                    style={{ ...size({ size: 24 }) }}
+                    resizeMode="contain"
+                  />
+                </PressableScale>
+                <PressableScale onPress={handleOpenOptions}>
+                  <RNImage
+                    source={icons.more}
+                    style={{ ...size({ size: 24 }) }}
+                    resizeMode="contain"
+                  />
+                </PressableScale>
              </View>
            </View>
          </View>
@@ -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>
-  );
-};