kasunk99-livestream-core 0.3.30 → 0.3.32

package/dist/components/LiveStreamFeed.d.ts

@@ -1,9 +1,15 @@
 import React from 'react';
+type LiveStreamFeedProps = {
+    isScreenFocused?: boolean;
+    onLeave?: () => void;
+    onJoinStatusChange?: (joined: boolean) => void;
+};
 /**
  * TikTok-style vertical feed: one stream per full-screen item.
  * Height is measured from the actual container so it fills exactly to the
  * navigation bar on every device — no hardcoded offsets.
  * Scrolling snaps per-item (next/previous stream only).
  */
-export declare function LiveStreamFeed(): React.ReactElement;
+export declare function LiveStreamFeed({ isScreenFocused, onLeave, onJoinStatusChange, }?: LiveStreamFeedProps): React.ReactElement;
+export {};
 //# sourceMappingURL=LiveStreamFeed.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LiveStreamFeed.d.ts","sourceRoot":"","sources":["../../src/components/LiveStreamFeed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAiB7D;;;;;GAKG;AACH,wBAAgB,cAAc,IAAI,KAAK,CAAC,YAAY,CAgInD"}
+{"version":3,"file":"LiveStreamFeed.d.ts","sourceRoot":"","sources":["../../src/components/LiveStreamFeed.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAiB7D,KAAK,mBAAmB,GAAG;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,eAAe,EACf,OAAO,EACP,kBAAkB,GACnB,GAAE,mBAAwB,GAAG,KAAK,CAAC,YAAY,CAsI/C"}

package/dist/components/LiveStreamFeed.js

@@ -9,7 +9,7 @@ import { useLiveStreams } from '../hooks/useLiveStreams';
  * navigation bar on every device — no hardcoded offsets.
  * Scrolling snaps per-item (next/previous stream only).
  */
-export function LiveStreamFeed() {
+export function LiveStreamFeed({ isScreenFocused, onLeave, onJoinStatusChange, } = {}) {
     const { streams, loading, error, refetch } = useLiveStreams();
     const [activeIndex, setActiveIndex] = useState(0);
     const [refreshing, setRefreshing] = useState(false);
@@ -38,7 +38,7 @@ export function LiveStreamFeed() {
         const index = Math.round(e.nativeEvent.contentOffset.y / viewportHeight);
         setActiveIndex(Math.max(0, Math.min(index, streams.length - 1)));
     }, [streams.length, viewportHeight]);
-    const renderItem = useCallback(({ item, index }) => (_jsx(View, { style: { height: viewportHeight, width: '100%' }, children: _jsx(LiveStreamViewerItem, { stream: item, isActive: index === activeIndex, index: index }) })), [activeIndex, viewportHeight]);
+    const renderItem = useCallback(({ item, index }) => (_jsx(View, { style: { height: viewportHeight, width: '100%' }, children: _jsx(LiveStreamViewerItem, { stream: item, isActive: index === activeIndex && (isScreenFocused ?? true), index: index, onLeave: onLeave, onJoinStatusChange: index === activeIndex ? onJoinStatusChange : undefined }) })), [activeIndex, viewportHeight, isScreenFocused, onLeave, onJoinStatusChange]);
     const keyExtractor = useCallback((item) => item.roomId, []);
     const getItemLayout = useCallback((_, index) => ({
         length: viewportHeight,

package/dist/components/LiveStreamViewerItem.d.ts

@@ -4,6 +4,8 @@ type LiveStreamViewerItemProps = {
     stream: LiveStreamInfo;
     isActive: boolean;
     index: number;
+    onLeave?: () => void;
+    onJoinStatusChange?: (joined: boolean) => void;
 };
 export declare const LiveStreamViewerItem: React.NamedExoticComponent<LiveStreamViewerItemProps>;
 export {};

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;AAiDF,eAAO,MAAM,oBAAoB,uDA0X/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;AAM/C,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAmEF,eAAO,MAAM,oBAAoB,uDAyZ/B,CAAC"}

package/dist/components/LiveStreamViewerItem.js

@@ -23,6 +23,17 @@ try {
         IoniconsComponent = vi.Ionicons;
 }
 catch { }
+// RNGH TouchableOpacity — fires at the native gesture layer (GestureHandlerRootView is
+// outermost in _layout.tsx, above KeyboardProvider), so it claims the touch before
+// RNKC's InputMethodManager intercept drops it. This is why onPressIn/Pressable fail
+// but this component works for the send button when the keyboard is open.
+let RNGHTouchable = null;
+try {
+    const rgh = require('react-native-gesture-handler');
+    if (rgh.TouchableOpacity)
+        RNGHTouchable = rgh.TouchableOpacity;
+}
+catch { }
 let KeyboardAvoidingView = RNKeyboardAvoidingView;
 try {
     const rnkc = require('react-native-keyboard-controller');
@@ -30,7 +41,7 @@ try {
         KeyboardAvoidingView = rnkc.KeyboardAvoidingView;
 }
 catch { }
-export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream, isActive, index: _index, }) {
+export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream, isActive, index: _index, onLeave, onJoinStatusChange, }) {
     const roomId = isActive ? stream.roomId : null;
     const { joined, joining, error, producerList, roomState, remoteStream, remoteVideoStream, webrtcUnavailable, consumeError, socket, viewerCount: liveViewerCount, streamEnded, } = useViewerSocket(roomId);
     const viewerCount = liveViewerCount > 0 ? liveViewerCount : stream.viewerCount;
@@ -60,6 +71,9 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
         const sub = Keyboard.addListener('keyboardDidHide', () => setIsTyping(false));
         return () => sub.remove();
     }, []);
+    useEffect(() => {
+        onJoinStatusChange?.(joined);
+    }, [joined, onJoinStatusChange]);
     // Dismiss input when stream becomes inactive (e.g. user swipes to next stream)
     useEffect(() => {
         if (!isActive) {
@@ -211,9 +225,13 @@ 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 (_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(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: "box-none", children: [onLeave ? (_jsx(TouchableOpacity, { style: styles.closeBtn, onPress: onLeave, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, activeOpacity: 0.7, children: IoniconsComponent
+                                    ? _jsx(IoniconsComponent, { name: "close", size: 20, color: "#fff" })
+                                    : _jsx(Text, { style: { color: '#fff', fontSize: 18, fontWeight: '700' }, children: "\u00D7" }) })) : null, _jsx(View, { style: styles.avatar, pointerEvents: "none", children: _jsx(Text, { style: styles.avatarLetter, children: avatarLetter }) }), _jsx(Text, { style: styles.hostName, numberOfLines: 1, pointerEvents: "none", children: hostLabel }), _jsx(View, { style: styles.livePill, pointerEvents: "none", 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 }), RNGHTouchable ? (_jsx(RNGHTouchable, { onPress: sendChat, activeOpacity: 0.75, style: [styles.sendBtn, (!hasUnsent || !joined) && styles.sendBtnOff], 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" }) })) : (_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" }) })] })) : (
+                            : _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, 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" })] }) }))] }));
@@ -259,6 +277,15 @@ const styles = StyleSheet.create({
         marginRight: 8,
         overflow: 'hidden',
     },
+    closeBtn: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: 'rgba(0,0,0,0.45)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+    },
     avatar: {
         width: 36,
         height: 36,

package/package.json

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