[FEATURE REQUEST] Persistent Tiles

[everscending]

Community Note

• Please do not add additional comments such as "+1" or "me too" to existing issues - instead please vote on the issue by adding a 👍 to the issue. The Amazon Chime SDK team will prioritize the request based on the number of 👍 the issue has received.
• Please go through the existing issues to see if your request has already been recommended.
• Please do not use this template to report bugs. This repository has an issue template for issues and documentation to help with your development.
• If you are interested in working on this issue or have submitted a pull request, please leave a comment.

Tell us about your request

Our telehealth app does not display a roster/participant list so we need to persist the tiles associated with each participant. When any participant's video feed is disabled, instead of removing the VideoTile from the grid, we want to display an alternate avatar.  In our case, the avatar is a component that displays their initials but the idea is that we can provide any custom avatar component.

What do you want us to build?

Which Amazon Chime SDK or feature area is this request for?

amazon-chime-sdk-component-library-react

Tell us about the problem you are trying to solve and why is it hard?

Implementing our solution requires all components in the video UI nested tree structure to be copied into our repo and customized, which then increases the burden of upgrading to future versions of the chime UI SDK.

How are you currently solving a problem?

We've created a VideoWithPlaceholder component that wraps around each VideoTile component. This controls whether a video is rendered or the avatar is rendered if the video feed is disabled. 

Are there any workarounds or mitigations you have used? Why is it not working for you?
no

Additional context

The request here is to:

• Implement the alternate avatar functionality directly into the chime UI components 
• It may be sensible to rename VideoTile to RosterTile as a tile can exist but not have a video 
• Suggestion to keep the existing functionality as the default(disabled video removes tile) and implement avatars via a prop on the VideoTileGrid component. When the "avatar" prop is used here, the component provided will be rendered when a video feed is disabled.  The Avatar component would receive a name and tileId prop. For example --

import { VideoTileGrid } from 'amazon-chime-sdk-component-library-react';  

const Avatar = ({name, tileId}: {name: string, tileId: number}) => {
 	const initials = name
 		.split(' ') 				// make an array of the separate names
 		.map(word => word[0]) 	// iterate over each name and make an array of each first letter
 		.join('') 				// join the first letters into a single string
 		.toUpperCase(); 		// ensure all letters are uppercase
  	return <div id={tileId} className="tile-avatar">{initials}</div>;
}

const VideoCall = () => {
 	return <VideoTileGrid avatar={Avatar} />
}

[ekpono]

Why not just use this noRemoteVideoView={<MeetingDetails attendee={attendee}

          <VideoTileGrid layout='standard' noRemoteVideoView={<MeetingDetails attendee={attendee} />} />

const MeetingDetails = (props) => {
  const { attendee } = props;
  return (
    <div className='flex flex-col justify-center items-center bg-black'>
      <div className='flex flex-col justify-center items-center'>
        <UserImage imageUrl={attendee.image} name={attendee.name} className='rounded-full h-96 w-96' />
        <div className='text-white text-2xl font-comfortaa mt-10'>{attendee.name}</div>
      </div>
    </div>
  );
};