Last active
September 8, 2021 20:16
-
-
Save shawnchin/010bf1b72e5215f8db377a7226f75c83 to your computer and use it in GitHub Desktop.
Jitsi Prejoin Page -- inject email input field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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