kasunk99-livestream-core 0.3.13 → 0.3.14

package/dist/components/LiveStreamViewerItem.d.ts

@@ -5,9 +5,6 @@ type LiveStreamViewerItemProps = {
     isActive: boolean;
     index: number;
 };
-/**
- * Single full-screen viewer cell. When isActive, joins the stream room and consumes video/audio.
- */
 export declare const LiveStreamViewerItem: React.NamedExoticComponent<LiveStreamViewerItemProps>;
 export {};
 //# sourceMappingURL=LiveStreamViewerItem.d.ts.map

package/dist/components/LiveStreamViewerItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiveStreamViewerItem.d.ts","sourceRoot":"","sources":["../../src/components/LiveStreamViewerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAwB1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAO/C,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA8BF;;GAEG;AACH,eAAO,MAAM,oBAAoB,uDAiX/B,CAAC"}
+{"version":3,"file":"LiveStreamViewerItem.d.ts","sourceRoot":"","sources":["../../src/components/LiveStreamViewerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAiB1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAQ/C,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAiCF,eAAO,MAAM,oBAAoB,uDA8Z/B,CAAC"}

package/dist/components/LiveStreamViewerItem.js

@@ -1,40 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, Dimensions, KeyboardAvoidingView, NativeModules, Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
-// react-native-keyboard-controller handles Android/iOS keyboard edge cases better
-// than the built-in KeyboardAvoidingView. Fall back to the built-in if unavailable.
-let KAV = KeyboardAvoidingView;
-try {
-    KAV = require('react-native-keyboard-controller').KeyboardAvoidingView;
-}
-catch {
-    // use built-in
-}
+import { ActivityIndicator, Animated, Dimensions, Keyboard, NativeModules, Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { useViewerSocket } from '../hooks/useViewerSocket';
 const SCREEN_HEIGHT = Dimensions.get('window').height;
 const CHAT_NAME_COLORS = ['#f97316', '#22c55e', '#3b82f6', '#eab308', '#ec4899', '#a855f7'];
-// iOS needs bottom safe-area padding; Android auto-adjusts via adjustResize
 const BOTTOM_SAFE = Platform.OS === 'ios' ? 28 : 10;
+const BOTTOM_BAR_H = 58;
+const CHAT_BOTTOM_DEFAULT = BOTTOM_SAFE + BOTTOM_BAR_H + 8;
 let RTCViewComponent = null;
 try {
     const webrtc = require('react-native-webrtc');
     RTCViewComponent = webrtc.RTCView;
 }
-catch {
-    // react-native-webrtc not available in Expo Go
-}
-// expo-linear-gradient — lazy require so the package stays safe in non-Expo environments.
-// The consuming app (social-casino-mobile) has expo-linear-gradient as a dependency.
+catch { }
 let LinearGradient = null;
 try {
     LinearGradient = require('expo-linear-gradient').LinearGradient;
 }
-catch {
-    // expo-linear-gradient not available
+catch { }
+let RNKCEvents = null;
+try {
+    RNKCEvents = require('react-native-keyboard-controller').KeyboardEvents;
 }
-/**
- * Single full-screen viewer cell. When isActive, joins the stream room and consumes video/audio.
- */
+catch { }
 export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream, isActive, index: _index, }) {
     const roomId = isActive ? stream.roomId : null;
     const { joined, joining, error, producerList, roomState, remoteStream, remoteVideoStream, webrtcUnavailable, consumeError, socket, viewerCount: liveViewerCount, streamEnded, } = useViewerSocket(roomId);
@@ -53,8 +41,31 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
     const showVideo = RTCViewComponent && remoteStream && !!streamURL && hasVideoTrack;
     const [chatInput, setChatInput] = useState('');
     const [chatMessages, setChatMessages] = useState([]);
+    const [isTyping, setIsTyping] = useState(false);
     const seededRoomRef = useRef(null);
     const chatListRef = useRef(null);
+    const textInputRef = useRef(null);
+    // Keyboard-driven animated positions
+    const inputBottom = useRef(new Animated.Value(0)).current;
+    const chatAnim = useRef(new Animated.Value(CHAT_BOTTOM_DEFAULT)).current;
+    // Animate floating input and chat column with keyboard
+    useEffect(() => {
+        const animate = (toInput, toChat, dur, onDone) => {
+            Animated.parallel([
+                Animated.timing(inputBottom, { toValue: toInput, duration: dur, useNativeDriver: false }),
+                Animated.timing(chatAnim, { toValue: toChat, duration: dur, useNativeDriver: false }),
+            ]).start(() => onDone?.());
+        };
+        if (RNKCEvents) {
+            const s1 = RNKCEvents.addListener('keyboardWillShow', (e) => animate(e.height, e.height + 60, e.duration || 250));
+            const s2 = RNKCEvents.addListener('keyboardWillHide', (e) => animate(0, CHAT_BOTTOM_DEFAULT, e.duration || 250, () => setIsTyping(false)));
+            return () => { s1.remove(); s2.remove(); };
+        }
+        // Standard Keyboard API fallback
+        const sub1 = Keyboard.addListener((Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow'), (e) => animate(e.endCoordinates.height, e.endCoordinates.height + 60, e.duration || 250));
+        const sub2 = Keyboard.addListener((Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide'), (e) => animate(0, CHAT_BOTTOM_DEFAULT, e.duration || 200, () => setIsTyping(false)));
+        return () => { sub1.remove(); sub2.remove(); };
+    }, [inputBottom, chatAnim]);
     const seededFromRoomState = useMemo(() => {
         const chat = roomState && typeof roomState === 'object'
             ? roomState.chat
@@ -66,6 +77,10 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
             seededRoomRef.current = null;
             setChatMessages([]);
             setChatInput('');
+            setIsTyping(false);
+            Keyboard.dismiss();
+            inputBottom.setValue(0);
+            chatAnim.setValue(CHAT_BOTTOM_DEFAULT);
             return;
         }
         if (seededRoomRef.current !== roomId) {
@@ -73,7 +88,7 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
             setChatMessages([]);
             setChatInput('');
         }
-    }, [roomId]);
+    }, [roomId, inputBottom, chatAnim]);
     useEffect(() => {
         if (!roomId)
             return;
@@ -145,7 +160,6 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
         }
         catch { /* ignore */ }
     }, [chatData.length]);
-    // System audio playback (Android only)
     useEffect(() => {
         if (!socket || !joined || !isActive || Platform.OS !== 'android')
             return;
@@ -197,12 +211,8 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
     };
     const hostLabel = stream.hostDisplayName || stream.title || 'Live';
     const avatarLetter = hostLabel[0]?.toUpperCase() ?? 'L';
-    return (_jsxs(KAV, { style: styles.container, behavior: Platform.OS === 'ios' ? 'padding' : 'height', children: [showVideo && RTCViewComponent && streamURL ? (_jsx(RTCViewComponent, { streamURL: streamURL, stream: displayStream, style: styles.rtcView, objectFit: "cover", mirror: false }, `rtc-${trackCount}-${streamURL}`)) : (_jsxs(View, { style: styles.videoPlaceholder, children: [joining && (_jsx(ActivityIndicator, { size: "large", color: "rgba(255,255,255,0.6)" })), !joining && error && (_jsx(Text, { style: styles.placeholderError, children: error })), joined && !joining && !error && hasVideo && !remoteStream && (_jsx(ActivityIndicator, { size: "large", color: "rgba(255,255,255,0.45)" })), joined && !joining && !error && hasVideo && webrtcUnavailable && (_jsx(Text, { style: styles.placeholderHint, children: "Video needs a development build" })), joined && !joining && !error && hasVideo && consumeError && (_jsx(Text, { style: styles.placeholderError, children: consumeError }))] })), LinearGradient ? (_jsx(LinearGradient, { colors: [
-                    'rgba(0,0,0,0.70)', // top edge — opaque for host info readability
-                    'rgba(0,0,0,0.0)', // clears out ~30% down
-                    'rgba(0,0,0,0.0)', // stays clear through mid-screen
-                    'rgba(0,0,0,0.78)', // darkens toward bottom for chat / input
-                ], locations: [0, 0.28, 0.48, 1], style: styles.gradientOverlay, pointerEvents: "none" })) : null, _jsxs(View, { style: styles.topBar, pointerEvents: "box-none", children: [_jsxs(View, { style: styles.hostRow, pointerEvents: "none", children: [_jsx(View, { style: styles.avatar, children: _jsx(Text, { style: styles.avatarLetter, children: avatarLetter }) }), _jsx(Text, { style: styles.hostName, numberOfLines: 1, children: hostLabel }), _jsx(View, { style: styles.livePill, children: _jsx(Text, { style: styles.livePillText, children: "LIVE" }) })] }), _jsxs(View, { style: styles.viewerChip, pointerEvents: "none", children: [_jsx(Text, { style: styles.viewerEye, children: "\uD83D\uDC41" }), _jsx(Text, { style: styles.viewerCount, children: viewerCount > 0 ? viewerCount.toLocaleString() : '—' })] })] }), _jsxs(View, { style: styles.rightColumn, pointerEvents: "box-none", children: [_jsxs(TouchableOpacity, { style: styles.actionBtn, activeOpacity: 0.75, children: [_jsx(View, { style: styles.actionCircle, children: _jsx(Text, { style: styles.actionIcon, children: "\u2665" }) }), _jsx(Text, { style: styles.actionLabel, children: "Like" })] }), _jsxs(TouchableOpacity, { style: styles.actionBtn, activeOpacity: 0.75, children: [_jsx(View, { style: styles.actionCircle, children: _jsx(Text, { style: styles.actionIcon, children: "\uD83C\uDF81" }) }), _jsx(Text, { style: styles.actionLabel, children: "Gift" })] }), _jsxs(TouchableOpacity, { style: styles.actionBtn, activeOpacity: 0.75, children: [_jsx(View, { style: styles.actionCircle, children: _jsx(Text, { style: styles.actionIcon, children: "\u2197" }) }), _jsx(Text, { style: styles.actionLabel, children: "Share" })] })] }), _jsxs(View, { style: styles.bottomSection, pointerEvents: "box-none", children: [_jsx(View, { style: styles.chatColumn, pointerEvents: "box-none", children: _jsx(ScrollView, { ref: chatListRef, contentContainerStyle: styles.chatContent, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "always", keyboardDismissMode: "none", children: chatData.map((item) => item.displayName ? (_jsx(View, { style: styles.chatBubble, children: _jsxs(Text, { style: styles.chatLine, numberOfLines: 3, children: [_jsxs(Text, { style: [styles.chatUsername, { color: getNameColor(item.displayName) }], children: [item.displayName, ' '] }), _jsx(Text, { style: styles.chatMsg, children: item.text })] }) }, item.id)) : (_jsx(View, { style: styles.joinBubble, children: _jsx(Text, { style: styles.joinText, children: item.text }) }, item.id))) }) }), _jsxs(View, { style: styles.inputBar, children: [_jsx(TouchableOpacity, { style: styles.inputIconBtn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.inputIconGlyph, children: "\u263A" }) }), _jsx(TextInput, { style: styles.textInput, value: chatInput, onChangeText: setChatInput, placeholder: joined ? 'Say something...' : 'Connecting...', placeholderTextColor: "rgba(255,255,255,0.35)", editable: joined && !joining && !error, onSubmitEditing: sendChat, returnKeyType: "send", submitBehavior: "submit" }), _jsx(TouchableOpacity, { style: styles.inputIconBtn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.inputIconGlyph, children: "\uD83C\uDF39" }) }), _jsx(TouchableOpacity, { style: [styles.sendBtn, (!chatInput.trim() || !joined) && styles.sendBtnOff], onPress: sendChat, activeOpacity: 0.75, disabled: !joined || !chatInput.trim(), children: _jsx(Text, { style: styles.sendIcon, children: "\u25B6" }) })] })] }), streamEnded && (_jsx(View, { style: styles.endedOverlay, children: _jsxs(View, { style: styles.endedCard, children: [_jsx(Text, { style: styles.endedTitle, children: "Stream ended" }), _jsx(Text, { style: styles.endedSub, children: "The host has ended this live stream" })] }) }))] }));
+    return (_jsxs(View, { style: styles.container, children: [showVideo && RTCViewComponent && streamURL ? (_jsx(RTCViewComponent, { streamURL: streamURL, stream: displayStream, style: styles.rtcView, objectFit: "cover", mirror: false }, `rtc-${trackCount}-${streamURL}`)) : (_jsxs(View, { style: styles.videoPlaceholder, children: [joining && _jsx(ActivityIndicator, { size: "large", color: "rgba(255,255,255,0.6)" }), !joining && error && _jsx(Text, { style: styles.placeholderError, children: error }), joined && !joining && !error && hasVideo && !remoteStream && (_jsx(ActivityIndicator, { size: "large", color: "rgba(255,255,255,0.45)" })), joined && !joining && !error && hasVideo && webrtcUnavailable && (_jsx(Text, { style: styles.placeholderHint, children: "Video needs a development build" })), joined && !joining && !error && hasVideo && consumeError && (_jsx(Text, { style: styles.placeholderError, children: consumeError }))] })), LinearGradient ? (_jsx(LinearGradient, { colors: ['rgba(0,0,0,0.70)', 'rgba(0,0,0,0.0)', 'rgba(0,0,0,0.0)', 'rgba(0,0,0,0.78)'], locations: [0, 0.28, 0.48, 1], style: styles.gradientOverlay, pointerEvents: "none" })) : null, _jsxs(View, { style: styles.topBar, pointerEvents: "box-none", children: [_jsxs(View, { style: styles.hostRow, pointerEvents: "none", children: [_jsx(View, { style: styles.avatar, children: _jsx(Text, { style: styles.avatarLetter, children: avatarLetter }) }), _jsx(Text, { style: styles.hostName, numberOfLines: 1, children: hostLabel }), _jsx(View, { style: styles.livePill, children: _jsx(Text, { style: styles.livePillText, children: "LIVE" }) })] }), _jsxs(View, { style: styles.viewerChip, pointerEvents: "none", children: [_jsx(Text, { style: styles.viewerEye, children: "\uD83D\uDC41" }), _jsx(Text, { style: styles.viewerCount, children: viewerCount > 0 ? viewerCount.toLocaleString() : '—' })] })] }), !isTyping && (_jsxs(View, { style: styles.rightColumn, pointerEvents: "box-none", children: [_jsxs(TouchableOpacity, { style: styles.actionBtn, activeOpacity: 0.75, children: [_jsx(View, { style: styles.actionCircle, children: _jsx(Text, { style: styles.actionIcon, children: "\u2665" }) }), _jsx(Text, { style: styles.actionLabel, children: "Like" })] }), _jsxs(TouchableOpacity, { style: styles.actionBtn, activeOpacity: 0.75, children: [_jsx(View, { style: styles.actionCircle, children: _jsx(Text, { style: styles.actionIcon, children: "\uD83C\uDF81" }) }), _jsx(Text, { style: styles.actionLabel, children: "Gift" })] }), _jsxs(TouchableOpacity, { style: styles.actionBtn, activeOpacity: 0.75, children: [_jsx(View, { style: styles.actionCircle, children: _jsx(Text, { style: styles.actionIcon, children: "\u2197" }) }), _jsx(Text, { style: styles.actionLabel, children: "Share" })] })] })), _jsx(Animated.View, { style: [styles.chatColumn, { bottom: chatAnim }], pointerEvents: "box-none", children: _jsx(ScrollView, { ref: chatListRef, contentContainerStyle: styles.chatContent, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "always", keyboardDismissMode: "on-drag", children: chatData.map((item) => item.displayName ? (_jsx(View, { style: styles.chatBubble, children: _jsxs(Text, { style: styles.chatLine, numberOfLines: 3, children: [_jsxs(Text, { style: [styles.chatUsername, { color: getNameColor(item.displayName) }], children: [item.displayName, ' '] }), _jsx(Text, { style: styles.chatMsg, children: item.text })] }) }, item.id)) : (_jsx(View, { style: styles.joinBubble, children: _jsx(Text, { style: styles.joinText, children: item.text }) }, item.id))) }) }), !isTyping && (_jsxs(View, { style: styles.bottomBar, children: [_jsx(TouchableOpacity, { style: styles.typeTouchable, onPress: () => { if (joined && !joining && !error)
+                            setIsTyping(true); }, activeOpacity: 0.7, children: _jsx(Text, { style: styles.typePlaceholder, children: joined && !joining ? 'Say something...' : 'Connecting...' }) }), _jsx(TouchableOpacity, { style: styles.bottomIconBtn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.bottomIconGlyph, children: "\u263A" }) }), _jsx(TouchableOpacity, { style: styles.bottomIconBtn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.bottomIconGlyph, children: "\uD83C\uDF39" }) }), _jsx(TouchableOpacity, { style: styles.bottomIconBtn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.bottomIconGlyph, children: "\uD83C\uDF81" }) }), _jsx(TouchableOpacity, { style: styles.bottomIconBtn, activeOpacity: 0.7, children: _jsx(Text, { style: styles.bottomIconGlyph, children: "\u2197" }) })] })), isTyping && (_jsxs(Animated.View, { style: [styles.floatingInputWrap, { bottom: inputBottom }], children: [_jsx(TextInput, { ref: textInputRef, style: styles.floatingTextInput, value: chatInput, onChangeText: setChatInput, placeholder: "Say something...", placeholderTextColor: "rgba(255,255,255,0.40)", editable: joined && !joining && !error, onSubmitEditing: sendChat, returnKeyType: "send", submitBehavior: "submit", autoFocus: true }), _jsx(TouchableOpacity, { style: [styles.floatingSendBtn, (!chatInput.trim() || !joined) && styles.sendBtnOff], onPress: sendChat, disabled: !joined || !chatInput.trim(), activeOpacity: 0.75, children: _jsx(Text, { style: styles.sendIcon, children: "\u25B6" }) })] })), streamEnded && (_jsx(View, { style: styles.endedOverlay, children: _jsxs(View, { style: styles.endedCard, children: [_jsx(Text, { style: styles.endedTitle, children: "Stream ended" }), _jsx(Text, { style: styles.endedSub, children: "The host has ended this live stream" })] }) }))] }));
 });
 // ─────────────────────────────────────────────────────────────────────────────
 const styles = StyleSheet.create({
@@ -210,7 +220,6 @@ const styles = StyleSheet.create({
         flex: 1,
         backgroundColor: '#000',
     },
-    // ── Video ─────────────────────────────────────────────────────────────────
     rtcView: {
         position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
         backgroundColor: '#000',
@@ -234,7 +243,9 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         paddingHorizontal: 28,
     },
-    // ── Top bar ───────────────────────────────────────────────────────────────
+    gradientOverlay: {
+        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
+    },
     topBar: {
         position: 'absolute',
         top: 10,
@@ -263,17 +274,8 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         flexShrink: 0,
     },
-    avatarLetter: {
-        color: '#fff',
-        fontSize: 15,
-        fontWeight: '700',
-    },
-    hostName: {
-        color: '#fff',
-        fontSize: 14,
-        fontWeight: '600',
-        flex: 1,
-    },
+    avatarLetter: { color: '#fff', fontSize: 15, fontWeight: '700' },
+    hostName: { color: '#fff', fontSize: 14, fontWeight: '600', flex: 1 },
     livePill: {
         backgroundColor: '#ef4444',
         borderRadius: 6,
@@ -281,12 +283,7 @@ const styles = StyleSheet.create({
         paddingVertical: 3,
         flexShrink: 0,
     },
-    livePillText: {
-        color: '#fff',
-        fontSize: 11,
-        fontWeight: '700',
-        letterSpacing: 0.8,
-    },
+    livePillText: { color: '#fff', fontSize: 11, fontWeight: '700', letterSpacing: 0.8 },
     viewerChip: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -298,23 +295,15 @@ const styles = StyleSheet.create({
         flexShrink: 0,
     },
     viewerEye: { fontSize: 11 },
-    viewerCount: {
-        color: 'rgba(255,255,255,0.88)',
-        fontSize: 12,
-        fontWeight: '500',
-    },
-    // ── Right action column ───────────────────────────────────────────────────
+    viewerCount: { color: 'rgba(255,255,255,0.88)', fontSize: 12, fontWeight: '500' },
     rightColumn: {
         position: 'absolute',
         right: 12,
-        bottom: 92,
+        bottom: BOTTOM_SAFE + BOTTOM_BAR_H + 8,
         alignItems: 'center',
         gap: 14,
     },
-    actionBtn: {
-        alignItems: 'center',
-        gap: 5,
-    },
+    actionBtn: { alignItems: 'center', gap: 5 },
     actionCircle: {
         width: 48,
         height: 48,
@@ -325,31 +314,16 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
-    actionIcon: {
-        fontSize: 22,
-        color: '#fff',
-    },
-    actionLabel: {
-        color: 'rgba(255,255,255,0.7)',
-        fontSize: 11,
-        fontWeight: '500',
-    },
-    // ── Bottom section (in-flow — KAV lifts this above the keyboard) ─────────
-    bottomSection: {
-        flex: 1,
-        justifyContent: 'flex-end',
-        paddingHorizontal: 12,
-        paddingBottom: BOTTOM_SAFE,
-        gap: 8,
-    },
-    // Chat messages
+    actionIcon: { fontSize: 22, color: '#fff' },
+    actionLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 11, fontWeight: '500' },
+    // Chat column — absolute, bottom driven by animation
     chatColumn: {
+        position: 'absolute',
+        left: 12,
         width: '66%',
         maxHeight: Math.round(SCREEN_HEIGHT * 0.30),
     },
-    chatContent: {
-        paddingBottom: 2,
-    },
+    chatContent: { paddingBottom: 2 },
     chatBubble: {
         alignSelf: 'flex-start',
         marginBottom: 5,
@@ -368,53 +342,57 @@ const styles = StyleSheet.create({
         paddingVertical: 4,
         maxWidth: '100%',
     },
-    chatLine: {
-        fontSize: 13,
-        lineHeight: 18,
-    },
-    chatUsername: {
-        fontWeight: '700',
-    },
-    chatMsg: {
-        color: '#e5e5e5',
-        fontWeight: '400',
-    },
-    joinText: {
-        color: 'rgba(255,255,255,0.48)',
-        fontSize: 12,
-        fontStyle: 'italic',
-    },
-    // Input bar
-    inputBar: {
+    chatLine: { fontSize: 13, lineHeight: 18 },
+    chatUsername: { fontWeight: '700' },
+    chatMsg: { color: '#e5e5e5', fontWeight: '400' },
+    joinText: { color: 'rgba(255,255,255,0.48)', fontSize: 12, fontStyle: 'italic' },
+    // Bottom action bar
+    bottomBar: {
+        position: 'absolute',
+        bottom: BOTTOM_SAFE,
+        left: 12,
+        right: 12,
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: 'rgba(18,18,18,0.75)',
-        borderRadius: 999,
-        borderWidth: StyleSheet.hairlineWidth,
-        borderColor: 'rgba(255,255,255,0.12)',
-        paddingHorizontal: 4,
-        paddingVertical: 4,
-        gap: 2,
+        gap: 6,
     },
-    inputIconBtn: {
-        width: 40,
-        height: 40,
-        alignItems: 'center',
-        justifyContent: 'center',
+    typeTouchable: {
+        flex: 1,
+        backgroundColor: 'rgba(255,255,255,0.12)',
         borderRadius: 20,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: 'rgba(255,255,255,0.18)',
     },
-    inputIconGlyph: {
-        fontSize: 21,
+    typePlaceholder: { color: 'rgba(255,255,255,0.50)', fontSize: 14 },
+    bottomIconBtn: { width: 40, height: 40, alignItems: 'center', justifyContent: 'center' },
+    bottomIconGlyph: { fontSize: 22 },
+    // Floating input bar — sits directly above keyboard, animated
+    floatingInputWrap: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(20,20,20,0.96)',
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        gap: 8,
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: 'rgba(255,255,255,0.10)',
     },
-    textInput: {
+    floatingTextInput: {
         flex: 1,
+        backgroundColor: 'rgba(255,255,255,0.10)',
+        borderRadius: 20,
+        paddingHorizontal: 14,
+        paddingVertical: Platform.OS === 'ios' ? 10 : 8,
         color: '#fff',
         fontSize: 14,
-        paddingHorizontal: 6,
-        paddingVertical: Platform.OS === 'ios' ? 10 : 6,
         minHeight: 40,
     },
-    sendBtn: {
+    floatingSendBtn: {
         width: 40,
         height: 40,
         borderRadius: 20,
@@ -422,42 +400,15 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
-    sendBtnOff: {
-        backgroundColor: 'rgba(255,255,255,0.1)',
-    },
-    sendIcon: {
-        color: '#fff',
-        fontSize: 15,
-        fontWeight: '700',
-    },
-    // ── Stream ended ──────────────────────────────────────────────────────────
+    sendBtnOff: { backgroundColor: 'rgba(255,255,255,0.12)' },
+    sendIcon: { color: '#fff', fontSize: 15, fontWeight: '700' },
     endedOverlay: {
         position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
         backgroundColor: 'rgba(0,0,0,0.80)',
         alignItems: 'center',
         justifyContent: 'center',
     },
-    endedCard: {
-        alignItems: 'center',
-        gap: 10,
-        paddingHorizontal: 36,
-    },
-    endedTitle: {
-        color: '#fff',
-        fontSize: 22,
-        fontWeight: '700',
-    },
-    endedSub: {
-        color: 'rgba(255,255,255,0.5)',
-        fontSize: 14,
-        textAlign: 'center',
-        lineHeight: 20,
-    },
-    gradientOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-    },
+    endedCard: { alignItems: 'center', gap: 10, paddingHorizontal: 36 },
+    endedTitle: { color: '#fff', fontSize: 22, fontWeight: '700' },
+    endedSub: { color: 'rgba(255,255,255,0.5)', fontSize: 14, textAlign: 'center', lineHeight: 20 },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kasunk99-livestream-core",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "description": "Reusable livestream viewer/host module for React Native (Expo) — mediasoup + Socket.IO",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",