@codewithvincent/react-native-love-chat 0.1.0 → 0.2.0

package/dist/components/FooterReplyPreview.js

@@ -7,7 +7,6 @@ const theme_1 = require("../utils/theme");
 const Icons_1 = require("./Icons");
 const FooterReplyPreview = ({ chatMessage, clearReply, userId }) => {
     var _a, _b;
-    console.log('chatMessage', chatMessage);
     const theme = (0, theme_1.useTheme)();
     if (!chatMessage)
         return null;
@@ -81,7 +80,7 @@ const styles = react_native_1.StyleSheet.create({
         borderLeftWidth: 4,
         borderLeftColor: theme_1.defaultTheme.colors.primary,
         borderBottomWidth: 0.3,
-        borderBottomColor: '#ddd',
+        borderBottomColor: theme_1.defaultTheme.colors.replyPreviewBorder,
     },
     replyLine: {
         width: 4,
@@ -115,7 +114,7 @@ const styles = react_native_1.StyleSheet.create({
         height: 40,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: '#eee',
+        backgroundColor: theme_1.defaultTheme.colors.replyMediaBg,
         borderRadius: 4,
     },
     replyFileContainer: {

package/dist/components/Message.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,26 +39,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const ReanimatedSwipeable_1 = __importDefault(require("react-native-gesture-handler/ReanimatedSwipeable"));
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
 const Bubble_1 = __importDefault(require("./Bubble"));
 const MessageStatus_1 = __importDefault(require("./MessageStatus"));
 const theme_1 = require("../utils/theme");
 const ReplyPreview_1 = __importDefault(require("./ReplyPreview"));
 const ImageCard_1 = __importDefault(require("./media/ImageCard"));
-const VideoCard_1 = __importDefault(require("./media/VideoCard"));
-const AudioCard_1 = __importDefault(require("./media/AudioCard"));
 const FileCard_1 = __importDefault(require("./media/FileCard"));
 const ReactionBubble_1 = __importDefault(require("./ReactionBubble"));
 const Message = (props) => {
     var _a, _b, _c;
     const [isFullScreen, setFullScreen] = (0, react_1.useState)(false);
+    const [isVideo, setVideo] = (0, react_1.useState)(false);
     const theme = (0, theme_1.useTheme)();
     const { currentMessage, user, onLongPress, onPress, renderBubble, onReply, onReaction, onDeleteMessage, onDownloadFile, } = props;
     const isMine = currentMessage.user._id === user._id || currentMessage.isMine;
-    const swipeableRef = (0, react_1.useRef)(null);
     const fileType = (_a = currentMessage.fileType) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    const isMedia = !!(currentMessage.image || currentMessage.video || currentMessage.audio || fileType === 'image' || fileType === 'video' || fileType === 'file' || fileType === 'audio');
-    const timestamp = new Date(currentMessage.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const isMedia = !!(currentMessage.image ||
+        currentMessage.video ||
+        currentMessage.audio ||
+        fileType === 'image' ||
+        fileType === 'video' ||
+        fileType === 'file' ||
+        fileType === 'audio');
+    const timestamp = new Date(currentMessage.createdAt).toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
     const handleLongPress = () => {
         onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(null, currentMessage);
     };
@@ -35,6 +76,11 @@ const Message = (props) => {
             return;
         if (currentMessage.image || fileType === 'image') {
             setFullScreen(!isFullScreen);
+            return;
+        }
+        if (currentMessage.video || currentMessage.fileType === 'video') {
+            setVideo(true);
+            return;
         }
     };
     const handleReactionPress = (reaction) => {
@@ -42,47 +88,83 @@ const Message = (props) => {
             onReaction(currentMessage, reaction);
         }
     };
-    const handleSwipeReply = () => {
-        var _a;
-        (_a = swipeableRef.current) === null || _a === void 0 ? void 0 : _a.close();
-        onReply === null || onReply === void 0 ? void 0 : onReply(currentMessage);
-    };
-    const renderLeftActions = () => {
-        // Invisible view for swipe action trigger
-        return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 50 } });
-    };
+    // =============================
+    // Universal Swipe Implementation
+    // =============================
+    const translateX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const threshold = 60;
+    const panGesture = react_native_gesture_handler_1.Gesture.Pan()
+        .activeOffsetX([-20, 20])
+        .failOffsetY([-15, 15])
+        .minDistance(15)
+        .maxPointers(1)
+        .onUpdate((event) => {
+        if (event.translationX > 0) {
+            translateX.value = event.translationX;
+        }
+    })
+        .onEnd(() => {
+        if (translateX.value > threshold && onReply) {
+            (0, react_native_reanimated_1.runOnJS)(onReply)(currentMessage);
+        }
+        translateX.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 200 });
+    });
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ translateX: translateX.value }],
+    }));
+    // =============================
+    // Content Rendering
+    // =============================
     const renderContent = () => {
         if (currentMessage.image || fileType === 'image') {
             if (props.renderMessageImage)
-                return props.renderMessageImage(props);
+                return props.renderMessageImage(currentMessage);
             return ((0, jsx_runtime_1.jsx)(ImageCard_1.default, { uri: currentMessage.image || currentMessage.fileUrl || '', time: timestamp, setFullScreen: setFullScreen, isFullScreen: isFullScreen }));
         }
         if (currentMessage.video || fileType === 'video') {
+            const currentProps = {
+                ...currentMessage,
+                setFullScreen: setVideo,
+                isFullScreen: isVideo,
+            };
             if (props.renderMessageVideo)
-                return props.renderMessageVideo(props);
-            return ((0, jsx_runtime_1.jsx)(VideoCard_1.default, { file: { uri: currentMessage.video || currentMessage.fileUrl || '' }, time: timestamp, onLongPress: handleLongPress }));
+                return props.renderMessageVideo(currentProps);
+            return null;
         }
         if (currentMessage.audio || fileType === 'audio') {
             if (props.renderMessageAudio)
-                return props.renderMessageAudio(props);
-            return (0, jsx_runtime_1.jsx)(AudioCard_1.default, { uri: currentMessage.audio || currentMessage.fileUrl || '', isMine: !!isMine });
+                return props.renderMessageAudio(currentMessage);
+            return null;
         }
         if (fileType === 'file') {
-            return (0, jsx_runtime_1.jsx)(FileCard_1.default, { fileName: currentMessage.fileName || 'File', isMine: !!isMine, time: timestamp });
+            return ((0, jsx_runtime_1.jsx)(FileCard_1.default, { fileName: currentMessage.fileName || 'File', isMine: !!isMine, time: timestamp }));
         }
-        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: currentMessage.text ? (props.renderMessageText ? (props.renderMessageText(props)) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.text, isMine ? { color: theme.colors.ownMessageText } : { color: theme.colors.otherMessageText }], children: currentMessage.text }))) : null }));
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: currentMessage.text ? (props.renderMessageText ? (props.renderMessageText(props)) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+                    styles.text,
+                    isMine
+                        ? { color: theme.colors.ownMessageText }
+                        : { color: theme.colors.otherMessageText },
+                ], children: currentMessage.text }))) : null }));
     };
