sfm-uikit-react-native
Version:
It is a react native component for SmartFloMeet users.
192 lines (191 loc) • 8.03 kB
JavaScript
import React, { Component } from "react";
import { TouchableHighlight,View, StyleSheet,Image,Text,Button } from "react-native";
import { styles } from "../style/EnxBottomViewStyle";
import { EnxSetting } from "sfm-uikit-react-native";
class EnxBottomView extends Component {
constructor(props) {
super(props);
this.state = {
isConnected : false,
isAudioMuted : EnxSetting.getIsAudioMuted(),
isVideoMuted : EnxSetting.getIsVideoMuted(),
isAudioOnlyCall : EnxSetting.getIsAudioOnly(),
isFontCamera : EnxSetting.getCameraPosition(),
currentAudioName : this.props.selectedDevice,
}
}
// The method to be called from EnxVideoView, Here we are updating the action
updateAction = (value) => {
if(value.EventName == 'AudioResponse'){
this.setState({
isAudioMuted : !this.state.isAudioMuted
});
}
else if(value.EventName == 'VideoResponse'){
this.setState({
isVideoMuted : !this.state.isVideoMuted
});
}
else if(value.EventName == 'CameraResponse'){
this.setState({
isFontCamera : !this.state.isFontCamera
});
}
else if(value.EventName == 'AudioMediaResponse'){
this.setState({
currentAudioName : value.response
});
}
console.log('Hello all from EnxBottomView!'+ value);
};
// This function will be called when the button is pressed
handleButtonPress = (value) => {
if (this.props.onBottomButtonClick) {
this.props.onBottomButtonClick(value); // Call the function passed from EnxVideoView
}
};
//audio Switch
onPressAudio = () => {
this.handleButtonPress({"EventName" : 'AudioPress' , 'flag' : !this.state.isAudioMuted})
};
//Video Switch
onPressVideo = () => {
this.handleButtonPress({"EventName" : 'VideoPress' , 'flag' : !this.state.isVideoMuted})
};
//camera Switch
onPressCamera = () => {
this.handleButtonPress({"EventName" : 'cameraPress' , 'flag' : !this.state.isFontCamera})
};
//Audio Media Switch
onPressAudioMedia = () =>{
this.handleButtonPress({"EventName" : 'AudioMeida' , 'flag' : true})
}
//Chat Press
onPressChat = () =>{
this.handleButtonPress({"EventName" : 'GroupChat' , 'flag' : true})
}
//More Press
onPressMore = () =>{
this.handleButtonPress({"EventName" : 'More' , 'flag' : true})
}
//Disconnect
onPressDisconnect = () =>{
this.handleButtonPress({"EventName" : 'Disconnect' , 'flag' : true})
}
render() {
return (
<View style={[styles.bottomBar,{flex : EnxSetting.createRequiredOption().length}]}>
{EnxSetting.createRequiredOption().map((a) => {
return(this.createBottomBar(a))
})}
</View>
);
}
//Create Option List
createBottomBar(a){
try{
if(a == 'Audio'){
return (
<View style ={{flex:1,}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onPressAudio}>
<Image
source={this.state.isAudioMuted ? require("../image_asset/audio_off.png"):require("../image_asset/audio_on.png")}
style={styles.inlineImg}
/>
</TouchableHighlight>
</View>
);
}
else if(a == 'Video'){
return (
<View style ={{flex:1,}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onPressVideo}>
<Image
source={this.state.isVideoMuted ? require("../image_asset/video_off.png"):require("../image_asset/video_on.png")}
style={styles.inlineImg}
/>
</TouchableHighlight>
</View>
);
}
else if(a == 'Camera'){
return (
<View style ={{flex:1,}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onPressCamera}>
<Image
source={this.state.isFontCamera ? require("../image_asset/camera_rotaion_off.png"):require("../image_asset/camera_rotaion_on.png")}
style={styles.inlineImg}
/>
</TouchableHighlight>
</View>
);
}
else if(a == 'AudioMedia'){
return (
<View style ={{flex:1,}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onPressAudioMedia}>
<Image
source={this.state.currentAudioName == 'Earpiece' ? require("../image_asset/earpic.png") : this.state.currentAudioName == 'Speakerphone' ? require("../image_asset/speaker_off.png") : this.state.currentAudioName == 'Bluetooth' ? require("../image_asset/blueTooth.png") : require("../image_asset/airBud.png")}
style={styles.inlineImg}
/>
</TouchableHighlight>
</View>
);
}
else if(a == 'Chat'){
return (
<View style ={{flex:1,}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onPressChat}>
<Image
source={require("../image_asset/group_chat.png")}
style={styles.inlineImg}
/>
</TouchableHighlight>
</View>
);
}
else if(a == 'More'){
return (
<View style ={{flex:1,}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onPressMore}>
<Image
source={require("../image_asset/more_vertical.png")}
style={styles.inlineImg}
/>
</TouchableHighlight>
</View>
);
}
else if(a == 'Disconnect'){
return (
<View style ={{flex:1,}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onPressDisconnect}>
<Image
source={require("../image_asset/end_call_new.png")}
style={styles.inlineImg}
/>
</TouchableHighlight>
</View>
);
}
}
catch(err){
console.log(err.message)
}
}
}
export default EnxBottomView;