@ethora/chat-component-rn 26.4.1

package/src/components/styled/VideoMessage.tsx

@@ -0,0 +1,68 @@
+import React, { useRef } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import Video, { VideoRef } from 'react-native-video';
+import { useDispatch } from 'react-redux';
+import {
+  setActiveFile,
+  setActiveModal,
+} from '../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+
+interface CustomMessageVideoProps {
+  fileName: string;
+  fileURL: string;
+  mimetype: string;
+}
+
+const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
+  fileName,
+  fileURL,
+  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}>
+      <Video
+        ref={videoRef}
+        source={{ uri: fileURL }}
+        style={styles.video}
+        controls
+        resizeMode="contain"
+        paused={true}
+        onBuffer={handleOpen}
+        onError={(error) => console.error('Video error:', error)}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default CustomMessageVideo;
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  video: {
+    width: 300,
+    height: 200,
+    borderRadius: 10,
+    backgroundColor: '#000', // Задаем черный фон для видео
+  },
+});

package/src/context/MessageNotificationContext.tsx

@@ -0,0 +1,335 @@
+// RN port of the web MessageNotificationProvider. Renders Telegram-style
+// in-app toasts when a new message arrives in a room that is NOT the
+// currently active room. Backed by the global messageNotificationManager,
+// which means non-React code (stanza handlers) can push notifications.
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  AppState,
+  AppStateStatus,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { messageNotificationManager } from '../utils/messageNotificationManager';
+import { setCurrentRoom } from '../roomStore/roomsSlice';
+import { IConfig, IMessage } from '../types/types';
+import { RootState } from '../roomStore';
+
+interface ToastItem {
+  id: string;
+  message: IMessage;
+  roomName: string;
+  senderName: string;
+  roomJID: string;
+  timestamp: number;
+}
+
+interface MessageNotificationContextValue {
+  showMessageNotification: (
+    message: IMessage,
+    roomName: string,
+    senderName: string,
+    roomJID: string
+  ) => void;
+}
+
+const MessageNotificationContext =
+  createContext<MessageNotificationContextValue | null>(null);
+
+const DEFAULT_MAX = 3;
+const DEFAULT_DURATION_MS = 30000;
+
+interface ProviderProps {
+  children: ReactNode;
+  config?: IConfig;
+}
+
+export const MessageNotificationProvider: React.FC<ProviderProps> = ({
+  children,
+  config: propConfig,
+}) => {
+  const dispatch = useDispatch();
+  const contextConfig = useSelector(
+    (state: RootState) => state.chatSettingStore?.config
+  );
+  const activeRoomJID = useSelector(
+    (state: RootState) => state.rooms.activeRoomJID
+  );
+
+  const config = propConfig || contextConfig;
+  const notificationConfig = config?.inAppNotifications;
+  const isEnabled = notificationConfig?.enabled === true;
+  const maxNotifications = notificationConfig?.maxNotifications ?? DEFAULT_MAX;
+  const duration = notificationConfig?.duration ?? DEFAULT_DURATION_MS;
+
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const appActiveRef = useRef(AppState.currentState === 'active');
+
+  // Track AppState — when backgrounded, hold toasts longer; when
+  // foregrounded, prune expired.
+  useEffect(() => {
+    const sub = AppState.addEventListener(
+      'change',
+      (next: AppStateStatus) => {
+        appActiveRef.current = next === 'active';
+        if (next === 'active') {
+          const now = Date.now();
+          setToasts((prev) => prev.filter((t) => now - t.timestamp < duration));
+        }
+      }
+    );
+    return () => sub.remove();
+  }, [duration]);
+
+  // Periodic prune when active.
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!appActiveRef.current) {return;}
+      const now = Date.now();
+      setToasts((prev) => prev.filter((t) => now - t.timestamp < duration));
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [duration]);
+
+  // Clear toasts when their room becomes active.
+  useEffect(() => {
+    if (!activeRoomJID) {return;}
+    setToasts((prev) => prev.filter((t) => t.roomJID !== activeRoomJID));
+  }, [activeRoomJID]);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const navigateToMessage = useCallback(
+    (
+      roomJID: string,
+      messageId: string,
+      message: IMessage,
+      roomName: string,
+      senderName: string
+    ) => {
+      setToasts((prev) => prev.filter((t) => t.roomJID !== roomJID));
+      const customOnClick = notificationConfig?.onClick;
+      if (customOnClick) {
+        Promise.resolve(
+          customOnClick({ roomJID, messageId, message, roomName, senderName })
+        ).catch((e) => console.error('onClick handler error', e));
+        return;
+      }
+      if (roomJID) {dispatch(setCurrentRoom({ roomJID }));}
+    },
+    [dispatch, notificationConfig]
+  );
+
+  const showMessageNotification = useCallback(
+    (
+      message: IMessage,
+      roomName: string,
+      senderName: string,
+      roomJID: string
+    ) => {
+      if (!isEnabled) {return;}
+      // Don't toast for the currently active room.
+      if (activeRoomJID && activeRoomJID === roomJID) {return;}
+      const id = `msg-notification-${message.id}-${Date.now()}`;
+      const item: ToastItem = {
+        id,
+        message,
+        roomName,
+        senderName,
+        roomJID,
+        timestamp: Date.now(),
+      };
+      setToasts((prev) => {
+        const next = [...prev, item];
+        return next.length > maxNotifications
+          ? next.slice(-maxNotifications)
+          : next;
+      });
+    },
+    [isEnabled, activeRoomJID, maxNotifications]
+  );
+
+  // Register with the global manager.
+  useEffect(() => {
+    if (!isEnabled) {return;}
+    const unsubscribe = messageNotificationManager.addCallback(
+      showMessageNotification
+    );
+    return unsubscribe;
+  }, [isEnabled, showMessageNotification]);
+
+  return (
+    <MessageNotificationContext.Provider value={{ showMessageNotification }}>
+      {children}
+      {isEnabled && toasts.length > 0 && (
+        <View
+          pointerEvents="box-none"
+          style={[
+            styles.container,
+            positionToStyle(notificationConfig?.position),
+          ]}
+        >
+          {toasts.map((t) => {
+            const Custom = notificationConfig?.customComponent;
+            if (Custom) {
+              return (
+                <Custom
+                  key={t.id}
+                  id={t.id}
+                  message={t.message}
+                  roomName={t.roomName}
+                  senderName={t.senderName}
+                  roomJID={t.roomJID}
+                  timestamp={t.timestamp}
+                  onClose={() => dismiss(t.id)}
+                  onNavigateToMessage={navigateToMessage}
+                  duration={duration}
+                />
+              );
+            }
+            return (
+              <ToastRow
+                key={t.id}
+                item={t}
+                onPress={() =>
+                  navigateToMessage(
+                    t.roomJID,
+                    t.message.id,
+                    t.message,
+                    t.roomName,
+                    t.senderName
+                  )
+                }
+                onDismiss={() => dismiss(t.id)}
+              />
+            );
+          })}
+        </View>
+      )}
+    </MessageNotificationContext.Provider>
+  );
+};
+
+const ToastRow: React.FC<{
+  item: ToastItem;
+  onPress: () => void;
+  onDismiss: () => void;
+}> = ({ item, onPress, onDismiss }) => {
+  const fade = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: 180,
+      useNativeDriver: true,
+    }).start();
+  }, [fade]);
+
+  return (
+    <Animated.View style={[styles.toast, { opacity: fade }]}>
+      <Pressable style={styles.toastBody} onPress={onPress}>
+        <Text style={styles.toastTitle} numberOfLines={1}>
+          {item.roomName}
+        </Text>
+        <Text style={styles.toastSubtitle} numberOfLines={2}>
+          {item.senderName}: {item.message?.body || ''}
+        </Text>
+      </Pressable>
+      <Pressable onPress={onDismiss} style={styles.dismiss}>
+        <Text style={styles.dismissText}>×</Text>
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+const positionToStyle = (
+  position?: NonNullable<IConfig['inAppNotifications']>['position']
+) => {
+  const horizontal = position?.horizontal || 'left';
+  const vertical = position?.vertical || 'bottom';
+  const offset = position?.offset || {};
+  const out: any = {};
+  if (vertical === 'top') {
+    out.top = offset.top ?? 20;
+  } else {
+    out.bottom = offset.bottom ?? 20;
+  }
+  if (horizontal === 'right') {
+    out.right = offset.right ?? 20;
+    out.alignItems = 'flex-end';
+  } else if (horizontal === 'center') {
+    out.left = 0;
+    out.right = 0;
+    out.alignItems = 'center';
+  } else {
+    out.left = offset.left ?? 20;
+    out.alignItems = 'flex-start';
+  }
+  return out;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 10000,
+    elevation: 10000,
+  },
+  toast: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    marginVertical: 4,
+    borderRadius: 12,
+    minWidth: 240,
+    maxWidth: 340,
+    shadowColor: '#000',
+    shadowOpacity: 0.15,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 6,
+  },
+  toastBody: {
+    flex: 1,
+  },
+  toastTitle: {
+    fontWeight: '600',
+    fontSize: 14,
+    color: '#222',
+    marginBottom: 2,
+  },
+  toastSubtitle: {
+    fontSize: 12,
+    color: '#555',
+  },
+  dismiss: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  dismissText: {
+    fontSize: 18,
+    color: '#777',
+  },
+});
+
+export const useMessageNotification = () => {
+  const ctx = useContext(MessageNotificationContext);
+  if (!ctx) {
+    throw new Error(
+      'useMessageNotification must be used within a MessageNotificationProvider'
+    );
+  }
+  return ctx;
+};