-    // Reactions logic
+    // =============================
+    // Reactions
+    // =============================
     const reactions = ['👍', '❤️', '😂', '😮', '😢', '🤲'];
     const myReaction = (_c = (_b = currentMessage.reactions) === null || _b === void 0 ? void 0 : _b.find((r) => r.userId === user._id)) === null || _c === void 0 ? void 0 : _c.emoji;
-    const bubbleContent = ((0, jsx_runtime_1.jsxs)(Bubble_1.default, { isOwnMessage: !!isMine, isMedia: isMedia, children: [currentMessage.replyTo && ((0, jsx_runtime_1.jsx)(ReplyPreview_1.default, { replyTo: currentMessage.replyTo })), renderContent(), !isMedia && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.footer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.time, isMine ? styles.timeMine : { color: theme.colors.timestamp }], children: timestamp }), isMine && (0, jsx_runtime_1.jsx)(MessageStatus_1.default, { status: currentMessage.status, isMine: !!isMine })] }))] }));
-    const messageView = ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, isMine ? styles.containerMine : styles.containerOther], children: (0, jsx_runtime_1.jsx)(ReactionBubble_1.default, { reactions: reactions, isMine: !!isMine, selectedReaction: myReaction, onReactionPress: handleReactionPress, onPress: handlePress, onLongPress: handleLongPress, bubbleStyle: styles.reactionPopup, onReply: () => onReply === null || onReply === void 0 ? void 0 : onReply(currentMessage), onDelete: onDeleteMessage ? () => onDeleteMessage(currentMessage) : undefined, onDownload: onDownloadFile ? () => onDownloadFile(currentMessage) : undefined, isFile: isMedia, children: renderBubble ? renderBubble({
-                ...props,
-                isMine,
-                children: renderContent(),
-            }) : bubbleContent }) }));
+    const contentEl = renderContent();
+    const bubbleContent = contentEl ? ((0, jsx_runtime_1.jsxs)(Bubble_1.default, { isOwnMessage: !!isMine, isMedia: isMedia, children: [currentMessage.replyTo && (0, jsx_runtime_1.jsx)(ReplyPreview_1.default, { replyTo: currentMessage.replyTo }), contentEl, !isMedia && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.footer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.time, isMine ? styles.timeMine : { color: theme.colors.timestamp }], children: timestamp }), isMine && (0, jsx_runtime_1.jsx)(MessageStatus_1.default, { status: currentMessage.status, isMine: !!isMine })] }))] })) : null;
+    const messageView = ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, isMine ? styles.containerMine : styles.containerOther], children: (0, jsx_runtime_1.jsx)(ReactionBubble_1.default, { reactions: reactions, isMine: !!isMine, selectedReaction: myReaction, onReactionPress: handleReactionPress, onPress: handlePress, onLongPress: handleLongPress, bubbleStyle: styles.reactionPopup, onReply: () => onReply === null || onReply === void 0 ? void 0 : onReply(currentMessage), onDelete: onDeleteMessage ? () => onDeleteMessage(currentMessage) : undefined, onDownload: onDownloadFile ? () => onDownloadFile(currentMessage) : undefined, isFile: isMedia, children: renderBubble
+                ? renderBubble({
+                    ...props,
+                    isMine,
+                    children: contentEl,
+                })
+                : bubbleContent }) }));
+    // =============================
+    // Conditional Swipe Wrapper
+    // =============================
     if (onReply) {
-        return ((0, jsx_runtime_1.jsx)(ReanimatedSwipeable_1.default, { ref: swipeableRef, onSwipeableOpen: handleSwipeReply, renderLeftActions: renderLeftActions, leftThreshold: 40, overshootLeft: false, children: messageView }));
+        return ((0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: react_native_gesture_handler_1.Gesture.Simultaneous(panGesture, react_native_gesture_handler_1.Gesture.Native()), children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedStyle, children: messageView }) }));
     }
     return messageView;
 };
