import React, { useEffect, useState } from “react”;
import { CgDisplayFullwidth } from “react-icons/cg”;
import { OverlayTrigger, Tooltip } from “react-bootstrap”;
import $ from “jquery”;
import { ZoomMtg } from “@zoomus/websdk”;
import “./ZoomWebinarStyles.css”;
const ZoomWebinar = (props) => {
const [meetingLaunched, setMeetingLaunched] = useState(false);
const [fullScreen, setFullScreen] = useState(false);
const [fullScreenButtonShow, setFullScreenButtonShow] = useState(true);
const { meetingNumber, passWord, userName } = props;
const meetConfig = {
apiKey: API_KEY,
apiSecret: API_SECRET,
meetingNumber: meetingNumber,
userName: userName,
passWord: passWord,
leaveUrl: window.location.href,
role: 0,
};
const launchMeeting = () => {
setMeetingLaunched(!meetingLaunched);
ZoomMtg.generateSignature({
meetingNumber: meetConfig.meetingNumber,
apiKey: meetConfig.apiKey,
apiSecret: meetConfig.apiSecret,
role: meetConfig.role,
success(res) {
console.log("signature", res.result);
$("#nav - tool").hide();
ZoomMtg.init({
leaveUrl: window.location.href,
success() {
ZoomMtg.join({
meetingNumber: meetConfig.meetingNumber,
userName: meetConfig.userName,
signature: res.result,
apiKey: meetConfig.apiKey,
userEmail: "email@gmail.com",
passWord: meetConfig.passWord,
success() {
setFullScreenButtonShow(false);
console.log("join meeting success");
},
error(res) {
console.log(res);
},
});
},
error(res) {
console.log(res);
},
});
},
});
};
const handleFullScreen = () => {
setFullScreen(!fullScreen);
const zoom = document.getElementById(“zmmtg-root”);
document.getElementById(“show-sidebar”).display = “none”;
document.getElementById(“sidebar”).display = “none”;
const root = document.getElementsByClassName(“root-inner”)[0];
if (fullScreen === false) {
zoom.classList.remove(“zoom”);
document.getElementById(“show-sidebar”).style.display = “none”;
document.getElementById(“sidebar”).style.display = “none”;
} else {
zoom.classList.add(“zoom”);
document.getElementById(“show-sidebar”).style.display = “block”;
document.getElementById(“sidebar”).style.display = “block”;
}
if (fullScreen === false) {
root.classList.add(“fullRoot”);
} else {
root.classList.remove(“fullRoot”);
}
};
useEffect(() => {
document.body.addEventListener(“keydown”, function (event, callback) {
const code = event.keyCode;
if (code !== undefined && code == 27) {
document.getElementById(“fullscreen-btn”).click();
}
});
ZoomMtg.setZoomJSLib(“https://source.zoom.us/1.9.6/lib”, “/av”);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
launchMeeting();
const zoom = document.getElementById("zmmtg-root");
zoom.classList.add("zoom");
const fullScreenBtn = document.getElementsByClassName(
"zoom-button-wrapper"
)[0];
const zoomRoot = document.getElementById("zmmtg-root");
zoomRoot.appendChild(fullScreenBtn);
zoomRoot.style.display = "block";
if (window.innerWidth < 768) {
handleFullScreen();
}
renderTooltip();
return () => {
const zoomRoot = document.getElementById("zmmtg-root");
zoomRoot.style.display = "none";
};
}, );
const renderTooltip = (props) => {
// if (fullScreenButtonShow == false) {
return (
<Tooltip id=“button-tooltip” {…props}>
{fullScreenButtonShow == false ? “Click here for more options” : “”}
);
// }
};
return (
<div
style={
fullScreenButtonShow == false ? { opacity: “1” } : { opacity: “0” }
}
className=“zoom-button-wrapper”
id=“fullscreen-btn”
onClick={handleFullScreen}
>
<OverlayTrigger
defaultShow={true}
placement=“right”
delay={{ show: 240, hide: 600 }}
overlay={renderTooltip}
>
);
};
export default ZoomWebinar;