@droppii-org/chat-mobile 0.2.17 → 0.2.19

package/src/components/AttachmentPreview.tsx

@@ -1,310 +0,0 @@
-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 totalSecs = Math.floor(seconds);
-  const mins = Math.floor(totalSecs / 60);
-  const secs = totalSecs % 60;
-  return `${mins.toString().padStart(2, '0')}:${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={styles.scrollContent}
-            >
-              {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,
-  },
-  scrollContent: {
-    alignItems: 'center',
-  },
-  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,
-  },
-});