kasunk99-livestream-core 0.3.7 → 0.3.9

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;AAe1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK/C,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAgBF;;GAEG;AACH,eAAO,MAAM,oBAAoB,uDAyW/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;AAO/C,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAgBF;;GAEG;AACH,eAAO,MAAM,oBAAoB,uDA2X/B,CAAC"}

package/dist/components/LiveStreamViewerItem.js

@@ -1,25 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Dimensions, Keyboard, NativeModules, Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
+import { ActivityIndicator, Animated, Dimensions, Keyboard, NativeModules, Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
 import { useViewerSocket } from '../hooks/useViewerSocket';
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+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;
 let RTCViewComponent = null;
 try {
     const webrtc = require('react-native-webrtc');
     RTCViewComponent = webrtc.RTCView;
 }
 catch {
-    // react-native-webrtc not available (e.g. Expo Go)
+    // react-native-webrtc not available in Expo Go
 }
 /**
  * Single full-screen viewer cell. When isActive, joins the stream room and consumes video/audio.
  */
-export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream, isActive, index, }) {
+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, } = useViewerSocket(roomId);
-    // Prefer real-time socket count (updated on every join/leave event);
-    // fall back to the HTTP-polled value from the feed for the initial render.
+    const { joined, joining, error, producerList, roomState, remoteStream, remoteVideoStream, webrtcUnavailable, consumeError, socket, viewerCount: liveViewerCount, streamEnded, } = useViewerSocket(roomId);
     const viewerCount = liveViewerCount > 0 ? liveViewerCount : stream.viewerCount;
     const hasVideo = producerList.some((p) => p.kind === 'video');
     const streamObj = remoteStream;
@@ -35,41 +35,35 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
     const showVideo = RTCViewComponent && remoteStream && !!streamURL && hasVideoTrack;
     const [chatInput, setChatInput] = useState('');
     const [chatMessages, setChatMessages] = useState([]);
-    // Animated bottom offset for the chat panel.
-    // iOS: keyboard fires willShow/willHide with exact duration — we mirror that
-    //      animation so the panel moves in perfect sync with the keyboard.
-    // Android: windowSoftInputMode="adjustResize" shrinks the layout automatically,
-    //          so no JS offset is needed (adding one would create a double gap).
-    const chatBottomAnim = useRef(new Animated.Value(16)).current;
+    // iOS keyboard animation — Android handled automatically via windowSoftInputMode=adjustResize
+    const kbOffset = useRef(new Animated.Value(0)).current;
     useEffect(() => {
         if (Platform.OS !== 'ios')
-            return; // Android handled by the OS via adjustResize
+            return;
         const show = Keyboard.addListener('keyboardWillShow', (e) => {
-            Animated.timing(chatBottomAnim, {
-                toValue: 16 + e.endCoordinates.height,
-                duration: e.duration ?? 250,
+            Animated.timing(kbOffset, {
+                toValue: e.endCoordinates.height,
+                duration: e.duration ?? 260,
                 useNativeDriver: false,
             }).start();
         });
         const hide = Keyboard.addListener('keyboardWillHide', (e) => {
-            Animated.timing(chatBottomAnim, {
-                toValue: 16,
-                duration: e.duration ?? 250,
+            Animated.timing(kbOffset, {
+                toValue: 0,
+                duration: e.duration ?? 220,
                 useNativeDriver: false,
             }).start();
         });
-        return () => {
-            show.remove();
-            hide.remove();
-        };
-    }, [chatBottomAnim]);
+        return () => { show.remove(); hide.remove(); };
+    }, [kbOffset]);
     const seededRoomRef = useRef(null);
     const chatListRef = useRef(null);
     const seededFromRoomState = useMemo(() => {
-        const chat = roomState && typeof roomState === 'object' ? roomState.chat : null;
+        const chat = roomState && typeof roomState === 'object'
+            ? roomState.chat
+            : null;
         return Array.isArray(chat) ? chat : [];
     }, [roomState]);
-    // Reset local chat when switching rooms.
     useEffect(() => {
         if (!roomId) {
             seededRoomRef.current = null;
@@ -83,7 +77,6 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
             setChatInput('');
         }
     }, [roomId]);
-    // Seed chat history (once per room) from roomState.chat if present.
     useEffect(() => {
         if (!roomId)
             return;
@@ -102,18 +95,18 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
                 const msg = m;
                 const displayName = typeof msg.displayName === 'string' ? msg.displayName : 'User';
                 const text = typeof msg.text === 'string' ? msg.text : '';
-                const timestamp = typeof msg.timestamp === 'number' ? msg.timestamp : now - (seededFromRoomState.length - i) * 1000;
+                const timestamp = typeof msg.timestamp === 'number'
+                    ? msg.timestamp
+                    : now - (seededFromRoomState.length - i) * 1000;
                 if (!text)
                     return null;
                 const id = `${roomId}-seed-${String(msg.peerId ?? i)}-${timestamp}-${i}`;
                 return { id, displayName, text, timestamp };
             })
                 .filter(Boolean);
-            // Keep a reasonable amount of history, scrollable from the start.
             return normalized;
         });
     }, [roomId, seededFromRoomState]);
