<ParticpantName /> and useParticipantInfo don't update when participant name changed

[bjbr-dev]

Describe the bug

When changing a user's name via localParticpant.setName(newName), the component's rendering the name in the participant tile don't seem to be updating. If the component is re-rendered by something else changing, the name does update.

Reproduction

function VideoCard() {
  const { name } = useParticipantInfo();

  return (
    <div>
      {/* other components to render video camera */}
      {name}
      {/* OR */}
      <ParticipantName />
    </div>
  );
}

function ParticipantTile({ id }: { id: string }) {
  const participant = useRemoteParticipant(id);
  if (!participant) {
    return null;
  }

  return (
    <ParticipantContext.Provider value={participant}>
      <VideoCard />
    </ParticipantContext.Provider>
  );
}

// Elsewhere
function Settings() {
  const { localParticipant } = useLocalParticipant();

  useCallback(
    (newName: string) => {
      localParticipant.setName(newName);
    },
    [localParticipant],
  );
}

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 11.73 GB / 15.53 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 21.4.0 - ~/.nvm/versions/node/v21.4.0/bin/node
    Yarn: 1.22.19 - /mnt/c/Program Files (x86)/Yarn/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v21.4.0/bin/npm
  npmPackages:
    livekit-client: ^2.0.5 => 2.0.10

Severity

annoyance

Additional Information

I believe this is because in the participantInfoObserver internal function, it is not subscribing to the event ParticipantEvent.ParticipantNameChanged.

I'd be happy to raise this as a PR if that sounds like the right solution

[lukasIO]

what permissions does the local participant have? do you set canUpdateOwnMetadata: true ? That would be required

[bjbr-dev]

Yes, canUpdateOwnMetadata is true. When the component is re-rendered due to a change somewhere else in the tree, it does get the updated name. I believe the component is just not triggering the render correctly