package/src/context/PushNotificationProvider.tsx

@@ -0,0 +1,78 @@
+// /**
+//  * Push Notification Provider
+//  * Initializes and manages push notifications for the chat
+//  */
+
+// import React, { createContext, useContext, useEffect, ReactNode } from 'react';
+// import { useSelector, useDispatch } from 'react-redux';
+// import { usePushNotifications } from '../hooks/usePushNotifications';
+// import { RootState } from '../roomStore';
+// import { setCurrentRoom } from '../roomStore/roomsSlice';
+// import { IConfig } from '../types/types';
+
+// interface PushNotificationContextType {
+//   fcmToken: string | null;
+//   isInitialized: boolean;
+//   error: string | null;
+// }
+
+// const PushNotificationContext = createContext<PushNotificationContextType>({
+//   fcmToken: null,
+//   isInitialized: false,
+//   error: null,
+// });
+
+// interface PushNotificationProviderProps {
+//   children: ReactNode;
+//   config?: IConfig;
+// }
+
+// export const PushNotificationProvider: React.FC<PushNotificationProviderProps> = ({
+//   children,
+//   config,
+// }) => {
+//   const dispatch = useDispatch();
+//   const rooms = useSelector((state: RootState) => state.rooms.rooms);
+
+//   // Handle notification press - navigate to chat
+//   const handleNotificationPress = (data: any) => {
+//     console.log('[PushProvider] Notification pressed:', data);
+
+//     if (data?.chatJid) {
+//       // Find the room and set it as current
+//       const room = rooms.find((r) => r.jid === data.chatJid);
+//       if (room) {
+//         dispatch(setCurrentRoom({ roomJID: room.jid }));
+//       }
+//     }
+
+//     // Call custom handler if provided
+//     config?.pushNotifications?.onNotificationPress?.(data);
+//   };
+
+//   const { fcmToken, isInitialized, error } = usePushNotifications({
+//     enabled: config?.pushNotifications?.enabled ?? false,
+//     pushApiUrl: config?.pushNotifications?.pushApiUrl,
+//     onNotificationPress: handleNotificationPress,
+//   });
+
+//   useEffect(() => {
+//     if (isInitialized) {
+//       console.log('[PushProvider] Push notifications initialized');
+//     }
+//     if (error) {
+//       console.error('[PushProvider] Push error:', error);
+//     }
+//   }, [isInitialized, error]);
+
+//   return (
+//     <PushNotificationContext.Provider value={{ fcmToken, isInitialized, error }}>
+//       {children}
+//     </PushNotificationContext.Provider>
+//   );
+// };
+
+// export const usePushNotificationContext = () => useContext(PushNotificationContext);
+
+// export default PushNotificationProvider;
+

