sfm-uikit-react-native
Version:
It is a react native component for SmartFloMeet users.
166 lines (165 loc) • 8 kB
JavaScript
import React, { PureComponent } from "react";
import { View, Text, TouchableHighlight, Image,Dimensions} from "react-native";
import { Enx, EnxStream, EnxRoom } from "sfm-rtc-react-native";
import { EnxSetting } from "..";
import {styles} from "../style/EnxConfirmationViewStyle";
import { th } from "date-fns/locale";
class EnxConfirmationScreen extends PureComponent {
constructor(props) {
super(props);
this.state = {
muteAudioAtJoin : EnxSetting.getIsAudioMuted(),
muteVideoAtJoin : EnxSetting.getIsVideoMuted(),
joinAsAudioOnly : EnxSetting.getIsAudioOnly(),
useFontCamera : EnxSetting.getCameraPosition(),
audioUnmuteImage: require("../image_asset/audio_on.png"),
videoUnmuteImage: require("../image_asset/video_on.png"),
audioMuteImage: require("../image_asset/audio_off.png"),
videoMuteImage: require("../image_asset/video_off.png"),
previewImage : require("../image_asset/previewOpt.png"),
cameraFlipImage : require("../image_asset/cameraFlip.png"),
orientation : this.getOrientation(),
windowHeight: Dimensions.get("window").height,
windowWidth: Dimensions.get("window").width,
}
// Add event listener to detect orientation change
//Dimensions.addEventListener("change", this.onOrientationChange);
this.orientationChangeListener = Dimensions.addEventListener(
"change",
this.onOrientationChange
);
}
// Remove the event listener when the component unmounts
componentWillUnmount() {
// Remove the event listener
if (this.orientationChangeListener && this.orientationChangeListener.remove) {
this.orientationChangeListener.remove(); // Proper removal using remove() method
}
}
//To detect the current orientation of the device
getOrientation = () => {
const { height, width } = Dimensions.get("window");
return height >= width ? "portrait" : "landscape";
};
//Handle for orientation changes
onOrientationChange = ({ window: { width, height } }) => {
// const { height, width } = Dimensions.get("window");
// Set the state with the new dimensions
if (height && width) {
this.setState({
orientation: this.getOrientation(),
windowHeight: height,
windowWidth: width,
});
}
};
render() {
const { orientation, windowHeight, windowWidth } = this.state;
// Safeguard: Ensure dimensions are valid
const safeHeight = windowHeight || 0;
const safeWidth = windowWidth || 0;
//Determine styles based on orientation
const isPortrait = orientation === "portrait";
const firstPartStyle = isPortrait
? { height: safeHeight - 200 } // Use safeHeight here
: { width: safeWidth - 310 }; // Use safeWidth here
const secondPartStyle = isPortrait
? { height: 200 }
: { width: 310 };
return (
<View style={isPortrait ? styles.containerPortrate : styles.containerLandScape}>
{/* 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>
}
{/* First dynamic part */}
<View style={[styles.firstPart , firstPartStyle]}>
{/** Creating Preview for camera Position*/}
{(this.state.joinAsAudioOnly || this.state.muteVideoAtJoin) ? <View style={{flex: 1,position: 'relative', width: '100%', height: undefined, backgroundColor : 'black' ,alignItems: 'center',}}>
<Image style={styles.noVideoPreview} resizeMode='contain' name = {Platform.OS === "ios" ? "ios-checkmark-outline" : "md-checkmark"} source={this.state.previewImage}/>
</View> :
<EnxStream key={this.state.orientation} style={styles.videoContainer} isPreview = {true} isFrontCamera = {this.state.useFontCamera}/>
}
</View>
{/* Second Part with constant size */}
<View style={[styles.secondPart , secondPartStyle]}>
<View style={isPortrait ? styles.bottomOptionContainerPrortare : styles.bottomOptionContainerLandScape}>
<View style={isPortrait ? styles.bottomOptTopContainerPrortare : styles.bottomOptTopContainerlandScape}>
<View style ={styles.bottonOptAudio}>
<TouchableHighlight underlayColor="transparent" onPress={this.onAudio}>
<Image tintColor= {this.state.muteAudioAtJoin?'#AA336A':'#444444'}
source={this.state.muteAudioAtJoin?this.state.audioMuteImage:this.state.audioUnmuteImage}
style={{width: 40,alignSelf: "center",height: 40}} />
</TouchableHighlight>
</View>
<View style ={styles.bottonOptVideo}>
<TouchableHighlight underlayColor="transparent" onPress={this.onVideo}>
<Image tintColor={this.state.muteVideoAtJoin?'#AA336A':'#444444'}
source={this.state.muteVideoAtJoin?this.state.videoMuteImage:this.state.videoUnmuteImage}
style={{width: 40,alignSelf: "center",height: 40,}}/>
</TouchableHighlight>
</View>
<View style ={styles.bottonOptAudioOnly}>
<TouchableHighlight underlayColor="transparent" onPress={this.onAudioOnly}>
<View style={styles.bottonOptInSideAudioOnly}>
<Image tintColor={this.state.joinAsAudioOnly?'#AA336A':'#444444'}
source={this.state.joinAsAudioOnly?this.state.audioMuteImage:this.state.audioUnmuteImage}
style={styles.bottonAudioOnlyInSide} />
<Text style={{alignSelf: "center",textAlign:"center",color:this.state.joinAsAudioOnly?'#AA336A':'#444444'}}>Audio Only</Text>
</View>
</TouchableHighlight>
</View>
</View>
<TouchableHighlight style={isPortrait ? styles.joinNowContainerPortrate : styles.joinNowContainerlandScape}
underlayColor="#e60073" onPress={this.props.onConfirm}>
<Text style={styles.joinNowtext}>{EnxSetting.getJoinText()}</Text>
</TouchableHighlight>
</View>
</View>
</View>
);
}
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;