Fix username / displayname naming confusion

src/livekit/useLiveKit.ts

@@ -18,7 +18,7 @@ export type LiveKitConfig = {
   sfuUrl: string;
   jwtUrl: string;
   roomName: string;
-  userName: string;
+  userDisplayName: string;
   userIdentity: string;
 };
 
@@ -29,11 +29,11 @@ export function useLiveKit(
   const tokenOptions = React.useMemo(
     () => ({
       userInfo: {
-        name: config.userName,
+        name: config.userDisplayName,
         identity: config.userIdentity,
       },
     }),
-    [config.userName, config.userIdentity]
+    [config.userDisplayName, config.userIdentity]
   );
   const token = useToken(config.jwtUrl, config.roomName, tokenOptions);
 

src/room/GroupCallView.tsx

@@ -85,7 +85,7 @@ export function GroupCallView({
   const roomAvatarUrl = useRoomAvatar(groupCall.room);
 
   const matrixInfo: MatrixInfo = {
-    userName: displayName,
+    displayName,
     avatarUrl,
     roomName: groupCall.room.name,
     roomIdOrAlias,

src/room/InCallView.tsx

@@ -96,7 +96,7 @@ export function ActiveCall(props: ActiveCallProps) {
     sfuUrl: Config.get().livekit!.server_url,
     jwtUrl: `${Config.get().livekit!.jwt_service_url}/token`,
     roomName: props.matrixInfo.roomName,
-    userName: props.matrixInfo.userName,
+    userDisplayName: props.matrixInfo.displayName,
     userIdentity: `${props.client.getUserId()}:${props.client.getDeviceId()}`,
   });
 

src/room/VideoPreview.tsx

@@ -31,7 +31,7 @@ import { DeviceChoices, UserChoices } from "../livekit/useLiveKit";
 import { useDefaultDevices } from "../settings/useSetting";
 
 export type MatrixInfo = {
-  userName: string;
+  displayName: string;
   avatarUrl: string;
   roomName: string;
   roomIdOrAlias: string;
@@ -145,7 +145,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
             <Avatar
               size={(previewBounds.height - 66) / 2}
               src={matrixInfo.avatarUrl}
-              fallback={matrixInfo.userName.slice(0, 1).toUpperCase()}
+              fallback={matrixInfo.displayName.slice(0, 1).toUpperCase()}
             />
           </div>
         )}