@@ -119,13 +201,13 @@ const styles = react_native_1.StyleSheet.create({
         marginRight: 4,
     },
     timeMine: {
-        color: 'rgba(255, 255, 255, 0.7)',
+        color: theme_1.defaultTheme.colors.timestampMine,
     },
     timeOther: {
-        color: '#aaa',
+        color: theme_1.defaultTheme.colors.timestamp,
     },
     reactionPopup: {
-        backgroundColor: '#202A30',
-    }
+        backgroundColor: theme_1.defaultTheme.colors.reactionPopupBg,
+    },
 });
 exports.default = Message;

package/dist/components/ReactionBubble.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const computePositions: ({ pos, reactionsCount, isMine, screenW, screenH, popupItemWidth, popupHeight, menuWidth, menuItemCount, menuItemHeight, verticalGap, horizontalMargin, reactionCoreWidth, reactionHorizontalPadding, popupHorizontalPadding, }: {
+export declare const computePositions: ({ pos, reactionsCount, isMine, screenW, screenH, popupHeight, menuWidth, menuItemCount, menuItemHeight, verticalGap, horizontalMargin, reactionCoreWidth, reactionHorizontalPadding, popupHorizontalPadding, }: {
     pos: {
         x: number;
         y: number;

package/dist/components/ReactionBubble.js

@@ -50,7 +50,7 @@ const Icons_1 = require("./Icons");
 const SCREEN = react_native_1.Dimensions.get('window');
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 // Helper exported for tests (non-breaking)
-const computePositions = ({ pos, reactionsCount, isMine, screenW, screenH, popupItemWidth = 42, popupHeight = 60, menuWidth = 200, menuItemCount = 3, menuItemHeight = 44, verticalGap = 12, horizontalMargin = 8, reactionCoreWidth = 28, reactionHorizontalPadding = 8, popupHorizontalPadding = 12, }) => {
+const computePositions = ({ pos, reactionsCount, isMine, screenW, screenH, popupHeight = 60, menuWidth = 200, menuItemCount = 3, menuItemHeight = 44, verticalGap = 12, horizontalMargin = 8, reactionCoreWidth = 28, reactionHorizontalPadding = 8, popupHorizontalPadding = 12, }) => {
     // More accurate width estimation: per-reaction width + container paddings
     const perReactionWidth = reactionCoreWidth + reactionHorizontalPadding * 2;
     const emojiPanelWidth = reactionsCount * perReactionWidth + popupHorizontalPadding * 2;
@@ -148,10 +148,10 @@ function ReactionBubble({ reactions, selectedReaction, onReactionPress, style, b
             }
             left = clamp(left, 10, screenW - popupWidth - 10);
             menuTop = pos.y + pos.height + 10;
-            let _menuLeft = isMine ? (pos.x + pos.width - menuWidth) : pos.x;
+            let _menuLeft = isMine ? pos.x + pos.width - menuWidth : pos.x;
             menuLeft = clamp(_menuLeft, 10, screenW - menuWidth - 10);
         }
-        siblingRef.current = new react_native_root_siblings_1.default(((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.overlayContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: react_native_1.StyleSheet.absoluteFill, onPress: hidePopup, children: (0, jsx_runtime_1.jsx)(UniversalBlurView_1.UniversalBlurView, { style: react_native_1.StyleSheet.absoluteFill, blurType: 'dark', blurAmount: 12, tint: "dark", intensity: 60, reducedTransparencyFallbackColor: "#000000CC" }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+        siblingRef.current = new react_native_root_siblings_1.default((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.overlayContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: react_native_1.StyleSheet.absoluteFill, onPress: hidePopup, children: (0, jsx_runtime_1.jsx)(UniversalBlurView_1.UniversalBlurView, { style: react_native_1.StyleSheet.absoluteFill, blurType: 'dark', blurAmount: 12, tint: "dark", intensity: 60, reducedTransparencyFallbackColor: theme.colors.blurFallback }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                         styles.messageDuplicateWrapper,
                         {
                             top: pos.y,
@@ -168,8 +168,17 @@ function ReactionBubble({ reactions, selectedReaction, onReactionPress, style, b
                             top: menuTop,
                             left: menuLeft,
                             width: menuWidth,
-                        }
-                    ], children: [onReply && ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.menuItem, onPress: () => { hidePopup(); onReply(); }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.menuText, children: "Reply" }), (0, jsx_runtime_1.jsx)(Icons_1.ReplyIcon, { size: 18, color: "#fff" })] })), isFile && onDownload && ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.menuItem, onPress: () => { hidePopup(); onDownload(); }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.menuText, children: "Download" }), (0, jsx_runtime_1.jsx)(Icons_1.DownloadIcon, { size: 18, color: "#fff" })] })), onDelete && ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: [styles.menuItem, { borderBottomWidth: 0 }], onPress: () => { hidePopup(); onDelete(); }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.menuText, { color: theme_1.defaultTheme.colors.darkRed }], children: "Delete" }), (0, jsx_runtime_1.jsx)(Icons_1.TrashIcon, { size: 18 })] }))] })] })));
+                        },
+                    ], children: [onReply && ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.menuItem, onPress: () => {
+                                hidePopup();
+                                onReply();
+                            }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.menuText, children: "Reply" }), (0, jsx_runtime_1.jsx)(Icons_1.ReplyIcon, { size: 18, color: theme.colors.white })] })), isFile && onDownload && ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: styles.menuItem, onPress: () => {
+                                hidePopup();
+                                onDownload();
+                            }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.menuText, children: "Download" }), (0, jsx_runtime_1.jsx)(Icons_1.DownloadIcon, { size: 18, color: theme.colors.white })] })), onDelete && ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: [styles.menuItem, { borderBottomWidth: 0 }], onPress: () => {
+                                hidePopup();
+                                onDelete();
+                            }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.menuText, { color: theme_1.defaultTheme.colors.darkRed }], children: "Delete" }), (0, jsx_runtime_1.jsx)(Icons_1.TrashIcon, { size: 18 })] }))] })] }));
         requestAnimationFrame(() => {
             scale.value = 1;
         });
