mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
61 lines • 2.43 kB
JavaScript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
import { getModernColors } from '../core/modernTheme';
const getPositionStyle = (position) => {
const offset = 16;
const positions = {
topLeft: { top: offset, left: offset },
topRight: { top: offset, right: offset },
bottomLeft: { bottom: offset, left: offset },
bottomRight: { bottom: offset, right: offset },
};
return positions[position];
};
export const ParticipantsCounterBadge = ({ options, participantsCount: countProp, position: positionProp, showBadge: showBadgeProp, backgroundColor: backgroundColorProp, textColor: textColorProp, isDarkMode: isDarkModeProp, customStyle, }) => {
const participantsCount = options?.participantsCount ?? countProp ?? 0;
const position = options?.position ?? positionProp ?? 'bottomLeft';
const showBadge = options?.showBadge ?? showBadgeProp ?? true;
const isDarkMode = options?.isDarkMode ?? isDarkModeProp ?? true;
const colors = getModernColors(isDarkMode);
const backgroundColor = options?.backgroundColor ?? backgroundColorProp ?? (isDarkMode ? 'rgba(45, 52, 54, 0.85)' : 'rgba(255, 255, 255, 0.9)');
const textColor = options?.textColor ?? textColorProp ?? colors.text;
if (!showBadge) {
return null;
}
return (<View style={[styles.container, getPositionStyle(position), customStyle]}>
<View style={[styles.badge, { backgroundColor, borderColor: colors.border }]}>
<FontAwesome5 name="users" size={14} color={textColor} style={styles.icon}/>
<Text style={[styles.count, { color: textColor }]}>{participantsCount}</Text>
</View>
</View>);
};
export default ParticipantsCounterBadge;
const styles = StyleSheet.create({
container: {
position: 'absolute',
zIndex: 100,
},
badge: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
paddingVertical: 8,
paddingHorizontal: 14,
borderRadius: 20,
borderWidth: 1,
shadowColor: '#000',
shadowOpacity: 0.18,
shadowRadius: 12,
shadowOffset: { width: 0, height: 4 },
elevation: 5,
},
icon: {
opacity: 0.9,
},
count: {
fontSize: 14,
fontWeight: '600',
},
});
//# sourceMappingURL=ParticipantsCounterBadge.js.map