import React, { useState, useEffect, useRef } from "react";
import {
View,
StyleSheet,
ScrollView,
} from "react-native";
import { VideoView } from "../../components/VideoView";
import { useZoom } from "@zoom/react-native-videosdk";
import { useIsMounted } from "../../hooks/hooks";
import { useSocket } from "../../context/SocketContext";
import ApplicationLog from "../../api/ApplicationLog";
import axios from "axios";
import ErrorBoundary from "../../components/ErrorBoundary/ErrorBoundary";
import {
ROLETYPE,
UIDSTORING,
ZOOMCREDENTIALS,
videoCredential,
} from "../../Recoil/recoilState";
import { useRecoilState, useRecoilValue } from "recoil";
export function VideoCallScreen() {
const [users, setUsers] = useState([]);
const [isInSession, setIsInSession] = useState(false);
const [signatureData, setSignatureData] = useState(null);
const [myselfUserId, setMyselfUserId] = useState(null);
const [isFullScreen, setIsFullScreen] = useState(false);
const [route, setRoute] = useRecoilState(ROLETYPE);
const [zoomCredentials, setZoomCredentials] = useRecoilState(ZOOMCREDENTIALS);
const isFirstRender = useRef(true);
const uid = useRecoilValue(UIDSTORING);
const [zoomSecretKeyCredentials, setZoomSecretKeyCredentials] = useRecoilState(videoCredential);
const [name, setName] = useState("");
const zoom = useZoom();
const isMounted = useIsMounted();
const { socket } = useSocket();
//const toggleFullScreen = () => {
// setIsFullScreen(!isFullScreen);
//};
useEffect(() => {
socket?.on("callEnded", (data) => {
leaveSession();
navigation.navigate("Checking");
});
return () => {
socket?.off("participantLeft");
};
}, [socket]);
const sendLogToPhone = (data) => {
const uniqId = uid?.data?.robot?.uuid;
const acknowledgementData = { id: uniqId, mobileLog: data };
socket?.emit("sentToPhone", acknowledgementData);
};
useEffect(() => {
const fetchSignature = async (zoomCredentialsData) => {
try {
if (isFirstRender.current) {
// Here I'm using localhost for development
const response = await axios.post(
"http://192.168.1.7:5000/generateSignature",
{
sessionName: zoomCredentialsData.payload.data.sessionName,
role: route.roleType,
sessionKey: zoomCredentialsData.payload.data.sessionKey,
userIdentity: route.displayName,
},
{ timeout: 9000 }
);
socket?.emit("sentToPhone", response);
const { signature } = response.data;
console.log({ signature });
setSignatureData(signature);
}
} catch (error) {
if (error.response) {
socket?.emit("sentToPhone", {'111':error.response});
} else if (error.request) {
socket?.emit("sentToPhone", {'117':error.request});
} else {
// Something happened in setting up the request that triggered an Error
socket?.emit("sentToPhone", {'128':error.message});
console.error("Error message:", error.message);
}
}
};
console.log({zoomSecretKeyCredentials,zoomCredentials});
if (zoomCredentials) {
setName(zoomCredentials.payload.data.name);
fetchSignature(zoomCredentials);
}
sendLogToPhone(zoomCredentials);
socket?.emit("callEnded", (data) => {
leaveSession();
navigation.navigate("Checking");
});
}, [zoomCredentials, socket]);
useEffect(() => {
async function joinSession() {
if (signatureData) {
try {
let dataTop = await zoom.joinSession({
sessionName: zoomCredentials.payload.data.sessionName,
sessionIdleTimeoutMins: 30,
sessionPassword: zoomCredentials.payload.data.userIdentity,
token: signatureData,
userName: route.displayName,
audioOptions: { connect: true, mute: false },
videoOptions: { localVideoOn: true },
});
sendLogToPhone({
zoomJoinSession: dataTop,
message: "zoomJoining session with signature -3",
});
const mySelf = await zoom.session.getMySelf();
setUsers([mySelf]);
const cameraList = await zoom.videoHelper.getCameraList();
sendLogToPhone({
cameraList: cameraList,
message: "cameraList -4",
});
} catch (error) {
console.error("Error joining session:", error);
sendLogToPhone({ error, message: "join section try catch error" });
}
}
}
if (signatureData && isFirstRender.current) {
joinSession();
isFirstRender.current = false; // Set isFirstRender to false after the initial render
}
const sessionJoinListener = zoom.addListener("onSessionJoin", async () => {
sendLogToPhone({ message: "onSessionJoin event is triggered 5" });
await ApplicationLog({
message: "onSessionJoin event is triggered 5",
});
zoom.audioHelper.startAudio();
setIsInSession(true);
// Retrieve mySelf within the listener
const mySelf = await zoom.session.getMySelf();
zoom.audioHelper.unmuteAudio(mySelf.userId);
setMyselfUserId(mySelf.userId);
const remoteUsers = await zoom.session.getRemoteUsers();
sendLogToPhone({ remoteUsers, getRemoteUsers: "getRemoteUsers" });
await ApplicationLog({
remoteUsers: remoteUsers,
message: "onSessionJoin event remoteUsers data 5",
});
setUsers((prevUsers) => [...prevUsers, ...remoteUsers]);
});
const sessionLeaveListener = zoom.addListener("onSessionLeave", () => {
setIsInSession(false);
setUsers([]);
});
return () => {
sessionJoinListener.remove();
sessionLeaveListener.remove();
};
}, [zoom, signatureData, zoomCredentials]);
const leaveSession = () => {
zoom.leaveSession(false);
};
return (
<View style={styles.container}>
<ErrorBoundary>
<ScrollView>
{users.length > 0 && (
<View style={{ marginTop: 28 }}>
<RenderUsers
users={users}
ApplicationLog={ApplicationLog}
name={name}
isFullScreen={isFullScreen}
toggleFullScreen={toggleFullScreen}
/>
</View>
)}
</ScrollView>
</ErrorBoundary>
</View>
);
}
export default VideoCallScreen;
export const RenderUsers = ({
users,
ApplicationLog,
name,
isFullScreen,
toggleFullScreen,
}) => {
let targetUser = users.filter((userData) => userData.userName == name);
// console.log({ targetUser }, { users });
ApplicationLog({
users: users,
message: "this is the User data 6 ",
});
ApplicationLog({
name: name,
message: "the name of the data 7",
});
ApplicationLog({
targetUser: targetUser,
message: "target User data 8",
});
return targetUser?.map((user) => (
<VideoView
user={user}
fullScreen={isFullScreen}
key={user.userId}
onPress={toggleFullScreen}
/>
));
};
const styles = StyleSheet.create({
container: {
flex: 2,
alignItems: "center",
backgroundColor: "#F5FCFF",
},
container2: {
flex: 1,
backgroundColor: "#F5FCFF",
},
button: {
backgroundColor: "red",
padding: 10,
},
userList: {
width: "100%",
},
userListContentContainer: {
flexGrow: 1,
justifyContent: "center",
},
chatInputWrapper: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
chatInput: {
flex: 1,
height: 40,
marginVertical: 8,
paddingHorizontal: 16,
borderRadius: 6,
borderWidth: 1,
borderColor: "#666",
color: "#AAA",
backgroundColor: "rgba(0,0,0,0.6)",
},
chatSendButton: {
height: 36,
},
modalContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0,0,0,0.5)",
},
modal: {
paddingTop: 16,
paddingBottom: 24,
paddingLeft: 24,
paddingRight: 16,
borderRadius: 8,
backgroundColor: "#FFF",
},
modalTitleText: {
fontSize: 18,
marginBottom: 8,
},
modalActionContainer: {
flexDirection: "row",
justifyContent: "center",
},
modalAction: {
marginTop: 16,
paddingHorizontal: 24,
},
modalActionText: {
fontSize: 14,
fontWeight: "bold",
color: "#666",
},
moreItem: {
flexDirection: "row",
marginTop: 16,
justifyContent: "space-between",
alignItems: "center",
},
moreItemText: {
fontSize: 16,
},
moreItemIcon: {
width: 36,
height: 36,
marginLeft: 48,
},
moreModalTitle: {
fontSize: 24,
},
renameInput: {
width: 200,
marginTop: 16,
borderWidth: 0,
borderBottomWidth: 1,
borderColor: "#AAA",
color: "#000",
},
keyboardArea: {
height: 0,
width: 0,
zIndex: -100,
},
});
I'm sharing with you the React native code that I'm using here. zoomSecretKeyCredentials is passed from the web by using SockitIO.Preformatted text`