Edit user name

A common use case of pre-call UI is to give the user a option to set / edit their name.

Permissions

Requires meeting.self.permissions.canEditDisplayName to be true

In the preset editor, ensure Miscellaneous > Edit Name is toggled enabled.

File: CustomMeetingPreview.tsx

We add a <input> element for entering the participant name. We should not show this input if the user doese not have permission to edit name (permissions.canEditDisplayName)

await meeting.self.setName(participantName); sets the new name for the participant.

At the end, we let user join the meeting using await meeting.join();.

LIVE EDITOR

import { useDyteMeeting, useDyteSelector } from "@dytesdk/react-web-core";
import { DyteButton } from "@dytesdk/react-ui-kit";
import { useState, useEffect } from "react";

export default function CustomMeetingPreview() {
const { meeting } = useDyteMeeting();
const permissions = useDyteSelector((m) => m.self.permissions);
const [participantName, setParticipantName] = useState("");

useEffect(() => {
  if (!meeting) {
    return;
  }
  setParticipantName(meeting.self.name);
}, [meeting]);

return (
  <div
    className="h-full w-full flex flex-col items-center justify-center"
    style={{ minHeight: "400px" }}
  >
    <div className="flex w-full items-center justify-around p-[10%]">
      <div></div>
      <div className="flex w-1/4 flex-col justify-between">
        <div className="flex flex-col items-center">
          <p>Joining as</p>
        </div>
        {permissions.canEditDisplayName && (
          <input
            placeholder="Your name"
            className="mb-10 rounded-sm border p-2.5 focus:border-blue-500"
            value={participantName}
            onChange={(event) => setParticipantName(event.target.value)}
          />
        )}
        <DyteButton
          kind="wide"
          size="lg"
          style={{ cursor: participantName ? "pointer" : "not-allowed" }}
          onClick={async () => {
            if (participantName) {
              if (permissions.canEditDisplayName) {
                await meeting.self.setName(participantName);
              }
              await meeting.join();
            }
          }}
        >
          Join
        </DyteButton>
      </div>
    </div>
  </div>
);
}