enx-uikit-react-native
Version:
It is a react native component for Enablex users.
231 lines (214 loc) • 8.01 kB
JavaScript
import React, { Component } from "react";
import { FlatList, View, Text, TouchableHighlight, Image, LogBox } from "react-native";
import { styles } from "../style/EnxTopViewStyle";
class EnxParticipantScreen extends Component {
constructor(props) {
super(props);
this.state = {
isModerator: this.props.isModerator,
selfClientId: this.props.selfClientId,
partOpt: this.props.partOpt,
switchValue: false,
chatNotification: true,
chatImage: require("../image_asset/chat_icon.png"),
participantImage: require("../image_asset/participant_icon.png"),
audioMuteUnmuteImageCheck: false,
audioMuteUnmuteImage: require("../image_asset/audio_on.png"),
videoMuteUnmuteImageCheck: false,
videoMuteUnmuteImage: require("../image_asset/video_on.png"),
disconnectImage: require("../image_asset/end_call_new.png"),
disconnectImage: require("../image_asset/end_call_new.png"),
backImage: require("../image_asset/back.png"),
}
}
audioMuteUnMute = (index) => {
this.props.muteUnmuteParticipantAudio(index)
}
videoMuteUnMute = (index) => {
this.props.muteUnmuteParticipantVideo(index)
}
disconnect = (index) => {
this.props.disconnectParticipant(index)
}
startchat = (index) => {
this.props.startPrivateChat(index)
}
createParticipantView(a,item,index) {
console.log("============== createParticipantView ================",a)
try {
if (a.AUDIO) {
return (
<View style={{ flex: 1, }}>
<TouchableHighlight
underlayColor="transparent"
onPress={() => { this.audioMuteUnMute(index) }}
>
{item.audioMuted ?
<Image
source={require("../image_asset/audio_off.png")}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, top: 10 }}
/>
: <Image
source={require("../image_asset/audio_on.png")}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, top: 10 }}
/>
}
</TouchableHighlight>
</View>
);
}
else if (a.VIDEO) {
return (
<View style={{ flex: 1, }}>
<TouchableHighlight
underlayColor="transparent"
onPress={() => { this.videoMuteUnMute(index) }}
>
{item.videoMuted ?
<Image
source={require("../image_asset/video_off.png")}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, top: 10 }}
/>
: <Image
source={require("../image_asset/video_on.png")}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, top: 10 }}
/>
}
</TouchableHighlight>
</View>
);
}
else if (a.CHAT) {
return (
<View style={{ flex: 1, }}>
{this.state.selfClientId != item.clientId ?
<TouchableHighlight
underlayColor="transparent"
onPress={() => { this.startchat(index) }}
>
{
item.chatCount == 0 ?
<Image
source={require("../image_asset/chat_icon.png")}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, top: 10 }}
/>
: <Image
source={require("../image_asset/chat_icon_noti.png")}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, top: 10 }}
/>
}
</TouchableHighlight>
: null
}
</View>
);
}
else if (a.DISCONNECT) {
return (
<View style={{ flex: 1, }}>
{this.state.isModerator ?
<TouchableHighlight
underlayColor="transparent"
onPress={() => { this.disconnect(index) }}
>
<Image
source={this.state.disconnectImage}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, top: 10 }}
/>
</TouchableHighlight>
: item.clientId === this.state.selfClientId ?
<TouchableHighlight
underlayColor="transparent"
onPress={() => { this.disconnect(index) }}
>
<Image
source={this.state.disconnectImage}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, top: 10 }}
/>
</TouchableHighlight>
:null
}
</View>
);
}
} catch (err) {
console.log("Error: ",err.message)
}
}
renderItem = ({ item, index }) => {
return (
<View style={{ flex: 1, flexDirection: 'row', width: '100%', height: 60, justifyContent: 'center', backgroundColor: '#D3D3D3', marginStart: 5, marginEnd: 5, marginBottom: 10 }}>
<View style={{ flex: 8, flexDirection: 'row', justifyContent: 'center',marginStart: 5, marginEnd: 5, }}>
{/* Participant */}
<View style={{ flex: 1, }}>
<TouchableHighlight
underlayColor="transparent"
>
<Image
source={this.state.participantImage}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, top: 10 }}
/>
</TouchableHighlight>
</View>
{/* Name */}
<View style={{ flex: 3, justifyContent: 'center' }}>
{
item.clientId === this.state.selfClientId ?
<Text style={{ marginLeft: 10 }}>{item.name} (me)</Text>
: <Text style={{ marginLeft: 10 }}>{item.name}</Text>
}
</View>
{this.state.partOpt.map((a) => {
return(
this.createParticipantView(a,item,index)
)
})
}
</View>
</View>
);
};
render() {
//console.log("this.props.data",this.props.data.length)
// console.log("=========== Data - participant list =================",this.props.data)
console.log("============ participant setting ===============", this.state.partOpt)
return (
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', width: '100%', height: 60, backgroundColor: 'white', top: 0, marginLeft: 20, alignItems: 'center' }}>
<TouchableHighlight
underlayColor="transparent"
onPress={() => { this.props.onBackClick() }}
>
<Image
source={this.state.backImage}
style={{ width: 30, alignSelf: "center", height: 30, zIndex: 50, }}
/>
</TouchableHighlight>
<Text style={{ fontSize: 18, color: "black", fontWeight: "bold", marginLeft: 10 }}> Participants Screen </Text>
</View>
{this.props.data.length > 0 ?
<FlatList
key={'#'}
extraData={this.props.data}
data={this.props.data}
contentContainerStyle={{ justifyContent: "space-between", padding: 0, margin: 1, }}
renderItem={this.renderItem}
numColumns={1}
/>
: <View
style={{
position: 'absolute',
backgroundColor: "white",
top: 80, left: 0,
right: 0, bottom: 0,
justifyContent: 'center',
alignItems: 'center'
}}>
<Text style={{ fontSize: 16, fontWeight: "bold" }}> List is Empty </Text>
</View>
}
</View>
);
}
}
export default EnxParticipantScreen;