bigbluebutton-strapi
Version:
Integrate online classes into Strapi CMS via BigBlueButton open-source video conferencing. This free plugin also provides API end-points to easily setup start and join buttons for web conferencing into any frontend app.
150 lines (134 loc) • 4.71 kB
HTML
<html>
<head>
<title>Join BigBlueButton Class</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
html {
font-size: 62.5%;
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
background-color: #ffffff;
font-family: 'Lato';
font-size: 1.4rem;
font-weight: 400;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.join {
height: 100%;
background-color: #F6F9FC;
}
.join .join-form {
height: calc(100% - 70px);
padding: 68px 0 0;
text-align: center;
}
.join .join-form form {
position: relative;
max-width: 460px;
padding: 26px 30px;
margin: 55px auto 0;
background-color: #ffffff;
border-radius: 3px;
box-shadow: 0px 2px 4px rgba(91, 107, 174, .15);
text-align: center;
}
.join .join-form form:before {
position: absolute;
content: '';
top: 0px;
left: 0;
display: inline-block;
width: 100%;
height: 2px;
background-color: #2B66CC;
}
.join .join-form form .error {
display: block;
color: #FF4E00;
padding-bottom: 20px;
}
.join .join-form .sub-title {
margin-top: 35px;
font-size: 1.6rem;
font-weight: 400;
}
.join .join-form .logo {
max-height: 40px;
}
.join .join-form form label {
display: block;
margin-bottom: 18px;
width: 100%;
text-align: left;
font-weight: 600;
}
.join .join-form form input {
outline: none;
width: calc(100% - 30px);
height: 36px;
padding: 0 15px;
border: 1px solid #ECECEC;
border-radius: 2px;
margin-bottom: 20px;
line-height: 36px;
text-align: left;
}
.join .join-form form input[type=button] {
cursor: pointer;
display: inline-block;
width: auto;
margin: 12px auto 0;
padding: 0 75px;
background: transparent;
border-radius: 36px;
border: 1px solid #2B66CC;
color: #2B66CC;
text-transform: uppercase;
font-size: 1.4rem;
font-weight: 700;
transition: all .2s ease-out;
}
.join .join-form form input[type=button]:hover {
background: #2B66CC;
color: #ffffff;
}
</style>
</head>
<body>
<div class="join">
<section class="join-form">
<div>
<h2>Join <%=className%>
</h2>
<form name="join">
<input id="name" type="text" name="name" placeholder="Enter your name">
<span class="error" id="nameError" style="display:none">Please enter the name</span>
<input id="code" type="test" name="accessCode" placeholder="Enter your access code">
<span class="error" id="codeError" style="display:none">Wrong access code</span>
<span class="error" id="meeting" style="display:none">Your class has not started yet.<br />You would
join automatically as soon as it starts.</span>
<div class="d-flex justify-content-center">
<div class="spinner-border text-primary" role="status"
style="display:none;width: 3rem; height: 3rem;" id="WaitingButton">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<input type="button" value="Join Class" id="joinbbb">
</form>
<input id="meetingId" value="<%=meetingId%>" hidden>
</div>
</section>
</div>
<script src="<%=backendUrl%>/plugins/bigbluebutton/static/bbb.js"> </script>
</body>
</html>