movius-chats 1.0.0

package/src/components/AudioPlayer/AudioPlayer.tsx

@@ -0,0 +1,259 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { PanResponder, Pressable, Text, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import Sound from 'react-native-sound';
+import tw from 'twrnc';
+import { PauseIcon } from '../../assets/Icons/PauseIcon';
+import { PlayIcon } from '../../assets/Icons/PlayIcon';
+import { useAudio } from '../../context/AudioContext';
+import { useChatContext } from '../../context/ChatContext';
+import { formatDuration } from '../../utils/datefunc';
+import { AudioPlayerProps } from './types';
+
+const AudioPlayer: React.FC<AudioPlayerProps> = ({
+  audioUrl,
+  audioId,
+  isVideoPlaying,
+}) => {
+  const { theme, CustomPlayIcon, CustomPauseIcon } = useChatContext();
+  const { currentlyPlayingId, setCurrentlyPlayingId } = useAudio();
+  const [sound, setSound] = useState<Sound | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const progressRef = useRef<View>(null);
+  const progressWidth = useRef(0);
+  const progressX = useRef(0);
+  const startX = useRef(0);
+  const knobPosition = useSharedValue(0);
+
+  // Initialize sound
+  useEffect(() => {
+    let mounted = true;
+    const newSound = new Sound(audioUrl, '', (error) => {
+      if (!error && mounted) {
+        setDuration(newSound.getDuration());
+      }
+    });
+    setSound(newSound);
+
+    return () => {
+      mounted = false;
+      if (newSound) {
+        newSound.pause();
+        newSound.release();
+      }
+    };
+  }, [audioUrl]);
+
+  // Handle stopping playback when another audio starts
+  useEffect(() => {
+    if (
+      currentlyPlayingId &&
+      currentlyPlayingId !== audioId &&
+      isPlaying &&
+      sound
+    ) {
+      sound.pause();
+      setIsPlaying(false);
+      setCurrentTime(0);
+      knobPosition.value = 0;
+    }
+  }, [currentlyPlayingId, audioId, isPlaying, sound]);
+
+  // Update progress
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval>;
+    if (isPlaying && sound && !isDragging) {
+      interval = setInterval(() => {
+        sound.getCurrentTime((seconds) => {
+          if (typeof seconds === 'number' && !isNaN(seconds)) {
+            setCurrentTime(seconds);
+            if (progressWidth.current > 0 && duration > 0) {
+              const progress = (seconds / duration) * progressWidth.current;
+              if (!isNaN(progress)) {
+                knobPosition.value = withSpring(progress, {
+                  damping: 15,
+                  stiffness: 100,
+                });
+              }
+            }
+          }
+        });
+      }, 100);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [isPlaying, sound, isDragging, duration]);
+
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: (evt) => {
+      setIsDragging(true);
+      startX.current = evt.nativeEvent.pageX - knobPosition.value;
+    },
+    onPanResponderMove: (evt) => {
+      if (progressWidth.current > 0) {
+        const newPosition = evt.nativeEvent.pageX - startX.current;
+        const boundedPosition = Math.max(
+          0,
+          Math.min(newPosition, progressWidth.current)
+        );
+        knobPosition.value = boundedPosition;
+
+        const percentage = boundedPosition / progressWidth.current;
+        const newTime = percentage * duration;
+        if (!isNaN(newTime)) {
+          setCurrentTime(newTime);
+        }
+      }
+    },
+    onPanResponderRelease: () => {
+      setIsDragging(false);
+      if (sound && progressWidth.current > 0) {
+        const percentage = knobPosition.value / progressWidth.current;
+        const newTime = percentage * duration;
+        if (!isNaN(newTime)) {
+          sound.setCurrentTime(newTime);
+        }
+      }
+    },
+    onPanResponderTerminate: () => {
+      setIsDragging(false);
+    },
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: knobPosition.value }],
+    };
+  });
+
+  const togglePlay = () => {
+    if (!sound) return;
+
+    if (isPlaying) {
+      sound.pause(() => {
+        setIsPlaying(false);
+        setCurrentlyPlayingId(null);
+      });
+    } else {
+      setCurrentlyPlayingId(audioId);
+      sound.play((success) => {
+        if (success) {
+          setIsPlaying(false);
+          setCurrentTime(0);
+          knobPosition.value = withSpring(0);
+          setCurrentlyPlayingId(null);
+        }
+      });
+      setIsPlaying(true);
+    }
+  };
+
+  // Stop audio when video starts playing
+  useEffect(() => {
+    if (isVideoPlaying && isPlaying && sound) {
+      sound.pause(() => {
+        setIsPlaying(false);
+        setCurrentlyPlayingId(null);
+      });
+    }
+  }, [isVideoPlaying]);
+
+  return (
+    <View style={tw`rounded-lg w-56`}>
+      <View style={tw`flex-row items-center gap-2 px-2 pt-2`}>
+        <Pressable
+          onPress={togglePlay}
+          style={[
+            tw`bg-black/40 rounded-full p-2`,
+            theme?.messageStyle?.audioPlayButtonStyle,
+          ]}
+        >
+          {isPlaying ? (
+            CustomPauseIcon ? (
+              <CustomPauseIcon />
+            ) : (
+              <PauseIcon
+                style={tw.style('h-6 w-6')}
+                color={theme?.colors?.audioPauseIconColor || 'white'}
+              />
+            )
+          ) : CustomPlayIcon ? (
+            <CustomPlayIcon />
+          ) : (
+            <PlayIcon
+              style={tw.style('h-6 w-6')}
+              color={theme?.colors?.audioPlayIconColor || 'white'}
+            />
+          )}
+        </Pressable>
+
+        <View
+          ref={progressRef}
+          onLayout={(e) => {
+            const { width } = e.nativeEvent.layout;
+            progressWidth.current = width;
+          progressRef.current?.measure((_, __, ___, ____, pageX) => {
+            progressX.current = pageX;
+          });
+          }}
+          style={[
+            tw`relative h-1 bg-zinc-400 rounded overflow-visible w-[75%]`,
+            theme?.messageStyle?.progressBarStyle,
+          ]}
+        >
+          <View
+            style={[
+              tw`absolute h-full bg-slate-200`,
+              {
+                width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%`,
+              },
+              theme?.messageStyle?.activeProgressBarStyle,
+            ]}
+          />
+          <Animated.View
+            {...panResponder.panHandlers}
+            style={[
+              animatedStyle,
+              {
+                position: 'absolute',
+                top: -6,
+                width: 16,
+                height: 16,
+                borderRadius: 8,
+                backgroundColor: 'white',
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.25,
+                shadowRadius: 3.84,
+                elevation: 5,
+              },
+              { ...theme?.messageStyle?.audioKnobStyle },
+            ]}
+          />
+        </View>
+      </View>
+      <View style={tw`px-4 py-1`}>
+        <Text
+          style={[
+            tw`text-xs text-gray-500`,
+            theme?.messageStyle?.audioDurationStyle,
+          ]}
+        >
+          {!isNaN(currentTime) ? formatDuration(currentTime) : '0:00'}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default React.memo(AudioPlayer);

package/src/components/AudioPlayer/types.ts

@@ -0,0 +1,5 @@
+export interface AudioPlayerProps {
+  audioUrl: string;
+  audioId: string;
+  isVideoPlaying: boolean;
+}

package/src/components/ChatBubble/ChatBubble.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import tw from 'twrnc';
+import { ArrowBack2RoundedIcon } from '../../assets/Icons/ArrowBack2RoundedIcon';
+import { useChatContext } from '../../context/ChatContext';
+import MessageContent from './MessageContent';
+import MessageStatus from './MessageStatus';
+import { ChatBubbleProps } from './types';
+
+const ChatBubble: React.FC<ChatBubbleProps> = ({
+  message,
+  isCurrentUser,
+  isFirstInSequence,
+  onLongPress,
+}) => {
+  const {
+    theme,
+    showAvatars,
+    showUserNames,
+    showBubbleTail,
+    setMediaUrl,
+    setIsVideoPlaying,
+    isVideoPlaying,
+  } = useChatContext();
+
+  const handleMediaPress = (type: 'image' | 'video', url: string) => {
+    setMediaUrl({
+      imageUrl: type === 'image' ? url : '',
+      videoUrl: type === 'video' ? url : '',
+    });
+    if (type === 'video') {
+      setIsVideoPlaying(true);
+    }
+  };
+
+  return (
+    <Pressable
+      onLongPress={onLongPress}
+      style={[
+        tw`px-2 my-1 max-w-[75%] relative`,
+        isCurrentUser ? tw`self-end mr-3` : tw`self-start ml-9`,
+        isFirstInSequence
+          ? isCurrentUser
+            ? tw`bg-green-500 rounded-tr-none`
+            : tw`bg-white rounded-tl-none`
+          : isCurrentUser
+            ? tw`bg-green-500`
+            : tw`bg-white`,
+        {
+          borderRadius: 8,
+          ...(isCurrentUser
+            ? theme?.bubbleStyle?.sent
+            : theme?.bubbleStyle?.received),
+        },
+      ]}
+    >
+      {/* Avatar & Sender Name for Group Chat */}
+      {!isCurrentUser && isFirstInSequence && showAvatars && (
+        <>
+          <View
+            style={tw`absolute w-6 h-6 rounded-full top-0 -left-9 flex-row items-center`}
+          >
+            {message.senderAvatar ? (
+              <Image
+                source={{ uri: message.senderAvatar }}
+                style={[
+                  tw`w-full h-full rounded-full`,
+                  theme?.bubbleStyle?.avatarImageStyle,
+                ]}
+                resizeMode="cover"
+              />
+            ) : (
+              <Text
+                style={[
+                  tw`text-sm text-black font-semibold capitalize rounded-full bg-zinc-300 w-full h-full text-center pt-0.5`,
+                  theme?.bubbleStyle?.avatarTextStyle,
+                ]}
+              >
+                {message.senderName?.charAt(0)}
+              </Text>
+            )}
+          </View>
+          {showUserNames && message.senderName && (
+            <Text
+              style={[
+                tw`text-sm text-black font-semibold mt-1 capitalize`,
+                theme?.bubbleStyle?.userNameStyle,
+              ]}
+            >
+              {message.senderName}
+            </Text>
+          )}
+        </>
+      )}
+
+      {/* Bubble Tail */}
+      {isFirstInSequence && showBubbleTail && (
+        <ArrowBack2RoundedIcon
+          style={tw.style(
+            'absolute -top-1 w-6 h-6',
+            isCurrentUser ? '-right-3.5' : '-left-3.5 mt-[1.25px]',
+            {
+              transform: [{ rotate: isCurrentUser ? '90deg' : '180deg' }],
+            }
+          )}
+          color={
+            isCurrentUser
+              ? `${
+                  theme?.colors?.sentMessageTailColor || 'rgba(34, 197, 94,1)'
+                }`
+              : `${theme?.colors?.receivedMessageTailColor || 'white'}`
+          }
+        />
+      )}
+
+      {/* Message Content */}
+      <MessageContent
+        message={message}
+        isCurrentUser={isCurrentUser}
+        isFirstInSequence={isFirstInSequence}
+        onMediaPress={handleMediaPress}
+        isVideoPlaying={isVideoPlaying}
+      />
+
+      {/* Message Status */}
+      <MessageStatus
+        time={message.time}
+        status={isCurrentUser ? message.status : undefined}
+        isCurrentUser={isCurrentUser}
+        hasText={!!message.text}
+        hasAudio={!!message.audio}
+      />
+    </Pressable>
+  );
+};
+
+export default React.memo(ChatBubble);

package/src/components/ChatBubble/MessageContent.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import Video, { VideoRef } from 'react-native-video';
+import tw from 'twrnc';
+import { LoadingIcon } from '../../assets/Icons/LoadingIcon';
+import { PlayIcon } from '../../assets/Icons/PlayIcon';
+import { useChatContext } from '../../context/ChatContext';
+import { formatDuration } from '../../utils/datefunc';
+import AudioPlayer from '../AudioPlayer/AudioPlayer';
+import { MessageContentProps } from './types';
+
+const MessageContent: React.FC<MessageContentProps> = ({
+  message,
+  onMediaPress,
+  isVideoPlaying,
+}) => {
+  const {
+    theme,
+    showMessageStatus,
+    CustomPlayIcon,
+    renderCustomVideoBubbleError,
+  } = useChatContext();
+  const videoRef = React.useRef<VideoRef>(null);
+  const [duration, setDuration] = React.useState(0);
+  const [videoIsLoading, setVideoIsLoading] = React.useState(false);
+  const [videoHasError, setVideoHasError] = React.useState(false);
+
+  return (
+    <View>
+      {message.image && (
+        <Pressable
+          onPress={() => onMediaPress('image', message.image as string)}
+          style={tw`w-60 h-80 my-2`}
+        >
+          <Image
+            source={{ uri: message.image }}
+            style={tw`w-full h-full object-contain rounded-lg`}
+          />
+        </Pressable>
+      )}
+
+      {message.video && (
+        <Pressable
+          onPress={() => onMediaPress('video', message.video as string)}
+          style={tw`w-60 h-80 my-2 justify-center items-center`}
+          disabled={videoIsLoading}
+        >
+          <Video
+            source={{ uri: message.video }}
+            ref={videoRef}
+            paused={true}
+            style={{
+              width: '100%',
+              height: '100%',
+              borderRadius: 8,
+              position: 'relative',
+            }}
+            resizeMode="cover"
+            onLoadStart={() => {
+              setVideoIsLoading(true);
+              setVideoHasError(false);
+            }}
+            onLoad={(data) => {
+              setDuration(data.duration);
+              setVideoIsLoading(false);
+            }}
+            onBuffer={({ isBuffering }) => setVideoIsLoading(isBuffering)}
+            onError={() => {
+              setVideoHasError(true);
+              setVideoIsLoading(false);
+            }}
+          />
+          {videoIsLoading ? (
+            <View
+              style={tw`absolute inset-0 flex items-center justify-center bg-black/40 rounded-full`}
+            >
+              <LoadingIcon
+                style={tw.style('h-12 w-12 fill-white animate-spin')}
+              />
+            </View>
+          ) : videoHasError ? (
+            renderCustomVideoBubbleError ? (
+              renderCustomVideoBubbleError()
+            ) : (
+              <View
+                style={tw`absolute inset-0 flex items-center justify-center bg-red-500/60 p-2`}
+              >
+                <Text style={tw`text-white font-bold`}>
+                  Failed to load video
+                </Text>
+              </View>
+            )
+          ) : (
+            <>
+              <View style={tw`absolute bg-black/40 rounded-full`}>
+                {CustomPlayIcon ? (
+                  <CustomPlayIcon />
+                ) : (
+                  <PlayIcon
+                    style={tw.style('h-16 w-16')}
+                    color={theme?.colors?.audioPlayIconColor || 'white'}
+                  />
+                )}
+              </View>
+              <View
+                style={tw`absolute bottom-2 left-2 bg-black/50 px-2 py-1 rounded-md`}
+              >
+                <Text style={tw`text-white text-xs font-semibold`}>
+                  {formatDuration(duration)}
+                </Text>
+              </View>
+            </>
+          )}
+        </Pressable>
+      )}
+
+      {message.audio && (
+        <View style={tw`my-2`}>
+          <AudioPlayer
+            audioUrl={message.audio}
+            audioId={message.id}
+            isVideoPlaying={isVideoPlaying as boolean}
+          />
+        </View>
+      )}
+
+      {message.text && (
+        <Text
+          style={[
+            tw`text-gray-800 pt-1`,
+            showMessageStatus ? tw`pb-0` : tw`pb-2`,
+            { wordBreak: 'break-word', overflowWrap: 'break-word' },
+            theme?.messageStyle?.textStyle,
+          ]}
+        >
+          {message.text}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default React.memo(MessageContent);

package/src/components/ChatBubble/MessageStatus.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import tw from 'twrnc';
+import { CheckAllIcon } from '../../assets/Icons/CheckAllIcon';
+import { CheckIcon } from '../../assets/Icons/CheckIcon';
+import { useChatContext } from '../../context/ChatContext';
+import { MessageStatusProps } from './types';
+
+const MessageStatus: React.FC<MessageStatusProps> = ({
+  time,
+  status,
+  isCurrentUser,
+  hasText,
+  hasAudio,
+}) => {
+  const { theme, showMessageStatus } = useChatContext();
+  return (
+    <>
+      {showMessageStatus && (
+        <View
+          style={[
+            tw`flex-row items-center`,
+            hasText
+              ? tw`justify-end pb-1 ml-4`
+              : hasAudio
+                ? tw`absolute right-3 bottom-3`
+                : tw`absolute right-3 bottom-4 bg-black/50 px-2 py-1 rounded-md`,
+          ]}
+        >
+          <Text
+            style={[
+              tw`text-xs`,
+              {
+                color:
+                  hasText || hasAudio
+                    ? theme?.colors?.timestamp || 'rgba(107, 114, 128, 0.7)'
+                    : 'white',
+              },
+            ]}
+          >
+            {time}
+          </Text>
+          {isCurrentUser && (
+            <View style={tw`ml-1 flex-row items-center`}>
+              {status === 'sent' && (
+                <CheckIcon
+                  style={tw.style('fill-[#6B7280] h-4 w-4', { opacity: 0.7 })}
+                />
+              )}
+              {status === 'delivered' && (
+                <CheckAllIcon
+                  style={tw.style('fill-[#6B7280] h-4 w-4', { opacity: 0.7 })}
+                />
+              )}
+              {status === 'read' && (
+                <CheckAllIcon
+                  style={tw.style('fill-[#3B82F6] h-4 w-4', { opacity: 0.9 })}
+                />
+              )}
+            </View>
+          )}
+        </View>
+      )}
+    </>
+  );
+};
+
+export default React.memo(MessageStatus);

package/src/components/ChatBubble/types.ts

@@ -0,0 +1,21 @@
+import { Message } from "../../types";
+
+export interface ChatBubbleProps {
+  message: Message;
+  isCurrentUser: boolean;
+  isFirstInSequence: boolean;
+  onLongPress?: () => void;
+}
+
+export interface MessageContentProps extends ChatBubbleProps {
+  onMediaPress: (type: "image" | "video", url: string) => void;
+  isVideoPlaying?: boolean;
+}
+
+export interface MessageStatusProps {
+  time: string;
+  status?: "read" | "delivered" | "sent";
+  isCurrentUser: boolean;
+  hasText: boolean;
+  hasAudio: boolean;
+}