kasunk99-livestream-core 0.3.36 → 0.3.37

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;AAkB1E,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,uDAsb/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;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,uDAme/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 { AppState, ActivityIndicator, Keyboard, KeyboardAvoidingView as RNKeyboardAvoidingView, NativeModules, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, AppState, ActivityIndicator, Keyboard, KeyboardAvoidingView as RNKeyboardAvoidingView, 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;
@@ -43,7 +43,7 @@ try {
 catch { }
 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 { joined, joining, error, producerList, roomState, remoteStream, remoteVideoStream, webrtcUnavailable, consumeError, socket, viewerCount: liveViewerCount, likeCount, streamEnded, emitLike, } = useViewerSocket(roomId);
     const viewerCount = liveViewerCount > 0 ? liveViewerCount : stream.viewerCount;
     const hasVideo = producerList.some((p) => p.kind === 'video');
     const streamObj = remoteStream;
@@ -62,6 +62,20 @@ 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 [floatingHearts, setFloatingHearts] = useState([]);
+    const heartIdRef = useRef(0);
+    const handleLike = useCallback(() => {
+        if (!joined)
+            return;
+        emitLike();
+        const id = heartIdRef.current++;
+        const anim = new Animated.Value(0);
+        const dx = (Math.random() - 0.5) * 36;
+        setFloatingHearts((prev) => [...prev, { id, anim, dx }]);
+        Animated.timing(anim, { toValue: 1, duration: 900, useNativeDriver: true }).start(() => {
+            setFloatingHearts((prev) => prev.filter((h) => h.id !== id));
+        });
+    }, [joined, emitLike]);
     // 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);
@@ -256,14 +270,23 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
     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}-${videoKey}`)) : (_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.topRight, pointerEvents: "box-none", children: [_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() : '—' })] }), 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.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(Text, { style: { color: '#fff', fontSize: 18, fontWeight: '700' }, children: "\u00D7" }) })) : null] })] }), _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))) }), _jsx(View, { style: styles.heartsContainer, pointerEvents: "none", children: floatingHearts.map(({ id, anim, dx }) => (_jsx(Animated.Text, { style: [
+                        styles.floatingHeart,
+                        {
+                            transform: [
+                                { translateX: dx },
+                                { translateY: anim.interpolate({ inputRange: [0, 1], outputRange: [0, -150] }) },
+                            ],
+                            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
                             ? _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.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" })] }) }))] }));
+                            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" }) }), _jsxs(TouchableOpacity, { style: styles.likeBtn, onPress: handleLike, activeOpacity: 0.75, children: [_jsx(Text, { style: [styles.bottomIconGlyph, styles.heartIcon], children: "\u2665" }), likeCount > 0 && (_jsx(Text, { style: styles.likeCountText, children: likeCount >= 1000 ? `${(likeCount / 1000).toFixed(1)}K` : String(likeCount) }))] })] })), 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({
@@ -444,6 +467,18 @@ const styles = StyleSheet.create({
     typePlaceholderFilled: { color: '#fff' },
     bottomIconBtn: { width: 40, height: 40, alignItems: 'center', justifyContent: 'center' },
     bottomIconGlyph: { fontSize: 22 },
+    likeBtn: { alignItems: 'center', justifyContent: 'center', minWidth: 40 },
+    likeCountText: { color: 'rgba(255,255,255,0.85)', fontSize: 10, fontWeight: '600', marginTop: 1 },
+    heartsContainer: {
+        position: 'absolute',
+        right: 12,
+        bottom: 56 + BOTTOM_SAFE,
+        width: 48,
+        height: 160,
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    floatingHeart: { position: 'absolute', bottom: 0, color: '#ef4444', fontSize: 26, fontWeight: '700' },
     endedOverlay: {
         position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
         backgroundColor: 'rgba(0,0,0,0.80)',

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;
+    /** Unique-user like count, updated via like-count-updated socket event. */
+    likeCount: number;
     /** True once the host disconnects — triggers the "stream ended" overlay. */
     streamEnded: boolean;
 };
@@ -24,6 +26,7 @@ type ViewerSocketState = {
  */
 export declare function useViewerSocket(roomId: string | null): ViewerSocketState & {
     socket: Socket | null;
+    emitLike: () => void;
 };
 export {};
 //# sourceMappingURL=useViewerSocket.d.ts.map

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;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,CA+hBpG"}
+{"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,2EAA2E;IAC3E,SAAS,EAAE,MAAM,CAAC;IAClB,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,CAAC;IAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;CAAE,CAijB1H"}

package/dist/hooks/useViewerSocket.js

@@ -21,6 +21,7 @@ export function useViewerSocket(roomId) {
         consumeError: null,
         consumeRetryKey: 0,
         viewerCount: 0,
+        likeCount: 0,
         streamEnded: false,
     });
     const socketRef = useRef(null);
@@ -63,6 +64,7 @@ export function useViewerSocket(roomId) {
             consumeError: null,
             consumeRetryKey: 0,
             viewerCount: 0,
+            likeCount: 0,
             streamEnded: false,
         });
         consumeRetryCountRef.current = 0;
@@ -162,6 +164,7 @@ export function useViewerSocket(roomId) {
                     }
                     const roomState = res.roomState ?? null;
                     const initialViewerCount = typeof roomState?.viewerCount === 'number' ? roomState.viewerCount : 0;
+                    const initialLikeCount = typeof roomState?.likeCount === 'number' ? roomState.likeCount : 0;
                     setState((prev) => ({
                         ...prev,
                         joining: false,
@@ -171,6 +174,7 @@ export function useViewerSocket(roomId) {
                         rtpCapabilities: res.rtpCapabilities ?? null,
                         error: null,
                         viewerCount: initialViewerCount,
+                        likeCount: initialLikeCount,
                     }));
                 });
             });
@@ -203,6 +207,12 @@ export function useViewerSocket(roomId) {
                     setState((prev) => ({ ...prev, viewerCount: payload.viewerCount }));
                 }
             });
+            // Like count: server deduplicates by user identity and broadcasts the unique count.
+            socket.on('like-count-updated', (payload) => {
+                if (typeof payload?.likeCount === 'number') {
+                    setState((prev) => ({ ...prev, likeCount: payload.likeCount }));
+                }
+            });
             socket.on('peer-left', (payload) => {
                 if (payload?.isHost) {
                     setState((prev) => ({ ...prev, streamEnded: true, producerList: [] }));
@@ -500,8 +510,13 @@ export function useViewerSocket(roomId) {
             cancelled = true;
         };
     }, [roomId, state.remoteStream, state.producerList]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const emitLike = useCallback(() => {
+        socketRef.current?.emit('like');
+    }, []);
     return {
         ...state,
         socket: socketRef.current,
+        emitLike,
     };
 }

package/package.json

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