enx-uikit-react-native
Version:
It is a react native component for Enablex users.
1,434 lines (1,365 loc) • 117 kB
JavaScript
import React, { PureComponent,useRef } from "react";
import ProgressDialog from 'react-native-progress-dialog'
import { EnxSetting } from "..";
import {
Platform,
Text,
TouchableHighlight,
Modal,
View,
Dimensions,
Image,
PermissionsAndroid,
TouchableWithoutFeedback,
ToastAndroid,
AlertIOS,
BackHandler,
Button,
FlatList,
Switch,
ScrollView,
} from "react-native";
import EnxParticipantScreen from "./EnxParticipantScreen";
import EnxChatScreen from "./EnxChatScreen";
import EnxScreenShareView from "./EnxScreenShareView";
import Dialog from "react-native-dialog";
import { styles } from "../style/EnxVideoViewStyle";
import EnxTopView from "./EnxTopView";
import EnxBottomView from "./EnxBottomView";
import PropTypes from "prop-types";
import Blink from './Blink'
import { pick, reduce } from "underscore";
import { EnxRoom, Enx, EnxStream, EnxPlayerView, EnxToolBarView } from "enx-rtc-react-native";
import { LogBox } from 'react-native';
//import DraggableView from 'react-native-draggable-reanimated';
import HorizontalList from './HorizontalList'
import "./ignoreWarnings"
import axios from "react-native-axios";
import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
import EnxConfirmationScreen from "./EnxConfirmationScreen"
import { Modalize } from 'react-native-modalize';
import EnxLobbyView from "./EnxLobbyView";
import VideoPlayer from 'react-native-video-player';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import SelectDropdown from 'react-native-select-dropdown';
import { EnxPubMode, EnxPubType } from "enx-rtc-react-native/src/Enx";
const calculateRow = (data)=>{
if(data.length == 1)
return 1;
else if(data.length == 2 || data.length == 3 || data.length == 4)
return 2
else if(data.length == 5 || data.length == 6)
return 3
else if(data.length == 7 || data.length == 8)
return 4
else if(data.length == 9 || data.length == 10 || data.length>10)
return 5
}
export default class EnxVideoView extends PureComponent {
renderItem = ({ item, index }) => {
try{
return (
<TouchableWithoutFeedback
onPress={ () => {this.setState({isToolBarsVisible:!this.state.isToolBarsVisible })}}
onLongPress={ () => {this.startAnnotation(index)}}
>
<EnxPlayerView
style={{
flex: 1,
margin: 1,
backgroundColor:'black',
height: (this.state.screenHeight ) / calculateRow(this.state.activeTalkerStreams),
}}
key={String(item.streamId)}
streamId={String(item.streamId)}
isLocal = "remote"
/>
</TouchableWithoutFeedback>
);
}catch(err){
console.log(err.message)
}
};
async UNSAFE_componentWillMount() {
LogBox.ignoreLogs(['Warning: ...']);
LogBox.ignoreAllLogs();
Enx.initRoom();
}
constructor(props) {
super(props);
this.state = {
tempStreamList:[],
isSelfViewVisible:true,
mActiveStreamId:null,
activeStream:null,
heightOfShareView:'0%',
widthOfShareView:'0%',
embedUrl: props.embedUrl,
enxRequiredEventsOption: props.setting== undefined || props.setting[0] == undefined ? [{AUDIO:true},{VIDEO:true},{SWITCH_CAMERA:true},{SWITCH_AUDIO:true},{GROUP_CHAT:true},{DISCONNECT:true},{MUTE_ROOM:true},{RECORDING:true},{SCREEN_SHARE:true},{ANNOTATION:true},{LOBBY:true},{REQUEST:true},{ROOM_SETTING:true},{POLLING:true},{QNA:true}]: props.setting[0],
// {SCREEN_SHARE:true},{ANNOTATION:true},
// topOption: props.setting == undefined || props.setting[1] == undefined ? [{USER_LIST:true}] : props.setting[1],
// bottomBarColor: props.setting == undefined || (props.setting[2]==undefined || props.setting[2].COLOR == undefined) ? "#D3D3D3" : props.setting[2].COLOR,
//topBarColor: props.setting == undefined || (props.setting[3]==undefined || props.setting[3].COLOR == undefined) ? "#D3D3D3" : props.setting[3].COLOR,
participantOption: props.setting == undefined || props.setting[1] == undefined ? [{AUDIO:true},{VIDEO:true},{CHAT:true},{DISCONNECT:true}]: props.setting[1],
refresh:false,
chatModelList:[],// store chat Model
groupChatModel:[],// store group chat Model
privateChatModel:[],// store private chat Model
isAudioEnable:true,
isVideoEnable:true,
isChatEnable:true,
isChatViewVisible: false,
isParticipatViewVisible:false,
chatType:'',
participantList:[],
participantClientId:null,
selfClientId:'',
selfName:'',
isModerator:'',
isVisibleProgressDialog:false,
isVisibleDialog:false,
isLobbyDialog:false,
isRequest:false,
switchValue: false ,
isToolBarsVisible:true,
screenHeight:Dimensions.get('window').height,
screenWidth:Dimensions.get('window').width,
isLoadFirstTime:true,
noOfColumn:0,
selectedDevice: "",
deviceList: [],
base64Icon: "",
activeTalkerStreams: [],
isUpdated : false,
switchLayoutCheck:false,
muteRoomCheck: false,
recordingCheck: false,
recordingImage: require("../image_asset/recording_on.png"),
screenShareCheck: false,
toolBarCheck: false,
groupChatNotification:true,
groupChatImage: require("../image_asset/group_chat.png"),
audioMuteUnmuteCheck: true,
audioMuteUnmuteImage: require("../image_asset/audio_on.png"),
videoMuteUnmuteCheck: true,
videoMuteUnmuteImage: require("../image_asset/video_on.png"),
rotateCamera: false,
rotateCameraImage: require("../image_asset/camera_rotaion_off.png"),
speakerSelected: true,
speakerImage: require("../image_asset/speaker_off.png"),
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"),
isLiveStreamingRunning : false,
canvasCheck: false,
isRequestIntiatedForAnnotation:false,
annotationCheck: false,
localStreamId: "0",
screenShareId: null,
canvasStreamId: null,
activeStreamId: null,
annotationStreamId: null,
muteAudioAtJoin : true,
muteVideoAtJoin : true,
joinAsAudioOnly : false,
isPreviewView : true,
isConnected:false,
isAudience:false,
hlsUrl:"",
isRoomAwaited:false,
isRoomSetting:false,
shareModeSelected:"",
screenShareMode:"",
screenShareIndex:0,
screenShareState:"",
shareClientId:"",
screenShareModeGranted : false,
isShareRequested : false,
moreItem:[],
awaitedParticipantList:[],
shareRequestList:[],
previewImage : require("../image_asset/previewOpt.png"),
videoQual:{
streamType: "talker",
videoQuality: "SD"
},
localStreamInfo: {
audio: true,
video: true,
data: false,
maxVideoBW: "400",
minVideoBW: "300",
audioMuted: false,
videoMuted: false,
name: "React Native",
minWidth: "720",
minHeight: "480",
maxWidth: "1280",
maxHeight: "720",
audio_only: false
},
enxRoomInfo : {
allow_reconnect: true,
number_of_attempts: "3",
timeout_interval: "15",
playerConfiguration: {
audiomute: true,
videomute: true,
bandwidth: true,
screenshot: true,
avatar: true,
iconHeight: 30,
iconWidth: 30,
avatarHeight: 50,
avatarWidth: 50,
iconColor : "#0000FF",
},
},
};
//console.log("asdf",this.props.setting[0])
this.isFound=this.state.enxRequiredEventsOption.some(element=>{return element.ANNOTATION||element.MUTE_ROOM||element.RECORDING||element.SCREEN_SHARE||element.LOBBY||element.REQUEST})
this.menuOption=this.state.enxRequiredEventsOption.map
if(this.isFound)
this.state.enxRequiredEventsOption.push({MORE:true})
this.requestPermission = this.requestPermission.bind(this);
this.roomEventHandlers = {
roomConnected: event => {
console.log("roomConnected", event);
this.props.connectToRoom();
if(Object.keys(event).length!=0){
EnxSetting.updateIsConnected(true)
this.setState({ isConnected: true });
this.setState({isRoomAwaited:false})
Enx.getLocalStreamId(status => {
this.setState({
localStreamId: status
});
console.log("+++roomConnected +++", status);
// this.state.localStreamId = status;
});
Enx.publish();
// save self clientId
this.setState({
selfClientId:event.user.clientId
})
// save role
if(event.user.role === 'moderator'){
this.setState({
isModerator:true
})
}else{
this.setState({
isModerator:false
})
}
// save name
this.setState({
selfName:event.user.name
})
// initlize chatModelList
chatModel = {
headerName:'Group Chat',
headerClientId:'Group Chat',
chatCount:'0',
chatList:[],
}
var temp = []
temp.push(chatModel)
this.setState({
chatModelList:temp
})
//Share permission
this.screenShareControl(event.room)
//awaited participants
if(event.awaitedParticipants.length>0){
this.setState({
awaitedParticipantList:event.awaitedParticipants
})
}
console.log("awaiteduser",event.awaitedParticipants)
// Add alrady joined used to participant list and store entry in chatModelList
if(event.userList.length>0){
var tempArray = [];
var tempChatArray = [];
tempChatArray = this.state.chatModelList;
for(var i=0;i<event.userList.length;i++){
if(event.userList[i].clientId!=event.user.clientId){
event.userList[i].chatCount = 0;
tempArray.push(event.userList[i])
chatModel = {
headerName:event.userList[i].name,
headerClientId:event.userList[i].clientId,
chatCount:'0',
chatList:[],
}
tempChatArray.push(chatModel)
}
}
tempArray.push(event.user)
this.setState({
participantList : tempArray
})
this.setState({
chatModelList:tempChatArray
})
}
this.menuOptions=this.state.enxRequiredEventsOption.map((a) => {
if(a.MUTE_ROOM&&this.state.isModerator)
this.state.moreItem.push({
name:'Mute Room',
imageIcon : require("../image_asset/moderator_unmute.png"),
status:false,
isSwitch:true
})
else if(a.RECORDING&&this.state.isModerator)
this.state.moreItem.push({
name:'Start Recording',
imageIcon: require("../image_asset/recording_on.png"),
status:false,
isSwitch:true
})
else if(a.ANNOTATION &&Platform.OS === 'android')
this.state.moreItem.push({
name:'Start Annotation',
imageIcon : require("../image_asset/screen_share_off.png"),
status:false,
isSwitch:true
})
else if(a.SCREEN_SHARE &&Platform.OS === 'android')
this.state.moreItem.push({
name:'Start Screen Share',
imageIcon:require("../image_asset/screen_share_off.png"),
status:false,
isSwitch:true
})
else if(a.LOBBY &&this.state.isModerator)
this.state.moreItem.push({
name:'Lobby',
imageIcon:require("../image_asset/lobby.png"),
status:false,
isSwitch:false
})
else if(a.ROOM_SETTING &&this.state.isModerator)
this.state.moreItem.push({
name:'Room Setting',
imageIcon:require("../image_asset/settings.png"),
status:false,
isSwitch:false
})
else if(a.REQUEST &&this.state.isModerator)
this.state.moreItem.push({
name:'Share Request',
imageIcon: require("../image_asset/notification_icon.png"),
status:false,
isSwitch:false
})
else if(a.POLLING)
this.state.moreItem.push({
name:'Polling',
imageIcon:require("../image_asset/polling_black.png"),
status:false,
isSwitch:false
})
else if(a.QNA)
this.state.moreItem.push({
name:'Q&A',
imageIcon:require("../image_asset/qna.png"),
status:false,
isSwitch:false
})
return this.state.moreItem
})
}else{
console.log("==============json=========")
this.setState({ isAudience: true });
}
this.forceUpdate()
{EnxSetting.getStartLibeSteamingFalg() && this.state.isModerator
Enx.startStreaming(EnxSetting.getRTMPInfoDetails());
}
},
roomError: event => {
console.log("roomError", event);
this.props.connectError()
},
availableFiles:event=>{
console.log("availableFiles", event);
},
streamPublished: event => {
console.log("streamPublished", event);
},
eventError: event => {
console.log("eventErrorrr", event);
this.setState({isVisibleProgressDialog:false})
if (this.props.permissionsError) {
alert("Kindly grant camera and microphone permission to continue.");
}
},
streamAdded: event => {
console.log("streamAdded", event);
Enx.subscribe(event.streamId, error => {
console.log("streamAdded", error);
});
},
notifyDeviceUpdate: event => {
console.log("NotifyDeviceUpdate", event);
if(event === 'Audio is on EARPIECE')
{
if(this.state.isLoadFirstTime){
Enx.switchMediaDevice("SPEAKER_PHONE")
this.setState({
isLoadFirstTime:false
})
}
}
},
activeTalkerList: event => {
console.log("============= AT List - talker then event",this.state.activeTalkerStreams.length+" "+event.length)
try{
var tempArray = [];
var tempDuplicate = [];
var tempUnique = [];
if(event.length == 0){
this.state.activeTalkerStreams = []
this.forceUpdate()
return
}
if(this.state.activeTalkerStreams.length == 0){// first case
console.log("=========================== first case ==========================")
for(var i=0;i<event.length;i++){
tempArray.push(event[i])
}
if(tempArray.length>0){
this.setState({
activeTalkerStreams: tempArray
});
}
}
else if(this.state.activeTalkerStreams.length == event.length){//
return
}
else if (this.state.activeTalkerStreams.length < event.length){// Add User
tempArray = this.state.activeTalkerStreams
for(var i=0;i<event.length;i++){
var isExist = false;
for(var j = 0;j<tempArray.length;j++){
if(event[i].clientId === tempArray[j].clientId){
isExist = true;
break;
}
}
if(isExist){
tempDuplicate.push(event[i])
}else{
tempUnique.push(event[i])
}
}
for(var i=0;i<tempDuplicate.length;i++){ // remove all odd values and keep duplicate values
var index = -1
tempArray.find(function(item, i){
if(item.clientId != tempDuplicate[i].clientId){
index = i;
return i;
}
});
if(index!=-1){
tempArray.splice(index,1)
}
}
for (var i = 0 ; i<tempUnique.length;i++ ){// in common values add new unique values
tempArray.push(tempUnique[i])
}
if(tempArray.length>0){
this.setState({
activeTalkerStreams: tempArray
});
}
// for(var i = 0; i<this.state.activeTalkerStreams.length;i++){
// console.log("ids ",this.state.activeTalkerStreams[i].name+" "+this.state.activeTalkerStreams[i].clientId)
// }
console.log("=========================== Added ==========================",this.state.activeTalkerStreams.length)
this.setState({
refresh: !this.state.refresh
})
return;
}
else if (this.state.activeTalkerStreams.length > event.length){// Remove User
tempArray = this.state.activeTalkerStreams
for(var i=0;i<tempArray.length;i++){
var isExist = false;
for(var j = 0;j<event.length;j++){
if(tempArray[i].clientId === event[j].clientId){
isExist = true;
break;
}
}
if(isExist){
tempDuplicate.push(tempArray[i])
}else{
tempUnique.push(tempArray[i])
}
}
for(var j=0;j<tempUnique.length;j++){ // remove missing value in event from tempArray
var index = -1
tempArray.find(function(item, i){
if(item.clientId === tempUnique[j].clientId){
index = i;
return i;
}
});
if(index!=-1){
tempArray.splice(index,1)
}
}
if(tempArray.length>0){
this.setState({
activeTalkerStreams: tempArray
});
}
this.setState({
refresh: !this.state.refresh
})
return;
}
}catch(err){
console.log("Error: ",err.message)
}
},
streamSubscribed: event => {
console.log("streamSubscribed", event);
},
roomDisconnected: event => {
console.log("disconnecteddddd", event);
this.props.onDisconnect()
},
roomRecordingOn: event => {
console.log("recordStartedddddd", event.msg);
this.setState({ recordingCheck: true });
},
roomRecordingOff: event => {
console.log("recordStopped", event.msg);
this.setState({ recordingCheck: false });
},
startRecordingEvent: event => {
console.log("startRecordingEvent", event);
if (event.result == "0") {
this.setState({ recordingCheck: true });
this.state.moreItem.map((a) => {if(a.name== "Start Recording")
return a.status=true})
}
},
stopRecordingEvent: event => {
console.log("stopRecordingEvent", event);
if (event.result == "0") {
this.setState({ recordingCheck: false });
this.state.moreItem.map((a) => {if(a.name == "Start Recording")
return a.status=false})
}
},
receivedStats: event => {
console.log("receivedStats", event);
},
acknowledgeStats: event => {
console.log("acknowledgeStats", event);
},
bandWidthUpdated: event => {
console.log("bandWidthUpdated", event);
},
shareStateEvent: event => {
console.log("shareStateEvent", event);
},
canvasStateEvent: event => {
console.log("canvasStateEvent", event);
},
startScreenShareACK: event => {
console.log("startScreenShareACK", event);
this.setState({screenShareCheck:true})
},
stoppedScreenShareACK: event => {
console.log("stoppedScreenShareACK", event);
this.setState({ screenShareCheck: false });
},
screenShareStarted: event => {
console.log("screenShareStarted", event);
//this.setState({heightOfShareView: '75%'})
this.setState({mActiveStreamId: event.streamId })
this.screenShareId = String(event.streamId);
this.updateUIToReceiveShare()
//this.setState({ screenShareCheck: true });
//this.setState({activeStreamId: event.streamId})
},
sceenShareStopped: event => {
console.log("sceenShareStoppedddd", event);
//this.setState({ screenShareCheck: false });
this.setState({mActiveStreamId: null })
this.updateUIWhenShareClose()
},
canvasStarted: event => {
this.setState({mActiveStreamId: event.streamId })
this.canvasStreamId = String(event.streamId);
this.updateUIToReceiveShare()
//this.setState({ canvasCheck: true });
},
canvasStopped: event => {
console.log("canvasStoppedddd", event);
this.setState({mActiveStreamId: null })
this.updateUIWhenShareClose()
//this.setState({ canvasCheck: false });
},
floorRequested: event => {
console.log("canvasStoppedddd", event);
},
mutedAllUser: event => {
console.log("mutedAllUser", event);
},
unmutedAllUser: event => {
console.log("unmutedAllUser", event);
},
hardMutedAll: event => {
console.log("hardMutedAll", event);
if(this.state.isModerator){
this.state.moreItem.map((a) => {if(a.name== "Mute Room")
return a.status=true})
this.setState({muteRoomCheck:true})
// on unmute room update self view in participant screen
var tempArray = [];
tempArray = this.state.participantList
for(var i = 0 ; i< tempArray.length;i++){
if(tempArray[i].clientId === this.state.selfClientId){
tempArray[i].audioMuted = true
break;
}
}
this.setState({
participantList:tempArray
})
}else{
this.setState({ audioMuteUnmuteCheck: false });
this.setState({
audioMuteUnmuteImage: require("../image_asset/audio_off.png")
});
}
},
hardUnmuteAllUser: event => {
console.log("hardUnmuteAllUser", event);
if(this.state.isModerator){
this.state.moreItem.map((a) => {if(a.name== "Mute Room")
return a.status=false})
this.setState({muteRoomCheck:false})
// on unmute room update self view in participant screen
var tempArray = [];
tempArray = this.state.participantList
for(var i = 0 ; i< tempArray.length;i++){
if(tempArray[i].clientId === this.state.selfClientId){
tempArray[i].audioMuted = false
break;
}
}
this.setState({
participantList:tempArray
})
}else{
this.setState({ audioMuteUnmuteCheck: true });
this.setState({
audioMuteUnmuteImage: require("../image_asset/audio_on.png")
});
}
},
userConnected: event => {
console.log("userConnected", event);
try{
var isExist = false;
var tempArray = [];
var tempChatArray = []
tempArray = this.state.participantList;
tempChatArray = this.state.chatModelList;
if(tempArray.lenght == 0){// first case
event.chatCount = 0;
tempArray.push(event)
this.setState({
participantList:tempArray
})
chatModel = {
headerName:event.name,
headerClientId:event.clientId,
chatCount:'0',
chatList:[],
}
tempChatArray.push(chatModel)
this.setState({
chatModelList:tempChatArray
})
}
if(tempArray.lenght>0){
for(var i=0; i<tempArray.lenght;i++){
if(tempArray[i].clientId === event.clientId){
isExist = true;
break;
}
}
}
if(!isExist){
event.chatCount = 0;
tempArray.push(event)
this.setState({participantList:tempArray})
chatModel = {
headerName:event.name,
headerClientId:event.clientId,
chatCount:'0',
chatList:[],
}
tempChatArray.push(chatModel)
this.setState({
chatModelList:tempChatArray
})
}
console.log("size of participant list is",this.state.participantList.length);
this.forceUpdate()
}catch(err){
console.log("=========",err.message)
}
//{"audioMuted": false, "clientId": "d5e4f839-71d8-4380-a26a-118a20131dfa", "data": [], "name": "Raj", "permissions": {"controlhandlers": true, "publish": true, "record": true, "stats": true, "subscribe": true}, "role": "moderator", "user_ref": "Raj", "videoMuted": false}
},
userDisconnected: event => {
// remove user
var index = -1;
var tempArray = [];
tempArray = this.state.participantList;
var filteredObj = tempArray.find(function(item, i){
if(item.clientId === event.clientId){
index = i;
return i;
}
});
if(index!=-1){
tempArray.splice(index,1)
}
// remove entry from chatModelList
var _index = -1;
var tempChatArray = [];
tempChatArray = this.state.chatModelList;
var filteredObj = tempChatArray.find(function(item, i){
if(item.headerClientId === event.clientId){
_index = i;
return i;
}
});
if(_index!=-1){
tempChatArray.splice(_index,1)
}
// remove entry from lobby
// var _index = -1;
// var templobbyArray = [];
// templobbyArray = this.state.awaitedParticipantList;
// var filteredObj = templobbyArray.find(function(item, i){
// if(item.clientId === event.clientId){
// _index = i;
// return i;
// }
// });
// if(_index!=-1){
// templobbyArray.splice(_index,1)
// }
this.awaitedUsers= this.state.awaitedParticipantList.filter(user => user.clientId != event.clientId)
this.setState({
awaitedParticipantList:this.awaitedUsers
})
if(this.awaitedUsers.length===0){
if(this.state.isLobbyDialog)
this.setState({
isLobbyDialog:!this.state.isLobbyDialog
})
}
this.forceUpdate()
//{"audioEnabled": false, "audioMuted": false, "clientId": "d5e4f839-71d8-4380-a26a-118a20131dfa", "data": [], "name": "Raj", "permissions": {"controlhandlers": true, "publish": true, "record": true, "stats": true, "subscribe": true}, "role": "moderator", "user_ref": "Raj", "videoMuted": false, "vidoeEnabled": false}
},
logUpload: event => {
console.log("logUpload", event);
//this.refs.toast.show(event.msg, 500, () => {});
},
setTalkerCountResponse: event => {
console.log("setTalkerCountResponse", event);
},
getMaxTalkersResponse: event => {
console.log("getMaxTalkersResponse", event);
},
getTalkerCountResponse: event => {
console.log("getTalkerCountResponse", event);
},
reconnect: event => {
console.log("reconnect", event);
},
userReconnect: event => {
console.log("userReconnect", event);
},
connectionInterrupted: event => {
console.log("connectionInterrupted", event);
},
connectionLost: event => {
console.log("connectionLost", event);
},
capturedView: event => {
console.log("capturedView", event);
this.setState({
base64Icon: event
});
},
userDataReceived: event => {
console.log("userDataReceived", event);
this.props.onUserDataReceived(event);
},
messageReceived: event => {
//{"broadcast": true, "message": "web message", "sender": "sandy", "senderId": "57a6ed13-2299-472c-aae8-ab9923c22607", "timestamp": "1660805452438", "type": "chat"}
try{
privateChatModel = {
broadcast: event.broadcast,
sender: event.sender,
senderId:event.senderId,
type:event.type,
message:event.message,
timestamp: Date.now(),
recipients:[],
isReceived:true,
fileName:'',
jsondata:'',
}
if(event.broadcast){
var tempArray = []
if(this.state.groupChatModel.length>0){
tempArray = this.state.groupChatModel
}
tempArray.push(privateChatModel)
this.setState({groupChatModel:tempArray})
if(this.state.groupChatNotification){
this.setState({
groupChatImage: require("../image_asset/group_chat_noti.png")
})
}
}else{
// Add Chat
var tempArray = []
if(this.state.chatModelList.length>0){
tempArray = this.state.chatModelList
}
for(var i = 0 ; i<tempArray.length;i++){
var chatModel = tempArray[i]
if(chatModel.headerClientId ===event.senderId){
chatModel.chatList.push(privateChatModel)
this.setState({
privateChatModel:chatModel.chatList
})
}
}
this.setState({
chatModelList: tempArray
})
// increment ChatCount
if(!this.state.isChatViewVisible)
{
var tempParticipantArray = []
if(this.state.participantList.length>0){
tempParticipantArray = this.state.participantList
}
for(var i = 0; i< tempParticipantArray.length;i++){
if(tempParticipantArray[i].clientId === event.senderId){
tempParticipantArray[i].chatCount = tempParticipantArray[i].chatCount + 1;
break;
}
}
this.setState({
participantList:tempParticipantArray
})
}
}
this.forceUpdate()
}catch(err){
console.log(err.message)
}
},
getAdvancedOptions: event => {
console.log("getAdvancedOptions", event);
},
advancedOptionsUpdate: event => {
console.log("advancedOptionsUpdate", event);
},
receiveChatDataAtRoom: event => {
console.log("receiveChatDataAtRoom", event);
},
acknowledgedSendData: event => {
console.log("acknowledgedSendData", event);
},
fileUploadStarted: event => {
console.log("fileUploadStarted", event);
},
/*
* Created File Model and then Added it to Privet Chat Model
* Add Private Chat Model to either groupChatModel or privateChatModel
* Add Private Chat Model chatModelList
* Then Add private Chat Model to chatlist and ten notify adapter
*/
// {"name": "Screenshot 2022-09-07 at 6.18.57 PM (3).png", "size": "425690", "type": "image/png", "upJobId": "0"}
initFileUpload: event => {
console.log("initFileUpload", event);
try{
fileShareModel = {
id:'',
isUpload:false,
fileName: event.name,
}
privateChatModel = {
broadcast: this.state.chatType === "group"?true:false,
sender: '',
senderId:'',
type:'',
message:"Your file: " + event.name + " is uploading",
timestamp: Date.now(),
recipients:[],
isReceived:false,
fileShareModel:fileShareModel,
fileName:'',
jsondata:'',
}
if(this.state.chatType==='group'){//Add item to updateGroupChatModel
var tempArray = []
if(this.state.groupChatModel.length>0){
tempArray = this.state.groupChatModel
}
tempArray.push(privateChatModel)
this.setState({groupChatModel:tempArray})
}else{ // Add item Pricvate Chat Model
var tempArray = []
if(this.state.privateChatModel.length>0){
tempArray = this.state.privateChatModel
}
tempArray.push(privateChatModel)
this.setState({privateChatModel:tempArray})
}
// Update chat ModelList with new Entry
var tempArray = []
if(this.state.chatModelList.length>0){
tempArray = this.state.chatModelList
}
for(var i = 0 ; i<tempArray.length;i++){
var chatModel = tempArray[i]
if(chatModel.headerClientId ===this.state.participantClientId){
chatModel.chatList.push(privateChatModel)
}
}
this.setState({
chatModelList: tempArray
})
this.forceUpdate()
}catch(err){
console.log(err.message)
}
},
//{"broadcast": true, "createdAt": "1663153068102", "dlimit": "10", "expiresAt": "1663239468102", "index": "0", "name": "Screenshot _1.png", "sender": "Host", "senderId": "9b0b5880-fde7-42f4-a7fc-b0b38c2ffc7d", "size": "425690KB", "speed": "131466.95491043854", "time": "3238", "timeLimit": "86400"}
fileAvailable: event => {
console.log("fileAvailable", event);
privateChatModel = {
broadcast: event.broadcast,
sender: event.sender,
senderId: event.senderId,
type: '',
message: event.sender + " shared a file: " + event.name,
timestamp: Date.now(),
recipients: [],
isReceived: true,
fileShareModel: null,
fileName: event.name,
jsondata: event,
}
if (event.broadcast) {// Added entry in groupChatModel
var tempArray = []
if (this.state.groupChatModel.length > 0) {
tempArray = this.state.groupChatModel
}
tempArray.push(privateChatModel)
this.setState({ groupChatModel: tempArray })
if (this.state.groupChatNotification) {
this.setState({
groupChatImage: require("../image_asset/group_chat_noti.png")
})
}
} else {// Added entry in privateChatModel
// var tempArray = []
// if (this.state.privateChatModel.length > 0) {
// tempArray = this.state.privateChatModel
// }
// tempArray.push(privateChatModel)
// this.setState({ privateChatModel: tempArray })
}
// update ChatModeList
var tempArray = []
if (this.state.chatModelList.length > 0) {
tempArray = this.state.chatModelList
}
for (var i = 0; i < tempArray.length; i++) {
var chatModel = tempArray[i]
if (chatModel.headerClientId === event.senderId) {
chatModel.chatList.push(privateChatModel)
}
}
this.setState({
chatModelList: tempArray
})
console.log("====================",this.state.chatModelList)
// increment ChatCount
if (!this.state.isChatViewVisible) {
var tempParticipantArray = []
if (this.state.participantList.length > 0) {
tempParticipantArray = this.state.participantList
}
for (var i = 0; i < tempParticipantArray.length; i++) {
if (tempParticipantArray[i].clientId === event.senderId) {
tempParticipantArray[i].chatCount = tempParticipantArray[i].chatCount + 1;
break;
}
}
this.setState({
participantList: tempParticipantArray
})
}
this.forceUpdate()
},
//{"createdAt": "1663139026226", "dlimit": "10", "expiresAt": "1663225426226", "name": "Screenshot 2022-09-07 at 6.18.57 PM (3).png", "size": "425690KB", "speed": "91017.74641864444", "time": "4677", "timeLimit": "86400", "upJobId": "0"}
fileUploaded: event => {
console.log("fileUploaded", event);
try{
// updated message in group chat Model
var recId
if(this.state.chatType==='group'){//
recId = "Group Chat"
var tempArray = []
tempArray = this.state.groupChatModel
for(var i = 0;i<tempArray.length;i++){
var model = tempArray[i]
var fileShareModel = model.fileShareModel
if(fileShareModel!=null && fileShareModel.fileName===event.name){
model.message = "You shared a file File: " + event.name
}
}
this.setState({groupChatModel:tempArray})
}else{ // updated message in private chat
recId = this.state.participantClientId
var tempArray = []
tempArray = this.state.privateChatModel
for(var i = 0;i<tempArray.length;i++){
var model = tempArray[i]
var fileShareModel = model.fileShareModel
if(fileShareModel!=null && fileShareModel.fileName===event.name){
model.message = "You shared a file File: " + event.name
}
}
this.setState({privateChatModel:tempArray})
}
// var tempArray = []
// if(this.state.chatModelList.length>0){
// tempArray = this.state.chatModelList
// }
// for(var i = 0 ; i<tempArray.length;i++){
// var chatModel = tempArray[i]
// if(chatModel.headerClientId ===recId){
// var tempChatModel = chatModel.chatList
// for(var i = 0;i<tempChatModel.length;i++){
// var model = tempChatModel[i]
// var fileShareModel = model.fileShareModel
// if(fileShareModel!=null && fileShareModel.fileName===event.name){
// model.message = "You shared a file File: " + event.name
// }
// }
// }
// }
// this.setState({
// chatModelList: tempArray
// })
this.forceUpdate()
}catch(err){
console.log("Error: ",err.message)
}
},
fileUploadFailed: event => {
console.log("fileUploadFailed", event);
try{
// updated message in group chat Model
var recId
if(this.state.chatType==='group'){//
recId = "Group Chat"
var tempArray = []
tempArray = this.state.groupChatModel
for(var i = 0;i<tempArray.length;i++){
var model = tempArray[i]
var fileShareModel = model.fileShareModel
if(fileShareModel!=null && fileShareModel.fileName===event.name){
model.message = "File" + "Your file: " + event.name + "upload Failed"
}
}
this.setState({groupChatModel:tempArray})
}else{ // updated message in private chat
recId = this.state.participantClientId
var tempArray = []
tempArray = this.state.privateChatModel
for(var i = 0;i<tempArray.length;i++){
var model = tempArray[i]
var fileShareModel = model.fileShareModel
if(fileShareModel!=null && fileShareModel.fileName===event.name){
model.message = "File" + "Your file: " + event.name + "upload Failed"
}
}
this.setState({privateChatModel:tempArray})
}
// var tempArray = []
// if(this.state.chatModelList.length>0){
// tempArray = this.state.chatModelList
// }
// for(var i = 0 ; i<tempArray.length;i++){
// var chatModel = tempArray[i]
// if(chatModel.headerClientId ===recId){
// var tempChatModel = chatModel.chatList
// for(var i = 0;i<tempChatModel.length;i++){
// var model = tempChatModel[i]
// var fileShareModel = model.fileShareModel
// if(fileShareModel!=null && fileShareModel.fileName===event.name){
// model.message = "You shared a file File: " + event.name
// }
// }
// }
// }
// this.setState({
// chatModelList: tempArray
// })
this.forceUpdate()
}catch(err){
console.log("Error: ",err.message)
}
},
fileDownloaded: event => {
console.log("fileDownloaded "+Platform.OS, event);
try{
this.setState({isVisibleProgressDialog:false})
if (Platform.OS === 'android') {
ToastAndroid.show("File downloaded successfully at "+event.data, ToastAndroid.LONG)
} else {
AlertIOS.alert("File downloaded successfully at "+event.data);
}
}catch(err){
console.log("Error: "+err.message)
}
},
fileDownloadFailed: event => {
console.log("fileDownloadFailed", event);
try{
this.setState({isVisibleProgressDialog:false})
if (Platform.OS === 'android') {
ToastAndroid.show("Fail to download file.Please try again later", ToastAndroid.LONG)
} else {
AlertIOS.alert("Fail to download file.Please try again later");
}
}catch(err){
console.log("Error: "+err.message)
}
},
initFileDownload:event=>{
console.log("initFileDownload", event);
try{
this.setState({isVisibleProgressDialog:true})
}catch(err){
console.log("Error: "+err.message)
}
},
fileUploadCancelled: event => {
console.log("fileUploadCancelled", event);
},
fileDownloadCancelled: event => {
console.log("fileDownloadCancelled", event);
},
getRoomMetadata: event => {
console.log("getRoomMetadataaaaa", event);
},
whoAmI: event => {
console.log("whoAmIIII", event);
},
getUserList: event => {
console.log("getUserListtttt", event);
},
getReceiveVideoQuality: event => {
console.log("getReceiveVideoQualityyyy", event);
},
getClientName: event =>{
console.log("getClientNameeeeeee", event);
},
isRoomActiveTalker: event =>{
console.log("isRoomActiveTalkerrrrrr", event);
},
getRoomId: event =>{
console.log("getRoomIdddddddd", event);
},
getClientId: event => {
console.log("getClientIdddddd", event);
},
ackLockRoom: event =>{
console.log("ackLockRoommmm", event);
},
lockedRoom: event =>{
console.log("lockedRoommmm", event);
},
ackUnLockRoom: event =>{
console.log("ackUnLockRoommmm", event);
},
unLockedRoom: event =>{
console.log("unLockedRoommmm", event);
},
ackDestroyRoom: event=> {
console.log("ackDestroyRoommmmm", event);
},
ackDropUser: event => {
console.log("ackDropUserrrrr", event);
},
conferencessExtended: event =>{
console.log("conferencessExtendeddddd", event);
},
roomAwaited: event =>{
console.log("roomAwaited", event);
this.setState({isRoomAwaited:true})
},
ackForApproveAwaitedUser: event =>{
console.log("ackForApproveAwaitedUser", event);
},
ackForDenyAwaitedUser: event =>{
console.log("ackForDenyAwaitedUser", event);
},
userAwaited: event =>{
console.log("userAwaited", event);
this.state.awaitedParticipantList.push(
{name:event.name,
clientId: event.clientId})
},
startAnnotationAck: event =>{
console.log("startAnnotationACKkkkkkk", event);
this.setState({isRequestIntiatedForAnnotation:false})
this.setState({ toolBarCheck: true });
},
stoppedAnnotationAck: event =>{
console.log("stopAnnotationACKkkkkkk", event);
this.updateValue()
},
annotationStarted: event => {
console.log("annotationStarteddddddd", event);
this.setState({mActiveStreamId: event.streamId })
this.setState({annotationStreamId:String(event.streamId)});
this.updateUIToReceiveShare()
//this.setState({ annotationCheck: true });
},
annotationStopped: event => {
console.log("annotationStopped", event);
this.setState({mActiveStreamId: null })
this.updateUIWhenShareClose()
},
// handle events for Talker Notification
ackSubscribeTalkerNotification: event => {
console.log("============Ack Subscription=============", event);
},
ackUnsubscribeTalkerNotification: event => {
console.log("Ack Unsubscription", event);
},
talkerNotification: event => {
console.log("Receive Talker Noti", event);
},
// hanlde events for Break Out Room
ackCreateBreakOutRoom: event => {
console.log("========================Ack create Breakout Room===========================", event);
},
ackCreateAndInviteBreakOutRoom: event => {
console.log("Ack create Invite Breakout Room", event);
},
ackInviteBreakOutRoom: event => {
console.log("Ack Invite Breakout Room", event);
},
ackPause: event => {
console.log("Ack Pause", event);
},
ackResume: event => {
console.log("Ack Resume", event);
},
ackMuteRoom: event => {
console.log("Ack Mute Room", event);
},
ackUnmuteRoom: event => {
console.log("Ack Unmute Room", event);
},
failedJoinBreakOutRoom: event => {
console.log("Fail To Join Break out Room", event);
},
connectedBreakoutRoom: event => {
console.log("Connected Breakout Room", event);
},
disconnectedBreakoutRoom: event => {
console.log("Disconnected Breakout Room", event);
},
userJoinedBreakoutRoom: event => {
console.log("User joined Breakout Room", event);
},
invitationForBreakoutRoom: event => {
console.log("Invitation Breakout Room", event);
},
destroyedBreakoutRoom: event => {
console.log("Destroy Breakout Room", event);
},
userDisconnectedFromBreakoutRoom: event => {
console.log("User Disconnected Breakout Room", event);
},
// events for pre call test
clientDiagnosisFailed: event => {
console.log("Pre call test Fail", event);
},
clientDiagnosisStopped: event => {
console.log("Pre call test stopped", event);
},
clientDiagnosisFinished: event => {
console.log("Pre call test Finished", event);
},
clientDiagnosisStatus: event => {
console.log("Pre call test Fail", event);
},
ackAddSpotlightUsers: event => {
console.log("Add spot light", event);
},
ackRemoveSpotlightUsers: event => {
console.log("remove spotlight", event);
},
updateSpotlightUsers: event => {
console.log("update spotlight", event);
},
ackSwitchedRoom: event => {
console.log("ackSwitchedRoom", event);
},
roomModeSwitched: event => {
console.log("roomModeSwitched", event);
},
// Live Recording
aCKStartLiveRecording: event => {
console.log("aCKStartLiveRecording", event);
},
aCKStopLiveRecording: event => {
console.log("aCKStopLiveRecording", event);
},
liveRecordingNotification: event => {
console.log("liveRecordingNotification", event);
},
roomliverecordOn: event => {
console.log("roomliverecordOn", event);
},
// Out Bound Call
outBoundCallInitiated: event => {
console.log("outBoundCallInitiated", event);
},
dialStateEvents: event => {
console.log("dialStateEvents", event);
},
dTMFCollected: event => {
con