@ethora/chat-component-rn 26.4.1

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -0,0 +1,298 @@
+/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components/native';
+import {
+  CenterContainer,
+  ModalContainerFullScreen,
+} from '../styledModalComponents';
+import { SaveIcon } from '../../../assets/icons';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { useDispatch, useSelector } from 'react-redux';
+import Button from '../../styled/Button';
+import { RootState } from '../../../roomStore';
+import { FullScreenImage } from '../../styled/StyledInputComponents/MediaComponents';
+import { setActiveFile } from '../../../roomStore/chatSettingsSlice';
+import { Alert, Text, View, PermissionsAndroid, Platform } from 'react-native';
+import Video from 'react-native-video';
+import RNFS from 'react-native-fs';
+import { CameraRoll } from '@react-native-camera-roll/camera-roll';
+import { useToast } from '../../../context/ToastContext';
+
+export const FullScreenVideo = styled.View`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+
+interface FilePreviewModalProps {
+  handleCloseModal: any;
+}
+
+const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
+  handleCloseModal,
+}) => {
+  const dispatch = useDispatch();
+  const { showToast } = useToast();
+
+  const { activeFile } = useSelector(
+    (state: RootState) => state.chatSettingStore
+  );
+
+  if (!activeFile) {return;}
+
+  const requestStoragePermission = async () => {
+    try {
+      if (Platform.OS === 'android') {
+        if (Platform.Version >= 33) {
+          const permissions = [
+            PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES,
+            PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO,
+            PermissionsAndroid.PERMISSIONS.READ_MEDIA_AUDIO,
+          ];
+
+          const granted = await PermissionsAndroid.requestMultiple(permissions);
+
+          if (
+            granted['android.permission.READ_MEDIA_IMAGES'] ===
+              PermissionsAndroid.RESULTS.GRANTED &&
+            granted['android.permission.READ_MEDIA_VIDEO'] ===
+              PermissionsAndroid.RESULTS.GRANTED &&
+            granted['android.permission.READ_MEDIA_AUDIO'] ===
+              PermissionsAndroid.RESULTS.GRANTED
+          ) {
+            return true;
+          } else {
+            return false;
+          }
+        } else if (Platform.Version >= 30) {
+          const granted = await PermissionsAndroid.request(
+            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+            {
+              title: 'Storage Permission Required',
+              message:
+                'This app needs access to your storage to download and save files.',
+              buttonPositive: 'OK',
+            }
+          );
+
+          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+            return true;
+          } else {
+            return false;
+          }
+        } else {
+          const result = await CameraRoll.getPhotos({
+            first: 1,
+          })
+            .then(() => true)
+            .catch(() => false);
+
+          return result;
+        }
+      }
+
+      return true;
+    } catch (error) {
+      console.error('Error requesting permission:', error);
+      return false;
+    }
+  };
+
+  const saveToGallery = async () => {
+    const hasPermission = await requestStoragePermission();
+    if (!hasPermission) {
+      Alert.alert(
+        'Permission Denied',
+        'Storage permission is required to save files to the gallery.'
+      );
+      return;
+    }
+
+    try {
+      let galleryPath, filePath;
+
+      if (Platform.OS === 'android') {
+        galleryPath = activeFile.mimetype.startsWith('image/')
+          ? `${RNFS.ExternalStorageDirectoryPath}/Pictures`
+          : `${RNFS.ExternalStorageDirectoryPath}/Movies`;
+
+        await RNFS.mkdir(galleryPath);
+
+        let fileName = activeFile.fileName;
+        if (!fileName.includes('.')) {
+          fileName += activeFile.mimetype.startsWith('image/')
+            ? '.jpg'
+            : '.mp4';
+        }
+        filePath = `${galleryPath}/${fileName}`;
+      } else {
+        const documentsPath = RNFS.DocumentDirectoryPath;
+        let fileName = activeFile.fileName;
+        if (!fileName.includes('.')) {
+          fileName += activeFile.mimetype.startsWith('image/')
+            ? '.jpg'
+            : '.mp4';
+        }
+        filePath = `${documentsPath}/${fileName}`;
+      }
+
+      const res = await RNFS.downloadFile({
+        fromUrl: activeFile.fileURL,
+        toFile: filePath,
+      }).promise;
+
+      if (res.statusCode === 200) {
+        if (Platform.OS === 'ios') {
+          await CameraRoll.save(filePath, {
+            type: activeFile.mimetype.startsWith('image/') ? 'photo' : 'video',
+          });
+        }
+
+        showToast({
+          id: Date.now().toString(),
+          title: 'Success',
+          message: 'Save successful',
+          type: 'success',
+        });
+      } else {
+        Alert.alert('Error', 'Failed to save the file.');
+      }
+    } catch (err) {
+      Alert.alert('Error', `Failed to save the file: ${activeFile.fileName}`);
+    }
+  };
+
+  const saveFileToDownloads = async () => {
+    const hasPermission = await requestStoragePermission();
+    if (!hasPermission) {
+      Alert.alert(
+        'Permission Denied',
+        'Storage permission is required to save files.'
+      );
+      return;
+    }
+
+    try {
+      const downloadDest = `${RNFS.DownloadDirectoryPath}/${
+        activeFile.fileName || 'MEDIA-ETHORA'
+      }`;
+
+      const res = await RNFS.downloadFile({
+        fromUrl: activeFile.fileURL,
+        toFile: downloadDest,
+      }).promise;
+
+      if (res.statusCode === 200) {
+        showToast({
+          id: Date.now().toString(),
+          title: 'Success',
+          message: 'Save successful',
+          type: 'success',
+        });
+      } else {
+        Alert.alert('Error', 'Failed to save the file one.');
+      }
+    } catch (err) {
+      console.error('Error saving file:', err);
+      Alert.alert('Error', 'Failed to save the file two.');
+    }
+  };
+
+  const saveClick = async () => {
+    if (
+      activeFile.mimetype.startsWith('image/') ||
+      activeFile.mimetype.startsWith('video/')
+    ) {
+      await saveToGallery();
+    } else {
+      await saveFileToDownloads();
+    }
+  };
+
+  const closeModal = () => {
+    dispatch(
+      setActiveFile({
+        fileName: '',
+        fileURL: '',
+        mimetype: '',
+      })
+    );
+    handleCloseModal?.();
+  };
+
+  const getMediaComponent = useMemo(() => {
+    switch (true) {
+      case activeFile.mimetype.startsWith('image/'):
+        return (
+          <FullScreenImage
+            src={
+              activeFile.fileURL ||
+              'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg'
+            }
+            alt={activeFile.fileName}
+          />
+        );
+      case activeFile.mimetype.startsWith('video/'):
+        return (
+          <Video
+            style={{
+              width: '100%',
+              height: '100%',
+            }}
+            source={{ uri: activeFile.fileURL }}
+            controls
+            resizeMode="contain"
+            paused={true}
+          />
+        );
+      default:
+        return (
+          <View
+            style={{
+              backgroundColor: '#FFF8ED',
+              borderRadius: 16,
+              display: 'flex',
+              padding: 16,
+            }}
+          >
+            <Text>
+              Unable to open the uploaded document. The file format is not
+              supported by the system. Please upload a file in a compatible
+              format. You still can dowload this file.
+            </Text>
+          </View>
+        );
+    }
+  }, [activeFile]);
+
+  return (
+    <ModalContainerFullScreen>
+      <ModalHeaderComponent
+        handleCloseModal={closeModal}
+        headerTitle={'File preview'}
+        rightMenu={
+          <>
+            <Button onPress={saveClick}>
+              <SaveIcon />
+            </Button>
+          </>
+        }
+      />
+
+      <CenterContainer
+        style={{
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+          overflow: 'hidden',
+          padding: 16,
+        }}
+      >
+        {getMediaComponent}
+      </CenterContainer>
+
+    </ModalContainerFullScreen>
+  );
+};
+
+export default FilePreviewModal;

package/src/components/Modals/Modal/Modal.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ModalBackground } from '../styledModalComponents';
+import { ModalType } from '../../../types/types';
+import { useDispatch } from 'react-redux';
+import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import {
+  MODAL_COMPONENTS,
+  MODAL_TYPES,
+} from '../../../helpers/constants/MODAL_TYPES';
+
+interface ModalProps {
+  children?: React.ReactNode;
+  modal?: string;
+  setOpenModal: (value?: ModalType) => any;
+}
+
+const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
+  const dispatch = useDispatch();
+  const handleCloseModal = () => setOpenModal();
+  const handleBackButtonClick = () =>
+    dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
+
+  const renderModalContent = () => {
+    if (!modal) {return null;}
+
+    const ModalComponent = MODAL_COMPONENTS[modal];
+
+    if (!ModalComponent) {return null;}
+
+    const handleClose =
+      modal === MODAL_TYPES.MANAGE_DATA ||
+      modal === MODAL_TYPES.VISIBILITY ||
+      modal === MODAL_TYPES.REFERRALS ||
+      modal === MODAL_TYPES.DOCUMENT_SHARES ||
+      modal === MODAL_TYPES.PROFILE_SHARES ||
+      modal === MODAL_TYPES.BLOCKED_USERS
+        ? handleBackButtonClick
+        : handleCloseModal;
+
+    return <ModalComponent handleCloseModal={handleClose} />;
+  };
+  return (
+    modal && (
+      <ModalBackground id="modal-background" style={{ position: 'absolute' }}>
+        {renderModalContent()}
+        {children}
+      </ModalBackground>
+    )
+  );
+};
+
+export default Modal;

package/src/components/Modals/ModalHeaderComponent.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  HeaderContainer,
+  HeaderLeft,
+  HeaderRight,
+} from './styledModalComponents';
+import { BackIcon, MoreIcon, QrIcon } from '../../assets/icons';
+import Button from '../styled/Button';
+import { Text } from 'react-native';
+
+interface ModalHeaderComponentProps {
+  handleCloseModal?: any;
+  headerTitle?: string;
+  rightMenu?: React.ReactNode;
+  leftMenu?: React.ReactNode;
+}
+
+const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
+  handleCloseModal,
+  headerTitle,
+  rightMenu,
+  leftMenu,
+}) => {
+  return (
+    <HeaderContainer>
+      <HeaderLeft>
+        {leftMenu ? (
+          leftMenu
+        ) : (
+          <>
+            <Button EndIcon={<BackIcon />} onPress={handleCloseModal} />
+            <Text>{headerTitle ?? 'Go back'}</Text>
+          </>
+        )}
+      </HeaderLeft>
+      <HeaderRight>{rightMenu}</HeaderRight>
+    </HeaderContainer>
+  );
+};
+
+export default ModalHeaderComponent;

package/src/components/Modals/ModalSelectMedia/ModalSelectMedia.tsx

@@ -0,0 +1,285 @@
+import React, { FC, useMemo } from 'react';
+import { Alert, Linking, Platform } from 'react-native';
+import Button from '../../styled/Button';
+import DropdownMenu from '../../DropdownMenu/DropdownMenu';
+import DocumentPicker from 'react-native-document-picker';
+import ImagePicker from 'react-native-image-crop-picker';
+import {
+  check,
+  request,
+  PERMISSIONS,
+  RESULTS,
+  Permission,
+} from 'react-native-permissions';
+import {
+  AttachIcon,
+  CameraIcon,
+  DocumentIcon,
+  MediaIcon,
+} from '../../../assets/icons';
+import { MediaFile } from '../../../types/types';
+
+interface ModalSelectMediaProps {
+  onFileSelect: (files: MediaFile[]) => void;
+  config?: any;
+}
+
+interface Permissions {
+  UNAVAILABLE: 'unavailable';
+  BLOCKED: 'blocked';
+  DENIED: 'denied';
+  GRANTED: 'granted';
+  LIMITED: 'limited';
+}
+
+export const ModalSelectMedia: FC<ModalSelectMediaProps> = ({
+  onFileSelect,
+  config,
+}) => {
+  const checkPermission = async (permission: Permission) => {
+    const status = await check(permission);
+
+    if (status === RESULTS.GRANTED) {
+      return status;
+    } else if (status === RESULTS.DENIED) {
+      const requestStatus = await request(permission);
+      if (requestStatus === RESULTS.GRANTED) {
+        return requestStatus;
+      } else if (requestStatus === RESULTS.DENIED) {
+        return requestStatus;
+      }
+    } else if (status === RESULTS.UNAVAILABLE) {
+      return status;
+    } else {
+      return status;
+    }
+  };
+
+  const handleCameraSelection = async () => {
+    const permission =
+      Platform.OS === 'ios'
+        ? PERMISSIONS.IOS.CAMERA
+        : PERMISSIONS.ANDROID.CAMERA;
+    const permissionStatus = await checkPermission(permission);
+
+    if (permissionStatus !== RESULTS.GRANTED) {
+      Alert.alert(
+        'Permission required',
+        'Camera permission is needed to take photos.',
+        [
+          {
+            text: 'Cancel',
+            onPress: () => console.log('Camera permission cancelled'),
+            style: 'cancel',
+          },
+          {
+            text: 'Open Settings',
+            onPress: () => Linking.openSettings(),
+          },
+        ]
+      );
+      return;
+    }
+
+    try {
+      const image = await ImagePicker.openCamera({
+        width: 300,
+        height: 400,
+        cropping: true,
+      });
+
+      const originalName = image.path.split('/').pop();
+      const file = {
+        uri: image.path,
+        type: image.mime,
+        name: originalName || `camera_${Date.now()}.jpg`,
+      };
+      onFileSelect([file]);
+    } catch (error: any) {
+      const errorMessage = error?.message || String(error);
+      const isSimulatorError =
+        errorMessage.includes('simulator') ||
+        errorMessage.includes('Cannot run camera') ||
+        errorMessage.includes('Camera not available');
+
+      if (isSimulatorError) {
+        Alert.alert(
+          'Camera unavailable',
+          'Camera is not available on iOS Simulator. Please test on a real device.',
+          [{ text: 'OK' }]
+        );
+      } else if (error?.code !== 'E_PICKER_CANCELLED') {
+        console.error('Camera error:', error);
+        Alert.alert(
+          'Camera error',
+          errorMessage || 'Failed to open camera. Please try again.',
+          [{ text: 'OK' }]
+        );
+      }
+    }
+  };
+
+  const handleGallerySelection = async () => {
+    try {
+      let permission: Permission;
+
+      if (Platform.OS === 'ios') {
+        permission = PERMISSIONS.IOS.PHOTO_LIBRARY;
+      } else if (Number(Platform.Version) >= 33) {
+        permission = PERMISSIONS.ANDROID.READ_MEDIA_IMAGES;
+      } else {
+        permission = PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE;
+      }
+
+      console.log('handleGallerySelection - checking permission:', permission);
+      const permissionStatus = await checkPermission(permission);
+      console.log('handleGallerySelection - permission status:', permissionStatus);
+
+      if (permissionStatus !== RESULTS.GRANTED) {
+        console.log('handleGallerySelection - permission not granted, showing alert');
+        Alert.alert(
+          'Permission required',
+          'Gallery permission is needed to select photos.',
+          [
+            {
+              text: 'Cancel',
+              onPress: () => console.log('Gallery permission cancelled'),
+              style: 'cancel',
+            },
+            {
+              text: 'Open Settings',
+              onPress: () => Linking.openSettings(),
+            },
+          ]
+        );
+        return;
+      }
+
+      await new Promise(resolve => setTimeout(resolve, 300));
+      const image = await ImagePicker.openPicker({
+        multiple: false,
+        mediaType: 'any',
+      });
+      console.log('handleGallerySelection - image selected:', image);
+
+      const originalName = image.path.split('/').pop();
+      const file = {
+        uri: image.path,
+        type: image.mime,
+        name:
+          originalName ||
+          `gallery_${Date.now()}${
+            image.mime.includes('video') ? '.mp4' : '.jpg'
+          }`,
+      };
+
+      onFileSelect([file]);
+    } catch (error: any) {
+      if (error?.code === 'E_PICKER_CANCELLED') {
+        return;
+      }
+
+      console.error('Gallery error:', error);
+      console.error('Gallery error code:', error?.code);
+      console.error('Gallery error message:', error?.message);
+
+      const errorMessage = error?.message || String(error);
+      Alert.alert(
+        'Gallery error',
+        errorMessage || 'Failed to open gallery. Please try again.',
+        [{ text: 'OK' }]
+      );
+    }
+  };
+
+  const handleFileSelection = async () => {
+    try {
+      const result = await DocumentPicker.pick({
+        type: [DocumentPicker.types.allFiles],
+        allowMultiSelection: false,
+      });
+
+      const files = result.map((file) => {
+        const originalName = file.name;
+        return {
+          uri: file.uri,
+          type: file.type || 'unknown',
+          name: originalName || `file_${Date.now()}`,
+        };
+      });
+
+      onFileSelect(files);
+    } catch (err: any) {
+      if (DocumentPicker.isCancel(err)) {
+        console.log('User cancelled file picker');
+      } else {
+        console.error('DocumentPicker Error:', err);
+        const errorMessage = err?.message || String(err);
+        Alert.alert(
+          'File selection error',
+          errorMessage || 'Failed to select file. Please try again.',
+          [{ text: 'OK' }]
+        );
+      }
+    }
+  };
+
+  const menuOptions = useMemo(
+    () => [
+      {
+        label: 'Camera',
+        icon: <CameraIcon />,
+        onClick: async () => {
+          setTimeout(async () => {
+            await handleCameraSelection();
+          }, 500);
+        },
+      },
+      {
+        label: 'Media File',
+        icon: <MediaIcon />,
+        onClick: async () => {
+          await handleGallerySelection();
+        },
+      },
+      {
+        label: 'Document',
+        icon: <DocumentIcon />,
+        onClick: async () => {
+          setTimeout(async () => {
+            await handleFileSelection();
+          }, 500);
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <DropdownMenu
+      position="leftBottom"
+      options={menuOptions}
+      openButton={(onPress) => {
+        console.log('🔵 [ModalSelectMedia] Rendering attach button');
+        return (
+          <Button
+            style={{
+              padding: 0,
+              height: 40,
+              width: 40,
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: 'transparent',
+              margin: 0,
+            }}
+            EndIcon={<AttachIcon color={config?.colors?.primary || '#0052CD'} />}
+            onPress={() => {
+              console.log('🔵 [ModalSelectMedia] Attach button pressed');
+              onPress();
+            }}
+          />
+        );
+      }}
+    />
+  );
+};