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>
  );
}