@ethora/chat-component-rn 26.4.2 → 26.5.2

package/src/components/styled/AudioMessage.tsx

@@ -1,82 +1,137 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   View,
   TouchableOpacity,
   Text,
   StyleSheet,
-  ScrollView,
+  ActivityIndicator,
 } from 'react-native';
-import RNFetchBlob from 'rn-fetch-blob';
+import { Audio, AVPlaybackStatus } from 'expo-av';
 
-const AudioMessage = ({ src }: { src: string }) => {
-  const [amplitudes, setAmplitudes] = useState<number[]>([]);
+const formatTime = (millis: number) => {
+  const totalSec = Math.floor(millis / 1000);
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  return `${min}:${sec.toString().padStart(2, '0')}`;
+};
 
-  const fetchAndConvertAudio = async (url: string) => {
-    // try {
-    //   const res = await RNFetchBlob.config({ fileCache: true }).fetch(
-    //     "GET",
-    //     url
-    //   );
+const AudioMessage = ({ src }: { src: string }) => {
+  const soundRef = useRef<Audio.Sound | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [position, setPosition] = useState(0);
+  const [duration, setDuration] = useState(0);
 
-    //   console.log("res---!!!", res);
-    //   const audioPath = res.path();
-    //   console.log("Audio file downloaded to:", audioPath);
+  const onPlaybackStatusUpdate = (status: AVPlaybackStatus) => {
+    if (!status.isLoaded) return;
+    setPosition(status.positionMillis);
+    setDuration(status.durationMillis ?? 0);
+    setIsPlaying(status.isPlaying);
+    if (status.didJustFinish) {
+      setIsPlaying(false);
+      soundRef.current?.setPositionAsync(0);
+    }
+  };
 
-    //   const pcmPath = `${RNFetchBlob.fs.dirs.CacheDir}/audio.pcm`;
+  const togglePlayback = async () => {
+    try {
+      if (!soundRef.current) {
+        setIsLoading(true);
+        const { sound } = await Audio.Sound.createAsync(
+          { uri: src },
+          { shouldPlay: true },
+          onPlaybackStatusUpdate
+        );
+        soundRef.current = sound;
+        setIsLoading(false);
+        setIsPlaying(true);
+        return;
+      }
 
-    //   await FFmpegKit.executeAsync(
-    //     `-i ${audioPath} -f s16le -ar 44100 -ac 1 ${pcmPath}`,
-    //     async (session) => {
-    //       const returnCode = await session.getReturnCode();
-    //       if (ReturnCode.isSuccess(returnCode)) {
-    //         const pcmData = await RNFetchBlob.fs.readFile(pcmPath, "ascii");
-    //         const amplitudes = pcmData
-    //           .split("")
-    //           .map((char) => char.charCodeAt(0));
-    //         setAmplitudes(amplitudes.slice(0, 100)); // Ограничиваем количество баров
-    //       } else {
-    //         console.error("FFmpeg execution failed.");
-    //       }
-    //     }
-    //   );
-    // } catch (error) {
-    //   console.error("Error processing audio file:", error);
-    // }
+      if (isPlaying) {
+        await soundRef.current.pauseAsync();
+      } else {
+        await soundRef.current.playAsync();
+      }
+    } catch (error) {
+      console.error('Audio playback error:', error);
+      setIsLoading(false);
+    }
   };
 
   useEffect(() => {
-    fetchAndConvertAudio(src);
-  }, [src]);
+    return () => {
+      soundRef.current?.unloadAsync();
+    };
+  }, []);
+
+  const progress = duration > 0 ? position / duration : 0;
 
   return (
-    <ScrollView horizontal contentContainerStyle={styles.waveformContainer}>
-      {amplitudes.map((amplitude, index) => (
-        <View
-          key={index}
-          style={[
-            styles.waveBar,
-            {
-              height: Math.max(amplitude, 1) * 2,
-            },
-          ]}
-        />
-      ))}
-    </ScrollView>
+    <View style={styles.container}>
+      <TouchableOpacity
+        style={styles.playButton}
+        onPress={togglePlayback}
+        disabled={isLoading}
+      >
+        {isLoading ? (
+          <ActivityIndicator size="small" color="#fff" />
+        ) : (
+          <Text style={styles.playIcon}>{isPlaying ? '⏸' : '▶'}</Text>
+        )}
+      </TouchableOpacity>
+      <View style={styles.progressContainer}>
+        <View style={styles.progressTrack}>
+          <View style={[styles.progressFill, { width: `${progress * 100}%` }]} />
+        </View>
+        <Text style={styles.time}>
+          {formatTime(position)} / {formatTime(duration)}
+        </Text>
+      </View>
+    </View>
   );
 };
 
 export default AudioMessage;
 
 const styles = StyleSheet.create({
-  waveformContainer: {
+  container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 5,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    minWidth: 200,
   },
-  waveBar: {
-    width: 4,
+  playButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: '#007AFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
+  playIcon: {
+    color: '#fff',
+    fontSize: 14,
+  },
+  progressContainer: {
+    flex: 1,
+  },
+  progressTrack: {
+    height: 4,
+    backgroundColor: '#E0E0E0',
+    borderRadius: 2,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
     backgroundColor: '#007AFF',
-    marginHorizontal: 1,
     borderRadius: 2,
   },
+  time: {
+    fontSize: 11,
+    color: '#888',
+    marginTop: 4,
+  },
 });

package/src/components/styled/Button.tsx

@@ -43,7 +43,7 @@ const ButtonText = styled.Text<{
   font-weight: bold;
 `;
 
-interface ButtonProps {
+export interface ButtonProps {
   text?: string | ReactElement;
   EndIcon?: ReactNode;
   StartIcon?: ReactNode;

package/src/components/styled/MediaModal.tsx

@@ -18,7 +18,7 @@ export const Overlay = ({ children, visible, style }: OverlayProps) => (
       // Implement logic to close the modal if needed
     }}
   >
-    <View style={[styles.modal, style]}>{children}</View>;
+    <View style={[styles.modal, style]}>{children}</View>
   </Modal>
 );
 
@@ -51,4 +51,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-});
+})
+

package/src/components/styled/SendInput.tsx

@@ -109,17 +109,27 @@ const SendInput: React.FC<SendInputProps> = ({
   const handleCameraSelection = async () => {
     const perm = await ImagePicker.requestCameraPermissionsAsync();
     if (!perm.granted) {
-      promptOpenSettings('Camera permission is needed to take photos.');
+      promptOpenSettings('Camera permission is needed to take photos and videos.');
       return;
     }
 
     try {
       const result = await ImagePicker.launchCameraAsync({
-        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        mediaTypes: ['images', 'videos'],
         quality: 0.9,
       });
       if (result.canceled || !result.assets?.[0]) {return;}
       const asset = result.assets[0];
+      if (asset.type === 'video') {
+        handleFileSelect([
+          {
+            uri: asset.uri,
+            type: asset.mimeType || 'video/mp4',
+            name: asset.fileName || asset.uri.split('/').pop() || `camera_${Date.now()}.mp4`,
+          },
+        ]);
+        return;
+      }
       const normalized = await normalizeImageAsset(asset);
       handleFileSelect([
         { uri: normalized.uri, type: normalized.mime, name: normalized.name },
@@ -132,13 +142,13 @@ const SendInput: React.FC<SendInputProps> = ({
   const handleGallerySelection = async () => {
     const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (!perm.granted) {
-      promptOpenSettings('Gallery permission is needed to select photos.');
+      promptOpenSettings('Gallery permission is needed to select photos and videos.');
       return;
     }
 
     try {
       const result = await ImagePicker.launchImageLibraryAsync({
-        mediaTypes: ImagePicker.MediaTypeOptions.All,
+        mediaTypes: ['images', 'videos'],
         allowsEditing: false,
         quality: 0.9,
       });

package/src/components/styled/StyledComponents.ts

@@ -148,6 +148,11 @@ export const MessageInput = styled.TextInput`
   color: #141414;
 `;
 
+export const IconButton = styled.TouchableOpacity`
+  justify-content: center;
+  align-items: center;
+`;
+
 export const SendButton = styled.TouchableOpacity`
   padding: 10px 20px;
   border-radius: 8px;

package/src/components/styled/StyledInputComponents/VideoComponents.tsx

@@ -8,16 +8,14 @@ export const Container = styled.View`
   justify-content: center;
 `;
 
-export const FullScreenVideo = styled.video`
+export const FullScreenVideo = styled.View`
   width: 100%;
   height: 100%;
-  object-fit: contain;
 `;
 
-export const FixedSizeVideo = styled.video`
+export const FixedSizeVideo = styled.View`
   width: 300px;
   height: 200px;
-  object-fit: cover;
 `;
 
 export const ModalContent = styled.View`

package/src/components/styled/VideoMessage.tsx

@@ -1,6 +1,6 @@
-import React, { useRef } from 'react';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import Video, { VideoRef } from 'react-native-video';
+import React from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { Video, ResizeMode } from 'expo-av';
 import { useDispatch } from 'react-redux';
 import {
   setActiveFile,
@@ -20,31 +20,20 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   mimetype,
 }) => {
   const dispatch = useDispatch();
-  const videoRef = useRef<VideoRef>(null);
 
   const handleOpen = () => {
     dispatch(setActiveFile({ fileName, fileURL, mimetype }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };
 
-  const handlePlayPause = () => {
-    if (videoRef.current) {
-      videoRef.current.seek(0);
-      // videoRef.current.presentFullscreenPlayer();
-    }
-  };
-
   return (
-    <TouchableOpacity style={styles.container} onPress={handlePlayPause}>
+    <TouchableOpacity style={styles.container} onPress={handleOpen}>
       <Video
-        ref={videoRef}
         source={{ uri: fileURL }}
         style={styles.video}
-        controls
-        resizeMode="contain"
-        paused={true}
-        onBuffer={handleOpen}
-        onError={(error) => console.error('Video error:', error)}
+        useNativeControls
+        resizeMode={ResizeMode.CONTAIN}
+        shouldPlay={false}
       />
     </TouchableOpacity>
   );
@@ -63,6 +52,6 @@ const styles = StyleSheet.create({
     width: 300,
     height: 200,
     borderRadius: 10,
-    backgroundColor: '#000', // Задаем черный фон для видео
+    backgroundColor: '#000',
   },
 });

package/src/helpers/chatAutoEnterer.ts

@@ -10,7 +10,7 @@ interface XmppConfig {
 }
 
 interface SelectRoomArgs {
-  roomJID?: string;
+  roomJID?: string | null;
   wasAutoSelected: boolean;
   config: XmppConfig;
   dispatch: AppDispatch;

package/src/helpers/createRoomFromApi.tsx

@@ -8,6 +8,7 @@ export const createRoomFromApi = (
   try {
     const roomData: IRoom = {
       ...room,
+      id: (room as any)?._id || '',
       jid: `${room?.name}@${service}` || '',
       name: room?.title || '',
       title: room?.title || '',

package/src/helpers/getDataFromXml.ts

@@ -32,7 +32,7 @@ export const getDataFromXml = async (stanza: Element): Promise<DataXml | undefin
 
   const xmppId = fullData?.attrs.id;
   const xmppFrom = fullData?.attrs?.from;
-  const [roomJid, userWallet] = xmppFrom.split('/');
+  const [roomJid, userWallet] = (xmppFrom || '').split('/');
   let id =
     stanza.getChild('result')?.attrs.id ||
     extractTimestamp(stanza?.getChild('stanza-id')?.attrs?.id, stanza);
@@ -60,7 +60,7 @@ export const getDataFromXml = async (stanza: Element): Promise<DataXml | undefin
   const user = {
     id: userWallet,
     photoURL,
-  };
+  } as any;
 
   const dataAttrs = data?.attrs || {};
 

package/src/helpers/getUnnamedUsers.ts

@@ -18,7 +18,7 @@ export const getUnnamedUsers = (messages: IMessage[]): IUser[] => {
   const uniqueUsers = getUniqueUsers(messages);
 
   return [...uniqueUsers].filter((user) =>
-    user?.name.toLowerCase().includes('deleted')
+    user?.name?.toLowerCase().includes('deleted')
   );
 };
 
@@ -35,5 +35,5 @@ export const fixUnnamedArrayFromApi = async (
     })
   );
 
-  return fetchedUsers;
+  return fetchedUsers.filter((u): u is RoomMember => u !== null);
 };

package/src/helpers/initXmppRooms.tsx

@@ -43,13 +43,13 @@ const initXmppRooms = async (
           //     });
           return;
         }
-        const res = await xmmpClient.getRoomsStanza();
+        const res = await (xmmpClient as any as XmppClient).getRoomsStanza();
         console.log(res);
       }
 
       //@ts-ignore
       const roomTimestampObject: [jid: string, timestamp: string] =
-        await xmmpClient.getChatsPrivateStoreRequestStanza();
+        await (xmmpClient as any as XmppClient).getChatsPrivateStoreRequestStanza();
       updatedChatLastTimestamps(roomTimestampObject, store.dispatch);
     } else {
       //@ts-ignore
@@ -59,7 +59,7 @@ const initXmppRooms = async (
     }
 
     if (config?.refreshTokens?.enabled) {
-      config?.refreshTokens?.refreshFunction();
+      config?.refreshTokens?.refreshFunction?.();
     }
   } catch (error) {
     console.error(error);

package/src/helpers/insertMessageWithDelimiter.ts

@@ -40,7 +40,7 @@ export function insertMessageWithDelimiter(
   const lastMessage = roomMessages[roomMessages.length - 1];
   const firstMessage = roomMessages[0];
 
-  if (isDateAfter(newMessageDate.toString(), lastMessage.date.toString())) {
+  if (isDateAfter(newMessageDate.toString(), lastMessage?.date?.toString() ?? '')) {
     const index = roomMessages.findIndex(
       (msg) => msg.id === message.xmppId || msg.id === message.id
     );
@@ -57,7 +57,7 @@ export function insertMessageWithDelimiter(
       isDateAfter(newMessageDate.toString(), lastViewedTimestamp.toString())
     ) {
       const delimiterIndex = roomMessages.findIndex((msg) =>
-        isDateAfter(msg.date.toString(), lastViewedTimestamp.toString())
+        isDateAfter(msg.date?.toString() ?? '', lastViewedTimestamp.toString())
       );
 
       if (delimiterIndex !== -1) {
@@ -65,7 +65,7 @@ export function insertMessageWithDelimiter(
           id: 'delimiter-new',
           user: {
             id: 'system',
-            name: null,
+            name: undefined,
             token: '',
             refreshToken: '',
           },
@@ -80,13 +80,13 @@ export function insertMessageWithDelimiter(
       }
     }
   } else if (
-    isDateBefore(newMessageDate.toString(), firstMessage.date.toString())
+    isDateBefore(newMessageDate.toString(), firstMessage?.date?.toString() ?? '')
   ) {
     roomMessages.unshift(message);
   } else {
     for (let i = 0; i < roomMessages.length; i++) {
       if (
-        isDateBefore(newMessageDate.toString(), roomMessages[i].date.toString())
+        isDateBefore(newMessageDate.toString(), roomMessages[i].date?.toString() ?? '')
       ) {
         roomMessages.splice(i, 0, message);
         break;

package/src/helpers/localStorageUser.ts

@@ -3,7 +3,7 @@ import { localStorageConstants } from './constants/LOCAL_STORAGE';
 
 export const getLocalStorageUser = () => {
   const user: User = JSON.parse(
-    localStorage.getItem(localStorageConstants.ETHORA_USER)
+    localStorage.getItem(localStorageConstants.ETHORA_USER) || ''
   );
   return user;
 };

package/src/helpers/nanoToMs.ts

@@ -1,3 +1,3 @@
-export const nanoToMs = (number: string): number => {
+export const nanoToMs = (number: string): number | null => {
   return +number.slice(0, 13) || null;
 };

package/src/hooks/useChatWrapperInit.ts

@@ -118,8 +118,7 @@ const useChatWrapperInit = ({
               const newClient = await initializeClient(
                 user.xmppUsername || user?.defaultWallet?.walletAddress,
                 user?.xmppPassword,
-                config?.xmppSettings,
-                roomsList
+                config?.xmppSettings
               ).then((client) => {
                 console.log(' Client initialized', client?.status);
                 return client;
@@ -161,7 +160,7 @@ const useChatWrapperInit = ({
                 .getChatsPrivateStoreRequestStanza()
                 .then(
                   async (
-                    roomTimestampObject: [jid: string, timestamp: string]
+                    roomTimestampObject: any
                   ) => {
                     console.log(
                       'Got chats private store',
@@ -209,7 +208,7 @@ const useChatWrapperInit = ({
               .getChatsPrivateStoreRequestStanza()
               .then(
                 async (
-                  roomTimestampObject: [jid: string, timestamp: string]
+                  roomTimestampObject: any
                 ) => {
                   console.log(
                     'Got chats private store for existing client',
@@ -257,7 +256,7 @@ const useChatWrapperInit = ({
     isRetrying,
     showModal,
     isConnectionLost,
-    setClient,
+    setClient: setClient as any,
     setInited,
     setShowModal,
   };

package/src/hooks/useGetNewArchRoom.tsx

@@ -6,7 +6,6 @@ import { getRooms } from '../networking/api-requests/rooms.api';
 import {
   addRoomViaApi,
   setIsLoading,
-  updateUsersSet,
 } from '../roomStore/roomsSlice';
 import { ApiRoom } from '../types/types';
 import { pushSubscriptionService } from '../services/pushSubscriptionService';
@@ -35,7 +34,6 @@ const useGetNewArchRoom = () => {
         }
       });
       dispatch(setIsLoading({ loading: false, loadingText: undefined }));
-      dispatch(updateUsersSet({ rooms: rooms.items || [] }));
 
       if (client?.client && roomJIDs.length > 0) {
         const userNick = client.client.jid?.getLocal();

package/src/hooks/usePrevious.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 function usePrevious(value: any) {
   // The ref object is a generic container whose current property is mutable ...
   // ... and can hold any value, similar to an instance property on a class
-  const ref = useRef();
+  const ref = useRef<any>(undefined);
   // Store current value in ref
   useEffect(() => {
     ref.current = value;

package/src/hooks/usePushNotifications.ts

@@ -95,7 +95,7 @@ export function usePushNotifications() {
   useEffect(() => {
     if (fcmToken && user && user.xmppPassword && user.defaultWallet?.walletAddress) {
       pushSubscriptionService
-        .subscribeToPush(fcmToken, user, config?.projectName)
+        .subscribeToPush(fcmToken, user, config?.projectName || '')
         .catch((error) => {
           console.error('Failed to subscribe to push:', error);
         });

package/src/hooks/useRoomInitialization.tsx

@@ -138,11 +138,11 @@ export const useRoomInitialization = (
 
     if (client && config?.defaultRooms) {
       const allExist = config?.defaultRooms.every(
-        (room) => roomsList[room.jid] !== undefined
+        (room) => roomsList[typeof room === 'string' ? room : room.jid] !== undefined
       );
       if (roomsList && !allExist) {
         config?.defaultRooms.map(async (room) => {
-          client.presenceInRoomStanza(room.jid);
+          client.presenceInRoomStanza(typeof room === 'string' ? room : room.jid);
         });
         if (config?.newArch) {
           // syncRooms(client, config);

package/src/networking/api-requests/auth.api.ts

@@ -8,7 +8,7 @@ import { User } from '../../types/types';
 // } from 'firebase/auth';
 // import { app } from '../../../firebase-config';
 
-import http, { appToken } from '../apiClient';
+import http, { getCurrentAppToken } from '../apiClient';
 import { store } from '../../roomStore';
 
 // login functions
@@ -23,7 +23,7 @@ export async function loginEmail(email: string, password: string) {
       email,
       password,
     },
-    { headers: { Authorization: appToken } }
+    { headers: { Authorization: getCurrentAppToken() } }
   );
 
   console.log('loginEmail res', res.data);
@@ -45,7 +45,7 @@ export function loginSocial(
       loginType,
       authToken,
     },
-    { headers: { Authorization: appToken } }
+    { headers: { Authorization: getCurrentAppToken() } }
   );
 }
 
@@ -65,7 +65,7 @@ export function registerSocial(
       authToken: authToken,
       signupPlan: signUpPlan,
     },
-    { headers: { Authorization: appToken } }
+    { headers: { Authorization: getCurrentAppToken() } }
   );
 }
 
@@ -73,7 +73,7 @@ export function checkEmailExist(email: string) {
   return http.get(
     '/users/checkEmail/' + email,
 
-    { headers: { Authorization: appToken } }
+    { headers: { Authorization: getCurrentAppToken() } }
   );
 }