BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
f3a18e250c
bigbluebutton-Github/bigbluebutton-html5/private/static/guest-wait/guest-wait.html

394 lines
12 KiB
HTML
Raw Normal View History

Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
<!DOCTYPE html>
<html>
lint
2021-05-21 19:23:47 +08:00
Move guest wait from bbb-client to bbb-html
2020-07-03 04:14:49 +08:00
<head>
wcag 2.1 access update to guest-waiting room
2021-09-20 06:09:49 +08:00
<title>BigBlueButton - Guest Lobby</title>
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
<meta charset="UTF-8">
<style>
style(guest wait): adjust font Adds client's font to the guest's waiting page.
2021-10-07 22:13:13 +08:00
/* vietnamese */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
url('fonts/SourceSansPro/SourceSansPro-Light.woff') format('woff');
unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
url('fonts/SourceSansPro/SourceSansPro-Light.woff') format('woff');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
url('fonts/SourceSansPro/SourceSansPro-Light.woff') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
lint
2021-05-21 19:23:47 +08:00
:root {
--enableAnimation: 1;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #06172A;
height: 100vh;
margin: 0;
}
#content {
text-align: center;
color: white;
font-weight: bold;
font-size: 24px;
style(guest wait): adjust font Adds client's font to the guest's waiting page.
2021-10-07 22:13:13 +08:00
font-family: 'Source Sans Pro', arial, sans-serif;
lint
2021-05-21 19:23:47 +08:00
}
wcag 2.1 access update to guest-waiting room
2021-09-20 06:09:49 +08:00
#content h1 {
font-size: 2rem;
}
lint
2021-05-21 19:23:47 +08:00
.spinner {
margin: 20px auto;
style(guest wait): loading dots Adjusts guest waiting page loading dots to be the same as the one displayed at the client.
2021-10-05 03:21:36 +08:00
font-size: 0px;
lint
2021-05-21 19:23:47 +08:00
}
.spinner .bounce1 {
animation-delay: -0.32s;
}
.spinner .bounce2 {
animation-delay: -0.16s;
}
.spinner>div {
style(guest wait): loading dots Adjusts guest waiting page loading dots to be the same as the one displayed at the client.
2021-10-05 03:21:36 +08:00
width: 18px;
height: 18px;
margin: 0 5px;
lint
2021-05-21 19:23:47 +08:00
background-color: rgb(255, 255, 255);
display: inline-block;
border-radius: 100%;
animation: sk-bouncedelay calc(var(--enableAnimation) * 1.4s) infinite ease-in-out both;
}
Add position in waiting queue for guest users
2022-01-12 11:08:43 +08:00
#positionInWaitingQueue {
align-items: center;
text-align: center;
}
lint
2021-05-21 19:23:47 +08:00
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0)
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
}
lint
2021-05-21 19:23:47 +08:00
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
40% {
lint
2021-05-21 19:23:47 +08:00
-webkit-transform: scale(1.0)
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
}
lint
2021-05-21 19:23:47 +08:00
}
@keyframes sk-bouncedelay {
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
lint
2021-05-21 19:23:47 +08:00
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
}
lint
2021-05-21 19:23:47 +08:00
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
40% {
lint
2021-05-21 19:23:47 +08:00
-webkit-transform: scale(1.0);
transform: scale(1.0);
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
}
lint
2021-05-21 19:23:47 +08:00
}
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
</style>
Add guest lobby messages Moderators are able to send a message to the meeting's guest lobby. This new event reaches bbb-web and is sent to the guest user with her/his status response while polling. All guest users that are waiting for acceptance will be able to read this message. enableGuestLobbyMessage is disabled by default.
2020-10-03 01:29:27 +08:00
localize guest wait page
2021-05-21 02:03:15 +08:00
<script type="text/javascript">
let messages = {};
feature(bbb-html5): localize guest-wait.html This introduces initial translations for the guest-wait pages. The only supported languages are en and de for now. Needs a concept to hook it up with transifex.
2021-04-30 00:55:15 +08:00
localize guest wait page
2021-05-21 02:03:15 +08:00
function _(message) {
return messages[message];
}
feature(bbb-html5): localize guest-wait.html This introduces initial translations for the guest-wait pages. The only supported languages are en and de for now. Needs a concept to hook it up with transifex.
2021-04-30 00:55:15 +08:00
Improve guest lobby feedback Included a message and a redirect for the cases where the guest is not allowed to join or the meeting has expired/ended.
2021-03-30 09:17:59 +08:00
const REDIRECT_TIMEOUT = 15000;
add approved redirect message in guest wait page
2021-09-29 10:13:31 +08:00
const MESSAGE_TIMEOUT = 3000;
Improve guest lobby feedback Included a message and a redirect for the cases where the guest is not allowed to join or the meeting has expired/ended.
2021-03-30 09:17:59 +08:00
Move guest wait from bbb-client to bbb-html
2020-07-03 04:14:49 +08:00
function updateMessage(message) {
Remove JQuery
2020-07-07 04:07:55 +08:00
document.querySelector('#content > p').innerHTML = message;
Move guest wait from bbb-client to bbb-html
2020-07-03 04:14:49 +08:00
}
Improve guest lobby feedback Included a message and a redirect for the cases where the guest is not allowed to join or the meeting has expired/ended.
2021-03-30 09:17:59 +08:00
let lobbyMessage = '';
Add guest lobby messages Moderators are able to send a message to the meeting's guest lobby. This new event reaches bbb-web and is sent to the guest user with her/his status response while polling. All guest users that are waiting for acceptance will be able to read this message. enableGuestLobbyMessage is disabled by default.
2020-10-03 01:29:27 +08:00
function updateLobbyMessage(message) {
if (message !== lobbyMessage) {
lobbyMessage = message;
if (lobbyMessage.length !== 0) {
updateMessage(lobbyMessage);
} else {
localize guest wait page
2021-05-21 02:03:15 +08:00
updateMessage(_('app.guest.guestWait'));
Add guest lobby messages Moderators are able to send a message to the meeting's guest lobby. This new event reaches bbb-web and is sent to the guest user with her/his status response while polling. All guest users that are waiting for acceptance will be able to read this message. enableGuestLobbyMessage is disabled by default.
2020-10-03 01:29:27 +08:00
}
}
}
Add position in waiting queue for guest users
2022-01-12 11:08:43 +08:00
function updatePositionOnPage(message, currentPosition) {
document.querySelector('#positionInWaitingQueue > p').innerHTML = message + currentPosition;
}
function stopUpdatingWaitingPosition() {
document.querySelector('#positionInWaitingQueue > p').innerHTML = '';
}
let positionInWaitingQueue = '';
function updatePositionInWaitingQueue(newPositionInWaitingQueue) {
if (positionInWaitingQueue !== newPositionInWaitingQueue) {
Fix message 'You are the first in the line'
2023-12-14 04:09:20 +08:00
positionInWaitingQueue = newPositionInWaitingQueue.toString();
Add position in waiting queue for guest users
2022-01-12 11:08:43 +08:00
if (positionInWaitingQueue === '1') {
updatePositionOnPage(_('app.guest.firstPositionInWaitingQueue'), '');
} else {
updatePositionOnPage(_('app.guest.positionInWaitingQueue'), positionInWaitingQueue);
}
}
}
fix(guests): max participants Waiting users shouldn't count as valid participants at the meeting's `maxParticipants` constraint. Avoid calling `enter` at the waiting page. Reference https://github.com/bigbluebutton/bigbluebutton/pull/10542
2021-09-28 19:31:18 +08:00
function getSearchParam(name) {
const params = new URLSearchParams(window.location.search);
get overrideLocale param from api
2021-08-03 04:08:32 +08:00
fix(guests): max participants Waiting users shouldn't count as valid participants at the meeting's `maxParticipants` constraint. Avoid calling `enter` at the waiting page. Reference https://github.com/bigbluebutton/bigbluebutton/pull/10542
2021-09-28 19:31:18 +08:00
if (params && params.has(name)) {
const param = params.get(name);
get overrideLocale param from api
2021-08-03 04:08:32 +08:00
fix(guests): max participants Waiting users shouldn't count as valid participants at the meeting's `maxParticipants` constraint. Avoid calling `enter` at the waiting page. Reference https://github.com/bigbluebutton/bigbluebutton/pull/10542
2021-09-28 19:31:18 +08:00
return param;
get overrideLocale param from api
2021-08-03 04:08:32 +08:00
}
fix(guests): max participants Waiting users shouldn't count as valid participants at the meeting's `maxParticipants` constraint. Avoid calling `enter` at the waiting page. Reference https://github.com/bigbluebutton/bigbluebutton/pull/10542
2021-09-28 19:31:18 +08:00
return null;
get overrideLocale param from api
2021-08-03 04:08:32 +08:00
}
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
function getClientJoinUrl() {
const joinEndpoint = '/html5client/join';
const sessionToken = getSearchParam('sessionToken');
const url = new URL(`${window.location.origin}${joinEndpoint}`);
url.search = `sessionToken=${sessionToken}`;
return url;
}
get overrideLocale param from api
2021-08-03 04:08:32 +08:00
async function fetchLocalizedMessages() {
localize guest wait page
2021-05-21 02:03:15 +08:00
const DEFAULT_LANGUAGE = 'en';
const LOCALES_ENDPOINT = '/html5client/locale';
const url = new URL(`${window.location.origin}${LOCALES_ENDPOINT}`);
fix(guests): max participants Waiting users shouldn't count as valid participants at the meeting's `maxParticipants` constraint. Avoid calling `enter` at the waiting page. Reference https://github.com/bigbluebutton/bigbluebutton/pull/10542
2021-09-28 19:31:18 +08:00
const overrideLocale = getSearchParam('locale');
get overrideLocale param from api
2021-08-03 04:08:32 +08:00
url.search = overrideLocale
? `locale=${overrideLocale}`
: `locale=${navigator.language}&init=true`;
wcag 2.1 access update to guest-waiting room
2021-09-20 06:09:49 +08:00
document.getElementsByTagName('html')[0].lang = overrideLocale || navigator.language;
localize guest wait page
2021-05-21 02:03:15 +08:00
const localesPath = 'locales';
fetch(url)
.then((response) => {
if (!response.ok) {
return false;
}
return response.json();
})
.then(({ normalizedLocale, regionDefaultLocale }) => {
const fetchFallbackMessages = new Promise((resolve, reject) => {
fetch(`${localesPath}/${DEFAULT_LANGUAGE}.json`)
.then((response) => {
if (!response.ok) {
return reject();
}
return resolve(response.json());
});
});
const fetchRegionMessages = new Promise((resolve) => {
if (!regionDefaultLocale) {
return resolve(false);
}
fetch(`${localesPath}/${regionDefaultLocale}.json`)
.then((response) => {
if (!response.ok) {
return resolve(false);
}
prevent endless loop if locale file is invalid json
2021-08-26 00:12:38 +08:00
return response.json()
.then((jsonResponse) => resolve(jsonResponse))
.catch(() => {
resolve(false);
});
localize guest wait page
2021-05-21 02:03:15 +08:00
});
});
const fetchSpecificMessages = new Promise((resolve) => {
if (!normalizedLocale || normalizedLocale === DEFAULT_LANGUAGE || normalizedLocale === regionDefaultLocale) {
return resolve(false);
}
fetch(`${localesPath}/${normalizedLocale}.json`)
.then((response) => {
if (!response.ok) {
return resolve(false);
}
prevent endless loop if locale file is invalid json
2021-08-26 00:12:38 +08:00
return response.json()
.then((jsonResponse) => resolve(jsonResponse))
.catch(() => {
resolve(false);
});
localize guest wait page
2021-05-21 02:03:15 +08:00
});
});
Promise.all([fetchFallbackMessages, fetchRegionMessages, fetchSpecificMessages])
.then((values) => {
let mergedMessages = Object.assign({}, values[0]);
if (!values[1] && !values[2]) {
normalizedLocale = DEFAULT_LANGUAGE;
} else {
if (values[1]) {
mergedMessages = Object.assign(mergedMessages, values[1]);
}
if (values[2]) {
mergedMessages = Object.assign(mergedMessages, values[2]);
}
}
messages = mergedMessages;
window.document.title = _('app.guest.windowTitle');
localize guest wait page heading
2021-10-09 16:46:10 +08:00
document.querySelector('#heading').innerHTML = _('app.guest.windowTitle');
localize guest wait page
2021-05-21 02:03:15 +08:00
updateMessage(_('app.guest.guestWait'));
enableAnimation();
try {
fix(guests): max participants Waiting users shouldn't count as valid participants at the meeting's `maxParticipants` constraint. Avoid calling `enter` at the waiting page. Reference https://github.com/bigbluebutton/bigbluebutton/pull/10542
2021-09-28 19:31:18 +08:00
const sessionToken = getSearchParam('sessionToken');
localize guest wait page
2021-05-21 02:03:15 +08:00
if (!sessionToken) {
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
disableAnimation();
localize guest wait page
2021-05-21 02:03:15 +08:00
updateMessage(_('app.guest.noSessionToken'));
return;
}
saving user-status for future reload changed the loading message to be more understandable ... ...
2022-05-17 03:17:10 +08:00
pollGuestStatus(sessionToken, 0);
localize guest wait page
2021-05-21 02:03:15 +08:00
} catch (e) {
disableAnimation();
console.error(e);
updateMessage(_('app.guest.errorSeeConsole'));
}
})
.catch((e) => {
console.error(e);
});
});
lint
2021-05-21 19:23:47 +08:00
}
localize guest wait page
2021-05-21 02:03:15 +08:00
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
function fetchUserCurrent(sessionToken) {
const GUEST_WAIT_ENDPOINT = '/api/rest/usercurrent/';
fix(guests): max participants Waiting users shouldn't count as valid participants at the meeting's `maxParticipants` constraint. Avoid calling `enter` at the waiting page. Reference https://github.com/bigbluebutton/bigbluebutton/pull/10542
2021-09-28 19:31:18 +08:00
const url = new URL(`${window.location.origin}${GUEST_WAIT_ENDPOINT}`);
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
const headers = new Headers({
'X-Session-Token': sessionToken,
'Content-Type': 'application/json',
});
return fetch(url, { method: 'get', headers: headers });
Improve guest lobby feedback Included a message and a redirect for the cases where the guest is not allowed to join or the meeting has expired/ended.
2021-03-30 09:17:59 +08:00
};
function redirect(message, url) {
disableAnimation();
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
stopUpdatingWaitingPosition();
Improve guest lobby feedback Included a message and a redirect for the cases where the guest is not allowed to join or the meeting has expired/ended.
2021-03-30 09:17:59 +08:00
updateMessage(message);
setTimeout(() => {
window.location = url;
}, REDIRECT_TIMEOUT);
Move guest wait from bbb-client to bbb-html
2020-07-03 04:14:49 +08:00
};
Remove guest attempts limit on guestWait endpoint
2022-01-19 04:03:01 +08:00
function pollGuestStatus(token, everyMs) {
Move guest wait from bbb-client to bbb-html
2020-07-03 04:14:49 +08:00
lint
2021-05-21 19:23:47 +08:00
setTimeout(function () {
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
fetchUserCurrent(token)
.then(async (resp) => await resp.json())
.then((data) => {
if(data.hasOwnProperty('error') || !data.hasOwnProperty('user_current')) {
disableAnimation();
stopUpdatingWaitingPosition();
updateMessage(_('app.guest.guestInvalid'));
return;
}
const userData = data.user_current[0];
Improve guest lobby feedback Included a message and a redirect for the cases where the guest is not allowed to join or the meeting has expired/ended.
2021-03-30 09:17:59 +08:00
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
if (userData.guestStatus === 'ALLOW') {
updateLobbyMessage(_('app.guest.allow'));
stopUpdatingWaitingPosition();
saving user-status for future reload changed the loading message to be more understandable ... ...
2022-05-17 03:17:10 +08:00
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
// Timeout is required by accessibility to allow viewing of the message for a minimum of 3 seconds
// before redirecting.
setTimeout(() => {
disableAnimation();
window.location = getClientJoinUrl();
}, MESSAGE_TIMEOUT);
return;
}
saving user-status for future reload changed the loading message to be more understandable ... ...
2022-05-17 03:17:10 +08:00
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
if (userData.guestStatus === 'DENY') {
stopUpdatingWaitingPosition();
Fix unreachable line
2023-12-13 20:30:47 +08:00
return redirect(_('app.guest.guestDeny'), userData.meeting.logoutUrl);
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
}
Improve guest lobby feedback Included a message and a redirect for the cases where the guest is not allowed to join or the meeting has expired/ended.
2021-03-30 09:17:59 +08:00
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
if (userData.guestStatus === 'WAIT') {
//Wait message will be set by `updateLobbyMessage`
//updateMessage(updateMessage(_('app.guest.guestWait')));
}
Improve guest lobby feedback Included a message and a redirect for the cases where the guest is not allowed to join or the meeting has expired/ended.
2021-03-30 09:17:59 +08:00
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
if(userData.guestStatusDetails !== null) {
updatePositionInWaitingQueue(userData.guestStatusDetails.positionInWaitingQueue);
updateLobbyMessage(userData.guestStatusDetails.guestLobbyMessage || '');
}
Move guest wait from bbb-client to bbb-html
2020-07-03 04:14:49 +08:00
Make guest-wait page fetch data from Hasura
2023-12-13 04:42:44 +08:00
const ATTEMPT_EVERY_MS = 10 * 1000; // 10 seconds
return pollGuestStatus(token, ATTEMPT_EVERY_MS);
});
Add guest lobby messages Moderators are able to send a message to the meeting's guest lobby. This new event reaches bbb-web and is sent to the guest user with her/his status response while polling. All guest users that are waiting for acceptance will be able to read this message. enableGuestLobbyMessage is disabled by default.
2020-10-03 01:29:27 +08:00
Move guest wait from bbb-client to bbb-html
2020-07-03 04:14:49 +08:00
}, everyMs);
};
lint
2021-05-21 19:23:47 +08:00
function enableAnimation() {
Tweak animation to stop when request fails
2020-07-07 04:24:46 +08:00
document.documentElement.style.setProperty('--enableAnimation', 1);
}
function disableAnimation() {
document.documentElement.style.setProperty('--enableAnimation', 0);
}
lint
2021-05-21 19:23:47 +08:00
window.onload = function () {
localize guest wait page
2021-05-21 02:03:15 +08:00
fetchLocalizedMessages();
Move guest wait from bbb-client to bbb-html
2020-07-03 04:14:49 +08:00
};
</script>
</head>
<body>
<div id="content">
Merge branch 'v2.4.x-release' of https://github.com/bigbluebutton/bigbluebutton into BBB-WCAG2.1-FINAL
2021-10-13 20:03:58 +08:00
<h1 id="heading">BigBlueButton - Guest Lobby</h1>
Move guest-wait.html to bbb-html5 package
2020-07-07 01:53:15 +08:00
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
guest policy tests
2022-10-11 01:47:44 +08:00
<p aria-live="polite" data-test="guestMessage">Please wait for a moderator to approve you joining the meeting.</p>
Add position in waiting queue for guest users
2022-01-12 11:08:43 +08:00
<div id="positionInWaitingQueue">
<p aria-live="polite">Calculating position in waiting queue</p>
</div>
Move guest wait from bbb-client to bbb-html
2020-07-03 04:14:49 +08:00
</div>
</body>
remove unused function
2021-05-21 19:26:44 +08:00
</html>
Reference in New Issue Copy Permalink