I am in process of upgrading to new meeting sdk type app, integration is done but styling has bug and its affecting the normal function and UI due to it. Some buttons are clickable and some are not, due to styling issue. Like the leave button or turn video on/off button are not working because of UI misalignment and overlapping it seems. Here is the screenshot
Following is my code:
import { useEffect } from 'react';
import { apiReq } from '../redux/methods/RequestMethods';
import { useRouter } from 'next/router';
import { authonticateAccess } from '../helpers/accessHelper';
import { SetMeetingLoader } from '../redux/actions/sessionAction';
import { useDispatch } from 'react-redux';
//push
const Meeting = () => {
const router = useRouter();
const dispatch = useDispatch();
console.log(router.query)
const {meetingNumber, password, name, leaveUrl, endTime} = router.query;
useEffect(()=>{
console.log("USE EFFECT", meetingNumber, password, name, leaveUrl)
const connToZoom = async () => {
await joinZoomMeeting(meetingNumber, password, name, leaveUrl, endTime);
SetMeetingLoader(false, dispatch);
};
if(window!== undefined){
if(window.fcWidget) window.fcWidget.hide();
}
if(meetingNumber && password && name && leaveUrl) {
console.log("mylog loading")
SetMeetingLoader(true, dispatch);
connToZoom();
}
},[]);
const joinZoomMeeting = async (meetingNumber, password, name, leaveUrl, endTime) => {
console.log("JOIN ZOOM MEET")
const apiKeyResponse = await apiReq(`${process.env.BASE_URL}/api/images`, "GET");
console.log(apiKeyResponse, "APIKEY")
const loadZoom = async () => {
const loadedZoom = await import('@zoomus/websdk');
return loadedZoom;
}
const loadedZoom = await loadZoom();
const ZoomMtg = window.ZoomMtg;
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.11.0/lib', '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
const meetingConfig = {
sdkKey:"lAzXXLSJQyKbYI1xZwqQOw",
meetingNumber: meetingNumber,
userName: name? name : "learner",
passWord: password,
leaveUrl,
role: 0,
tk: '',
};
// console.log(meetingConfig)
const signatureCall = await apiReq("https://dev.clapingo.com/api/session/zoomSignature", "POST", {
meetingNumber: meetingNumber,
role: 0
});
const signature = signatureCall.data.signature
console.log(signature, "SIG")
console.log("leaveURL", meetingConfig.leaveUrl)
ZoomMtg.init({
leaveUrl: 'http://localhost:3000',
isSupportAV: true,
success: () => {
console.log("SIGNATURE SUCCESS")
console.log({
signature: signature,
meetingNumber: meetingConfig.meetingNumber,
userName: meetingConfig.userName,
sdkKey: meetingConfig.sdkKey,
userEmail: '',
passWord: meetingConfig.passWord,
});
ZoomMtg.join({
signature: signature,
meetingNumber: meetingConfig.meetingNumber,
userName: meetingConfig.userName,
sdkKey: meetingConfig.sdkKey,
userEmail: '',
passWord: meetingConfig.passWord,
success: (success) => {
console.log(success);
},
error: (error) => {
console.log(error);
},
});
},
error: (error) => {
console.log("SIGNATURE ERROR")
console.log(error);
},
});
return loadedZoom;
}
}
export default authonticateAccess(Meeting);
