Is it possible to customize display names of users when using the VideoGallery component?

[alkwa-msft]

What feature are you requesting? It looks like its partially possible to update the some of the user information in a calling experience but only through the composite.

What would be the benefit of adding this feature? It would unblock customers that are using the UI components and want to be able to have a customized name for specific participants in the call. A sales agent internally have their actual account name but externally we may just refer to them as "Bob the sales person"

What solution would be ideal for you? Unsure at this time. Perhaps it can fit in our provider concept that developers can wrap around their UI components?

What alternatives have you considered? Not feasible to force the display name on the user

[dmceachernmsft]

Thanks for filing the issue! we will be actively looking into this!

[dmceachernmsft]

Currently using usePropsFor for the videoGallery does give access to the remote participants array. This can be a access point for changing the names of the participants by programmatically changing them as desired. By mapping the new names to each participant based on their userId or other property this can give the opportunity to update user information.

[JamesBurnside]

Closing this due to inactivity. For reference, here is an example snippet of what @dmceachernmsft is referring to:

import { usePropsFor, VideoGallery } from '@azure/communication-react';
import React, { useMemo } from 'react';

// For this example we are creating a react functional component
const MyVideoGallery = (): JSX.Element => {
  // Get props for the video gallery, including remote participants.
  const videoGalleryProps = usePropsFor(VideoGallery);

  // Augment the remote participant display names. Memoize to avoid unnecessary re-renders.
  const remoteParticipants = useMemo(
    () =>
      videoGalleryProps.remoteParticipants.map((remoteParticipant) => ({
        ...remoteParticipant,
        displayName: `Remote Participant ${remoteParticipant.userId}` // YOUR CUSTOM DISPLAY NAME HERE
      })),
    [videoGalleryProps.remoteParticipants]
  );

  // Create a new object of the props to pass into the video gallery. Memoize to avoid unnecessary re-renders.
  const augmentedVideoGalleryProps = useMemo(
    () => ({
      ...videoGalleryProps,
      remoteParticipants: remoteParticipants
    }),
    [videoGalleryProps, remoteParticipants]
  );

  return <VideoGallery {...augmentedVideoGalleryProps} />;
};