@codewithvincent/react-native-love-chat 0.1.0

package/dist/components/media/AudioCard.js

@@ -0,0 +1,187 @@
+"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/FileCard.d.ts

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

package/dist/components/media/FileCard.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FileCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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, }) {
+    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 iconColor = isMine ? theme.colors.white : theme.colors.darkRed;
+    const getExtension = (name) => {
+        var _a;
+        return ((_a = name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || 'FILE';
+    };
+    const extension = getExtension(fileName);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.container, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, { backgroundColor: cardBackgroundColor }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.iconContainer, children: [(0, jsx_runtime_1.jsx)(Icons_1.FileIcon, { size: 24, color: iconColor }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.extensionText, { color: iconColor }], children: extension })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.infoContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.fileName, { color: textColor }], numberOfLines: 1, ellipsizeMode: "middle", children: fileName }), (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.fileSize, { color: subTextColor }], children: ["1.2 MB \u2022 ", extension] })] })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.footer, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.timeText, { color: subTextColor }], children: time }) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        minWidth: utils_1.appSize.width(60),
+        maxWidth: utils_1.appSize.width(75),
+    },
+    card: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 8,
+        padding: 10,
+        marginBottom: 4,
+    },
+    iconContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 10,
+    },
+    extensionText: {
+        fontSize: 8,
+        fontWeight: 'bold',
+        marginTop: 2,
+    },
+    infoContainer: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    fileName: {
+        fontSize: 14,
+        fontWeight: '500',
+        marginBottom: 2,
+    },
+    fileSize: {
+        fontSize: 11,
+    },
+    footer: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        paddingRight: 4,
+        paddingBottom: 2,
+    },
+    timeText: {
+        fontSize: 10,
+    }
+});

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

@@ -0,0 +1,9 @@
+interface ImageCardProps {
+    uri: string;
+    maxWidth?: number;
+    time?: string;
+    isFullScreen?: boolean;
+    setFullScreen?: any;
+}
+export default function ImageCard({ uri, maxWidth, time, isFullScreen, setFullScreen, }: ImageCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/media/ImageCard.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ImageCard;
+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 Icons_1 = require("../Icons");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+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 bubbleWidth = maxWidth || utils_1.appSize.width(65);
+    const [bubbleHeight, setBubbleHeight] = (0, react_1.useState)(bubbleWidth * 0.75);
+    (0, react_1.useEffect)(() => {
+        react_native_1.Image.getSize(uri, (w, h) => {
+            const ratio = h / w;
+            const height = bubbleWidth * ratio;
+            const minH = 120;
+            const maxH = 400;
+            setBubbleHeight(Math.min(Math.max(height, minH), maxH));
+        }, () => {
+            setBubbleHeight(bubbleWidth * 0.75);
+        });
+    }, [uri]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    styles.container,
+                    { width: bubbleWidth, height: bubbleHeight },
+                ], 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" }) })] }) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        borderRadius: utils_1.appSize.width(2),
+        overflow: 'hidden',
+        backgroundColor: '#000',
+        margin: -2,
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    modal: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#000',
+    },
+    fullScreenImage: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+    },
+    closeButton: {
+        position: 'absolute',
+        right: 20,
+        zIndex: 10,
+        padding: 10,
+    },
+    timeOverlay: {
+        position: 'absolute',
+        bottom: 5,
+        right: 5,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        borderRadius: 10,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+    },
+    timeText: {
+        color: '#fff',
+        fontSize: 10,
+        fontWeight: '600',
+    },
+});

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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,232 @@
+"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',
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './types';
+export * from './utils/theme';
+export { default as Chat } from './Chat';
+export { default as Message } from './components/Message';
+export { default as MessageList } from './components/MessageList';
+export { default as InputToolbar } from './components/InputToolbar';
+export { default as Composer } from './components/Composer';
+export { default as Bubble } from './components/Bubble';
+export { default as MessageStatus } from './components/MessageStatus';

package/dist/index.js

@@ -0,0 +1,36 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageStatus = exports.Bubble = exports.Composer = exports.InputToolbar = exports.MessageList = exports.Message = exports.Chat = void 0;
+__exportStar(require("./types"), exports);
+__exportStar(require("./utils/theme"), exports);
+var Chat_1 = require("./Chat");
+Object.defineProperty(exports, "Chat", { enumerable: true, get: function () { return __importDefault(Chat_1).default; } });
+var Message_1 = require("./components/Message");
+Object.defineProperty(exports, "Message", { enumerable: true, get: function () { return __importDefault(Message_1).default; } });
+var MessageList_1 = require("./components/MessageList");
+Object.defineProperty(exports, "MessageList", { enumerable: true, get: function () { return __importDefault(MessageList_1).default; } });
+var InputToolbar_1 = require("./components/InputToolbar");
+Object.defineProperty(exports, "InputToolbar", { enumerable: true, get: function () { return __importDefault(InputToolbar_1).default; } });
+var Composer_1 = require("./components/Composer");
+Object.defineProperty(exports, "Composer", { enumerable: true, get: function () { return __importDefault(Composer_1).default; } });
+var Bubble_1 = require("./components/Bubble");
+Object.defineProperty(exports, "Bubble", { enumerable: true, get: function () { return __importDefault(Bubble_1).default; } });
+var MessageStatus_1 = require("./components/MessageStatus");
+Object.defineProperty(exports, "MessageStatus", { enumerable: true, get: function () { return __importDefault(MessageStatus_1).default; } });