@droppii-org/chat-mobile 0.2.23 → 0.2.24

package/src/hooks/useImageAttachment.ts

@@ -1,11 +1,16 @@
 import { useCallback, useState } from 'react';
-import type { Image as PickedImage } from 'react-native-image-crop-picker';
+import type {
+  ImageOrVideo as PickedImage,
+  Video as PickedVideo,
+} from 'react-native-image-crop-picker';
 import DeviceUtils from '../utils/device';
 import UIUtils from '../utils/ui';
 import { trans } from '../translation';
 import { getMimeType, isVideoFromPicker } from '../utils/imageUtils';
+import { UPLOAD_CONCURRENCY, UPLOAD_LIMITS } from '../config/uploadLimits';
 import { ImageUploadAPI } from '../services/imageUpload';
 import VideoThumbnailUtil from '../utils/videoThumbnail';
+import { pLimit } from '../utils/pLimit';
 
 export interface ImageWithUploadStatus {
   image: PickedImage;
@@ -20,7 +25,7 @@ export interface ImageWithUploadStatus {
 export interface UseImageAttachmentReturn {
   selectedImages: ImageWithUploadStatus[];
   isImagePreviewVisible: boolean;
-  handleImageAttach: () => Promise<void>;
+  handleImageAttach: (multipleMode?: boolean) => Promise<void>;
   handleImageRemove: (index: number) => void;
   clearAllImages: () => void;
 }
@@ -46,81 +51,44 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
 
   const uploadImage = useCallback(
     async (index: number, image: PickedImage) => {
-      console.log('Upload', 'Step 1: Starting upload for image', { index });
-
-      try {
-        console.log('Upload', 'Step 2: Updating status to uploading...');
-        updateImageStatus(index, {
-          isUploading: true,
-          error: null,
-          uploadProgress: 0,
-        });
-
-        // ✅ OPTIMIZED: Use original path directly, no copy
-        const filePath = image.path.startsWith('file://')
-          ? image.path.replace('file://', '')
-          : image.path;
+      updateImageStatus(index, {
+        isUploading: true,
+        error: null,
+        uploadProgress: 0,
+      });
 
-        const filename = image.filename || 'image.jpg';
+      const filePath = image.path.startsWith('file://')
+        ? image.path.replace('file://', '')
+        : image.path;
 
-        const setProgress = (progress: number) => {
-          try {
-            console.log('Upload', 'Progress', { percentage: progress });
-            updateImageStatus(index, { uploadProgress: progress });
-          } catch (err) {
-            console.error('Upload', 'Progress update error', err);
-          }
-        };
+      const filename = image.filename || 'image.jpg';
 
-        let uploadedImage;
-        try {
-          console.log('Upload', 'Uploading to server...', {
+      try {
+        const uploadedImage = await ImageUploadAPI.uploadImageFile(
+          {
+            path: filePath,
             filename,
-            size: image.size,
-            filePath,
-          });
-          uploadedImage = await ImageUploadAPI.uploadImageFile(
-            {
-              path: filePath,
-              filename,
-              size: image.size || 0,
-              width: image.width || 0,
-              height: image.height || 0,
-              mime: getMimeType(filename),
-            },
-            setProgress
-          );
-          console.log('Upload', 'Upload successful!', {
-            url: uploadedImage?.url,
-          });
-        } catch (uploadError: any) {
-          console.error('Upload', 'Server upload error', uploadError);
-          throw new Error(
-            `Upload failed: ${uploadError?.message || 'Unknown error'}`
-          );
-        }
+            size: image.size || 0,
+            width: image.width || 0,
+            height: image.height || 0,
+            mime: getMimeType(filename),
+          },
+          (progress) => updateImageStatus(index, { uploadProgress: progress })
+        );
 
-        if (!uploadedImage?.url) {
-          throw new Error('No URL returned from server');
-        }
+        if (!uploadedImage?.url) throw new Error('No URL returned from server');
 
-        console.log('Upload', 'Upload complete, updating status...');
         updateImageStatus(index, {
           isUploading: false,
           uploadProgress: 100,
           uploadedUrl: uploadedImage.url,
         });
-
-        console.log('Upload', 'COMPLETE ✓');
-      } catch (error: any) {
-        console.error('Upload', 'ERROR', error);
-        const errorMsg = error?.message || trans('chat:image_upload_failed');
-        updateImageStatus(index, {
-          isUploading: false,
-          error: errorMsg,
-        });
-
-        console.error('uploadImage', 'Full error', error);
+      } catch (error: unknown) {
+        const msg =
+          error instanceof Error
+            ? error.message
+            : trans('chat:image_upload_failed');
+        updateImageStatus(index, { isUploading: false, error: msg });
       }
     },
     [updateImageStatus]
@@ -128,55 +96,36 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
 
   const generateVideoThumbnail = useCallback(
     async (index: number, image: PickedImage) => {
-      if (!isVideoFromPicker(image)) return; // Only for videos
-      console.log('[ImageAttach] Generating thumbnail for video:', image);
-
-      try {
-        let videoDuration = (image as any).duration || 0;
+      if (!isVideoFromPicker(image)) return;
 
-        // ✅ FIX: Validate duration is reasonable
-        if (videoDuration <= 0 || videoDuration > 3600000) {
-          // Duration should be between 0 and 1 hour (3600000ms)
-          console.warn(
-            '[ImageAttach] Invalid duration, using default:',
-            videoDuration
-          );
-          videoDuration = 5000; // Default 5 seconds
-        }
-
-        // ✅ FIX: Choose frame at 35% for better representation
-        const timeMs = Math.min(
-          Math.max(1000, Math.floor(videoDuration * 0.35)),
-          videoDuration - 1000
-        );
-
-        // ✅ OPTIMIZED: Use original path directly, no copy
-        const videoPath = image.path.startsWith('file://')
-          ? image.path.replace('file://', '')
-          : image.path;
+      const video = image as PickedVideo;
+      let videoDuration =
+        typeof video.duration === 'number' ? video.duration : 0;
 
-        console.log('[ImageAttach] Generating thumbnail for video:', {
-          filename: image.filename,
-          videoPath,
-          videoDuration,
-          timeMs,
-        });
+      if (videoDuration <= 0 || videoDuration > 3600000) {
+        videoDuration = 5000;
+      }
 
-        // Generate thumbnail directly from original path
-        console.log('[ImageAttach] Generating thumbnail at timeMs:', timeMs);
-        const thumbnail = await VideoThumbnailUtil.generateThumbnail(
-          videoPath,
-          {
-            time: timeMs,
-            quality: 80,
-            cacheId: `thumb-${index}-${Date.now()}`,
-          }
-        );
+      // Clamp to avoid negative timeMs on short clips.
+      const timeMs = Math.min(
+        Math.max(1000, Math.floor(videoDuration * 0.35)),
+        Math.max(0, videoDuration - 1000)
+      );
+
+      // Pass image.path directly — VideoThumbnailUtil owns path normalization
+      // (Android requires file:// to be preserved; stripping it causes a crash).
+      const baseName =
+        image.filename?.replace(/\.[^.]+$/, '') || `video-${index}`;
+
+      const thumbnail = await VideoThumbnailUtil.generateThumbnail(image.path, {
+        time: timeMs,
+        quality: 80,
+        cacheId: `thumb-${baseName}-${Date.now()}`,
+      });
 
-        if (!thumbnail) throw new Error('Thumbnail generation failed');
+      if (!thumbnail) return;
 
-        // Upload thumbnail (force .jpg extension for image file)
-        const baseName = image.filename?.split('.')[0] || 'video';
+      try {
         const uploadedThumbnail = await ImageUploadAPI.uploadImageFile(
           {
             path: thumbnail.path,
@@ -186,34 +135,22 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
             height: thumbnail.height || 180,
             mime: 'image/jpeg',
           },
-          (progress) => {
-            console.log('[ImageAttach] Thumbnail upload progress:', {
-              index,
-              percentage: progress,
-            });
-          }
+          () => {}
         );
 
-        if (!uploadedThumbnail?.url) {
-          throw new Error('No thumbnail URL returned');
+        if (uploadedThumbnail?.url) {
+          updateImageStatus(index, {
+            thumbnailUrl: uploadedThumbnail.url,
+            thumbnailSize: uploadedThumbnail.size || 0,
+          });
         }
-
-        // Update state with thumbnail
-        updateImageStatus(index, {
-          thumbnailUrl: uploadedThumbnail.url,
-          thumbnailSize: uploadedThumbnail.size || 0,
-        });
-
-        console.log(
-          `✅ [ImageAttach] THUMBNAIL URL (picked): ${uploadedThumbnail.url}`
-        );
-      } catch (error) {
-        console.error('[ImageAttach] Video thumbnail generation error:', error);
-        UIUtils.toast.open({
-          title: 'Thumbnail Error',
-          message: `Failed to generate thumbnail for ${image.filename}`,
-          theme: 'danger',
-        });
+      } catch (error: unknown) {
+        // Thumbnail failure is non-fatal — video still sends without preview.
+        if (__DEV__) {
+          console.warn('[ImageAttach] Thumbnail upload failed:', error);
+        }
+      } finally {
+        VideoThumbnailUtil.cleanupThumbnail(thumbnail.path).catch(() => {});
       }
     },
     [updateImageStatus]
@@ -221,89 +158,65 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
 
   const handleImageAttach = useCallback(
     async (multipleMode: boolean = true) => {
-      console.log('ImageAttach', 'Step 1: User tapped attachment button', {
-        multipleMode,
-      });
       try {
-        console.log('ImageAttach', 'Step 2: Opening image picker...');
         const images = await DeviceUtils.openImagePicker(multipleMode);
+        if (!images || images.length === 0) return;
 
-        if (!images || images.length === 0) {
-          console.log('ImageAttach', 'Step 3: User cancelled picker');
-          return;
-        }
-
-        console.log('ImageAttach', 'Step 4: Images picked', {
-          count: images.length,
-        });
-
-        // The gallery picker can return both images and videos. Apply the
-        // correct size limit per type: 5MB for images, 200MB for videos.
-        const MAX_IMAGE_SIZE = 5 * 1024 * 1024;
-        const MAX_VIDEO_SIZE = 200 * 1024 * 1024;
         const isWithinLimit = (item: PickedImage) => {
           const maxSize = isVideoFromPicker(item)
-            ? MAX_VIDEO_SIZE
-            : MAX_IMAGE_SIZE;
+            ? UPLOAD_LIMITS.video
+            : UPLOAD_LIMITS.image;
           return (item.size || 0) <= maxSize;
         };
 
         const oversizedItems = images.filter((img) => !isWithinLimit(img));
-
         if (oversizedItems.length > 0) {
-          const hasOversizedVideo = oversizedItems.some(isVideoFromPicker);
-          console.warn('ImageAttach', 'Step 5: Some files too large', {
-            count: oversizedItems.length,
-          });
           UIUtils.toast.open({
             title: trans(
-              hasOversizedVideo
+              oversizedItems.some(isVideoFromPicker)
                 ? 'chat:video_too_large'
                 : 'chat:image_too_large'
             ),
             theme: 'danger',
           });
-          const validImages = images.filter(isWithinLimit);
-          if (validImages.length === 0) return;
-          images.splice(0, images.length, ...validImages);
         }
 
-        console.log('ImageAttach', 'Step 6: Size validation passed');
-        const startIndex = selectedImages.length;
-
-        console.log('ImageAttach', 'Step 7: Adding to preview list', {
-          count: images.length,
-          startIndex,
+        const finalImages = images.filter(isWithinLimit);
+        if (finalImages.length === 0) return;
+
+        // Derive startIndex inside the updater so concurrent calls don't
+        // produce the same index when state hasn't committed yet.
+        let startIndex = 0;
+        setSelectedImages((prev) => {
+          startIndex = prev.length;
+          return [
+            ...prev,
+            ...finalImages.map((image) => ({
+              image,
+              uploadProgress: 0,
+              error: null,
+              isUploading: true,
+            })),
+          ];
         });
-
-        setSelectedImages((prev) => [
-          ...prev,
-          ...images.map((image) => ({
-            image,
-            uploadProgress: 0,
-            error: null,
-            isUploading: true,
-          })),
-        ]);
         setIsImagePreviewVisible(true);
 
-        // Generate thumbnails for videos (parallel)
-        console.log(
-          'ImageAttach',
-          'Step 7.5: Generating thumbnails for videos...'
-        );
-        await Promise.all(
-          images.map((image, offset) =>
-            generateVideoThumbnail(startIndex + offset, image)
-          )
-        );
-
-        console.log('ImageAttach', 'Step 8: Starting uploads...');
-        await Promise.all(
-          images.map((image, offset) => uploadImage(startIndex + offset, image))
-        );
-      } catch (error) {
-        console.error('ImageAttach', 'ERROR', error);
+        // Thumbnail generation and upload run concurrently per-item,
+        // both limited to UPLOAD_CONCURRENCY to avoid OOM on low-end devices.
+        await Promise.all([
+          pLimit(
+            finalImages,
+            (image, offset) =>
+              generateVideoThumbnail(startIndex + offset, image),
+            UPLOAD_CONCURRENCY
+          ),
+          pLimit(
+            finalImages,
+            (image, offset) => uploadImage(startIndex + offset, image),
+            UPLOAD_CONCURRENCY
+          ),
+        ]);
+      } catch (error: unknown) {
         UIUtils.toast.open({
           title: trans('chat:image_pick_failed'),
           message: error instanceof Error ? error.message : 'Unknown error',
@@ -311,7 +224,7 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
         });
       }
     },
-    [selectedImages.length, uploadImage, generateVideoThumbnail]
+    [uploadImage, generateVideoThumbnail]
   );
 
   const handleImageRemove = useCallback((index: number) => {

package/src/hooks/useSendAttachment.ts

@@ -56,8 +56,7 @@ export interface UseSendAttachmentReturn {
   error: string | null;
   send(
     items: AttachmentItem[],
-    options?: Partial<AttachmentSendOptions>,
-    onMessageSent?: (message: any) => void
+    options?: Partial<AttachmentSendOptions>
   ): Promise<boolean>;
   clearError(): void;
 }
@@ -75,8 +74,7 @@ export function useSendAttachment(): UseSendAttachmentReturn {
   const send = useCallback(
     async (
       items: AttachmentItem[],
-      options?: Partial<AttachmentSendOptions>,
-      onMessageSent?: (message: any) => void
+      options?: Partial<AttachmentSendOptions>
     ): Promise<boolean> => {
       console.log('[useSendAttachment] Start sending', {
         totalItems: items.length,
@@ -245,8 +243,7 @@ export function useSendAttachment(): UseSendAttachmentReturn {
             {
               strategy: 'individual',
               ...options,
-            },
-            onMessageSent
+            }
           );
 
         console.log('[useSendAttachment] Send result:', {

package/src/hooks/useVideoAttachment.ts

@@ -4,6 +4,7 @@ import DeviceUtils from '../utils/device';
 import UIUtils from '../utils/ui';
 import { trans } from '../translation';
 import { getMimeType } from '../utils/imageUtils';
+import { UPLOAD_LIMITS } from '../config/uploadLimits';
 import { ImageUploadAPI } from '../services/imageUpload';
 import VideoThumbnailUtil from '../utils/videoThumbnail';
 
@@ -260,22 +261,21 @@ export const useVideoAttachment = (): UseVideoAttachmentReturn => {
         count: videos.length,
       });
 
-      const MAX_FILE_SIZE = 200 * 1024 * 1024; // 200MB for videos
       const oversizedVideos = videos.filter(
-        (vid) => (vid.size || 0) > MAX_FILE_SIZE
+        (vid) => (vid.size || 0) > UPLOAD_LIMITS.video
       );
 
       if (oversizedVideos.length > 0) {
         console.warn('VideoAttach', 'Step 5: Some videos too large', {
           count: oversizedVideos.length,
-          maxSize: MAX_FILE_SIZE,
+          maxSize: UPLOAD_LIMITS.video,
         });
         UIUtils.toast.open({
           title: trans('chat:video_too_large'),
           theme: 'danger',
         });
         const validVideos = videos.filter(
-          (vid) => (vid.size || 0) <= MAX_FILE_SIZE
+          (vid) => (vid.size || 0) <= UPLOAD_LIMITS.video
         );
         if (validVideos.length === 0) return;
         videos.splice(0, videos.length, ...validVideos);

package/src/index.tsx

@@ -50,9 +50,5 @@ export type {
   ChatQuickActionsRenderParams,
   ChatAttachmentPanelProps,
 } from './screens/chat-detail';
-export type { DGiftedChatMessage } from './utils/giftedChatMessage';
-export {
-  mapOpenIMMessageToGiftedChat,
-  mapOpenIMMessagesToGiftedChat,
-} from './utils/giftedChatMessage';
+
 export type { PeerType } from '@droppii/openim-rn-client-sdk';