@developer_tribe/react-native-comnyx 0.13.13 → 0.15.0

package/src/components/MediaMessageItem.tsx

@@ -0,0 +1,390 @@
+import { View, Image, TouchableOpacity } from 'react-native';
+import { useState, useEffect } from 'react';
+import type { AppConversationMessage } from '../types/Conversation';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { AppText } from './AppText';
+import { ScaledSheet } from './ScaledSheet';
+import { activeOpacity } from '../constants/activeOpacity';
+import { MediaViewerModal } from './MediaViewerModal';
+import { openVideo, generateThumbnail } from '../NativeComnyxMediaPicker';
+import { LinkifyText } from './LinkifyText';
+import { Linking } from 'react-native';
+import type { MediaFileDisplay } from '../types/MediaTypes';
+
+const infoIcon = require('../assets/info-circle.png');
+const clockIcon = require('../assets/iconamoon_clock-fill.png');
+
+function MediaThumbnail({
+  file,
+  isUploading,
+  onImagePress,
+  onVideoPress,
+  single,
+}: {
+  file: MediaFileDisplay;
+  isUploading?: boolean;
+  onImagePress: (uri: string) => void;
+  onVideoPress: (uri: string) => void;
+  single?: boolean;
+}) {
+  const [generatedThumb, setGeneratedThumb] = useState<string | null>(null);
+  const displayUri = file.local_uri || file.url;
+  const isVideo = file.type === 'video';
+
+  useEffect(() => {
+    if (isVideo && !file.thumbnail_uri && !isUploading && displayUri) {
+      generateThumbnail(displayUri)
+        .then((thumb) => {
+          if (thumb) setGeneratedThumb(thumb);
+        })
+        .catch((err) => {
+          console.warn('[Comnyx] Could not generate thumbnail:', err);
+        });
+    }
+  }, [isVideo, file.thumbnail_uri, isUploading, displayUri]);
+
+  const effectiveThumb = file.thumbnail_uri || generatedThumb;
+  const thumbSource = isVideo
+    ? effectiveThumb
+      ? { uri: effectiveThumb }
+      : undefined
+    : { uri: displayUri };
+
+  const handlePress = () => {
+    if (isUploading) return;
+    if (isVideo) {
+      onVideoPress(displayUri);
+    } else {
+      onImagePress(displayUri);
+    }
+  };
+
+  const wrapperStyle = single ? styles.singleMediaWrapper : styles.gridItem;
+  const imageStyle = single ? styles.singleMediaImage : styles.gridImage;
+  const placeholderStyle = single
+    ? [styles.singleMediaImage, { backgroundColor: '#1a1a2e' }]
+    : [styles.videoPlaceholder, { backgroundColor: '#1a1a2e' }];
+
+  return (
+    <TouchableOpacity
+      style={wrapperStyle}
+      onPress={handlePress}
+      activeOpacity={activeOpacity}
+      disabled={isUploading}
+    >
+      {thumbSource ? (
+        <Image source={thumbSource} style={imageStyle} resizeMode="cover" />
+      ) : (
+        <View style={placeholderStyle} />
+      )}
+      {isVideo && !isUploading && (
+        <View style={styles.playOverlay}>
+          <AppText style={styles.playIcon}>▶</AppText>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+}
+
+export function MediaMessageItem({
+  item,
+  onShowPopup,
+}: {
+  item: AppConversationMessage;
+  onShowPopup: () => void;
+}) {
+  const themeColors = useThemeColors();
+  const isDeviceOwner = !item.user && !item.bot;
+  const isUploading = item.is_uploading;
+  const uploadProgress = item.upload_progress ?? 0;
+
+  const [viewerVisible, setViewerVisible] = useState(false);
+  const [viewerUri, setViewerUri] = useState<string>('');
+
+  const mediaFiles: MediaFileDisplay[] = (() => {
+    if (item.media_files && item.media_files.length > 0) {
+      return item.media_files.map((f) => ({
+        url: f.url,
+        type: f.type,
+        local_uri: f.local_uri,
+        thumbnail_uri: f.thumbnail_uri,
+      }));
+    }
+
+    const singleUri = item.media_local_uri || item.media_url;
+    if (singleUri) {
+      return [
+        {
+          url: item.media_url || singleUri,
+          type: (item.media_type as 'image' | 'video') || 'image',
+          local_uri: item.media_local_uri || undefined,
+          thumbnail_uri: item.media_thumbnail_uri || undefined,
+        },
+      ];
+    }
+    return [];
+  })();
+
+  const isMultiMedia = mediaFiles.length > 1;
+  const hasContent = !!(
+    typeof item.content === 'string' && item.content.trim()
+  );
+
+  const formattedDate = new Date(item.created_at).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  const handleImagePress = (uri: string) => {
+    setViewerUri(uri);
+    setViewerVisible(true);
+  };
+
+  const handleVideoPress = (uri: string) => {
+    openVideo(uri).catch((err) =>
+      console.warn('[Comnyx] Could not open video:', err)
+    );
+  };
+
+  const renderFooter = () => {
+    if (isDeviceOwner && item.error) {
+      return <Image source={infoIcon} style={styles.infoIcon} />;
+    } else if (isDeviceOwner && (isUploading || !item.approved)) {
+      return (
+        <View style={styles.footerRow}>
+          {isUploading && (
+            <AppText style={styles.uploadPercentText}>
+              %{uploadProgress}
+            </AppText>
+          )}
+          <Image source={clockIcon} style={styles.clockIcon} />
+        </View>
+      );
+    } else {
+      return (
+        <AppText
+          style={[
+            styles.timestamp,
+            isDeviceOwner
+              ? styles.rightTimestamp
+              : [styles.leftTimestamp, { color: themeColors.text }],
+          ]}
+        >
+          {formattedDate}
+        </AppText>
+      );
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      activeOpacity={isDeviceOwner && item.error ? 0.8 : 1}
+      onLongPress={onShowPopup}
+      onPress={() => {
+        isDeviceOwner && item.error ? onShowPopup() : {};
+      }}
+      style={[
+        styles.container,
+        isDeviceOwner ? styles.rightMessage : styles.leftMessage,
+      ]}
+    >
+      <View
+        style={[
+          styles.mediaBubble,
+          isDeviceOwner
+            ? { backgroundColor: themeColors.light_green }
+            : { backgroundColor: themeColors.ghost },
+        ]}
+      >
+        {isMultiMedia ? (
+          <View style={styles.gridContent}>
+            {mediaFiles.map((file, index) => (
+              <MediaThumbnail
+                key={`${file.url}-${index}`}
+                file={file}
+                isUploading={isUploading}
+                onImagePress={handleImagePress}
+                onVideoPress={handleVideoPress}
+              />
+            ))}
+          </View>
+        ) : mediaFiles.length === 1 ? (
+          <MediaThumbnail
+            file={mediaFiles[0]!}
+            isUploading={isUploading}
+            onImagePress={handleImagePress}
+            onVideoPress={handleVideoPress}
+            single
+          />
+        ) : null}
+
+        {hasContent && (
+          <View style={styles.contentContainer}>
+            <AppText
+              selectable={true}
+              style={[
+                styles.contentText,
+                isDeviceOwner
+                  ? styles.rightContentText
+                  : [styles.leftContentText, { color: themeColors.text }],
+              ]}
+            >
+              <LinkifyText
+                patterns={[
+                  {
+                    regex:
+                      /https?:\/\/(?:[-\w.])+(?::[0-9]+)?(?:\/(?:[\w/_.])*(?:\?(?:[\w&=%.])*)?(?:#(?:[\w.])*)?)?/g,
+                    color: '#0066CC',
+                    navigate: (url) => {
+                      if (url) {
+                        Linking.openURL(url);
+                      }
+                    },
+                  },
+                ]}
+              >
+                {typeof item.content === 'string' ? item.content : ''}
+              </LinkifyText>
+            </AppText>
+          </View>
+        )}
+        <View style={styles.footer}>{renderFooter()}</View>
+      </View>
+      {viewerVisible && (
+        <MediaViewerModal
+          visible={viewerVisible}
+          onClose={() => {
+            setViewerVisible(false);
+            setViewerUri('');
+          }}
+          mediaUri={viewerUri}
+          mediaType={'image'}
+        />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = ScaledSheet.create({
+  container: {
+    maxWidth: '80%',
+    minWidth: 100,
+    marginVertical: '5@vs',
+  },
+  leftMessage: {
+    alignSelf: 'flex-start',
+  },
+  rightMessage: {
+    alignSelf: 'flex-end',
+  },
+  mediaBubble: {
+    borderRadius: '16@vs',
+    overflow: 'hidden',
+    paddingTop: '4@vs',
+    paddingHorizontal: '4@vs',
+  },
+  gridContent: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: '3@s',
+  },
+  gridItem: {
+    position: 'relative',
+    width: '40@vs',
+    height: '40@vs',
+    borderRadius: '10@vs',
+    overflow: 'hidden',
+  },
+  gridImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '10@vs',
+  },
+  singleMediaWrapper: {
+    position: 'relative',
+    borderRadius: '12@vs',
+    overflow: 'hidden',
+    alignSelf: 'flex-start',
+  },
+  singleMediaImage: {
+    width: '40@s',
+    aspectRatio: 1,
+    borderRadius: '12@vs',
+  },
+  videoPlaceholder: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '10@vs',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playOverlay: {
+    ...({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+    } as any),
+  },
+  playIcon: {
+    fontSize: '20@vs',
+    color: '#E0E0E0',
+    marginLeft: '2@s',
+  },
+  // Text content
+  contentContainer: {
+    paddingHorizontal: '8@s',
+    paddingTop: '4@vs',
+  },
+  contentText: {
+    fontSize: '16@vs',
+  },
+  leftContentText: {
+    color: '#000000',
+  },
+  rightContentText: {
+    color: '#000000',
+  },
+  // Footer
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    marginTop: '4@vs',
+    paddingHorizontal: '8@s',
+    paddingBottom: '4@vs',
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '4@s',
+  },
+  uploadPercentText: {
+    fontSize: '10@vs',
+    opacity: 0.7,
+    color: '#000000',
+  },
+  timestamp: {
+    fontSize: '10@vs',
+    opacity: 0.7,
+  },
+  leftTimestamp: {
+    color: '#666666',
+  },
+  rightTimestamp: {
+    color: '#000000',
+  },
+  infoIcon: {
+    width: '12@vs',
+    height: '12@vs',
+    marginLeft: '4@s',
+  },
+  clockIcon: {
+    width: '12@vs',
+    height: '12@vs',
+    marginLeft: '4@s',
+  },
+});

package/src/components/MediaPickerButton.tsx

@@ -0,0 +1,269 @@
+import {
+  TouchableOpacity,
+  Image,
+  View,
+  Modal,
+  Animated,
+  Dimensions,
+  TouchableWithoutFeedback,
+  Platform,
+} from 'react-native';
+import { useState, useCallback, useRef } from 'react';
+import { useThemeColors } from '../hooks/useThemeColors';
+import { ScaledSheet } from './ScaledSheet';
+import { activeOpacity } from '../constants/activeOpacity';
+import { pickImage, pickVideo } from '../NativeComnyxMediaPicker';
+import { AppText } from './AppText';
+import { useLocalize } from '../hooks/useLocalize';
+import type { MediaAsset } from '../types/MediaTypes';
+
+const paperclipIcon = require('../assets/attachment-01.png');
+const galleryIcon = require('../assets/gallery.png');
+const videoPlayIcon = require('../assets/video-play.png');
+
+const closeCircleIcon = require('../assets/x-circle.png');
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+export function MediaPickerButton({
+  onMediaSelected,
+}: {
+  onMediaSelected: (assets: MediaAsset[]) => void;
+}) {
+  const themeColors = useThemeColors();
+  const localize = useLocalize();
+  const [visible, setVisible] = useState(false);
+  const slideAnim = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
+
+  const open = useCallback(() => {
+    setVisible(true);
+    Animated.spring(slideAnim, {
+      toValue: 0,
+      useNativeDriver: true,
+      bounciness: 4,
+      speed: 14,
+    }).start();
+  }, [slideAnim]);
+
+  const close = useCallback(() => {
+    Animated.timing(slideAnim, {
+      toValue: SCREEN_HEIGHT,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      setVisible(false);
+    });
+  }, [slideAnim]);
+
+  const pendingAction = useRef<(() => void) | null>(null);
+
+  const dismissAndRun = useCallback(
+    (action: () => void) => {
+      slideAnim.setValue(SCREEN_HEIGHT);
+      if (Platform.OS === 'ios') {
+        // Defer action until Modal's onDismiss fires to avoid
+        // "Attempt to present on a VC which is already presenting"
+        pendingAction.current = action;
+        setVisible(false);
+      } else {
+        setVisible(false);
+        action();
+      }
+    },
+    [slideAnim]
+  );
+
+  const handlePickImage = useCallback(async () => {
+    dismissAndRun(async () => {
+      try {
+        const assets = await pickImage();
+        if (assets.length > 0) onMediaSelected(assets);
+      } catch (e) {
+        console.error('[Comnyx] pickImage error:', e);
+      }
+    });
+  }, [dismissAndRun, onMediaSelected]);
+
+  const handlePickVideo = useCallback(async () => {
+    dismissAndRun(async () => {
+      try {
+        const assets = await pickVideo();
+        if (assets.length > 0) onMediaSelected(assets);
+      } catch (e) {
+        console.error('[Comnyx] pickVideo error:', e);
+      }
+    });
+  }, [dismissAndRun, onMediaSelected]);
+
+  return (
+    <>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={open}
+        activeOpacity={activeOpacity}
+      >
+        <Image
+          source={paperclipIcon}
+          style={[styles.icon, { tintColor: themeColors.text }]}
+        />
+      </TouchableOpacity>
+
+      <Modal
+        visible={visible}
+        transparent
+        animationType="none"
+        onRequestClose={close}
+        onDismiss={() => {
+          if (pendingAction.current) {
+            const action = pendingAction.current;
+            pendingAction.current = null;
+            action();
+          }
+        }}
+        statusBarTranslucent
+      >
+        <TouchableWithoutFeedback onPress={close}>
+          <View style={styles.overlay}>
+            <TouchableWithoutFeedback>
+              <Animated.View
+                style={[
+                  styles.sheet,
+                  {
+                    backgroundColor: themeColors.background,
+                    transform: [{ translateY: slideAnim }],
+                  },
+                ]}
+              >
+                <View style={styles.handle} />
+
+                <View style={styles.titleRow}>
+                  <AppText style={[styles.title, { color: themeColors.text }]}>
+                    {localize('chat.media.pick.title')}
+                  </AppText>
+                  {Platform.OS === 'android' && (
+                    <TouchableOpacity
+                      onPress={close}
+                      activeOpacity={activeOpacity}
+                      style={styles.closeButton}
+                    >
+                      <Image
+                        source={closeCircleIcon}
+                        style={styles.closeIcon}
+                      />
+                    </TouchableOpacity>
+                  )}
+                </View>
+
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={handlePickImage}
+                  activeOpacity={activeOpacity}
+                >
+                  <Image
+                    source={galleryIcon}
+                    style={[styles.optionIcon, { tintColor: themeColors.text }]}
+                  />
+                  <AppText
+                    style={[styles.optionText, { color: themeColors.text }]}
+                  >
+                    {localize('chat.media.pick.photo')}
+                  </AppText>
+                </TouchableOpacity>
+
+                <TouchableOpacity
+                  style={styles.option}
+                  onPress={handlePickVideo}
+                  activeOpacity={activeOpacity}
+                >
+                  <Image
+                    source={videoPlayIcon}
+                    style={[styles.optionIcon, { tintColor: themeColors.text }]}
+                  />
+                  <AppText
+                    style={[styles.optionText, { color: themeColors.text }]}
+                  >
+                    {localize('chat.media.pick.video')}
+                  </AppText>
+                </TouchableOpacity>
+              </Animated.View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+}
+
+const styles = ScaledSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '6@s',
+    paddingVertical: '6@vs',
+  },
+  icon: {
+    width: '28@vs',
+    height: '28@vs',
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    borderTopLeftRadius: '16@vs',
+    borderTopRightRadius: '16@vs',
+    paddingBottom: '34@vs',
+    paddingTop: '12@vs',
+    paddingHorizontal: '20@s',
+  },
+  handle: {
+    width: '36@s',
+    height: '4@vs',
+    backgroundColor: '#ccc',
+    borderRadius: '2@vs',
+    alignSelf: 'center',
+    marginBottom: '16@vs',
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '16@vs',
+  },
+  title: {
+    fontSize: '18@vs',
+    fontWeight: '600',
+  },
+  closeButton: {
+    padding: '4@vs',
+  },
+  closeIcon: {
+    width: '22@vs',
+    height: '22@vs',
+  },
+  optionIcon: {
+    width: '24@vs',
+    height: '24@vs',
+    marginRight: '12@s',
+  },
+  option: {
+    paddingVertical: '14@vs',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  optionText: {
+    fontSize: '16@vs',
+  },
+  cancelButton: {
+    marginTop: '8@vs',
+    paddingVertical: '14@vs',
+    alignItems: 'center',
+    borderTopWidth: 0.5,
+    borderTopColor: '#ddd',
+  },
+  cancelText: {
+    fontSize: '16@vs',
+    opacity: 0.6,
+  },
+});