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,