-    // Live incoming chat messages.
     useEffect(() => {
         if (!socket || !roomId || !isActive)
             return;
@@ -127,11 +120,7 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
             if (!text)
                 return;
             const id = `${roomId}-${String(m.peerId ?? 'peer')}-${timestamp}-${text.slice(0, 8)}`;
-            setChatMessages((prev) => {
-                const next = [...prev, { id, displayName, text, timestamp }];
-                // Allow full history to be scrollable.
-                return next;
-            });
+            setChatMessages((prev) => [...prev, { id, displayName, text, timestamp }]);
         };
         const onViewerJoined = (msg) => {
             const m = msg;
@@ -150,20 +139,16 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
             socket.off('viewer-joined', onViewerJoined);
         };
     }, [isActive, roomId, socket]);
-    // Render messages in natural order (oldest -> newest).
     const chatData = useMemo(() => chatMessages, [chatMessages]);
-    // Always scroll to the latest message at the bottom when chat loads/updates.
     useEffect(() => {
         if (!chatListRef.current || chatData.length === 0)
             return;
         try {
             chatListRef.current.scrollToEnd({ animated: true });
         }
-        catch {
-            // ignore scroll errors
-        }
+        catch { /* ignore */ }
     }, [chatData.length]);
-    // System audio playback (Android only — receives AAC chunks from host during screen sharing)
+    // System audio playback (Android only)
     useEffect(() => {
         if (!socket || !joined || !isActive || Platform.OS !== 'android')
             return;
@@ -198,174 +183,290 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
             return CHAT_NAME_COLORS[0];
         let hash = 0;
         for (let i = 0; i < name.length; i += 1) {
-            // simple string hash
             hash = (hash << 5) - hash + name.charCodeAt(i);
             hash |= 0;
         }
-        const idx = Math.abs(hash) % CHAT_NAME_COLORS.length;
-        return CHAT_NAME_COLORS[idx];
+        return CHAT_NAME_COLORS[Math.abs(hash) % CHAT_NAME_COLORS.length];
     };
-    const sendChat = async () => {
+    const sendChat = () => {
         const text = chatInput.trim();
         if (!text || !socket || !joined)
             return;
         setChatInput('');
         socket.emit('chat-message', { text }, (res) => {
-            if (res?.error) {
-                // eslint-disable-next-line no-console
+            if (res?.error)
                 console.log('[viewer] chat send error', res.error);
-            }
         });
     };
-    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(Text, { style: styles.placeholderText, children: "Joining..." }), error && _jsx(Text, { style: [styles.placeholderText, styles.errorText], children: error }), joined && !joining && !error && (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.liveBadge, children: "LIVE" }), _jsx(Text, { style: styles.placeholderText, children: stream.roomId }), hasVideo && webrtcUnavailable && (_jsxs(Text, { style: [styles.hintText, styles.warnText], children: ["Video needs a development build.", '\n', "Run: npx expo run:android"] })), hasVideo && consumeError && (_jsx(Text, { style: [styles.hintText, styles.errorText], children: consumeError })), hasVideo && !remoteStream && !webrtcUnavailable && !consumeError && (_jsx(Text, { style: styles.hintText, children: "Loading video..." })), !hasVideo && joined && producerList.length === 0 && (_jsxs(Text, { style: [styles.hintText, styles.warnText], children: ["Host has not started camera yet.", '\n', "Use a web client to stream, or wait for host to produce."] })), hasVideo && remoteStream && !RTCViewComponent && (_jsx(Text, { style: styles.hintText, children: "Video received (use dev build to see it)" })), hasVideo && remoteStream && RTCViewComponent && !hasVideoTrack && (_jsx(Text, { style: [styles.hintText, styles.warnText], children: "Audio only (no video track yet)" })), hasVideo && remoteStream && hasVideoTrack && !streamURL && (_jsx(Text, { style: [styles.hintText, styles.warnText], children: "Video track received but cannot display (need dev build with react-native-webrtc)" }))] }))] })), _jsxs(View, { style: styles.overlay, children: [_jsxs(View, { style: styles.topMeta, children: [_jsx(View, { style: styles.row, children: _jsxs(Text, { style: styles.roomId, numberOfLines: 1, children: ["LIVE \u00B7 ", stream.hostDisplayName || stream.title || stream.roomId] }) }), _jsx(View, { style: styles.stats, children: _jsxs(Text, { style: styles.statsText, children: ["\uD83D\uDC41 ", viewerCount] }) })] }), _jsx(Animated.View, { style: [styles.chatPanel, { bottom: chatBottomAnim }], pointerEvents: "box-none", children: _jsxs(ScrollView, { scrollEnabled: false, keyboardShouldPersistTaps: "always", contentContainerStyle: styles.chatStack, children: [_jsx(View, { style: styles.chatListWrapper, children: _jsx(ScrollView, { ref: chatListRef, contentContainerStyle: styles.chatListContent, showsVerticalScrollIndicator: false, keyboardDismissMode: "on-drag", keyboardShouldPersistTaps: "always", nestedScrollEnabled: true, children: chatData.map((item) => (_jsxs(Text, { style: styles.chatLine, numberOfLines: 2, children: [_jsx(Text, { style: [styles.chatName, { color: getNameColor(item.displayName) }], children: item.displayName }), _jsxs(Text, { style: styles.chatText, children: [" ", item.text] })] }, item.id))) }) }), _jsxs(View, { style: styles.chatInputRow, children: [_jsx(TextInput, { style: styles.chatInput, value: chatInput, onChangeText: setChatInput, placeholder: joined ? 'Say something...' : 'Connecting...', placeholderTextColor: "#9ca3af", editable: joined && !joining && !error, onSubmitEditing: sendChat, returnKeyType: "send" }), _jsx(TouchableOpacity, { onPress: sendChat, disabled: !joined || joining || !!error || !chatInput.trim(), style: [
-                                                styles.chatSendButton,
-                                                (!joined || joining || !!error || !chatInput.trim()) && styles.chatSendButtonDisabled,
-                                            ], children: _jsx(Text, { style: styles.chatSendText, children: "\u27A4" }) })] })] }) })] })] }));
+    const hostLabel = stream.hostDisplayName || stream.title || 'Live';
+    const avatarLetter = hostLabel[0]?.toUpperCase() ?? 'L';
+    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 }))] })), _jsx(View, { style: styles.topGradient, pointerEvents: "none" }), _jsx(View, { style: styles.bottomGradient, pointerEvents: "none" }), _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(Animated.View, { style: [styles.bottomPanel, { bottom: kbOffset }], 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", blurOnSubmit: false }), _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" })] }) }))] }));
 });
