Skip to content

Instantly share code, notes, and snippets.

@shawnchin
Last active Sep 8, 2021
Embed
What would you like to do?
Jitsi Prejoin Page -- inject email input field
<script>
const INCLUDE_LABEL = false; // "false" to match new prejoin page UX, "true" to match jitsi meet 6173 or earlier
function getLocallyStoredEmail() {
// loads email from localStorage so we can pre-populate with email users set before
const settings = JSON.parse(window.localStorage.getItem('features/base/settings') || '{}');
return settings.email || ''
}
function injectEmailInputsToPrejoinForm(formContainer) {
// Create input element for email
const emailInputId = 'injected-prejoin-email-input';
const emailInput = document.createElement('input');
emailInput.setAttribute('class', 'field');
emailInput.setAttribute('placeholder', 'Please enter your email');
emailInput.setAttribute('value', getLocallyStoredEmail()); // pre-populate if already stored in browser
emailInput.setAttribute('id', emailInputId);
// Jitsi uses lodash, so we can use it to debounce the events and not trigger a change on every character input
const handler = _.debounce(function () {
APP.conference.changeLocalEmail(this.value);
}, 500, {
leading: false,
trailing: true,
});
emailInput.addEventListener('input', handler);
// Get reference to the dropdown button, so we can inject new inputs just before it
const prejoinButton = formContainer.querySelector('.prejoin-preview-dropdown-container');
// attach just before the submit button
formContainer.insertBefore(emailInput, prejoinButton);
if (INCLUDE_LABEL) {
// Create label element
const label = document.createElement('label');
label.setAttribute('class', 'prejoin-input-area-label');
label.setAttribute('style', 'margin-top: 5px');
label.setAttribute('for', emailInputId);
label.appendChild(document.createTextNode("Please enter your email"));
formContainer.insertBefore(label, emailInput);
}
}
function waitForAppLoaded(callback) {
if (APP && APP.store && APP.store.getState()) {
return callback();
} else {
console.log("WAITING for app state to be available");
setTimeout(() => waitForAppLoaded(callback), 1000);
}
}
function waitForPrejoin(callback) {
// See PREJOIN_SCREEN_STATE_TYPE in https://github.com/jitsi/jitsi-meet/blob/master/react/features/prejoin/constants.js
const HIDDEN = "hidden";
const LOADING = "loading";
const VISIBLE = true;
const prejoinState = APP.store.getState()['features/prejoin']?.showPrejoin;
if (prejoinState === VISIBLE) {
callback();
} else if (prejoinState === LOADING) {
console.log("WAITING for prejoin page to load");
setTimeout(() => waitForPrejoin(callback), 1000);
} else if (prejoinState === HIDDEN) {
console.log("Prejoin page disable. Nothing to do.");
} else {
console.error("Unexpected value for state 'features/prejoin'.showPrejoin");
}
}
waitForAppLoaded(function () {
waitForPrejoin(function () {
// Get reference to prejoin form container
const prejoinInputs = document.getElementsByClassName('prejoin-input-area')[0];
// Only trigger custom function if prejoin inputs are found
if (APP.conference && prejoinInputs) {
injectEmailInputsToPrejoinForm(prejoinInputs);
} else {
console.info("Could not find prejoin-input-area. Perhaps user skipped it.");
}
})
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment