@droppii-org/chat-mobile 0.2.7 → 0.2.8

package/src/components/AttachmentPreview.tsx

@@ -0,0 +1,304 @@
+import { memo } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { KContainer, KImage, KColors, KLabel } from '@droppii/libs';
+
+type AttachmentType = 'image' | 'video' | 'audio' | 'document' | 'file';
+
+interface AttachmentMetadata {
+  path: string;
+  filename?: string;
+  size?: number;
+  duration?: number;
+  mimeType?: string;
+  width?: number;
+  height?: number;
+}
+
+interface AttachmentItem {
+  metadata: AttachmentMetadata;
+  uploadProgress: number;
+  error: string | null;
+  isUploading: boolean;
+  uploadedUrl?: string;
+  thumbnailUrl?: string;
+}
+
+interface AttachmentPreviewProps {
+  visible: boolean;
+  attachments?: Array<AttachmentItem & { type: AttachmentType }>;
+  onRemove: (type: AttachmentType, index: number) => void;
+}
+
+const formatDuration = (seconds: number): string => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, '0')}`;
+};
+
+const getAttachmentIcon = (type: AttachmentType): string => {
+  switch (type) {
+    case 'image':
+      return 'image';
+    case 'video':
+      return 'play-circle';
+    case 'audio':
+      return 'music';
+    case 'document':
+      return 'file-document';
+    case 'file':
+    default:
+      return 'file';
+  }
+};
+
+export const AttachmentPreview = memo(
+  ({ visible, attachments, onRemove }: AttachmentPreviewProps) => {
+    if (!visible || !attachments?.length) {
+      return null;
+    }
+
+    return (
+      <KContainer.View
+        paddingH="0.75rem"
+        // paddingV="0.75rem"
+        brW={1}
+        brC={KColors.palette.gray.w100}
+        background={KColors.white}
+        style={styles.container}
+      >
+        <KContainer.View row alignItems minH={70}>
+          <KContainer.View flex>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              scrollEventThrottle={16}
+              contentContainerStyle={{ alignItems: 'center' }}
+            >
+              {attachments.map((item, index) => {
+                const {
+                  type,
+                  metadata,
+                  uploadProgress,
+                  error,
+                  isUploading,
+                  thumbnailUrl,
+                } = item;
+
+                const isImage = type === 'image';
+                const isVideo = type === 'video';
+                const hasPreview = isImage || isVideo;
+
+                return (
+                  <KContainer.View key={`${type}-${index}`}>
+                    <KContainer.View style={styles.thumbnail} center>
+                      {/* Video thumbnail */}
+                      {isVideo && thumbnailUrl && (
+                        <KImage.Base
+                          uri={thumbnailUrl}
+                          width={48}
+                          height={48}
+                          resizeMode="cover"
+                        />
+                      )}
+
+                      {/* Video placeholder (no thumbnail yet) */}
+                      {isVideo && !thumbnailUrl && (
+                        <KContainer.View
+                          style={[styles.videoBg, styles.videoThumbnail]}
+                        />
+                      )}
+
+                      {/* Image preview */}
+                      {isImage && (
+                        <KImage.Base
+                          uri={`file://${metadata.path}`}
+                          width={48}
+                          height={48}
+                        />
+                      )}
+
+                      {/* Show icon overlay for non-media files */}
+                      {!hasPreview && (
+                        <KContainer.View
+                          style={styles.iconOverlay}
+                          center
+                          background={KColors.palette.gray.w100}
+                        >
+                          <KImage.VectorIcons
+                            name={getAttachmentIcon(type)}
+                            provider="MaterialCommunityIcons"
+                            size={24}
+                            color={KColors.palette.primary.w400}
+                          />
+                        </KContainer.View>
+                      )}
+
+                      {/* Video duration badge */}
+                      {isVideo && metadata.duration && (
+                        <KContainer.View style={styles.durationBadge} center>
+                          <KLabel.Text
+                            typo="TextXsNormal"
+                            color={KColors.white}
+                            style={styles.durationText}
+                          >
+                            {formatDuration(metadata.duration / 1000)}
+                          </KLabel.Text>
+                        </KContainer.View>
+                      )}
+
+                      {/* Type icon for non-preview items */}
+                      {!hasPreview && (
+                        <KContainer.View style={styles.typeIcon} center>
+                          <KImage.VectorIcons
+                            name={getAttachmentIcon(type)}
+                            provider="MaterialCommunityIcons"
+                            size={14}
+                            color={KColors.white}
+                          />
+                        </KContainer.View>
+                      )}
+
+                      {/* Error state */}
+                      {error && (
+                        <KContainer.View style={styles.errorOverlay} center>
+                          <KImage.VectorIcons
+                            name="close-circle"
+                            provider="MaterialCommunityIcons"
+                            size={28}
+                            color={KColors.white}
+                          />
+                        </KContainer.View>
+                      )}
+
+                      {/* Progress overlay */}
+                      {isUploading && (
+                        <KContainer.View style={styles.progressOverlay} center>
+                          <KLabel.Text
+                            typo="TextSmNormal"
+                            color={KColors.white}
+                          >
+                            {uploadProgress}%
+                          </KLabel.Text>
+                        </KContainer.View>
+                      )}
+                    </KContainer.View>
+                    {/* Remove button */}
+                    <KContainer.Touchable
+                      style={styles.removeButton}
+                      center
+                      br="round"
+                      background={KColors.black}
+                      onPress={() => onRemove(type, index)}
+                      disabled={isUploading}
+                      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                    >
+                      <KImage.VectorIcons
+                        name="close"
+                        provider="MaterialCommunityIcons"
+                        size={14}
+                        color={KColors.white}
+                      />
+                    </KContainer.Touchable>
+                  </KContainer.View>
+                );
+              })}
+            </ScrollView>
+          </KContainer.View>
+        </KContainer.View>
+      </KContainer.View>
+    );
+  }
+);
+
+AttachmentPreview.displayName = 'AttachmentPreview';
+
+const styles = StyleSheet.create({
+  container: {
+    // minHeight: 80,
+  },
+  thumbnail: {
+    position: 'relative',
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginRight: 8,
+    backgroundColor: KColors.palette.gray.w50,
+  },
+  durationBadge: {
+    position: 'absolute',
+    bottom: 4,
+    right: 4,
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderRadius: 3,
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+  },
+  durationText: {
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  iconOverlay: {
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+  },
+  videoIcon: {
+    position: 'absolute',
+    top: 2,
+    right: 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    borderRadius: 8,
+    width: 20,
+    height: 20,
+  },
+  typeIcon: {
+    position: 'absolute',
+    bottom: 2,
+    right: 2,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderRadius: 6,
+    width: 16,
+    height: 16,
+  },
+  videoBg: {
+    width: 48,
+    height: 48,
+    borderRadius: 4,
+  },
+  videoThumbnail: {
+    backgroundColor: KColors.black,
+  },
+  progressOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+  },
+  errorOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(255, 59, 48, 0.8)',
+  },
+  removeButton: {
+    position: 'absolute',
+    top: -8,
+    right: 2,
+    width: 22,
+    height: 22,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 3,
+  },
+  sendButton: {
+    width: 48,
+    height: 48,
+  },
+});

package/src/components/MediaViewerModal.tsx

@@ -0,0 +1,70 @@
+import { forwardRef, useImperativeHandle } from 'react';
+import { Modal, StyleSheet } from 'react-native';
+import MediaViewerScreen from '../screens/MediaView';
+import { useMediaViewer, type MediaItem } from '../hooks/useMediaViewer';
+
+export interface MediaViewerModalHandle {
+  show: (items: MediaItem[], index?: number) => void;
+}
+
+interface MediaViewerModalProps {
+  onDismiss?: () => void;
+}
+
+export const MediaViewerModal = forwardRef<
+  MediaViewerModalHandle,
+  MediaViewerModalProps
+>(({ onDismiss }, ref) => {
+  const { visible, mediaList, initIndex, show, hide } = useMediaViewer();
+
+  // Expose show method to parent via ref
+  useImperativeHandle(
+    ref,
+    () => ({
+      show,
+    }),
+    [show]
+  );
+
+  const handleDismiss = () => {
+    hide();
+    onDismiss?.();
+  };
+
+  if (!visible || mediaList.length === 0) {
+    return null;
+  }
+
+  const images = mediaList.map((item) => ({
+    url: item.url,
+    isVideo: item.isVideo || false,
+  }));
+
+  return (
+    <Modal
+      visible={visible}
+      transparent={false}
+      statusBarTranslucent={true}
+      style={styles.modal}
+      presentationStyle="overFullScreen"
+      animationType="fade"
+      onRequestClose={handleDismiss}
+    >
+      <MediaViewerScreen
+        images={images}
+        initIndex={initIndex}
+        pagination={images.length > 1}
+        onDismiss={handleDismiss}
+        download
+      />
+    </Modal>
+  );
+});
+
+MediaViewerModal.displayName = 'MediaViewerModal';
+
+const styles = StyleSheet.create({
+  modal: {
+    flex: 1,
+  },
+});

