kasunk99-livestream-core 0.3.38 → 0.3.40

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,KAAkE,MAAM,OAAO,CAAC;AAmBvF,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,uDAoe/B,CAAC"}
+{"version":3,"file":"LiveStreamViewerItem.d.ts","sourceRoot":"","sources":["../../src/components/LiveStreamViewerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAmBvF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAmB/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,uDAsiB/B,CAAC"}

package/dist/components/LiveStreamViewerItem.js

@@ -5,6 +5,17 @@ import { useViewerSocket } from '../hooks/useViewerSocket';
 const CHAT_NAME_COLORS = ['#f97316', '#22c55e', '#3b82f6', '#eab308', '#ec4899', '#a855f7'];
 const BOTTOM_SAFE = Platform.OS === 'ios' ? 28 : 10;
 const BRAND_GREEN = '#009F68';
+const EMOJIS = [
+    '😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',
+    '😋', '😎', '😍', '🥰', '😘', '🤩', '🥳', '😏', '😒', '🙄',
+    '😤', '😡', '🤬', '😭', '😢', '😱', '😨', '🤔', '🤭', '😴',
+    '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '💔', '💕',
+    '💯', '🔥', '✨', '⭐', '🌟', '💥', '🎉', '🎊', '🏆', '👑',
+    '👍', '👎', '👏', '🙌', '👊', '✌️', '🤞', '🤙', '💪', '🙏',
+    '😈', '👻', '💀', '🐶', '🐱', '🐼', '🦊', '🐸', '🦋', '🌸',
+    '🍕', '🍔', '🍟', '🌮', '🍜', '🍣', '🍰', '🎂', '🍫', '🍭',
+    '⚽', '🏀', '🎮', '🎵', '🎶', '📱', '💻', '📸', '🚀', '🌈',
+];
 let RTCViewComponent = null;
 try {
     const webrtc = require('react-native-webrtc');
@@ -62,6 +73,7 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
     const [chatMessages, setChatMessages] = useState([]);
     // isTyping controls whether we show the TextInput bar or the pill bar
     const [isTyping, setIsTyping] = useState(false);
+    const [showEmoji, setShowEmoji] = useState(false);
     const [floatingHearts, setFloatingHearts] = useState([]);
     const heartIdRef = useRef(0);
     const handleLike = useCallback(() => {
@@ -76,6 +88,29 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
             setFloatingHearts((prev) => prev.filter((h) => h.id !== id));
         });
     }, [joined, emitLike]);
+    const openEmoji = useCallback(() => {
+        Keyboard.dismiss();
+        setIsTyping(false);
+        setShowEmoji(true);
+    }, []);
+    // Switches from emoji panel back to system keyboard
+    const switchToKeyboard = useCallback(() => {
+        setShowEmoji(false);
+        setIsTyping(true);
+    }, []);
+    // Focus TextInput programmatically when switching to keyboard mode (not emoji mode)
+    useEffect(() => {
+        if (isTyping && !showEmoji) {
+            const t = setTimeout(() => textInputRef.current?.focus(), 50);
+            return () => clearTimeout(t);
+        }
+    }, [isTyping, showEmoji]);
+    const handleEmojiSelect = useCallback((emoji) => {
+        const next = chatInputRef.current + emoji;
+        chatInputRef.current = next;
+        setChatInput(next);
+        // Input bar is already visible (showEmoji=true), no state change needed
+    }, []);
     // Incremented every time the app returns to foreground — forces RTCView to remount,
     // which restarts the Android SurfaceView renderer that freezes during background.
     const [videoKey, setVideoKey] = useState(0);
@@ -106,6 +141,7 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
         if (!isActive) {
             Keyboard.dismiss();
             setIsTyping(false);
+            setShowEmoji(false);
         }
     }, [isActive]);
     const seededFromRoomState = useMemo(() => {
@@ -263,6 +299,8 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
         chatInputRef.current = '';
         setChatInput('');
         Keyboard.dismiss();
+        setShowEmoji(false);
+        setIsTyping(false);
     };
     const hostLabel = stream.hostDisplayName || stream.title || 'Live';
     const avatarLetter = hostLabel[0]?.toUpperCase() ?? 'L';
@@ -279,14 +317,16 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
                             ],
                             opacity: anim.interpolate({ inputRange: [0, 0.65, 1], outputRange: [1, 0.85, 0] }),
                         },
-                    ], children: "\u2665" }, 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
+                    ], children: "\u2665" }, id))) }), isTyping || showEmoji ? (_jsxs(View, { style: styles.inputBar, children: [_jsx(TouchableOpacity, { style: styles.emojiToggleBtn, onPress: showEmoji ? switchToKeyboard : openEmoji, activeOpacity: 0.7, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }, children: _jsx(Text, { style: [styles.bottomIconGlyph, showEmoji && styles.emojiIconActive], children: showEmoji ? '⌨' : '☺' }) }), _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, onFocus: () => setShowEmoji(false), onSubmitEditing: sendChat, returnKeyType: "send", submitBehavior: "submit" }), 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" }) }))] })) : (
-            // 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.likeBtn, onPress: handleLike, activeOpacity: 0.75, 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" })] }) }))] }));
+            // Pill bar — shown when neither keyboard nor emoji panel is active
+            _jsxs(View, { style: styles.bottomBar, children: [_jsx(TouchableOpacity, { style: [styles.typeTouchable, hasUnsent && styles.typeTouchableFilled], onPress: () => { if (canType) {
+                            setShowEmoji(false);
+                            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, onPress: openEmoji, children: _jsx(Text, { style: styles.bottomIconGlyph, children: "\u263A" }) }), _jsx(TouchableOpacity, { style: styles.likeBtn, onPress: handleLike, activeOpacity: 0.75, children: _jsx(Text, { style: [styles.bottomIconGlyph, styles.heartIcon], children: "\u2665" }) })] })), showEmoji ? (_jsx(View, { style: styles.emojiContainer, children: _jsx(ScrollView, { style: styles.emojiScroll, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "always", children: _jsx(View, { style: styles.emojiGrid, children: EMOJIS.map((emoji, idx) => (_jsx(TouchableOpacity, { style: styles.emojiCell, onPress: () => handleEmojiSelect(emoji), activeOpacity: 0.6, children: _jsx(Text, { style: styles.emojiText, children: emoji }) }, idx))) }) }) })) : null, 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({
@@ -488,4 +528,27 @@ const styles = StyleSheet.create({
     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 },
+    // ── Emoji picker ────────────────────────────────────────────────────────
+    emojiToggleBtn: { width: 36, height: 40, alignItems: 'center', justifyContent: 'center' },
+    emojiIconActive: { color: BRAND_GREEN },
+    emojiContainer: {
+        height: 260,
+        backgroundColor: 'rgba(18,18,18,0.97)',
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: 'rgba(255,255,255,0.10)',
+    },
+    emojiScroll: { flex: 1 },
+    emojiGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        paddingHorizontal: 4,
+        paddingVertical: 8,
+    },
+    emojiCell: {
+        width: '12.5%',
+        aspectRatio: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emojiText: { fontSize: 26 },
 });

package/package.json

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