kasunk99-livestream-core 0.3.27 → 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;AAoDF,eAAO,MAAM,oBAAoB,uDAkY/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,6 +1,6 @@
 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;
@@ -23,14 +23,11 @@ try {
         IoniconsComponent = vi.Ionicons;
 }
 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 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, }) {
@@ -59,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(() => {
@@ -215,11 +231,7 @@ 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() : '—' })] })] }), _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
+    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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kasunk99-livestream-core",
-  "version": "0.3.27",
+  "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",