enx-uikit-react-native
Version:
It is a react native component for Enablex users.
174 lines (164 loc) • 6.85 kB
JavaScript
import React, { Component } from "react";
import { FlatList,Switch,Button, View, Text, TouchableHighlight, Image, LogBox ,ButtonGroup, TouchableOpacity} from "react-native";
import { EnxRoom, Enx, EnxStream, EnxPlayerView, EnxToolBarView } from "enx-rtc-react-native";
import { EnxSetting } from "..";
import { styles } from "../style/EnxFloatingOptionStyle";
class EnxConfirmationScreen extends Component {
constructor(props) {
super(props);
this.state = {
muteAudioAtJoin : EnxSetting.getIsAudioMuted(),
muteVideoAtJoin : EnxSetting.getIsVideoMuted(),
joinAsAudioOnly : EnxSetting.getIsAudioOnly(),
useFontCamera : EnxSetting.getCameraPosition(),
audioMuteUnmuteImage: require("../image_asset/audio_on.png"),
videoMuteUnmuteImage: require("../image_asset/video_on.png"),
audioMuteMuteImage: require("../image_asset/audio_off.png"),
videoMuteMuteImage: require("../image_asset/video_off.png"),
previewImage : require("../image_asset/previewOpt.png"),
cameraFlipImage : require("../image_asset/cameraFlip.png"),
}
}
render() {
return (
<View style={{ flex: 1 }}>
{/* Floating Button */}
{this.state.muteVideoAtJoin ? <View></View> :
<TouchableHighlight style={styles.floatingButton}
underlayColor="transparent"
onPress={this.onSwitchCamera}>
<Image
source={this.state.cameraFlipImage}
style={{width: 40,
alignSelf: "center",
height: 40,
}}
/>
</TouchableHighlight>
}
<View style={{ marginTop: 10 }}>
<View style={{height: '75%',width: '98%',alignSelf: "center",}}>
{
(this.state.joinAsAudioOnly || this.state.muteVideoAtJoin) ? <View style={{flex: 1,position: 'relative', width: '100%', height: undefined, backgroundColor : 'black' ,alignItems: 'center',}}>
<Image style={{flex: 1,}} resizeMode='contain' name = {Platform.OS === "ios" ? "ios-checkmark-outline" : "md-checkmark"} source={this.state.previewImage}/>
</View> :
<EnxStream style={{position: "absolute", width: '100%', height: '100%'}} isPreview = {true} isFrontCamera = {false}/>
}
</View>
<View style={{width: '95%',height: "22%",borderColor: "grey", borderWidth: 1, borderRadius: 10, alignSelf: "center", marginBottom : 20,marginTop:10 }}>
{
<View style={{flexDirection:'row', margin : 10, alignItems: 'center',justifyContent: 'center',borderColor: "grey", borderWidth: 1, borderRadius: 10}}>
<View style ={{flex:1,}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onAudio}>
<Image
tintColor= {this.state.muteAudioAtJoin?'#AA336A':'#444444'}
source={this.state.muteAudioAtJoin?this.state.audioMuteMuteImage:this.state.audioMuteUnmuteImage}
style={{width: 40,alignSelf: "center",height: 40}}
/>
</TouchableHighlight>
</View>
<View style ={{flex:1,borderLeftWidth:1}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onVideo}>
<Image
tintColor={this.state.muteVideoAtJoin?'#AA336A':'#444444'}
source={this.state.muteVideoAtJoin?this.state.videoMuteMuteImage:this.state.videoMuteUnmuteImage}
style={{width: 40,
alignSelf: "center",
height: 40,
}}
/>
</TouchableHighlight>
</View>
<View style ={{flex:1.5,}}>
<TouchableHighlight
underlayColor="transparent"
onPress={this.onAudioOnly}>
<View style={{flexDirection:'row', borderLeftWidth:1, alignItems: 'center',justifyContent: 'center'}}>
<Image
tintColor={this.state.joinAsAudioOnly?'#AA336A':'#444444'}
source={this.state.joinAsAudioOnly?this.state.audioMuteMuteImage:this.state.audioMuteUnmuteImage}
style={{width: 40,
alignSelf: "center",
height: 40,
}} />
<Text style={{ alignSelf: "center",textAlign:"center",color:this.state.joinAsAudioOnly?'#AA336A':'#444444' }}>Audio Only</Text>
</View>
</TouchableHighlight>
</View>
</View>
}
<TouchableHighlight
style={{
height: 40,
width: 140,
borderColor: "grey",
backgroundColor: "#e60073",
borderWidth: 1,
borderRadius: 20,
marginTop: 20,
alignSelf: "center"
}}
underlayColor="#e60073"
onPress={this.joinCalls}
>
<Text style={{color: "white",
fontSize: 16,
fontWeight:600,
marginTop:5,
textAlign:"center",
}}>{EnxSetting.getJoinText()}</Text>
</TouchableHighlight>
</View>
</View></View>);
}
joinCalls = () => {
if (Platform.OS === 'android') {
Enx.cleanPreviewResource();
}
var option = {
isAudio: EnxSetting.getIsAudioMuted(),
isVideo: EnxSetting.getIsVideoMuted(),
isAudioOnly:EnxSetting.getIsAudioOnly(),
}
console.log("options"+option.isAudioOnly+option.isVideo)
this.props.joinCall(option)
}
onAudio = () =>{
this.setState({
muteAudioAtJoin : !this.state.muteAudioAtJoin
})
EnxSetting.joinAsAudioMute(!this.state.muteAudioAtJoin);
}
onVideo = () =>{
this.setState({
muteVideoAtJoin : !this.state.muteVideoAtJoin
})
EnxSetting.joinAsVideoMute(!this.state.muteVideoAtJoin)
}
onAudioOnly = () =>{
this.setState({
joinAsAudioOnly : !this.state.joinAsAudioOnly,
})
this.setState({
muteVideoAtJoin : !this.state.joinAsAudioOnly
})
EnxSetting.joinAsAudioOnlyCall(!this.state.joinAsAudioOnly)
}
onSwitchCamera =() =>{
this.setState({
useFontCamera : !this.state.useFontCamera
})
EnxSetting.setFontCameraPosition(!this.state.useFontCamera)
Enx.switchCameraPreview();
}
componentDidMount() {
{!this.state.useFontCamera
Enx.switchCameraPreview();
}
}
}
export default EnxConfirmationScreen;