package/src/context/ToastContext.tsx

@@ -0,0 +1,63 @@
+// src/context/ToastContext.tsx
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { ToastType, Toast } from '../components/Toast';
+import { View } from 'react-native';
+import { toastEmitter } from '../utils/toastEmitter';
+
+interface ToastContextType {
+  showToast: (toast: ToastType) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [toasts, setToasts] = useState<ToastType[]>([]);
+
+  // Subscribe to global toast emitter so non-React code can trigger toasts
+  useEffect(() => {
+    const unsubscribe = toastEmitter.subscribe((toast) => showToast(toast));
+    return unsubscribe;
+  }, []);
+
+  const showToast = (toast: ToastType) => {
+    setToasts((prev) => {
+      const next = [...prev, toast];
+      return next.length > 5 ? next.slice(1) : next;
+    });
+
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== toast.id));
+    }, toast.duration || 3000);
+  };
+
+  return (
+    <ToastContext.Provider value={{ showToast }}>
+      {children}
+      <View
+        style={{
+          position: 'absolute',
+          top: 70,
+          left: 0,
+          right: 0,
+          flexDirection: 'column',
+          alignItems: 'center',
+          zIndex: 9999,
+        }}
+      >
+        {toasts.map((toast) => (
+          <Toast key={toast.id} {...toast} />
+        ))}
+      </View>
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};