kasunk99-livestream-core 0.3.26 → 0.3.28

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;AAiB1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAM/C,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA0CF,eAAO,MAAM,oBAAoB,uDAuZ/B,CAAC"}
+{"version":3,"file":"LiveStreamViewerItem.d.ts","sourceRoot":"","sources":["../../src/components/LiveStreamViewerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAgB1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAM/C,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA8CF,eAAO,MAAM,oBAAoB,uDAgZ/B,CAAC"}

package/dist/components/LiveStreamViewerItem.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { ActivityIndicator, Keyboard, KeyboardAvoidingView as RNKeyboardAvoidingView, NativeModules, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
+import { ActivityIndicator, Keyboard, NativeModules, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { useViewerSocket } from '../hooks/useViewerSocket';
 const CHAT_NAME_COLORS = ['#f97316', '#22c55e', '#3b82f6', '#eab308', '#ec4899', '#a855f7'];
 const BOTTOM_SAFE = Platform.OS === 'ios' ? 28 : 10;
-const BOTTOM_BAR_H = 58;
+const BRAND_GREEN = '#009F68';
 let RTCViewComponent = null;
 try {
     const webrtc = require('react-native-webrtc');
@@ -16,14 +16,18 @@ try {
     LinearGradient = require('expo-linear-gradient').LinearGradient;
 }
 catch { }
-// Use RNKC's KeyboardAvoidingView when available — it integrates with KeyboardProvider at the
-// app root and uses WindowInsetsCompat + measure() for accurate positioning on Android.
-// Falls back to React Native's built-in KAV for apps without RNKC installed.
-let KeyboardAvoidingView = RNKeyboardAvoidingView;
+let IoniconsComponent = null;
+try {
+    const vi = require('@expo/vector-icons');
+    if (vi.Ionicons)
+        IoniconsComponent = vi.Ionicons;
+}
+catch { }
+let RNKCKeyboardEvents = null;
 try {
     const rnkc = require('react-native-keyboard-controller');
-    if (rnkc.KeyboardAvoidingView)
-        KeyboardAvoidingView = rnkc.KeyboardAvoidingView;
+    if (rnkc.KeyboardEvents)
+        RNKCKeyboardEvents = rnkc.KeyboardEvents;
 }
 catch { }
 export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream, isActive, index: _index, }) {
@@ -52,10 +56,29 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
     const textInputRef = useRef(null);
     // Ref so sendChat always reads the latest typed text regardless of React's render cycle.
     const chatInputRef = useRef('');
-    // When keyboard hides (back button, swipe, or after Keyboard.dismiss()), close the input panel.
+    // Keyboard height used to pad the container above the keyboard.
+    // We track it manually instead of using KeyboardAvoidingView because
+    // KAV's internal measure() returns wrong coordinates inside a FlatList on Android.
+    const [kbPadding, setKbPadding] = useState(0);
     useEffect(() => {
-        const sub = Keyboard.addListener('keyboardDidHide', () => setIsTyping(false));
-        return () => sub.remove();
+        const onHide = () => { setKbPadding(0); setIsTyping(false); };
+        if (RNKCKeyboardEvents) {
+            // RNKC's KeyboardEvents fire with the accurate WindowInsetsCompat height.
+            // keyboardWillShow fires at the START of the animation so the bar is
+            // already above the keyboard before it finishes rising.
+            const show = RNKCKeyboardEvents.addListener('keyboardWillShow', (e) => {
+                if (e.height > 0)
+                    setKbPadding(e.height);
+            });
+            const hide = RNKCKeyboardEvents.addListener('keyboardDidHide', onHide);
+            return () => { show.remove(); hide.remove(); };
+        }
+        // Fallback: standard RN events (fires after animation completes).
+        const show = Keyboard.addListener('keyboardDidShow', (e) => {
+            setKbPadding(e.endCoordinates.height);
+        });
+        const hide = Keyboard.addListener('keyboardDidHide', onHide);
+        return () => { show.remove(); hide.remove(); };
     }, []);
     // Dismiss input when stream becomes inactive (e.g. user swipes to next stream)
     useEffect(() => {
@@ -208,14 +231,12 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
     const avatarLetter = hostLabel[0]?.toUpperCase() ?? 'L';
     const hasUnsent = chatInput.trim().length > 0;
     const canType = joined && !joining && !error;
-    return (
-    // KeyboardAvoidingView is the root. It measures its own screen rect, computes the exact
-    // overlap with the system keyboard, and shrinks its content area accordingly.
-    // No manual offset formulas or layout listeners are needed.
-    _jsxs(KeyboardAvoidingView, { style: styles.container, behavior: "padding", automaticOffset: true, children: [showVideo && RTCViewComponent && streamURL ? (_jsx(RTCViewComponent, { streamURL: streamURL, stream: displayStream, style: StyleSheet.absoluteFillObject, objectFit: "cover", mirror: false, pointerEvents: "none" }, `rtc-${trackCount}-${streamURL}`)) : (_jsxs(View, { style: [StyleSheet.absoluteFillObject, 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: StyleSheet.absoluteFillObject, 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(View, { style: styles.spacer, pointerEvents: "none" }), _jsx(ScrollView, { ref: chatListRef, style: styles.chatList, contentContainerStyle: styles.chatContent, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "always", 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.inputBar, children: [_jsx(TextInput, { ref: textInputRef, style: styles.textInput, value: chatInput, onChangeText: (text) => { chatInputRef.current = text; setChatInput(text); }, placeholder: "Say something...", placeholderTextColor: "rgba(255,255,255,0.40)", editable: canType, onSubmitEditing: sendChat, returnKeyType: "send", submitBehavior: "submit", autoFocus: true }), _jsx(Pressable, { style: [styles.sendBtn, (!hasUnsent || !joined) && styles.sendBtnOff], onPressIn: sendChat, hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }, children: _jsx(Text, { style: styles.sendIcon, children: "\u25B6" }) })] })) : (
+    return (_jsxs(View, { style: [styles.container, kbPadding > 0 && { paddingBottom: kbPadding }], children: [showVideo && RTCViewComponent && streamURL ? (_jsx(RTCViewComponent, { streamURL: streamURL, stream: displayStream, style: StyleSheet.absoluteFillObject, objectFit: "cover", mirror: false, pointerEvents: "none" }, `rtc-${trackCount}-${streamURL}`)) : (_jsxs(View, { style: [StyleSheet.absoluteFillObject, 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: StyleSheet.absoluteFillObject, 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() : '—' })] })] }), _jsx(View, { style: styles.spacer, pointerEvents: "none" }), _jsx(ScrollView, { ref: chatListRef, style: styles.chatList, contentContainerStyle: styles.chatContent, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "always", 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.inputBar, children: [_jsx(TextInput, { ref: textInputRef, style: styles.textInput, value: chatInput, onChangeText: (text) => { chatInputRef.current = text; setChatInput(text); }, placeholder: "Say something...", placeholderTextColor: "rgba(255,255,255,0.40)", editable: canType, onSubmitEditing: sendChat, returnKeyType: "send", submitBehavior: "submit", autoFocus: true }), _jsx(Pressable, { style: [styles.sendBtn, (!hasUnsent || !joined) && styles.sendBtnOff], onPressIn: sendChat, hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }, children: IoniconsComponent
+                            ? _jsx(IoniconsComponent, { name: "send", size: 18, color: "#fff" })
+                            : _jsx(Text, { style: styles.sendIcon, children: "\u27A4" }) })] })) : (
             // Pill bar — tapping opens the input bar.
             _jsxs(View, { style: styles.bottomBar, children: [_jsx(TouchableOpacity, { style: [styles.typeTouchable, hasUnsent && styles.typeTouchableFilled], onPress: () => { if (canType)
-                            setIsTyping(true); }, activeOpacity: 0.7, children: _jsx(Text, { style: [styles.typePlaceholder, hasUnsent && styles.typePlaceholderFilled], numberOfLines: 1, children: hasUnsent ? chatInput : (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" }) })] })), 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" })] }) }))] }));
+                            setIsTyping(true); }, activeOpacity: 0.7, children: _jsx(Text, { style: [styles.typePlaceholder, hasUnsent && styles.typePlaceholderFilled], numberOfLines: 1, children: hasUnsent ? chatInput : (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, styles.heartIcon], children: "\u2665" }) })] })), 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({
@@ -291,26 +312,6 @@ const styles = StyleSheet.create({
     },
     viewerEye: { fontSize: 11 },
     viewerCount: { color: 'rgba(255,255,255,0.88)', fontSize: 12, fontWeight: '500' },
-    rightColumn: {
-        position: 'absolute',
-        right: 12,
-        bottom: BOTTOM_SAFE + BOTTOM_BAR_H + 8,
-        alignItems: 'center',
-        gap: 14,
-    },
-    actionBtn: { alignItems: 'center', gap: 5 },
-    actionCircle: {
-        width: 48,
-        height: 48,
-        borderRadius: 24,
-        backgroundColor: 'rgba(255,255,255,0.14)',
-        borderWidth: StyleSheet.hairlineWidth,
-        borderColor: 'rgba(255,255,255,0.2)',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    actionIcon: { fontSize: 22, color: '#fff' },
-    actionLabel: { color: 'rgba(255,255,255,0.7)', fontSize: 11, fontWeight: '500' },
     // Flex spacer — fills remaining vertical space, pushes chat + bars to bottom
     spacer: { flex: 1 },
     // Chat list — normal flow block, grows upward from input bar
@@ -368,12 +369,13 @@ const styles = StyleSheet.create({
         width: 40,
         height: 40,
         borderRadius: 20,
-        backgroundColor: '#f97316',
+        backgroundColor: BRAND_GREEN,
         alignItems: 'center',
         justifyContent: 'center',
     },
     sendBtnOff: { backgroundColor: 'rgba(255,255,255,0.12)' },
     sendIcon: { color: '#fff', fontSize: 15, fontWeight: '700' },
+    heartIcon: { color: BRAND_GREEN, fontSize: 24 },
     // Pill bar — normal flow, visible when keyboard is closed
     bottomBar: {
         flexDirection: 'row',

package/package.json

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