@droppii-org/chat-mobile 0.2.6 → 0.2.8

package/src/hooks/useVideoAttachment.ts

@@ -0,0 +1,334 @@
+import { useCallback, useState } from 'react';
+import RNFS from 'react-native-fs';
+import DeviceUtils from '../utils/device';
+import UIUtils from '../utils/ui';
+import { trans } from '../translation';
+import { getMimeType } from '../utils/imageUtils';
+import { ImageUploadAPI } from '../services/imageUpload';
+import VideoThumbnailUtil from '../utils/videoThumbnail';
+
+interface PickedVideo {
+  path: string;
+  filename?: string;
+  size?: number;
+  width?: number;
+  height?: number;
+  duration?: number;
+}
+
+interface VideoWithUploadStatus {
+  type: 'video';
+  video: PickedVideo;
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+  thumbnailUrl?: string;
+  thumbnailPath?: string;
+  thumbnailSize?: number;
+}
+
+export interface UseVideoAttachmentReturn {
+  selectedVideos: VideoWithUploadStatus[];
+  isVideoPreviewVisible: boolean;
+  handleVideoAttach: () => Promise<void>;
+  handleVideoRemove: (index: number) => void;
+  clearAllVideos: () => void;
+}
+
+export const useVideoAttachment = (): UseVideoAttachmentReturn => {
+  const [selectedVideos, setSelectedVideos] = useState<VideoWithUploadStatus[]>(
+    []
+  );
+  const [isVideoPreviewVisible, setIsVideoPreviewVisible] = useState(false);
+
+  const updateVideoStatus = useCallback(
+    (index: number, updates: Partial<Omit<VideoWithUploadStatus, 'video'>>) => {
+      setSelectedVideos((prev) => {
+        const newVideos = [...prev];
+        if (newVideos[index]) {
+          newVideos[index] = { ...newVideos[index], ...updates };
+        }
+        return newVideos;
+      });
+    },
+    []
+  );
+
+  const uploadVideo = useCallback(
+    async (index: number, video: PickedVideo) => {
+      console.log('UploadVideo', 'Step 1: Starting upload for video', {
+        index,
+      });
+      let cachedFilePath: string | null = null;
+
+      try {
+        console.log('UploadVideo', 'Step 2: Updating status to uploading...');
+        updateVideoStatus(index, {
+          isUploading: true,
+          error: null,
+          uploadProgress: 0,
+        });
+
+        try {
+          console.log('UploadVideo', 'Step 3: Preparing file...', {
+            originalPath: video.path,
+            filename: video.filename,
+          });
+          const ext = video.filename?.split('.').pop() || 'mp4';
+          const fileName = `temp-video-${Date.now()}-${index}.${ext}`;
+          cachedFilePath = `${RNFS.DocumentDirectoryPath}/${fileName}`;
+
+          console.log('UploadVideo', 'Step 4: Copying file to cache...', {
+            from: video.path,
+            to: cachedFilePath,
+          });
+          await RNFS.copyFile(video.path, cachedFilePath);
+          console.log('UploadVideo', 'Step 5: File copied successfully');
+        } catch (fileError: any) {
+          console.error('UploadVideo', 'File copy error', fileError);
+          throw new Error(
+            `Failed to prepare file: ${fileError?.message || 'Unknown error'}`
+          );
+        }
+
+        const filename = video.filename || 'video.mp4';
+
+        const setProgress = (progress: number) => {
+          try {
+            console.log('UploadVideo', 'Progress', { percentage: progress });
+            updateVideoStatus(index, { uploadProgress: progress });
+          } catch (err) {
+            console.error('UploadVideo', 'Progress update error', err);
+          }
+        };
+
+        let uploadedVideo;
+        try {
+          console.log('UploadVideo', 'Step 6: Uploading to server...', {
+            filename,
+            size: video.size,
+            duration: video.duration,
+          });
+          uploadedVideo = await ImageUploadAPI.uploadImageFile(
+            {
+              path: cachedFilePath || '',
+              filename,
+              size: video.size || 0,
+              width: video.width || 0,
+              height: video.height || 0,
+              mime: getMimeType(filename),
+            },
+            setProgress
+          );
+          console.log('UploadVideo', 'Step 7: Upload successful!', {
+            url: uploadedVideo?.url,
+          });
+        } catch (uploadError: any) {
+          console.error('UploadVideo', 'Server upload error', uploadError);
+          throw new Error(
+            `Upload failed: ${uploadError?.message || 'Unknown error'}`
+          );
+        }
+
+        if (!uploadedVideo?.url) {
+          throw new Error('No URL returned from server');
+        }
+
+        console.log('UploadVideo', 'Step 8: Video upload complete');
+
+        // Step 8.5: Generate and upload thumbnail (REQUIRED before ready to send)
+        let thumbnailUrl: string | undefined;
+        let thumbnailPath: string | undefined;
+        let thumbnailSize: number | undefined;
+
+        try {
+          console.log('UploadVideo', 'Step 8.5a: Generating thumbnail...');
+          const thumbnail = await VideoThumbnailUtil.generateThumbnail(
+            video.path,
+            { time: 1000, quality: 80 } // time in milliseconds (1 second)
+          );
+
+          if (!thumbnail) {
+            throw new Error('Failed to generate thumbnail from video');
+          }
+
+          thumbnailPath = thumbnail.path;
+          console.log('✅ [UploadVideo] THUMBNAIL PATH:', thumbnail.path);
+          console.log('UploadVideo', 'Step 8.5b: Thumbnail generated', {
+            path: thumbnail.path,
+            width: thumbnail.width,
+            height: thumbnail.height,
+          });
+
+          console.log('UploadVideo', 'Step 8.5c: Uploading thumbnail...');
+          const uploadedThumbnail = await ImageUploadAPI.uploadImageFile(
+            {
+              path: thumbnail.path,
+              filename: `thumb-${filename}`,
+              size: 0,
+              width: thumbnail.width || 320,
+              height: thumbnail.height || 180,
+              mime: 'image/jpeg',
+            },
+            (progress) => {
+              console.log('UploadVideo', 'Thumbnail upload progress', {
+                percentage: progress,
+              });
+            }
+          );
+
+          if (!uploadedThumbnail?.url) {
+            throw new Error('Thumbnail URL not returned from server');
+          }
+
+          thumbnailUrl = uploadedThumbnail.url;
+          thumbnailSize = uploadedThumbnail.size || 0;
+          console.log('✅ [UploadVideo] THUMBNAIL URL READY:', thumbnailUrl);
+          console.log('UploadVideo', 'Step 8.5d: Thumbnail uploaded', {
+            url: thumbnailUrl,
+            size: `${thumbnailSize} bytes`,
+          });
+        } catch (thumbError: any) {
+          const errorMsg =
+            thumbError?.message || 'Failed to generate/upload thumbnail';
+          console.error('❌ [UploadVideo] THUMBNAIL ERROR:', errorMsg);
+          throw new Error(errorMsg);
+        }
+
+        console.log('UploadVideo', 'Step 9: Preparing data...');
+        updateVideoStatus(index, {
+          isUploading: false,
+          uploadProgress: 100,
+          uploadedUrl: uploadedVideo.url,
+          thumbnailUrl,
+          thumbnailPath,
+          thumbnailSize,
+        });
+
+        console.log(
+          'UploadVideo',
+          'Step 10: Ready to send - waiting for user confirmation'
+        );
+
+        console.log('UploadVideo', 'Step 11: Cleaning up cache files...');
+        try {
+          if (cachedFilePath) {
+            await ImageUploadAPI.cleanupImageFile(cachedFilePath);
+          }
+          if (thumbnailPath) {
+            await VideoThumbnailUtil.cleanupThumbnail(thumbnailPath);
+          }
+        } catch (cleanupError) {
+          console.warn('UploadVideo', 'Cleanup warning', cleanupError);
+        }
+        console.log('UploadVideo', 'Step 12: COMPLETE ✓');
+      } catch (error: any) {
+        console.error('UploadVideo', 'ERROR', error);
+        const errorMsg = error?.message || trans('chat:video_upload_failed');
+        updateVideoStatus(index, {
+          isUploading: false,
+          error: errorMsg,
+        });
+
+        try {
+          if (cachedFilePath) {
+            await ImageUploadAPI.cleanupImageFile(cachedFilePath);
+          }
+        } catch (cleanupError) {
+          console.warn('UploadVideo', 'Cleanup after error', cleanupError);
+        }
+
+        console.error('uploadVideo', 'Full error', error);
+      }
+    },
+    [updateVideoStatus]
+  );
+
+  const handleVideoAttach = useCallback(async () => {
+    console.log('VideoAttach', 'Step 1: User tapped video attachment button');
+    try {
+      console.log('VideoAttach', 'Step 2: Opening video picker...');
+      const videos = await DeviceUtils.openVideoPicker();
+
+      if (!videos || videos.length === 0) {
+        console.log('VideoAttach', 'Step 3: User cancelled picker');
+        return;
+      }
+
+      console.log('VideoAttach', 'Step 4: Videos picked', {
+        count: videos.length,
+      });
+
+      const MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB for videos
+      const oversizedVideos = videos.filter(
+        (vid) => (vid.size || 0) > MAX_FILE_SIZE
+      );
+
+      if (oversizedVideos.length > 0) {
+        console.warn('VideoAttach', 'Step 5: Some videos too large', {
+          count: oversizedVideos.length,
+          maxSize: MAX_FILE_SIZE,
+        });
+        UIUtils.toast.open({
+          title: trans('chat:video_too_large'),
+          theme: 'danger',
+        });
+        const validVideos = videos.filter(
+          (vid) => (vid.size || 0) <= MAX_FILE_SIZE
+        );
+        if (validVideos.length === 0) return;
+        videos.splice(0, videos.length, ...validVideos);
+      }
+
+      console.log('VideoAttach', 'Step 6: Size validation passed');
+      const startIndex = selectedVideos.length;
+
+      console.log('VideoAttach', 'Step 7: Adding to preview list', {
+        count: videos.length,
+        startIndex,
+      });
+
+      setSelectedVideos((prev) => [
+        ...prev,
+        ...videos.map((video) => ({
+          type: 'video' as const,
+          video,
+          uploadProgress: 0,
+          error: null,
+          isUploading: true,
+        })),
+      ]);
+      setIsVideoPreviewVisible(true);
+
+      console.log('VideoAttach', 'Step 8: Starting uploads...');
+      await Promise.all(
+        videos.map((video, offset) => uploadVideo(startIndex + offset, video))
+      );
+    } catch (error) {
+      console.error('VideoAttach', 'ERROR', error);
+      UIUtils.toast.open({
+        title: trans('chat:video_pick_failed'),
+        message: error instanceof Error ? error.message : 'Unknown error',
+        theme: 'danger',
+      });
+    }
+  }, [selectedVideos.length, uploadVideo]);
+
+  const handleVideoRemove = useCallback((index: number) => {
+    setSelectedVideos((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const clearAllVideos = useCallback(() => {
+    setSelectedVideos([]);
+    setIsVideoPreviewVisible(false);
+  }, []);
+
+  return {
+    selectedVideos,
+    isVideoPreviewVisible,
+    handleVideoAttach,
+    handleVideoRemove,
+    clearAllVideos,
+  };
+};

package/src/index.tsx

@@ -1,17 +1,29 @@
 export { ChatAPI } from './services';
+export { setAuthToken, getAuthToken, clearAuthToken } from './services/auth';
+export { initBaseUrl, getBaseUrl } from './config/configuration';
+export { Config } from './config';
 export * from './core';
 export * from './store';
 export * from './context';
 export * from './hooks/useConversationList';
 export * from './hooks/useChatMessages';
+export { useImageAttachment } from './hooks/useImageAttachment';
+export { useMediaViewer } from './hooks/useMediaViewer';
+export type { MediaItem } from './hooks/useMediaViewer';
 export * from './types/chat';
+export * from './types/imageUpload';
+export * from './types/attachment';
+export { initializeAttachmentHandlers } from './services/attachmentHandlers';
+export { AttachmentOrchestratorService } from './services/attachmentOrchestrator';
 export { Avatar } from './components/Avatar';
 export { ThreadCard } from './components/ThreadCard';
+export { AttachmentPreview } from './components/AttachmentPreview';
+export { MediaViewerModal } from './components/MediaViewerModal';
 export { Inbox } from './screens/inbox';
+export { default as MediaViewerScreen } from './screens/MediaView';
 export {
   ChatDetail,
   ChatDetailHeader,
-  ChatList,
   ChatComposer,
   ChatQuickActions,
   ChatAttachmentPanel,

package/src/screens/MediaView/VideoPlayer.tsx

@@ -0,0 +1,211 @@
+import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import {
+  KColors,
+  KContainer,
+  KImage,
+  KDims,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import Video, { IgnoreSilentSwitchType, ResizeMode } from 'react-native-video';
+import type { VideoRef, BufferConfig } from 'react-native-video';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS, useSharedValue } from 'react-native-reanimated';
+
+interface Props {
+  url: string;
+  onPress?: () => void;
+  resizeMode?: ResizeMode;
+  showCustomControls?: boolean;
+  isActive?: boolean;
+  height?: number | string;
+}
+
+const bufferConfig: BufferConfig = {
+  minBufferMs: 15000,
+  maxBufferMs: 50000,
+  bufferForPlaybackMs: 5000,
+  bufferForPlaybackAfterRebufferMs: 5000,
+  cacheSizeMB: 200,
+};
+
+const VideoPlayer = memo((props: Props) => {
+  const {
+    url,
+    onPress,
+    resizeMode = ResizeMode.CONTAIN,
+    showCustomControls = false,
+
+    height,
+  } = props;
+
+  const videoRef = useRef<VideoRef>(null);
+  const containerWidth = useSharedValue(0);
+  const containerHeight = useSharedValue(0);
+
+  const [muted, setMuted] = useState(true);
+  const [paused, setPaused] = useState(false);
+  const [initLoading, setInitLoading] = useState(true);
+  const [buffering, setBuffering] = useState(false);
+
+  /** VIDEO EVENTS */
+  const onReadyForDisplay = useCallback(() => {
+    setBuffering(false);
+    setInitLoading(false);
+  }, []);
+  const onBuffer = useCallback((e: any) => setBuffering(!!e?.isBuffering), []);
+  const onLoadStart = useCallback(() => setBuffering(true), []);
+  const onLoad = useCallback(() => setBuffering(false), []);
+
+  /** ACTIONS (JS thread) */
+  const resumeVideo = useCallback(() => {
+    videoRef.current?.resume?.();
+    setPaused(false);
+  }, []);
+  const pauseVideo = useCallback(() => {
+    videoRef.current?.pause?.();
+    setPaused(true);
+  }, []);
+  const handleSingleTapJS = useCallback(() => {
+    if (paused) resumeVideo();
+    else {
+      pauseVideo();
+      onPress?.();
+    }
+  }, [paused, resumeVideo, pauseVideo, onPress]);
+
+  /** GESTURE (worklet -> runOnJS) */
+  const singleTap = useMemo(
+    () =>
+      Gesture.Tap()
+        .maxDuration(250)
+        .numberOfTaps(1)
+        .onEnd((_e, success) => {
+          'worklet';
+          if (!success) return;
+          runOnJS(handleSingleTapJS)();
+        }),
+    [handleSingleTapJS]
+  );
+
+  useEffect(() => {
+    if (!showCustomControls) setMuted(false);
+  }, [showCustomControls]);
+
+  /** LAYOUT HANDLERS */
+  const handleContainerLayout = useCallback(
+    (e: any) => {
+      containerWidth.value = e.nativeEvent.layout.width;
+      containerHeight.value = e.nativeEvent.layout.height;
+    },
+    [containerWidth, containerHeight]
+  );
+
+  /** RENDERERS */
+  const renderIndicator = useCallback(() => {
+    return (
+      <KContainer.VisibleView visible={(initLoading || buffering) && !paused}>
+        <ActivityIndicator
+          animating
+          size="small"
+          style={styles.loader}
+          color={KColors.primary.normal}
+        />
+      </KContainer.VisibleView>
+    );
+  }, [initLoading, buffering, paused]);
+
+  const renderOverlay = useCallback(() => {
+    return (
+      <KContainer.VisibleView visible={paused && showCustomControls}>
+        <KContainer.View style={styles.overlay}>
+          <KContainer.Touchable style={styles.playButton} onPress={resumeVideo}>
+            <KImage.VectorIcons name="play-b" size={28} color={KColors.white} />
+          </KContainer.Touchable>
+        </KContainer.View>
+      </KContainer.VisibleView>
+    );
+  }, [paused, showCustomControls, resumeVideo]);
+
+  const memoHeight = useMemo(
+    () => ({
+      height: (height as number) ?? 0,
+    }),
+    [height]
+  );
+
+  /** VIEW */
+  const videoContent = (
+    <KContainer.View
+      style={[styles.videoContainer, memoHeight]}
+      collapsable={false}
+      onLayout={handleContainerLayout}
+    >
+      {renderIndicator()}
+
+      <Video
+        ref={videoRef}
+        source={{ uri: url, bufferConfig }}
+        onBuffer={onBuffer}
+        onLoadStart={onLoadStart}
+        onLoad={onLoad}
+        onReadyForDisplay={onReadyForDisplay}
+        style={styles.video}
+        muted={muted}
+        paused={paused}
+        resizeMode={resizeMode}
+        repeat
+        controls={!showCustomControls}
+        ignoreSilentSwitch={IgnoreSilentSwitchType.IGNORE}
+      />
+
+      {renderOverlay()}
+    </KContainer.View>
+  );
+
+  // Only wrap with GestureDetector when using custom controls to avoid conflicts with native controls
+  if (showCustomControls) {
+    return (
+      <GestureDetector gesture={singleTap}>{videoContent}</GestureDetector>
+    );
+  }
+
+  return videoContent;
+});
+
+VideoPlayer.displayName = 'Detail.Header.BannerVideo';
+export default VideoPlayer;
+const styles = StyleSheet.create({
+  videoContainer: {
+    flex: 1,
+    width: KDims.width,
+    backgroundColor: KColors.black,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  video: {
+    ...StyleSheet.absoluteFill,
+    width: '100%',
+    height: '100%',
+  },
+  loader: {
+    position: 'absolute',
+    zIndex: 1,
+  },
+  overlay: {
+    position: 'absolute',
+    zIndex: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playButton: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: KRadiusValue['4x'],
+    padding: KSpacingValue['1rem'],
+    width: 64,
+    height: 64,
+  },
+});