kasunk99-livestream-core 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiveStreamViewerItem.d.ts","sourceRoot":"","sources":["../../src/components/LiveStreamViewerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"LiveStreamViewerItem.d.ts","sourceRoot":"","sources":["../../src/components/LiveStreamViewerItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAc1E,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,uDAyT/B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { Dimensions, Keyboard, Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
|
|
3
|
+
import { Animated, Dimensions, Keyboard, Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
|
|
4
4
|
import { useViewerSocket } from '../hooks/useViewerSocket';
|
|
5
5
|
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
|
|
6
6
|
const CHAT_NAME_COLORS = ['#f97316', '#22c55e', '#3b82f6', '#eab308', '#ec4899', '#a855f7'];
|
|
@@ -35,17 +35,34 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
|
|
|
35
35
|
const showVideo = RTCViewComponent && remoteStream && !!streamURL && hasVideoTrack;
|
|
36
36
|
const [chatInput, setChatInput] = useState('');
|
|
37
37
|
const [chatMessages, setChatMessages] = useState([]);
|
|
38
|
-
|
|
38
|
+
// Animated bottom offset for the chat panel.
|
|
39
|
+
// iOS: keyboard fires willShow/willHide with exact duration — we mirror that
|
|
40
|
+
// animation so the panel moves in perfect sync with the keyboard.
|
|
41
|
+
// Android: windowSoftInputMode="adjustResize" shrinks the layout automatically,
|
|
42
|
+
// so no JS offset is needed (adding one would create a double gap).
|
|
43
|
+
const chatBottomAnim = useRef(new Animated.Value(16)).current;
|
|
39
44
|
useEffect(() => {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const show = Keyboard.addListener(
|
|
43
|
-
|
|
45
|
+
if (Platform.OS !== 'ios')
|
|
46
|
+
return; // Android handled by the OS via adjustResize
|
|
47
|
+
const show = Keyboard.addListener('keyboardWillShow', (e) => {
|
|
48
|
+
Animated.timing(chatBottomAnim, {
|
|
49
|
+
toValue: 16 + e.endCoordinates.height,
|
|
50
|
+
duration: e.duration ?? 250,
|
|
51
|
+
useNativeDriver: false,
|
|
52
|
+
}).start();
|
|
53
|
+
});
|
|
54
|
+
const hide = Keyboard.addListener('keyboardWillHide', (e) => {
|
|
55
|
+
Animated.timing(chatBottomAnim, {
|
|
56
|
+
toValue: 16,
|
|
57
|
+
duration: e.duration ?? 250,
|
|
58
|
+
useNativeDriver: false,
|
|
59
|
+
}).start();
|
|
60
|
+
});
|
|
44
61
|
return () => {
|
|
45
62
|
show.remove();
|
|
46
63
|
hide.remove();
|
|
47
64
|
};
|
|
48
|
-
}, []);
|
|
65
|
+
}, [chatBottomAnim]);
|
|
49
66
|
const seededRoomRef = useRef(null);
|
|
50
67
|
const chatListRef = useRef(null);
|
|
51
68
|
const seededFromRoomState = useMemo(() => {
|
|
@@ -158,7 +175,7 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
|
|
|
158
175
|
}
|
|
159
176
|
});
|
|
160
177
|
};
|
|
161
|
-
return (_jsxs(View, { style: styles.container, children: [showVideo && RTCViewComponent && streamURL ? (_jsx(RTCViewComponent, { streamURL: streamURL, stream: displayStream, style: styles.rtcView, objectFit: "contain", 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(View, { style: [styles.chatPanel,
|
|
178
|
+
return (_jsxs(View, { style: styles.container, children: [showVideo && RTCViewComponent && streamURL ? (_jsx(RTCViewComponent, { streamURL: streamURL, stream: displayStream, style: styles.rtcView, objectFit: "contain", 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: [
|
|
162
179
|
styles.chatSendButton,
|
|
163
180
|
(!joined || joining || !!error || !chatInput.trim()) && styles.chatSendButtonDisabled,
|
|
164
181
|
], children: _jsx(Text, { style: styles.chatSendText, children: "\u27A4" }) })] })] }) })] })] }));
|
|
@@ -242,7 +259,7 @@ const styles = StyleSheet.create({
|
|
|
242
259
|
position: 'absolute',
|
|
243
260
|
left: 16,
|
|
244
261
|
right: 16,
|
|
245
|
-
bottom
|
|
262
|
+
// bottom is driven by chatBottomAnim (starts at 16, follows keyboard on iOS)
|
|
246
263
|
},
|
|
247
264
|
chatStack: {
|
|
248
265
|
justifyContent: 'flex-end',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHostSocket.d.ts","sourceRoot":"","sources":["../../src/hooks/useHostSocket.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAYH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,mBAAmB,CAAC;AAoB3B,MAAM,MAAM,oBAAoB,GAAG;IACjC,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C,YAAY,EAAE,eAAe,EAAE,CAAC;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC,CAAC;AAMF,wBAAgB,aAAa,CAAC,OAAO,GAAE,oBAAyB,GAAG,mBAAmB,
|
|
1
|
+
{"version":3,"file":"useHostSocket.d.ts","sourceRoot":"","sources":["../../src/hooks/useHostSocket.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAYH,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,mBAAmB,CAAC;AAoB3B,MAAM,MAAM,oBAAoB,GAAG;IACjC,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C,YAAY,EAAE,eAAe,EAAE,CAAC;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,gBAAgB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC,CAAC;AAMF,wBAAgB,aAAa,CAAC,OAAO,GAAE,oBAAyB,GAAG,mBAAmB,CAupBrF"}
|
|
@@ -327,6 +327,20 @@ export function useHostSocket(options = {}) {
|
|
|
327
327
|
screenStreamToStop.release?.();
|
|
328
328
|
}
|
|
329
329
|
catch { /* ignore */ }
|
|
330
|
+
if (Platform.OS !== 'android') {
|
|
331
|
+
// iOS: camera was never stopped — the existing track in localStream is still live.
|
|
332
|
+
// Just switch the producer back to it; no getUserMedia call needed.
|
|
333
|
+
const existingCamTrack = hostSession.localStream?.getVideoTracks()?.[0];
|
|
334
|
+
if (existingCamTrack) {
|
|
335
|
+
patchHostState({ streamURL: getStreamURL(hostSession.localStream), captureMode: 'camera' });
|
|
336
|
+
await replaceVideoProducer(existingCamTrack);
|
|
337
|
+
}
|
|
338
|
+
else {
|
|
339
|
+
patchHostState({ captureMode: 'camera' });
|
|
340
|
+
}
|
|
341
|
+
return;
|
|
342
|
+
}
|
|
343
|
+
// Android: camera was stopped when screen share started — re-acquire it.
|
|
330
344
|
try {
|
|
331
345
|
const { isFrontCamera: front } = getHostState();
|
|
332
346
|
const newCamStream = (await mediaDevices.getUserMedia({
|
|
@@ -385,17 +399,31 @@ export function useHostSocket(options = {}) {
|
|
|
385
399
|
return;
|
|
386
400
|
}
|
|
387
401
|
hostSession.screenStream = screenStream;
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
402
|
+
if (Platform.OS === 'android') {
|
|
403
|
+
// Android: stop camera hardware — MediaProjection captures the hardware
|
|
404
|
+
// display independently, so stopping the camera is safe and saves battery.
|
|
405
|
+
hostSession.localStream?.getVideoTracks()
|
|
406
|
+
?.forEach((t) => { try {
|
|
407
|
+
t.stop?.();
|
|
408
|
+
}
|
|
409
|
+
catch { /* ignore */ } });
|
|
410
|
+
// Point the RTCView preview at the screen capture stream.
|
|
411
|
+
patchHostState({ streamURL: getStreamURL(screenStream), captureMode: 'screen' });
|
|
412
|
+
}
|
|
413
|
+
else {
|
|
414
|
+
// iOS: keep camera hardware running.
|
|
415
|
+
// RPScreenRecorder captures the app's own screen; if we stopped the camera
|
|
416
|
+
// first, the app would display black and that black frame would be captured
|
|
417
|
+
// → host and viewers both see a black screen. Keeping the camera alive
|
|
418
|
+
// means the host's RTCView still shows the camera preview while the
|
|
419
|
+
// WebRTC producer (replaced below) delivers screen content to viewers.
|
|
420
|
+
patchHostState({ captureMode: 'screen' });
|
|
421
|
+
// Update the preview URL so the RTCView keeps showing the local camera stream.
|
|
422
|
+
patchHostState({ streamURL: getStreamURL(hostSession.localStream) });
|
|
392
423
|
}
|
|
393
|
-
catch { /* ignore */ } });
|
|
394
|
-
// Point preview at the native screenStream — avoids the black-screen bug
|
|
395
|
-
// caused by copying a screen-capture track into a different MediaStream object.
|
|
396
|
-
patchHostState({ streamURL: getStreamURL(screenStream), captureMode: 'screen' });
|
|
397
424
|
await replaceVideoProducer(screenVideoTrack);
|
|
398
|
-
// Auto-revert when user dismisses screen share
|
|
425
|
+
// Auto-revert when user dismisses screen share
|
|
426
|
+
// (Android: from the notification bar; iOS: from the status-bar recording dot)
|
|
399
427
|
screenVideoTrack.addEventListener?.('ended', () => {
|
|
400
428
|
void stopScreenShare();
|
|
401
429
|
});
|
package/package.json
CHANGED