+// ─────────────────────────────────────────────────────────────────────────────
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#0a0a0a',
+        backgroundColor: '#000',
     },
+    // ── Video ─────────────────────────────────────────────────────────────────
     rtcView: {
-        ...StyleSheet.absoluteFillObject,
-        backgroundColor: '#0a0a0a',
+        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
+        backgroundColor: '#000',
     },
     videoPlaceholder: {
-        ...StyleSheet.absoluteFillObject,
+        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: '#1a1a1a',
+        backgroundColor: '#0d0d0d',
+        gap: 12,
     },
-    placeholderText: {
-        color: '#e5e5e5',
-        fontSize: 16,
-        marginVertical: 4,
-    },
-    errorText: {
+    placeholderError: {
         color: '#ef4444',
+        fontSize: 13,
+        textAlign: 'center',
+        paddingHorizontal: 28,
     },
-    liveBadge: {
-        color: '#ef4444',
-        fontSize: 14,
-        fontWeight: '700',
-        letterSpacing: 1,
-        marginBottom: 8,
-    },
-    hintText: {
-        color: '#737373',
+    placeholderHint: {
+        color: 'rgba(255,255,255,0.38)',
         fontSize: 12,
-        marginTop: 4,
         textAlign: 'center',
+        paddingHorizontal: 28,
     },
-    warnText: {
-        color: '#f59e0b',
-        marginTop: 8,
-        paddingHorizontal: 16,
-    },
-    overlay: {
+    // ── Gradient overlays ─────────────────────────────────────────────────────
+    topGradient: {
         position: 'absolute',
         top: 0,
         left: 0,
         right: 0,
+        height: 140,
+        backgroundColor: 'rgba(0,0,0,0.45)',
+    },
+    bottomGradient: {
+        position: 'absolute',
         bottom: 0,
-        padding: 16,
-        paddingBottom: 32,
-        backgroundColor: 'transparent',
+        left: 0,
+        right: 0,
+        height: 260,
+        backgroundColor: 'rgba(0,0,0,0.38)',
     },
-    topMeta: {
-        marginTop: 6,
+    // ── Top bar ───────────────────────────────────────────────────────────────
+    topBar: {
+        position: 'absolute',
+        top: 46,
+        left: 14,
+        right: 14,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
     },
-    row: {
+    hostRow: {
         flexDirection: 'row',
         alignItems: 'center',
+        gap: 8,
+        flex: 1,
+        marginRight: 8,
+        overflow: 'hidden',
+    },
+    avatar: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: 'rgba(255,255,255,0.15)',
+        borderWidth: 1.5,
+        borderColor: 'rgba(255,255,255,0.3)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+    },
+    avatarLetter: {
+        color: '#fff',
+        fontSize: 15,
+        fontWeight: '700',
     },
-    roomId: {
-        color: '#fafafa',
+    hostName: {
+        color: '#fff',
         fontSize: 14,
         fontWeight: '600',
+        flex: 1,
+    },
+    livePill: {
+        backgroundColor: '#ef4444',
+        borderRadius: 6,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        flexShrink: 0,
+    },
+    livePillText: {
+        color: '#fff',
+        fontSize: 11,
+        fontWeight: '700',
+        letterSpacing: 0.8,
     },
-    stats: {
+    viewerChip: {
         flexDirection: 'row',
         alignItems: 'center',
-        marginTop: 4,
+        backgroundColor: 'rgba(0,0,0,0.42)',
+        borderRadius: 20,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        gap: 5,
+        flexShrink: 0,
     },
-    statsText: {
-        color: '#a3a3a3',
+    viewerEye: { fontSize: 11 },
+    viewerCount: {
+        color: 'rgba(255,255,255,0.88)',
         fontSize: 12,
+        fontWeight: '500',
     },
-    statsTextSpacer: {
-        marginLeft: 8,
-    },
-    chatPanel: {
+    // ── Right action column ───────────────────────────────────────────────────
+    rightColumn: {
         position: 'absolute',
-        left: 16,
-        right: 16,
-        // bottom is driven by chatBottomAnim (starts at 16, follows keyboard on iOS)
+        right: 12,
+        bottom: 92,
+        alignItems: 'center',
+        gap: 14,
     },
-    chatStack: {
-        justifyContent: 'flex-end',
+    actionBtn: {
+        alignItems: 'center',
+        gap: 5,
     },
-    chatListWrapper: {
-        // Limit chat area to below mid-screen (roughly bottom 1/3–1/2 of stream).
-        maxHeight: Math.round(SCREEN_HEIGHT * 0.35),
-        borderRadius: 14,
+    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',
+    },
+    // ── Bottom panel ──────────────────────────────────────────────────────────
+    bottomPanel: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
         paddingHorizontal: 12,
-        paddingTop: 12,
-        paddingBottom: 4,
-        // Subtle transparent background so chat is readable over video.
-        backgroundColor: 'rgba(0,0,0,0.35)',
-        borderWidth: 1,
-        borderColor: 'rgba(255,255,255,0.08)',
-        // Wrap chats in a narrower column like TikTok.
+        paddingBottom: BOTTOM_SAFE,
+        gap: 8,
+    },
+    // Chat messages
+    chatColumn: {
+        width: '66%',
+        maxHeight: Math.round(SCREEN_HEIGHT * 0.30),
+    },
+    chatContent: {
+        paddingBottom: 2,
+    },
+    chatBubble: {
         alignSelf: 'flex-start',
-        width: '70%',
-        overflow: 'hidden',
+        marginBottom: 5,
+        backgroundColor: 'rgba(0,0,0,0.40)',
+        borderRadius: 14,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        maxWidth: '100%',
     },
-    chatListContent: {
-        paddingBottom: 4,
+    joinBubble: {
+        alignSelf: 'flex-start',
+        marginBottom: 5,
+        backgroundColor: 'rgba(255,255,255,0.08)',
+        borderRadius: 14,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        maxWidth: '100%',
     },
     chatLine: {
-        color: '#e5e5e5',
         fontSize: 13,
         lineHeight: 18,
-        marginBottom: 4,
     },
-    chatName: {
-        color: '#fafafa',
+    chatUsername: {
         fontWeight: '700',
     },
-    chatText: {
+    chatMsg: {
         color: '#e5e5e5',
         fontWeight: '400',
     },
-    chatInputRow: {
-        marginTop: 10,
+    joinText: {
+        color: 'rgba(255,255,255,0.48)',
+        fontSize: 12,
+        fontStyle: 'italic',
+    },
+    // Input bar
+    inputBar: {
         flexDirection: 'row',
         alignItems: 'center',
+        backgroundColor: 'rgba(18,18,18,0.75)',
         borderRadius: 999,
-        overflow: 'hidden',
-        borderWidth: 1,
+        borderWidth: StyleSheet.hairlineWidth,
         borderColor: 'rgba(255,255,255,0.12)',
-        backgroundColor: 'rgba(0,0,0,0.45)',
+        paddingHorizontal: 4,
+        paddingVertical: 4,
+        gap: 2,
+    },
+    inputIconBtn: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
     },
-    chatInput: {
+    inputIconGlyph: {
+        fontSize: 21,
+    },
+    textInput: {
         flex: 1,
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-        color: '#fafafa',
+        color: '#fff',
         fontSize: 14,
+        paddingHorizontal: 6,
+        paddingVertical: Platform.OS === 'ios' ? 10 : 6,
+        minHeight: 40,
+    },
+    sendBtn: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#f97316',
+        alignItems: 'center',
+        justifyContent: 'center',
     },
-    chatSendButton: {
-        paddingHorizontal: 14,
-        paddingVertical: 10,
+    sendBtnOff: {
+        backgroundColor: 'rgba(255,255,255,0.1)',
     },
-    chatSendButtonDisabled: {
-        opacity: 0.5,
+    sendIcon: {
+        color: '#fff',
+        fontSize: 15,
+        fontWeight: '700',
     },
-    chatSendText: {
-        color: '#f97316',
-        fontSize: 18,
+    // ── Stream ended ──────────────────────────────────────────────────────────
+    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,
+    },
 });

package/dist/hooks/useViewerSocket.d.ts

@@ -15,6 +15,8 @@ type ViewerSocketState = {
     consumeRetryKey: number;
     /** Real-time viewer count, updated via viewer-count-updated socket event. */
     viewerCount: number;
+    /** True once the host disconnects — triggers the "stream ended" overlay. */
+    streamEnded: boolean;
 };
 /**
  * Connects to the livestream signaling server and joins a room as viewer.

package/dist/hooks/useViewerSocket.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useViewerSocket.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewerSocket.ts"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAC1C,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,iBAAiB,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,6EAA6E;IAC7E,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,iBAAiB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAmgBpG"}
+{"version":3,"file":"useViewerSocket.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewerSocket.ts"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAC1C,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,iBAAiB,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,6EAA6E;IAC7E,eAAe,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,iBAAiB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CA2gBpG"}

package/dist/hooks/useViewerSocket.js

@@ -21,6 +21,7 @@ export function useViewerSocket(roomId) {
         consumeError: null,
         consumeRetryKey: 0,
         viewerCount: 0,
+        streamEnded: false,
     });
     const socketRef = useRef(null);
     const roomIdRef = useRef(roomId);
@@ -62,6 +63,7 @@ export function useViewerSocket(roomId) {
             consumeError: null,
             consumeRetryKey: 0,
             viewerCount: 0,
+            streamEnded: false,
         });
         consumeRetryCountRef.current = 0;
     }, []);
@@ -87,7 +89,7 @@ export function useViewerSocket(roomId) {
             setState((prev) => ({ ...prev, error: 'Livestream server not configured', joining: false }));
             return;
         }
-        setState((prev) => ({ ...prev, joining: true, error: null }));
+        setState((prev) => ({ ...prev, joining: true, error: null, streamEnded: false }));
         const JOIN_TIMEOUT_MS = 12000;
         const joinTimeout = setTimeout(() => {
             if (roomIdRef.current !== roomId)
@@ -201,6 +203,11 @@ export function useViewerSocket(roomId) {
                     setState((prev) => ({ ...prev, viewerCount: payload.viewerCount }));
                 }
             });
+            socket.on('peer-left', (payload) => {
+                if (payload?.isHost) {
+                    setState((prev) => ({ ...prev, streamEnded: true, producerList: [] }));
+                }
+            });
             socket.on('system-audio-chunk', (payload) => {
                 const b64 = typeof payload === 'string' ? payload
                     : typeof payload?.data === 'string'

package/package.json

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