Jitsi Prejoin Page -- inject email input field

body.html

<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>