@@ -219,7 +228,7 @@ const styles = react_native_1.StyleSheet.create({
         paddingVertical: 8,
         paddingHorizontal: 12,
         borderRadius: 40,
-        backgroundColor: '#202A30',
+        backgroundColor: theme_1.defaultTheme.colors.reactionPopupBg,
         zIndex: 100,
     },
     reaction: {
@@ -239,7 +248,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     contextMenu: {
         position: 'absolute',
-        backgroundColor: 'rgba(30, 30, 30, 0.95)',
+        backgroundColor: theme_1.defaultTheme.colors.reactionMenuBg,
         borderRadius: 12,
         paddingVertical: 4,
         width: 200,
@@ -252,10 +261,10 @@ const styles = react_native_1.StyleSheet.create({
         paddingVertical: 12,
         paddingHorizontal: 16,
         borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
-        borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+        borderBottomColor: theme_1.defaultTheme.colors.reactionMenuSeparator,
     },
     menuText: {
-        color: '#fff',
+        color: theme_1.defaultTheme.colors.white,
         fontSize: 16,
         fontWeight: '400',
     },

package/dist/components/ReplyPreview.js

@@ -86,7 +86,7 @@ const styles = react_native_1.StyleSheet.create({
         borderRadius: 6,
         marginLeft: 10,
         overflow: 'hidden',
-        backgroundColor: '#ccc',
+        backgroundColor: theme_1.defaultTheme.colors.mediaThumbBg,
         justifyContent: 'center',
         alignItems: 'center',
     },

package/dist/components/media/FileCard.d.ts

@@ -4,5 +4,5 @@ interface FileCardProps {
     isMine?: boolean;
     time?: string;
 }
-export default function FileCard({ fileName, isMine, time, }: FileCardProps): import("react/jsx-runtime").JSX.Element;
+export default function FileCard({ fileName, isMine, time }: FileCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/media/FileCard.js

@@ -6,14 +6,14 @@ const react_native_1 = require("react-native");
 const utils_1 = require("../../utils");
 const theme_1 = require("../../utils/theme");
 const Icons_1 = require("../Icons");
-function FileCard({ fileName, isMine = false, time, }) {
+function FileCard({ fileName, isMine = false, time }) {
     const theme = (0, theme_1.useTheme)();
     // WhatsApp-style colors
     // Sent: Lighter green bubble, file card is slightly darker green/transparent
     // Received: White bubble, file card is light gray
     const cardBackgroundColor = isMine ? theme.colors.ownFileBg : theme.colors.otherFileBg;
     const textColor = isMine ? theme.colors.ownMessageText : theme.colors.otherMessageText;
-    const subTextColor = isMine ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.5)';
+    const subTextColor = isMine ? theme.colors.timestampMine : theme.colors.mediumGray;
     const iconColor = isMine ? theme.colors.white : theme.colors.darkRed;
     const getExtension = (name) => {
         var _a;
@@ -64,5 +64,5 @@ const styles = react_native_1.StyleSheet.create({
     },
     timeText: {
         fontSize: 10,
-    }
+    },
 });

package/dist/components/media/ImageCard.js

@@ -7,10 +7,12 @@ const react_native_1 = require("react-native");
 const utils_1 = require("../../utils");
 const Icons_1 = require("../Icons");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const theme_1 = require("../../utils/theme");
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
 const ImageComponent = react_native_1.Image;
 function ImageCard({ uri, maxWidth, time, isFullScreen, setFullScreen, }) {
     const inset = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const theme = (0, theme_1.useTheme)();
     const bubbleWidth = maxWidth || utils_1.appSize.width(65);
     const [bubbleHeight, setBubbleHeight] = (0, react_1.useState)(bubbleWidth * 0.75);
     (0, react_1.useEffect)(() => {
@@ -30,13 +32,13 @@ function ImageCard({ uri, maxWidth, time, isFullScreen, setFullScreen, }) {
                 ], children: [(0, jsx_runtime_1.jsx)(ImageComponent, { source: { uri }, style: styles.image, resizeMode: "cover" }), time && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.timeOverlay, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.timeText, children: time }) }))] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: isFullScreen, transparent: false, onRequestClose: () => setFullScreen(false), animationType: "fade", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modal, children: [(0, jsx_runtime_1.jsx)(ImageComponent, { source: { uri }, style: styles.fullScreenImage, resizeMode: "contain" }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
                                 styles.closeButton,
                                 { top: inset.top + 10 },
-                            ], onPress: () => setFullScreen(false), children: (0, jsx_runtime_1.jsx)(Icons_1.CloseIcon, { size: 24, color: "#fff" }) })] }) })] }));
+                            ], onPress: () => setFullScreen(false), children: (0, jsx_runtime_1.jsx)(Icons_1.CloseIcon, { size: 24, color: theme.colors.white }) })] }) })] }));
 }
 const styles = react_native_1.StyleSheet.create({
     container: {
         borderRadius: utils_1.appSize.width(2),
         overflow: 'hidden',
-        backgroundColor: '#000',
+        backgroundColor: theme_1.defaultTheme.colors.black,
         margin: -2,
     },
     image: {
@@ -47,7 +49,7 @@ const styles = react_native_1.StyleSheet.create({
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        backgroundColor: '#000',
+        backgroundColor: theme_1.defaultTheme.colors.black,
     },
     fullScreenImage: {
         width: SCREEN_WIDTH,
@@ -63,13 +65,13 @@ const styles = react_native_1.StyleSheet.create({
         position: 'absolute',
         bottom: 5,
         right: 5,
-        backgroundColor: 'rgba(0,0,0,0.5)',
+        backgroundColor: theme_1.defaultTheme.colors.overlayBlack50,
         borderRadius: 10,
         paddingHorizontal: 6,
         paddingVertical: 2,
     },
     timeText: {
-        color: '#fff',
+        color: theme_1.defaultTheme.colors.white,
         fontSize: 10,
         fontWeight: '600',
     },

package/dist/types.d.ts

@@ -45,6 +45,7 @@ export interface ChatProps {
     renderMessageImage?: (props: any) => React.ReactNode;
     renderMessageVideo?: (props: any) => React.ReactNode;
     renderMessageAudio?: (props: any) => React.ReactNode;
+    renderAudio?: (props: any) => React.ReactNode;
     renderFooter?: () => React.ReactNode;
     renderChatFooter?: () => React.ReactNode;
     renderUploadFooter?: (props: any) => React.ReactNode;

package/dist/utils/theme.d.ts

@@ -23,6 +23,20 @@ export declare const defaultTheme: {
         otherMessageText: string;
         ownFileBg: string;
         otherFileBg: string;
+        timestampMine: string;
+        reactionPopupBg: string;
+        reactionMenuBg: string;
+        reactionMenuSeparator: string;
+        overlayBlack50: string;
+        overlayBlack35: string;
+        overlayBlack55: string;
+        overlayWhite20: string;
+        mediaThumbBg: string;
+        replyMediaBg: string;
+        replyPreviewBorder: string;
+        progressTrackBg: string;
+        mediumGray: string;
+        blurFallback: string;
     };
     fonts: {
         light: string;
@@ -61,6 +75,20 @@ export declare const useTheme: () => {
         otherMessageText: string;
         ownFileBg: string;
         otherFileBg: string;
+        timestampMine: string;
+        reactionPopupBg: string;
+        reactionMenuBg: string;
+        reactionMenuSeparator: string;
+        overlayBlack50: string;
+        overlayBlack35: string;
+        overlayBlack55: string;
+        overlayWhite20: string;
+        mediaThumbBg: string;
+        replyMediaBg: string;
+        replyPreviewBorder: string;
+        progressTrackBg: string;
+        mediumGray: string;
+        blurFallback: string;
     };
     fonts: {
         light: string;

package/dist/utils/theme.js

@@ -27,6 +27,20 @@ exports.defaultTheme = {
         otherMessageText: '#000',
         ownFileBg: 'rgba(0, 0, 0, 0.1)',
         otherFileBg: 'rgba(0, 0, 0, 0.05)',
+        timestampMine: 'rgba(255, 255, 255, 0.7)',
+        reactionPopupBg: '#202A30',
+        reactionMenuBg: 'rgba(30, 30, 30, 0.95)',
+        reactionMenuSeparator: 'rgba(255, 255, 255, 0.1)',
+        overlayBlack50: 'rgba(0,0,0,0.5)',
+        overlayBlack35: 'rgba(0,0,0,0.35)',
+        overlayBlack55: 'rgba(0,0,0,0.55)',
+        overlayWhite20: 'rgba(255,255,255,0.2)',
+        mediaThumbBg: '#ccc',
+        replyMediaBg: '#eee',
+        replyPreviewBorder: '#ddd',
+        progressTrackBg: '#e0e0e0',
+        mediumGray: '#666',
+        blurFallback: '#000000CC',
     },
     fonts: {
         light: 'System',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codewithvincent/react-native-love-chat",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A fully featured React Native chat UI component with replies, reactions, media, and theming.",
   "license": "MIT",
   "private": false,
@@ -23,7 +23,7 @@
     "react": ">=18.0.0",
     "react-native": ">=0.73.0",
     "react-native-gesture-handler": ">=2.12.0",
-    "react-native-reanimated": ">=3.6.0",
+    "react-native-reanimated": ">=3.6.0 <5.0.0",
     "react-native-safe-area-context": ">=4.10.0",
     "react-native-root-siblings": ">=4.2.1",
     "@shopify/flash-list": ">=1.6.3",

package/dist/components/adapters/UniversalAudio.d.ts

@@ -1,8 +0,0 @@
-type EngineType = 'expo-audio' | 'rnsound' | 'none';
-export interface AudioEngineType {
-    type: EngineType;
-    ExpoAudio: any;
-    RNSound: any;
-}
-export declare const AudioEngine: AudioEngineType;
-export {};

package/dist/components/adapters/UniversalAudio.js

@@ -1,23 +0,0 @@
-"use strict";
-// src/adapters/UniversalAudio.ts
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioEngine = void 0;
-let ExpoAudio = null;
-let RNSound = null;
-// Try expo-audio first
-try {
-    ExpoAudio = require('expo-audio');
-}
-catch { }
-// Fallback to react-native-sound
-if (!ExpoAudio) {
-    try {
-        RNSound = require('react-native-sound');
-    }
-    catch { }
-}
-exports.AudioEngine = {
-    type: ExpoAudio ? 'expo-audio' : RNSound ? 'rnsound' : 'none',
-    ExpoAudio,
-    RNSound,
-};

package/dist/components/adapters/UniversalVideo.d.ts

@@ -1,8 +0,0 @@
-type EngineType = 'expo-video' | 'rn-video' | 'none';
-export interface VideoEngineType {
-    type: EngineType;
-    ExpoVideo: any;
-    RNVideo: any;
-}
-export declare const VideoEngine: VideoEngineType;
-export {};

package/dist/components/adapters/UniversalVideo.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoEngine = void 0;
-let ExpoVideo = null;
-let RNVideo = null;
-try {
-    ExpoVideo = require('expo-video');
-}
-catch { }
-if (!ExpoVideo) {
-    try {
-        RNVideo = require('react-native-video').default;
-    }
-    catch { }
-}
-exports.VideoEngine = {
-    type: ExpoVideo ? 'expo-video' : RNVideo ? 'rn-video' : 'none',
-    ExpoVideo,
-    RNVideo,
-};

package/dist/components/media/AudioCard.d.ts

@@ -1,7 +0,0 @@
-interface AudioMessageProps {
-    uri: string;
-    maxWidth?: number;
-    isMine?: boolean;
-}
-export default function AudioCard({ uri, maxWidth, isMine }: AudioMessageProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/media/AudioCard.js

@@ -1,187 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = AudioCard;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const utils_1 = require("../../utils");
-const theme_1 = require("../../utils/theme");
-const Icons_1 = require("../Icons");
-const UniversalAudio_1 = require("../adapters/UniversalAudio");
-function AudioCard({ uri, maxWidth, isMine }) {
-    const soundRef = (0, react_1.useRef)(null);
-    const intervalRef = (0, react_1.useRef)(null);
-    const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const totalDuration = (0, react_1.useRef)(0);
-    const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [currentTime, setCurrentTime] = (0, react_1.useState)('0:00');
-    const theme = (0, theme_1.useTheme)();
-    (0, react_1.useEffect)(() => {
-        return () => {
-            cleanup();
-        };
-    }, []);
-    const cleanup = async () => {
-        var _a, _b;
-        if (UniversalAudio_1.AudioEngine.type === 'expo-audio' && soundRef.current) {
-            await ((_b = (_a = soundRef.current) === null || _a === void 0 ? void 0 : _a.stop) === null || _b === void 0 ? void 0 : _b.call(_a));
-        }
-        if (UniversalAudio_1.AudioEngine.type === 'rnsound' && soundRef.current) {
-            soundRef.current.release();
-        }
-        if (intervalRef.current)
-            clearInterval(intervalRef.current);
-    };
-    const formatTime = (sec) => {
-        const m = Math.floor(sec / 60);
-        const s = Math.floor(sec % 60);
-        return `${m}:${s < 10 ? '0' : ''}${s}`;
-    };
-    const onFinish = () => {
-        setIsPlaying(false);
-        progressAnim.setValue(0);
-        setCurrentTime('0:00');
-        if (intervalRef.current)
-            clearInterval(intervalRef.current);
-    };
-    const play = async () => {
-        var _a;
-        if (!uri)
-            return;
-        // 🔵 EXPO-AUDIO MODE
-        if (UniversalAudio_1.AudioEngine.type === 'expo-audio') {
-            try {
-                setIsLoading(true);
-                const { createAudioPlayer } = UniversalAudio_1.AudioEngine.ExpoAudio;
-                const player = createAudioPlayer({ uri });
-                soundRef.current = player;
-                player.play();
-                setIsPlaying(true);
-                setIsLoading(false);
-                totalDuration.current = (_a = player.duration) !== null && _a !== void 0 ? _a : 0;
-                intervalRef.current = setInterval(() => {
-                    var _a;
-                    const pos = (_a = player.currentTime) !== null && _a !== void 0 ? _a : 0;
-                    if (totalDuration.current > 0) {
-                        progressAnim.setValue(pos / totalDuration.current);
-                    }
-                    setCurrentTime(formatTime(pos));
-                    if (player.didJustFinish) {
-                        onFinish();
-                    }
-                }, 200);
-            }
-            catch (e) {
-                utils_1.Logger.error('expo-audio error', e);
-                setIsLoading(false);
-            }
-            return;
-        }
-        // 🟠 RN SOUND MODE
-        if (UniversalAudio_1.AudioEngine.type === 'rnsound') {
-            const Sound = UniversalAudio_1.AudioEngine.RNSound;
-            if (!soundRef.current) {
-                setIsLoading(true);
-                const sound = new Sound(uri, '', (err) => {
-                    setIsLoading(false);
-                    if (err) {
-                        utils_1.Logger.error('RN Sound error', err);
-                        return;
-                    }
-                    soundRef.current = sound;
-                    totalDuration.current = sound.getDuration();
-                    sound.play(onFinish);
-                    setIsPlaying(true);
-                    intervalRef.current = setInterval(() => {
-                        sound.getCurrentTime((sec) => {
-                            if (totalDuration.current > 0) {
-                                progressAnim.setValue(sec / totalDuration.current);
-                            }
-                            setCurrentTime(formatTime(sec));
-                        });
-                    }, 200);
-                });
-                return;
-            }
-            soundRef.current.play(onFinish);
-            setIsPlaying(true);
-            return;
-        }
-        utils_1.Logger.error('No audio engine available.');
-    };
-    const pause = async () => {
-        var _a, _b;
-        if (!soundRef.current)
-            return;
-        if (UniversalAudio_1.AudioEngine.type === 'expo-audio') {
-            (_b = (_a = soundRef.current).pause) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }
-        if (UniversalAudio_1.AudioEngine.type === 'rnsound') {
-            soundRef.current.pause();
-        }
-        setIsPlaying(false);
-        if (intervalRef.current)
-            clearInterval(intervalRef.current);
-    };
-    const progressWidth = progressAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0%', '100%'],
-    });
-    const cardBackgroundColor = isMine ? theme.colors.ownFileBg : theme.colors.otherFileBg;
-    const textColor = isMine ? theme.colors.ownMessageText : theme.colors.otherMessageText;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-            styles.container,
-            {
-                maxWidth: maxWidth || utils_1.appSize.width(60),
-                backgroundColor: cardBackgroundColor
-            },
-        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [styles.playButton, { backgroundColor: theme.colors.darkRed }], onPress: isPlaying ? pause : play, disabled: isLoading, children: isLoading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: "#fff" })) : isPlaying ? ((0, jsx_runtime_1.jsx)(Icons_1.PauseIcon, { size: 18, color: "#fff" })) : ((0, jsx_runtime_1.jsx)(Icons_1.PlayIcon, { size: 18, color: "#fff" })) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.middle, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressBackground }), (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
-                            styles.progressForeground,
-                            { width: progressWidth, backgroundColor: theme.colors.darkRed },
-                        ] })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.timeText, { color: textColor }], children: currentTime })] }));
-}
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        minWidth: utils_1.appSize.width(60),
-        alignItems: 'center',
-        backgroundColor: theme_1.defaultTheme.colors.white,
-        paddingVertical: 8,
-        paddingHorizontal: 10,
-        borderRadius: utils_1.appSize.width(2),
-        flexShrink: 1,
-    },
-    playButton: {
-        width: 38,
-        height: 38,
-        borderRadius: 19,
-        backgroundColor: theme_1.defaultTheme.colors.darkRed,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 12,
-    },
-    timeText: {
-        marginLeft: 12,
-        width: 45,
-        fontSize: 12,
-        color: '#666',
-        textAlign: 'right',
-    },
-    middle: {
-        flex: 1,
-        justifyContent: 'center',
-        height: 4,
-        borderRadius: 2,
-        backgroundColor: '#e0e0e0',
-        overflow: 'hidden',
-    },
-    progressBackground: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-        backgroundColor: '#e0e0e0',
-    },
-    progressForeground: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-        backgroundColor: theme_1.defaultTheme.colors.darkRed,
-    },
-});