package/src/components/MergedImageGrid.tsx

@@ -0,0 +1,238 @@
+import { memo, useMemo, useState, useCallback } from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import ChatImageDimens from '../utils/chatImageDimens';
+import type { MediaItem } from '../hooks/useMediaViewer';
+
+interface MergedImageGridProps {
+  images: Array<{
+    pictureElem?: any;
+  }>;
+  maxDisplay?: number;
+  onMediaPress?: (items: MediaItem[], index?: number) => void;
+}
+
+/**
+ * Generic image grid for merged messages
+ * Layout: 1 image (1x1), 2 images (1x2), 3 images (1x3), 4+ images (2x2)
+ * Shows "+N more" overlay on last cell if images exceed limit
+ */
+export const MergedImageGrid = memo(
+  ({ images, maxDisplay = 4, onMediaPress }: MergedImageGridProps) => {
+    const windowWidth = useWindowDimensions().width;
+    const [loadingState, setLoadingState] = useState<Record<number, boolean>>(
+      {}
+    );
+
+    const displayedImages = useMemo(
+      () => images.slice(0, maxDisplay),
+      [images, maxDisplay]
+    );
+    const hiddenCount = Math.max(0, images.length - maxDisplay);
+
+    // Calculate single image dimensions respecting aspect ratio and 80% width limit
+    const singleImageSize = useMemo(() => {
+      if (displayedImages.length !== 1) return null;
+
+      const image = displayedImages[0];
+      const pictureElem = image?.pictureElem;
+      const imgWidth =
+        pictureElem?.width || pictureElem?.bigPicture?.width || 0;
+      const imgHeight =
+        pictureElem?.height || pictureElem?.bigPicture?.height || 0;
+
+      const maxWidth = Math.floor(windowWidth * 0.8);
+      const aspectRatio = imgWidth && imgHeight ? imgWidth / imgHeight : 1;
+
+      // Calculate dimensions respecting aspect ratio and max width
+      let finalWidth = maxWidth;
+      let finalHeight = maxWidth / aspectRatio;
+
+      // If height exceeds reasonable limit, scale down
+      const maxHeight = 400;
+      if (finalHeight > maxHeight) {
+        finalHeight = maxHeight;
+        finalWidth = finalHeight * aspectRatio;
+      }
+
+      return {
+        width: Math.round(finalWidth),
+        height: Math.round(finalHeight),
+      };
+    }, [displayedImages, windowWidth]);
+
+    const mediaItems = useMemo(
+      () =>
+        images
+          .map((image) => {
+            const pictureElem = image.pictureElem;
+            const imageUrl =
+              pictureElem?.snapshotPicture?.url ||
+              pictureElem?.bigPicture?.url ||
+              pictureElem?.sourcePicture?.url;
+            return { url: imageUrl };
+          })
+          .filter((item): item is MediaItem => Boolean(item.url)),
+      [images]
+    );
+
+    const handleImageLoadEnd = useCallback((index: number) => {
+      setLoadingState((prev) => ({
+        ...prev,
+        [index]: false,
+      }));
+    }, []);
+
+    const handleImagePress = useCallback(
+      (index: number) => {
+        onMediaPress?.(mediaItems, index);
+      },
+      [onMediaPress, mediaItems]
+    );
+
+    const initializeLoading = useMemo(() => {
+      const initial: Record<number, boolean> = {};
+      displayedImages.forEach((_, index) => {
+        initial[index] = true;
+      });
+      return initial;
+    }, [displayedImages]);
+
+    useMemo(() => {
+      setLoadingState(initializeLoading);
+    }, [initializeLoading]);
+
+    if (displayedImages.length === 0) {
+      return null;
+    }
+
+    // Calculate columns based on image count
+    let columns = 1;
+    if (displayedImages.length === 2) {
+      columns = 2; // 2 images: horizontal layout (1x2)
+    } else if (displayedImages.length === 3) {
+      columns = 3; // 3 images: horizontal layout (1x3)
+    } else if (displayedImages.length >= 4) {
+      columns = 2; // 4+ images: grid layout (2x2)
+    }
+
+    // Use calculated aspect ratio for single image, 100x100 for multiple images
+    const cellSize =
+      displayedImages.length === 1 && singleImageSize
+        ? singleImageSize.width
+        : 100;
+    const cellHeight =
+      displayedImages.length === 1 && singleImageSize
+        ? singleImageSize.height
+        : cellSize;
+    const gap = 4;
+    const totalWidth = cellSize * columns + gap * (columns - 1);
+
+    return (
+      <KContainer.View
+        style={[
+          styles.grid,
+          {
+            width: totalWidth,
+          },
+        ]}
+      >
+        {displayedImages.map((image, index) => {
+          const pictureElem = image.pictureElem;
+          const imageUrl =
+            pictureElem?.snapshotPicture?.url ||
+            pictureElem?.bigPicture?.url ||
+            pictureElem?.sourcePicture?.url;
+
+          if (!imageUrl) {
+            return null;
+          }
+
+          // Use dynamic optimization based on calculated dimensions
+          const optimizedUrl =
+            ChatImageDimens.getOptimizedImageUrlWithDimensions(
+              imageUrl,
+              cellSize,
+              cellHeight
+            );
+
+          const isLastCell = index === displayedImages.length - 1;
+          const showHiddenCount = isLastCell && hiddenCount > 0;
+          const isImageLoading = loadingState[index] ?? true;
+
+          return (
+            <KContainer.Touchable
+              key={`merged-image-${index}`}
+              onPress={() => handleImagePress(index)}
+              style={[
+                styles.imageCell,
+                {
+                  width: cellSize,
+                  height: cellHeight,
+                },
+              ]}
+            >
+              <KImage.Base
+                uri={optimizedUrl}
+                width={cellSize}
+                height={cellHeight}
+                style={styles.image}
+                onLoadEnd={() => handleImageLoadEnd(index)}
+              />
+
+              {isImageLoading && <KContainer.View style={styles.skeleton} />}
+
+              {/* Hidden count overlay with +N text */}
+              {showHiddenCount && (
+                <KContainer.View style={styles.hiddenOverlay} center>
+                  <KLabel.Text typo="TextMdBold" color={KColors.white}>
+                    +{hiddenCount}
+                  </KLabel.Text>
+                </KContainer.View>
+              )}
+            </KContainer.Touchable>
+          );
+        })}
+      </KContainer.View>
+    );
+  }
+);
+
+MergedImageGrid.displayName = 'MergedImageGrid';
+
+const styles = StyleSheet.create({
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 4,
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+  },
+  imageCell: {
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: 8,
+    backgroundColor: '#f0f0f0',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  skeleton: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+  },
+  hiddenOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+});