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;

src/helpers/index.js

@@ -1,12 +1,9 @@
-import numbro from "numbro";
-import { Clipboard } from "react-native-web";
 import moment from "moment";
+import numbro from "numbro";
 
-import alert from "../components/Alert.js";
+import { Linking } from "react-native";
-
 import { isTauri, isWeb } from "../hooks/useLayoutType";
 import Palette from "../styles/Palette.js";
-import { Linking, Share } from "react-native";
 
 export const capitalize = (string) => {
   return string.charAt(0).toUpperCase() + string.slice(1);
@@ -196,26 +193,3 @@ export const openLinkInBrowser = ({ url }) => {
     console.error(error);
   }
 };
-
-export const shareLink = ({ url, title = "", message = "" }) => {
-  try {
-    if (isWeb) {
-      if (!Clipboard.isAvailable) {
-        throw new Error("Clipboard not available");
-      }
-
-      Clipboard.setString(url);
-
-      alert("Lien copié", "Le lien a été copié dans votre presse-papiers.");
-    } else {
-      Share.share({
-        message,
-        url,
-        title,
-      });
-    }
-  } catch (error) {
-    console.log(error);
-    alert("Partage non disponible", "Il y a eu une erreur lors du partage.");
-  }
-};

src/screens/Playbacks.js

@@ -9,7 +9,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Image, Platform, Pressable, Text, View } from "react-native";
+import { Image, Platform, Pressable, Share, Text, View } from "react-native";
 import Carousel from "react-native-reanimated-carousel";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { icons, img } from "../assets";
@@ -105,7 +105,6 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     setLikesCount(lb.length);
     setIsLiked(currentUID ? lb.includes(currentUID) : false);
   }, [item?.likedBy, currentUID]);
-  console.log("has external audio : ", hasExternalAudio);
 
   const audioPlayer = useAudioPlayer(audioSource || undefined);
   const videoPlayer = useVideoPlayer(videoUrl || null, (p) => {
@@ -193,6 +192,7 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
     return () => clearInterval(id);
   }, [isActive, hasExternalAudio, audioPlayer, videoPlayer]);
 
+  // partage: géré via l'API native Share directement dans l'UI
   return (
     <View
       style={{
@@ -360,7 +360,25 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
           >
             <Image source={icons.chatBubble} style={size({ size: 26 })} />
           </Pressable>
-          <Pressable>
+          <Pressable
+            onPress={async () => {
+              try {
+                const url = item?.playbackUrl || "";
+                const title = item?.title || "Partager";
+                const base = item?.title
+                  ? `Découvre « ${item.title} » sur MusicLand`
+                  : `Découvre ce playback sur MusicLand`;
+                const message = url ? `${base}\n${url}` : base;
+
+                await Share.share(
+                  Platform.select({
+                    ios: url ? { url, message, title } : { message, title },
+                    default: { message, title },
+                  })
+                );
+              } catch (e) {}
+            }}
+          >
             <Image source={icons.share} style={size({ size: 26 })} />
           </Pressable>
         </View>