kasunk99-livestream-core 0.3.9 → 0.3.10
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;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;
|
|
1
|
+
{"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;AAuDF;;GAEG;AACH,eAAO,MAAM,oBAAoB,uDA0X/B,CAAC"}
|
|
@@ -14,6 +14,23 @@ try {
|
|
|
14
14
|
catch {
|
|
15
15
|
// react-native-webrtc not available in Expo Go
|
|
16
16
|
}
|
|
17
|
+
// Renders a multi-step gradient (dark → transparent or vice-versa) using stacked Views.
|
|
18
|
+
// Smoothstep interpolation makes the transition indistinguishable from a real CSS gradient.
|
|
19
|
+
const GRADIENT_STEPS = 14;
|
|
20
|
+
function SmoothGradient({ direction, height, maxAlpha = 0.65, }) {
|
|
21
|
+
const stepH = height / GRADIENT_STEPS;
|
|
22
|
+
return (_jsx(View, { pointerEvents: "none", style: [
|
|
23
|
+
{ position: 'absolute', left: 0, right: 0, height },
|
|
24
|
+
direction === 'top' ? { top: 0 } : { bottom: 0 },
|
|
25
|
+
], children: Array.from({ length: GRADIENT_STEPS }, (_, i) => {
|
|
26
|
+
const t = i / (GRADIENT_STEPS - 1);
|
|
27
|
+
const smooth = t * t * (3 - 2 * t); // smoothstep: S-curve between 0 and 1
|
|
28
|
+
const alpha = direction === 'top'
|
|
29
|
+
? maxAlpha * (1 - smooth) // opaque at i=0 (top edge), clear at i=last
|
|
30
|
+
: maxAlpha * smooth; // clear at i=0, opaque at i=last (bottom edge)
|
|
31
|
+
return (_jsx(View, { style: { height: stepH, backgroundColor: `rgba(0,0,0,${alpha.toFixed(3)})` } }, i));
|
|
32
|
+
}) }));
|
|
33
|
+
}
|
|
17
34
|
/**
|
|
18
35
|
* Single full-screen viewer cell. When isActive, joins the stream room and consumes video/audio.
|
|
19
36
|
*/
|
|
@@ -200,7 +217,7 @@ export const LiveStreamViewerItem = memo(function LiveStreamViewerItem({ stream,
|
|
|
200
217
|
};
|
|
201
218
|
const hostLabel = stream.hostDisplayName || stream.title || 'Live';
|
|
202
219
|
const avatarLetter = hostLabel[0]?.toUpperCase() ?? 'L';
|
|
203
|
-
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(
|
|
220
|
+
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(SmoothGradient, { direction: "top", height: 170, maxAlpha: 0.62 }), _jsx(SmoothGradient, { direction: "bottom", height: 300, maxAlpha: 0.68 }), _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" })] }) }))] }));
|
|
204
221
|
});
|
|
205
222
|
// ─────────────────────────────────────────────────────────────────────────────
|
|
206
223
|
const styles = StyleSheet.create({
|
|
@@ -232,23 +249,6 @@ const styles = StyleSheet.create({
|
|
|
232
249
|
textAlign: 'center',
|
|
233
250
|
paddingHorizontal: 28,
|
|
234
251
|
},
|
|
235
|
-
// ── Gradient overlays ─────────────────────────────────────────────────────
|
|
236
|
-
topGradient: {
|
|
237
|
-
position: 'absolute',
|
|
238
|
-
top: 0,
|
|
239
|
-
left: 0,
|
|
240
|
-
right: 0,
|
|
241
|
-
height: 140,
|
|
242
|
-
backgroundColor: 'rgba(0,0,0,0.45)',
|
|
243
|
-
},
|
|
244
|
-
bottomGradient: {
|
|
245
|
-
position: 'absolute',
|
|
246
|
-
bottom: 0,
|
|
247
|
-
left: 0,
|
|
248
|
-
right: 0,
|
|
249
|
-
height: 260,
|
|
250
|
-
backgroundColor: 'rgba(0,0,0,0.38)',
|
|
251
|
-
},
|
|
252
252
|
// ── Top bar ───────────────────────────────────────────────────────────────
|
|
253
253
|
topBar: {
|
|
254
254
|
position: 'absolute',
|
package/package.json
CHANGED