package/dist/components/media/VideoCard.d.ts

@@ -1,10 +0,0 @@
-interface VideoMessageProps {
-    file: {
-        uri: string;
-    };
-    maxWidth?: number;
-    time?: string;
-    onLongPress?: () => void;
-}
-export default function VideoCard({ file, maxWidth, time, onLongPress, }: VideoMessageProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/media/VideoCard.js

@@ -1,232 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = VideoCard;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const utils_1 = require("../../utils");
-const theme_1 = require("../../utils/theme");
-const Icons_1 = require("../Icons");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const UniversalVideo_1 = require("../adapters/UniversalVideo");
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
-const DEFAULT_ASPECT_RATIO = 16 / 9;
-function VideoCard({ file, maxWidth, time, onLongPress, // ✅ ADDED
- }) {
-    const inset = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    const videoRef = (0, react_1.useRef)(null);
-    const theme = (0, theme_1.useTheme)();
-    const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
-    const [duration, setDuration] = (0, react_1.useState)(0);
-    const [current, setCurrent] = (0, react_1.useState)(0);
-    const [isFullScreen, setFullScreen] = (0, react_1.useState)(false);
-    const progressAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const bubbleWidth = maxWidth || utils_1.appSize.width(65);
-    const initialHeight = Math.min(Math.max(bubbleWidth / DEFAULT_ASPECT_RATIO, 120), 350);
-    const [videoHeight, setVideoHeight] = (0, react_1.useState)(initialHeight);
-    (0, react_1.useEffect)(() => {
-        progressAnim.setValue(current / (duration || 1));
-    }, [current, duration]);
-    const formatTime = (secs) => {
-        if (!secs)
-            return '0:00';
-        const m = Math.floor(secs / 60);
-        const s = Math.floor(secs % 60);
-        return `${m}:${s < 10 ? '0' + s : s}`;
-    };
-    const progressWidth = progressAnim.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0%', '100%'],
-    });
-    if (UniversalVideo_1.VideoEngine.type === 'none') {
-        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                styles.wrapper,
-                {
-                    width: bubbleWidth,
-                    height: 120,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    backgroundColor: theme.colors.black,
-                },
-            ], children: [(0, jsx_runtime_1.jsx)(Icons_1.VideoIcon, { size: 40, color: theme.colors.white }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: 'white', marginTop: 10 }, children: "Video not supported" })] }));
-    }
-    const VideoComponent = UniversalVideo_1.VideoEngine.type === 'expo-video'
-        ? UniversalVideo_1.VideoEngine.ExpoVideo.Video
-        : UniversalVideo_1.VideoEngine.RNVideo;
-    const togglePlayPause = () => {
-        setIsPlaying(prev => !prev);
-    };
-    const renderVideoPlayer = (isFull) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: isFull
-            ? styles.fullScreenWrapper
-            : [styles.videoArea, { width: bubbleWidth, height: videoHeight }], children: [(0, jsx_runtime_1.jsx)(VideoComponent, { ref: videoRef, source: { uri: file.uri }, style: isFull ? styles.fullScreenVideo : styles.video, resizeMode: isFull ? 'contain' : 'cover', paused: !isPlaying, onLoad: (meta) => {
-                    var _a;
-                    const dur = (_a = meta === null || meta === void 0 ? void 0 : meta.duration) !== null && _a !== void 0 ? _a : ((meta === null || meta === void 0 ? void 0 : meta.durationMillis)
-                        ? meta.durationMillis / 1000
-                        : 0);
-                    setDuration(dur);
-                    if (!isFull && (meta === null || meta === void 0 ? void 0 : meta.naturalSize)) {
-                        const { width: w, height: h } = meta.naturalSize;
-                        if (w && h) {
-                            const ratio = h / w;
-                            let finalHeight = bubbleWidth * ratio;
-                            finalHeight = Math.min(Math.max(finalHeight, 120), 350);
-                            setVideoHeight(finalHeight);
-                        }
-                    }
-                }, onProgress: (data) => {
-                    const time = (data === null || data === void 0 ? void 0 : data.currentTime) ||
-                        (data === null || data === void 0 ? void 0 : data.positionMillis) / 1000 ||
-                        0;
-                    if (time !== undefined && time !== null) {
-                        setCurrent(time);
-                    }
-                }, onEnd: () => {
-                    setIsPlaying(false);
-                    setCurrent(duration);
-                    progressAnim.setValue(1);
-                } }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: react_native_1.StyleSheet.absoluteFill, onPress: togglePlayPause, onLongPress: onLongPress, delayLongPress: 250, activeOpacity: 1, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.centerButton, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.controlCircle, children: isPlaying ? ((0, jsx_runtime_1.jsx)(Icons_1.PauseIcon, { size: 24 })) : ((0, jsx_runtime_1.jsx)(Icons_1.PlayIcon, { size: 24 })) }) }) }), !isFull && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.progressContainer, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
-                                styles.progress,
-                                {
-                                    width: progressWidth,
-                                    backgroundColor: theme.colors.darkRed,
-                                },
-                            ] }) }), time && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.timeOverlay, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.timeText, children: time }) }))] })), isFull && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                            styles.modalCloseButton,
-                            { top: inset.top + 10 },
-                        ], children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => setFullScreen(false), children: (0, jsx_runtime_1.jsx)(Icons_1.CloseIcon, { size: 24, color: "#fff" }) }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.modalProgressWrapper, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.modalTime, children: formatTime(current) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.modalProgressBackground, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
-                                        styles.modalProgressForeground,
-                                        {
-                                            width: progressWidth,
-                                            backgroundColor: theme.colors.darkRed,
-                                        },
-                                    ] }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.modalTime, children: formatTime(duration) })] })] }))] }));
-    if (isFullScreen) {
-        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: react_native_1.StyleSheet.absoluteFill, children: renderVideoPlayer(true) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.wrapper, { width: bubbleWidth }], children: renderVideoPlayer(false) }));
-}
-const styles = react_native_1.StyleSheet.create({
-    wrapper: {
-        borderRadius: utils_1.appSize.width(2),
-        overflow: 'hidden',
-        backgroundColor: theme_1.defaultTheme.colors.black,
-        margin: -2,
-    },
-    videoArea: {
-        borderRadius: utils_1.appSize.width(2),
-        overflow: 'hidden',
-        backgroundColor: theme_1.defaultTheme.colors.black,
-    },
-    video: {
-        width: '100%',
-        height: '100%',
-    },
-    bottomGradient: {
-        position: 'absolute',
-        bottom: 0,
-        width: '100%',
-        height: utils_1.appSize.height(5),
-        backgroundColor: 'rgba(0,0,0,0.35)',
-        justifyContent: 'flex-end',
-        paddingBottom: 6,
-        paddingHorizontal: 8,
-    },
-    durationBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        alignSelf: 'flex-end',
-        backgroundColor: 'rgba(0,0,0,0.55)',
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 10,
-    },
-    durationText: {
-        color: theme_1.defaultTheme.colors.white,
-        fontSize: 13,
-        marginLeft: 5,
-    },
-    centerButton: {
-        position: 'absolute',
-        top: '40%',
-        left: '40%',
-    },
-    controlCircle: {
-        width: utils_1.appSize.width(10),
-        height: utils_1.appSize.width(10),
-        borderRadius: 31,
-        backgroundColor: 'rgba(0,0,0,0.55)',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    progressContainer: {
-        height: 4,
-        backgroundColor: 'rgba(255,255,255,0.2)',
-        justifyContent: 'center',
-    },
-    progressBackground: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-        backgroundColor: theme_1.defaultTheme.colors.black,
-    },
-    progress: {
-        height: 4,
-        backgroundColor: theme_1.defaultTheme.colors.darkRed,
-    },
-    fullScreenWrapper: {
-        width: SCREEN_WIDTH,
-        height: SCREEN_HEIGHT,
-        backgroundColor: '#000',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    fullScreenVideo: {
-        width: SCREEN_WIDTH,
-        height: SCREEN_HEIGHT,
-    },
-    modalPlayButton: {
-        position: 'absolute',
-        alignSelf: 'center',
-        top: '45%',
-    },
-    modalCloseButton: {
-        position: 'absolute',
-        right: 20,
-        zIndex: 9999,
-    },
-    modalProgressWrapper: {
-        position: 'absolute',
-        bottom: 40,
-        width: SCREEN_WIDTH - 40,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    modalProgressBackground: {
-        flex: 1,
-        height: 6,
-        backgroundColor: '#e0e0e0',
-        borderRadius: 3,
-        marginHorizontal: 10,
-        overflow: 'hidden',
-    },
-    modalProgressForeground: {
-        height: '100%',
-        backgroundColor: theme_1.defaultTheme.colors.darkRed,
-    },
-    modalTime: {
-        color: '#fff',
-        fontSize: 14,
-    },
-    timeOverlay: {
-        position: 'absolute',
-        bottom: 25, // Above the progress bar
-        right: 5,
-        backgroundColor: 'rgba(0,0,0,0.5)',
-        borderRadius: 10,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-    },
-    timeText: {
-        color: '#fff',
-        fontSize: 10,
-        fontWeight: '600',
-    },
-});