[FEATURE REQUEST] Patchable React component exports

[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

I'd like an easy way to customize the nameplate without having to copy the VideoTile and all components that use it into the host application's codebase.

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?

In our telehealth app there is no participant list, so we customize VideoTile to enable the following features:

• When a user disables their mic, a “disabled mic” icon will appear to the left of their nameplate
• When a user is screen sharing, their nameplate changes to “Joe Bob is screen sharing” etc

This then requires us to copy all components into our repo that use VideoTile which then adds to the burden of subsequent Chime upgrades. The request is to either:

• build this functionality into VideoTile out-of-the-box -or-
• make the nameplate customizable by providing a way to inject an optional functional component which would render the nameplate based on various props provided to it, at the very least it would need a name and tileId or chimeAttendeeId, ex.

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

const CustomNameplate = ({name, tileId}: {name: string, tileId: number}) => {
    const { tiles, tileIdToAttendeeId } = useRemoteVideoTileState();
    const chimeAttendeeId = tileIdToAttendeeId[tileId]
    const { muted } = useAttendeeAudioStatus(chimeAttendeeId || '');

    return <>{muted && <Microphone muted />}{name}</>;
}

overrideSDK({ Nameplate: CustomNameplate });
// ^^ assuming the nameplate ui is moved into its own component in the SDK, which currently is not the case
// This could work similarly for hooks or anything else exported by the SDK, ex:
// overrideSDK({ useAttendeeAudioStatus: useCustomAttendeeAudioStatus });

Another implementation idea:

import ChimeSdkCLR from 'amazon-chime-sdk-component-library-react';
import CustomVideoTile from 'src/shared/CustomChime/component-library-react/components/ui/VideoTile';
ChimeSdkCLR.VideoTile = CustomVideoTile;

In this second example, the react component library would need to expose a default export of an object that contains key/value pairs of all exported items(or some subset of your choosing) of the library. During creation of the object, each property would need to be set to "writable" per the Object.defineProperty API.

In either of these cases, the overriding code would be placed before any other imports of chime components.

How are you currently solving a problem?

VideoTile is copied into our repo and customized to suit our needs. Any other component that references VideoTile is also copied into our repo and so on an so forth, until all of the layout components are eventually copied over. Ideally we want to minimize our custom chime code footprint so that future chime upgrades take less time and effort.

Additional context

Anything else we should know?

[jfurnish-athena]

Does anyone on the AWS side have eyes on this feature-request? It continues to be a pain point for our customers that the default component from 'amazon-chime-sdk-component-library-react' does not make transparent which remote users are muted. Since some users are not skilled with all forms of modern digital technology, it can be relevant to instruct remote participants "I see you are muted, try clicking the unmute button" rather than a non specific "I can't hear you". If a remote participant has their video disabled, it can be especially un-obvious that someone is attempting to talk while muted.

As @everscending points out, this could be a fairly simple matter of prop-drilling to allow a custom JSX element for the nameplate, and would allow applications built on AWS Chime to come closer to parity with other telepresence platforms.

[everscending]

Posting again here to say this is still an ongoing issue for us. I've also added some additional implementation ideas to the original post.