share playback

src/components/bottomsheets/CommentsBottomSheet.js

@@ -87,12 +87,19 @@ const CommentsBottomSheet = () => {
     }
   }, [projectId]);
 
-  const { data: comments = [] } = useDataFromRef({
+  const {
+    data: comments = [],
+    setData: setComments,
+    loadMore,
+    loading: loadingComments,
+  } = useDataFromRef({
     ref: commentsRef,
     simpleRef: false,
-    listener: true,
+    listener: false,
     condition: !!commentsRef,
     refreshArray: [projectId],
+    usePagination: true,
+    batchSize: 20,
   });
 
   const onSend = async () => {
@@ -100,7 +107,7 @@ const CommentsBottomSheet = () => {
     if (!value || !projectId || !currentUID) return;
     try {
       setText("");
-      await projectsRef
+      const docRef = await projectsRef
         .doc(projectId)
         .collection("comments")
         .add({
@@ -110,6 +117,19 @@ const CommentsBottomSheet = () => {
           text: value,
           createdAt: serverTimestamp(),
         });
+      // Optimistic: ajouter immédiatement le commentaire en tête de liste
+      const optimistic = {
+        id: docRef?.id || Math.random().toString(36).slice(2),
+        userId: currentUID,
+        userName: currentUserData?.userName || "",
+        profilePicture: currentUserData?.profilePictureURL || "",
+        text: value,
+        createdAt: new Date(),
+      };
+      setComments((prev = []) => [
+        optimistic,
+        ...prev.filter((x) => x?.id !== optimistic.id),
+      ]);
     } catch {
       // ignore
     }
@@ -127,6 +147,23 @@ const CommentsBottomSheet = () => {
     [typing]
   );
 
+  const handleScroll = useCallback(
+    ({ nativeEvent }) => {
+      try {
+        const { layoutMeasurement, contentOffset, contentSize } =
+          nativeEvent || {};
+        const paddingToBottom = 80;
+        if (
+          layoutMeasurement?.height + contentOffset?.y >=
+          (contentSize?.height || 0) - paddingToBottom
+        ) {
+          loadMore?.();
+        }
+      } catch {}
+    },
+    [loadMore]
+  );
+
   return (
     <BottomSheetModal
       ref={modalRef}
@@ -144,7 +181,12 @@ const CommentsBottomSheet = () => {
     >
       <BlurView
         intensity={20}
-        style={{ flex: 1, backgroundColor: Palette.glass }}
+        style={{
+          flex: 1,
+          backgroundColor: Palette.glass,
+          borderTopLeftRadius: 16,
+          borderTopRightRadius: 16,
+        }}
         experimentalBlurMethod={
           Platform.OS !== "ios" ? "dimezisBlurView" : "none"
         }
@@ -164,6 +206,8 @@ const CommentsBottomSheet = () => {
 
         <BottomSheetScrollView
           keyboardShouldPersistTaps="handled"
+          onScroll={handleScroll}
+          scrollEventThrottle={100}
           contentContainerStyle={{
             paddingHorizontal: 14,
             paddingBottom: (insets?.bottom || 0) + 12,

src/components/modal/ShareModal.js

@@ -0,0 +1,120 @@
+import React, { useMemo } from "react";
+import { Linking, Pressable, Text, View } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import { shareLink } from "../../helpers";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import AppActionSheet from "../AppActionSheet";
+
+const ShareModal = ({ payload }) => {
+  const {
+    title = "Partager",
+    message = "Choisis une application pour partager",
+    text = "Découvre ce playback sur MusicLand",
+    url = "",
+  } = payload || {};
+
+  const onClose = () => {
+    SheetManager.hide("Share");
+  };
+
+  const shareText = useMemo(() => {
+    return [text, url].filter(Boolean).join(" ");
+  }, [text, url]);
+
+  const openScheme = async () => {
+    try {
+      const supported = await Linking.canOpenURL(url);
+      if (supported) {
+        await Linking.openURL(url);
+      } else {
+        // fallback vers partage natif
+        shareLink({ url, title: "Partager", message: shareText });
+      }
+    } catch (e) {
+      shareLink({ url, title: "Partager", message: shareText });
+    } finally {
+      onClose();
+    }
+  };
+
+  return (
+    <AppActionSheet id="Share">
+      <View style={{ gap: 24 }}>
+        <View style={{ gap: 6 }}>
+          <Text
+            style={{
+              fontSize: 20,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+              textAlign: "center",
+            }}
+          >
+            {title}
+          </Text>
+          <Text
+            style={{
+              fontSize: 14,
+              color: Palette.white,
+              opacity: 0.8,
+              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+              textAlign: "center",
+            }}
+          >
+            {message}
+          </Text>
+        </View>
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 16,
+            paddingHorizontal: 12,
+          }}
+        >
+          <Pressable
+            onPress={() => {
+              openScheme();
+            }}
+            style={{ alignItems: "center", gap: 8, flex: 1 }}
+          >
+            <View
+              style={{
+                width: 56,
+                height: 56,
+                borderRadius: 28,
+                borderWidth: 1,
+                borderColor: "#FFFFFF60",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Text
+                style={{
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterMedium,
+                  fontSize: 12,
+                }}
+              >
+                partager
+              </Text>
+            </View>
+            <Text
+              style={{
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterMedium,
+                fontSize: 12,
+              }}
+            >
+              partager
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    </AppActionSheet>
+  );
+};
+
+export default ShareModal;