### Install Dependencies and Start Test Demo

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/integration/README.md

Navigate to the test demo directory, install npm packages, and start the local development server.

```plaintext
cd app/test-demo
npm install
npm run start
```

--------------------------------

### Run Storybook Server

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/README.md

Start the Storybook server locally to view component documentation and examples.

```bash
npm start
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/README.md

Clone the repository and install all necessary dependencies for local development.

```bash
git clone https://github.com/aws/amazon-chime-sdk-component-library-react.git
npm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/introduction.mdx

Install the component library and its peer dependencies using npm.

```sh
npm install --save amazon-chime-sdk-component-library-react amazon-chime-sdk-js styled-components styled-system
```

--------------------------------

### Start Meeting Session

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/MeetingProvider/docs/MeetingManager.mdx

Call the `start` method after `join` to enable audio and video transmission for attendees. This action initiates the meeting session.

```javascript
() => Promise<void>
```

--------------------------------

### ControlBar Example with Buttons

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/ControlBar/ControlBar.mdx

Demonstrates how to configure and render a ControlBar with multiple ControlBarButtons, each with specific icons, onClick handlers, labels, and popover configurations. This example showcases common controls like mute, camera, dial, screen share, and hang up.

```jsx
const [muted, setMuted] = useState(false);
const [cameraActive, setCameraActive] = useState(false);

const microphoneButtonProps = {
  icon: muted ? <Microphone muted /> : <Microphone />,
  onClick: () => setMuted(!muted),
  label: 'Mute',
};

const cameraButtonProps = {
  icon: cameraActive ? <Camera /> : <Camera disabled />,
  popOver: [
    {
      onClick: () => console.log('camera popover option 1'),
      children: <span>Some option text</span>,
    },
    {
      onClick: () => console.log('camera popover option 2'),
      children: <span>More option text</span>,
    },
  ],
  onClick: () => setCameraActive(!cameraActive),
  label: 'Camera',
};

const dialButtonProps = {
  icon: <Dialer />,
  onClick: () => console.log('Toggle dial pad'),
  label: 'Dial',
};

const hangUpButtonProps = {
  icon: <Phone />,
  onClick: () => console.log('End meeting'),
  label: 'End',
};

const volumeButtonProps = {
  icon: <Sound />,
  onClick: () => console.log('Volume button clicked'),
  popOver: [
    {
      onClick: () => console.log('volume popover option 1'),
      children: <span>Some option text</span>,
    },
    {
      onClick: () => console.log('volume popover option 2'),
      children: <span>More option text</span>,
    },
  ],
  label: 'Volume',
};

const laptopButtonProps = {
  icon: <Laptop />,
  onClick: () => console.log('Screen button clicked'),
  label: 'Screen',
};

return (
  <ControlBar showLabels layout="left">
    <ControlBarButton {...microphoneButtonProps} />
    <ControlBarButton {...volumeButtonProps} />
    <ControlBarButton {...cameraButtonProps} />
    <ControlBarButton {...dialButtonProps} />
    <ControlBarButton {...laptopButtonProps} />
    <ControlBarButton {...hangUpButtonProps} />
  </ControlBar>
);
```

--------------------------------

### Join and Leave Meeting with MeetingManager

Source: https://context7.com/aws/amazon-chime-sdk-component-library-react/llms.txt

Use `useMeetingManager` to get the `MeetingManager` instance. Call `join()` to initialize devices and `start()` to connect the WebRTC session. `leave()` tears down the session. Fetch meeting credentials from your backend before joining.

```tsx
import React from 'react';
import {
  useMeetingManager,
  DeviceLabels,
  MeetingStatus,
} from 'amazon-chime-sdk-component-library-react';
import { MeetingSessionConfiguration } from 'amazon-chime-sdk-js';

const JoinButton: React.FC = () => {
  const meetingManager = useMeetingManager();

  const handleJoin = async () => {
    // Fetch meeting/attendee credentials from your backend
    const res = await fetch('/api/join', { method: 'POST' });
    const { Meeting, Attendee } = await res.json();

    const config = new MeetingSessionConfiguration(Meeting, Attendee);

    try {
      // join() initialises devices; skipDeviceSelection avoids the default
      // auto-selection when you want full control
      await meetingManager.join(config, {
        deviceLabels: DeviceLabels.AudioAndVideo, // requests mic + camera
        enableWebAudio: true,                     // required for VoiceFocus
        skipDeviceSelection: false,
      });

      // Provide a callback so roster cells show attendee names
      meetingManager.getAttendee = async (chimeAttendeeId, externalUserId) => {
        const r = await fetch(`/api/attendee?id=${chimeAttendeeId}`);
        return r.json(); // must have { name: string }
      };

      await meetingManager.start(); // connects the WebRTC session
    } catch (err) {
      console.error('Failed to join meeting', err);
    }
  };

  const handleLeave = async () => {
    await meetingManager.leave();
  };

  return (
    <>
      <button onClick={handleJoin}>Join</button>
      <button onClick={handleLeave}>Leave</button>
    </>
  );
};

```

--------------------------------

### Basic Select Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/Select/Select.mdx

Demonstrates a basic Select component with a list of fruit options. Ensure you have the necessary ThemeProvider and GlobalStyles for styling.

```jsx
<Flex layout="fill-space-centered">
  <div style={{ height: 'auto', width: '15rem', margin: '2rem auto' }}>
    <Select
      value="no_fruit_selected"
      options={[
        { value: 'no_fruit_selected', label: 'Select an option' },
        { value: 'bananas', label: 'Bananas' },
        { value: 'oranges', label: 'Oranges' },
        { value: 'grapefruit', label: 'Grapefruit' },
      ]}
      aria-label="basic select input"
      onChange={(e) => {}}
    />
  </div>
</Flex>
```

--------------------------------

### Join a Meeting with SDK Components

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/sdk/introduction.mdx

Use the useMeetingManager hook to join and start a meeting. Fetch meeting and attendee data from your server, configure MeetingSessionConfiguration, and then call join and start.

```jsx
import {
  VideoTileGrid,
  useMeetingManager
} from 'amazon-chime-sdk-component-library-react';
import { MeetingSessionConfiguration } from 'amazon-chime-sdk-js';

const MyApp = () => {
  const meetingManager = useMeetingManager();

  const joinMeeting = async () => {
    // Fetch the meeting and attendee data from your server application
    const response = await fetch('/my-server');
    const data = await response.json();

    // Initialize the `MeetingSessionConfiguration`
    const meetingSessionConfiguration = new MeetingSessionConfiguration(data.Meeting, data.Attendee);

    // Use the join API to create a meeting session using the MeetingSessionConfiguration
    await meetingManager.join(
      meetingSessionConfiguration
    );

    // At this point you could let users setup their devices, or by default
    // the SDK will select the first device in the list for the s indicated
    // by `deviceLabels` (the default value is DeviceLabels.AudioAndVideo)
    ...

    // Start the session to join the meeting
    await meetingManager.start();
  };

  return (
    <>
      <button onClick={joinMeeting}>Join</button>
      <VideoTileGrid />
    </>
  );
};

```

--------------------------------

### Navbar Component Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/Navbar/Navbar.mdx

Demonstrates the structure and usage of the Navbar component with NavbarHeader and NavbarItem.

```jsx
<Navbar flexDirection="column" container css="height: 50vh">
      <NavbarHeader onClose={() => {}} />
      <Flex>
        <NavbarItem
          icon={<Information />}
          onClick={() => {}}
          label="Bridge Information"
        />
        <NavbarItem icon={<Attendees />} onClick={() => {}} label="Attendees" />
      </Flex>
      <Flex marginTop="auto">
        <NavbarItem
          icon={<LeaveMeeting />}
          onClick={() => {}}
          label="Leave Meeting"
          isSelected
        />
      </Flex>
    </Navbar>
```

```jsx
<Navbar flexDirection="column" container height="10%">
  <NavbarHeader onClose={() => {}} />
  <Flex>
    <NavbarItem
      icon={<Information />}
      onClick={() => {}}
      label="Bridge Information"
    />
    <NavbarItem icon={<Attendees />} onClick={() => {}} label="Attendees" />
  </Flex>
  <Flex marginTop="auto">
    <NavbarItem
      icon={<LeaveMeeting />}
      onClick={() => {}}
      label="Leave Meeting"
    />
  </Flex>
</Navbar>
```

--------------------------------

### Basic Button Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/Button/Button.mdx

Renders a standard HTML button. Use this for general-purpose button actions.

```jsx
<Button label="Basic button" />
```

--------------------------------

### RosterCell Component Examples

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/Roster/Roster.mdx

Examples demonstrating the RosterCell component with different props like 'runningLate', 'micPosition', and other common properties.

```APIDOC
## RosterCell Component

### Description
Displays a single participant's information in a roster view. Supports various states like 'runningLate', 'muted', 'videoEnabled', 'sharingContent', and 'micPosition'.

### Props

- **name** (string) - Required - The name of the participant.
- **subtitle** (string) - Optional - Additional subtitle information for the participant.
- **muted** (boolean) - Optional - Indicates if the participant's microphone is muted.
- **videoEnabled** (boolean) - Optional - Indicates if the participant's video is enabled.
- **sharingContent** (boolean) - Optional - Indicates if the participant is sharing content.
- **runningLate** (string) - Optional - Displays a message indicating the participant is running late, with a time duration.
- **micPosition** (string) - Optional - Specifies the microphone position relative to other participants. Can be 'leading' or 'grouped'.

### Usage Examples

#### Running Late Example
```jsx
<RosterCell
  name="Stanley Hudson"
  subtitle="Manager"
  muted={true}
  videoEnabled={false}
  sharingContent={false}
  runningLate={"10 minutes"}
/>
```

#### Mic Position Leading Example
```jsx
<RosterCell
  name="Stanley Hudson"
  subtitle="Manager"
  muted={true}
  videoEnabled={true}
  sharingContent={false}
  micPosition={"leading"}
/>
```

#### Mic Position Grouped Example
```jsx
<RosterCell
  name="Stanley Hudson"
  subtitle="Manager"
  muted={true}
  videoEnabled={false}
  sharingContent={false}
  micPosition={"grouped"}
/>
```
```

--------------------------------

### Full useContentShareState Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/ContentShareProvider/docs/useContentShareState.mdx

An example showcasing all properties returned by useContentShareState, including deprecated properties for backward compatibility. It renders detailed status information and a ContentShare component if content is being shared.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useContentShareState,
  ContentShare,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <ContentShareView />
  </MeetingProvider>
);

const ContentShareView = () => {
  const {
    // Deprecated properties (maintained for backward compatibility)
    tileId,
    sharingAttendeeId,

    // Content share state
    paused,
    isLocalUserSharing,
    isLocalShareLoading,
    canStartContentShare,

    // Collections for multiple content shares
    tiles,
    tileIdToAttendeeId,
    attendeeIdToTileId,
  } = useContentShareState();

  // No content is being shared
  if (tiles.length === 0) {
    return (
      <div className="content-share-container">
        <p>No content is being shared</p>
        <p>Can start content share: {canStartContentShare ? 'Yes' : 'No'}</p>
      </div>
    );
  }

  // Get the content share tile ID
  const contentShareTileId = tiles[0]; // Note: Previously known as `tileId` (deprecated)

  // Attendee Id for content sharer
  const attendeeId = attendeeIdToTileId[contentShareTileId.toString()]; // Note: Previously known as `sharingAttendeeId` (deprecated)

  return (
    <div className="content-share-container">
      <div className="content-share-status">
        <h3>Content Share Status</h3>
        <ul>
          <li>Active content shares: {tiles.length}</li>
          <li>Current content share ID: {contentShareTileId}</li>
          <li>Shared by: {attendeeId}</li>
          <li>Paused: {paused ? 'Yes' : 'No'}</li>
          <li>Local user is sharing: {isLocalUserSharing ? 'Yes' : 'No'}</li>
          <li>Loading: {isLocalShareLoading ? 'Yes' : 'No'}</li>
        </ul>
      </div>

      <div className="content-share-view">
        <ContentShare nameplate={`Shared by: ${attendeeId}`} />
      </div>
    </div>
  );
};

```

--------------------------------

### Basic PopOver Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/PopOver/PopOver.mdx

Demonstrates how to render a PopOver with a custom button trigger and various content options including a header, a link, a button, and a submenu.

```jsx
<PopOver
  a11yLabel="Click me"
  renderButton={(isOpen) => (
    <PrimaryButton
      style={{ backgroundColor: `${isOpen ? `#0042bb` : '#075fff'}` }}
      label="Open PopOver"
    />
  )}>
  <PopOverHeader title="Title text" subtitle="Subtitle text" />
  <PopOverItem
    as="a"
    href="https://www.amazon.com"
    children={<span>Visit amazon.com</span>}
  />
  <PopOverItem
    as="button"
    onClick={() => {}}
    children={<span>Option 1</span>}
  />
  <PopOverSubMenu text="This is a submenu">
    <PopOverItem
      as="button"
      onClick={() => {}}
      children={<span>Option 2</span>}
    />
    <PopOverItem
      as="button"
      onClick={() => {}}
      children={<span>Option 3</span>}
    />
  </PopOverSubMenu>
</PopOver>
```

--------------------------------

### meetingManager.start

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/MeetingProvider/docs/MeetingManager.mdx

Starts the meeting session, enabling attendees to receive audio and video. This method must be called after `join` has successfully completed.

```APIDOC
## `meetingManager.start`

Starts the meeting session so that attendees can receive audio and video from the meeting. This must be called after calling `join`.

```javascript
() => Promise<void>
```
```

--------------------------------

### Basic VideoGrid Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/VideoGrid/VideoGrid.mdx

Demonstrates the basic usage of the VideoGrid component with two VideoTiles. Ensure parent container has defined height for proper rendering.

```jsx
<div style={{ padding: '1rem', height: '70vh', boxSizing: 'border-box' }}>
  <VideoGrid>
    <VideoTile
      style={{
        border: '1px solid grey',
        gridArea: '',
      }}
      nameplate="Tile 1"
    />
    <VideoTile
      style={{
        border: '1px solid grey',
        gridArea: '',
      }}
      nameplate="Tile 2"
    />
  </VideoGrid>
</div>
```

--------------------------------

### Rendering the Like Component

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/icons/Like/Like.mdx

Example of how to render the Like component with a specified width. Ensure you have ThemeProvider and GlobalStyles set up if using styled-components.

```jsx
<Like width="2rem" />
```

--------------------------------

### Import Dock Component

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/icons/Dock/Dock.mdx

Import the Dock component from the library. No additional setup is required.

```javascript
import { Dock } from 'amazon-chime-sdk-component-library-react';
```

--------------------------------

### NavbarItem Component Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/Navbar/Navbar.mdx

Shows how to implement a NavbarItem, which represents a single navigation row with an icon and a label. The label is visible on larger screens.

```javascript
<NavbarItem
  icon={<Information />}
  onClick={() => {}}
  label="Bridge Information"
/>
```

--------------------------------

### Using LocalAudioOutputProvider with MeetingProvider

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/LocalAudioOutputProvider/docs/LocalAudioOutputProvider.mdx

Example of integrating LocalAudioOutputProvider within a MeetingProvider to manage local audio output state and toggling.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useLocalAudioOutput,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
  const { isAudioOn, toggleAudio } = useLocalAudioOutput();

  return (
    <div>
      <div>
        {isAudioOn
          ? 'Meeting audio output is on'
          : 'Meeting audio output is off'}
      </div>
      <button onClick={toggleAudio}>Toggle Local Audio Output</button>
    </div>
  );
};

```

--------------------------------

### Install v2 Dependencies

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/migrationToV2.mdx

Uninstall the current version of amazon-chime-sdk-js and install version 2.x.x of both the component library and the SDK.

```bash
npm uninstall amazon-chime-sdk-js
npm install --save amazon-chime-sdk-component-library-react@2 amazon-chime-sdk-js@2
```

--------------------------------

### RosterHeader Component Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/Roster/Roster.mdx

Example of the RosterHeader component, displaying a title, badge, and search functionality.

```jsx
<RosterHeader
  title="Present"
  badge={2}
  onClose={() => {}}
  searchValue="Michael"
  onSearch={() => {}}
/>
```

--------------------------------

### NavbarHeader Component Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/Navbar/Navbar.mdx

Example of how to use the NavbarHeader component, which includes a title and a close button for mobile views.

```javascript
<NavbarHeader title="Menu" onClose={() => {}} />
```

--------------------------------

### Configure POSTLogger with LoggerProvider

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/quickStarts.mdx

Wrap your application with `LoggerProvider` and provide a `POSTLogger` instance to enable posting logs to a specified URL. This example demonstrates setting up a `POSTLogger` with a URL, log level, and metadata.

```jsx
import { LoggerProvider, MeetingProvider } from 'amazon-chime-sdk-component-library-react';
import { POSTLogger, LogLevel } from 'amazon-chime-sdk-js';

const postLogger = new POSTLogger({
  url: `URL to POST logs`,
  LogLevel.INFO,
  metadata: {
    appName: 'ChimeComponentLibraryReactDemo',
  },
});

const Root = () => (
  <LoggerProvider logger={postLogger}>
    <MeetingProvider>
      <MyApp />
    </MeetingProvider>
  </LoggerProvider>
);
```

--------------------------------

### Roster Component Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/Roster/Roster.mdx

A complete example of the Roster component with RosterHeader, RosterGroup, and RosterCell components.

```jsx
<Roster>
  <RosterHeader
    title="Present"
    badge={2}
    onClose={() => {}}
    searchValue="Michael"
    onSearch={() => {}}
  />
  <RosterGroup>
    <RosterCell
      name="Michael Scott"
      subtitle="Regional Manager"
      muted={false}
      videoEnabled={true}
    />
    <RosterCell
      name="Michael Scarn"
      subtitle="FBI agent"
      muted={true}
      videoEnabled={false}
    />
  </RosterGroup>
  <RosterGroup title="Left" badge={2}>
    <RosterCell name="Dwight" subtitle="Assistant regional manager" />
    <RosterCell name="Mike the Magic" subtitle="Magician" />
  </RosterGroup>
</Roster>
```

--------------------------------

### NotificationProvider Usage Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/NotificationProvider/docs/NotificationProvider.mdx

Demonstrates how to wrap the application with NotificationProvider and use `useNotificationState` and `useNotificationDispatch` hooks within a component to display notifications.

```jsx
import React from 'react';
import {
  NotificationProvider,
  useNotificationState,
  useNotificationDispatch,
  Notification
 } from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <NotificationProvider>
    <NotificationGroup />
  </NotificationProvider>
);

const NotificationGroup = () => {

  const { notifications } = useNotificationState();
  const dispatch = useNotificationDispatch();

  const notificationItems = {notifications.map(({ id, ...rest }): any => (
    <Notification
      key={id}
      {...rest}
      onClose={() => dispatch({ type: ActionType.REMOVE, payload: id })}
    />
  ))};

  return (
    <>
      {notificationItems}
    </>
  )
}
```

--------------------------------

### Join Meeting with Camera Preset

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/quickStarts.mdx

Example of joining a meeting using `DeviceLabels.Video` to only prompt for camera permissions and automatically select the first available camera.

```tsx
import { useMeetingManager } from 'amazon-chime-sdk-component-library-react';
import { MeetingSessionConfiguration } from 'amazon-chime-sdk-js';

const MyApp = () => {
  const meetingManager = useMeetingManager();

  const joinMeeting = async () => {
    // Fetch the meeting and attendee data from your server application
    const response = await fetch('/my-server');
    const data = await response.json();

    const meetingSessionConfiguration = new MeetingSessionConfiguration(data.Meeting, data.Attendee);
    const options = {
      deviceLabels: DeviceLabels.Video,
    };

    // Use the join API to create a meeting session using DeviceLabels.Video
    await meetingManager.join(
      meetingSessionConfiguration,
      options
    );

    // At this point you can let users setup their camera device
    // Or by default the SDK selects the first device in the list for the kind indicated by `deviceLabels`
    ...

    // Start the session to join the meeting
    await meetingManager.start();
  };

  return <button onClick={joinMeeting}>Join</button>;
};
```

--------------------------------

### Basic Usage Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/ContentShareProvider/docs/useContentShareControls.mdx

Demonstrates how to use the `useContentShareControls` hook within a React component, assuming `MeetingProvider` and `ContentShareProvider` are set up.

```APIDOC
## Basic Usage

### Code
```jsx
import React from 'react';
import {
  MeetingProvider,
  ContentShareProvider,
  useContentShareControls,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <ContentShareProvider maxContentShares={2}>
      <ContentShareButton />
    </ContentShareProvider>
  </MeetingProvider>
);

const ContentShareButton = () => {
  const {
    toggleContentShare,
    togglePauseContentShare,
    paused,
    isLocalUserSharing,
    isLocalShareLoading,
    canStartContentShare,
  } = useContentShareControls();

  return (
    <div>
      {/* Content share toggle button */}
      <button
        onClick={toggleContentShare}
        disabled={isLocalShareLoading || !canStartContentShare}
      >
        {isLocalShareLoading
          ? 'Loading...'
          : isLocalUserSharing
          ? 'Stop sharing'
          : 'Start sharing'}
      </button>

      {/* Pause/resume button only shown when sharing */}
      {isLocalUserSharing && (
        <button onClick={togglePauseContentShare}>
          {paused ? 'Resume content share' : 'Pause content share'}
        </button>
      )}

      {/* Status indicator */}
      <div className="status">
        {isLocalUserSharing && (
          <span>
            Status: {paused ? 'Paused' : 'Active'}
            {isLocalShareLoading && ' (Loading...)'}
          </span>
        )}
      </div>
    </div>
  );
};
```

### Dependencies
- `ContentShareProvider`
```

--------------------------------

### join Method with MeetingSessionConfiguration

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/MeetingProvider/docs/MeetingManager.mdx

This example demonstrates how to update MeetingSessionConfiguration properties before joining a meeting. This allows for customization of various session settings like bandwidth policies and timeouts.

```APIDOC
## Update the `MeetingSessionConfiguration` properties being passed to the `join` method

### Description
With V3 of the Amazon Chime SDK for JavaScript, builders now have the option of updating the properties of `MeetingSessionConfiguration`. `MeetingSessionConfiguration` is a class that allows the users to configure the meeting session. The class contains several properties like `videoUplinkBandwidthPolicy`, `videoDownlinkBandwidthPolicy`, `attendeePresenceTimeoutMs` etc. You can learn more about the available properties at [MeetingSessionConfiguration](https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html) in the SDK documentation. The following code example shows a `MeetingSessionConfiguration` where the default value of the properties are overridden to cusomize the meeting session.

### Usage Example
```jsx
import {
  useMeetingManager,
} from 'amazon-chime-sdk-component-library-react';
import {
  MeetingSessionConfiguration,
  VideoPriorityBasedPolicy,
} from 'amazon-chime-sdk-js';

const MyApp = () => {
  const meetingManager = useMeetingManager();

  const joinMeeting = async () => {
    // Fetch the meeting and attendee data from your server application
    const response = await fetch('/my-server');
    const data = await response.json();

    // Initalize the `MeetingSessionConfiguration`
    const meetingSessionConfiguration = new MeetingSessionConfiguration(data.Meeting, data.Attendee);

    // Update the `MeetingSessionConfiguration` properties
    meetingSessionConfiguration.attendeePresenceTimeoutMs = 120;
    meetingSessionConfiguration.videoDownlinkBandwidthPolicy = new VideoPriorityBasedPolicy(
      logger,
    );

    // Create a `MeetingSession` using `join()` function with the modified `MeetingSessionConfiguration`
    await meetingManager.join(
      meetingSessionConfiguration
    );

    // At this point you could let users setup their devices, or by default
    // the SDK will select the first device in the list for the kind indicated
    // by `deviceLabels` (the default value is DeviceLabels.AudioAndVideo)
    ...

    // Start the `MeetingSession` to join the meeting
    await meetingManager.start();
  };

  return <button onClick={joinMeeting}>Join</button>;
};
```
```

--------------------------------

### Migrate VideoDownlinkBandwidthPolicy (After V3)

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/migrationToV3.mdx

Example demonstrating the updated approach in version 3, where `VideoDownlinkBandwidthPolicy` is set on `MeetingSessionConfiguration` before joining the meeting.

```jsx
import { useMeetingManager } from 'amazon-chime-sdk-component-library-react';
import { MeetingSessionConfiguration } from 'amazon-chime-sdk-js';

const App = () => {
  return (
    <MeetingProvider>
      <MyApp />
    </MeetingProvider>
  );
};

const MyApp = () => {
  // MyVideoDownlinkBandwidthPolicy is a custom class implementing VideoDownlinkBandwidthPolicy interface from amazon-chime-sdk-js.
  const videoDownlinkBandwidthPolicy = new MyVideoDownlinkBandwidthPolicy();

  const meetingSessionConfiguration = new MeetingSessionConfiguration(
    data.Meeting,
    data.Attendee
  );
  meetingSessionConfiguration.videoDownlinkBandwidthPolicy =
    videoDownlinkBandwidthPolicy;

  const meetingManager = useMeetingManager();
  await meetingManager.join(meetingSessionConfiguration);
  await meetingManager.start();

  return <div>...</div>;
};
```

--------------------------------

### Migrate VideoDownlinkBandwidthPolicy (Before V3)

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/migrationToV3.mdx

Example of how `VideoDownlinkBandwidthPolicy` was configured directly in `MeetingProvider` props before version 3.

```jsx
import { useMeetingManager } from 'amazon-chime-sdk-component-library-react';

const App = () => {
  // MyVideoDownlinkBandwidthPolicy is a custom class implementing VideoDownlinkBandwidthPolicy interface from amazon-chime-sdk-js.
  const videoDownlinkBandwidthPolicy = new MyVideoDownlinkBandwidthPolicy();
  const meetingConfig = {
    videoDownlinkBandwidthPolicy,
  };

  return (
    <MeetingProvider {...meetingConfig}>
      <MyApp />
    </MeetingProvider>
  );
};

const MyApp = () => {
  const meetingManager = useMeetingManager();
  await meetingManger.join({
    data.Meeting,
    data.Attendee
  });
  await meetingManager.start();

  return (
    <div>
      ...
    </div>
  );
};
```

--------------------------------

### AudioInputVFControl Usage Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/sdk/MeetingControls/docs/AudioInputVFControl.mdx

Demonstrates how to integrate the AudioInputVFControl component within MeetingProvider and VoiceFocusProvider. It includes logic for conditionally enabling Web Audio based on user preference and SDK support.

```jsx
import React, { useEffect, useState } from 'react';
import {
  MeetingProvider,
  VoiceFocusProvider,
  AudioInputVFControl,
  useMeetingManager,
  useVoiceFocus,
} from 'amazon-chime-sdk-component-library-react';
import { VoiceFocusModelName } from 'amazon-chime-sdk-js';

const joinInfo = {
  Meeting: {
    MeetingFeatures: {
      Audio: { EchoReduction: 'AVAILABLE' }
    }
  }
};

function voiceFocusName(name: string): VoiceFocusModelName {
  if (name && ['default', 'ns_es'].includes(name)) {
    return name as VoiceFocusModelName;
  }
  return 'default';
}

function getVoiceFocusSpecName(): VoiceFocusModelName {
  if (
    joinInfo &&
    joinInfo.Meeting?.MeetingFeatures?.Audio?.EchoReduction === 'AVAILABLE'
  ) {
    return voiceFocusName('ns_es');
  }
  return voiceFocusName('default');
}

const vfConfigValue = {
  spec: { name: getVoiceFocusSpecName() },
  createMeetingResponse: joinInfo,
};

const MeetingComponent = () => {
  const meetingManager = useMeetingManager();
  const { isVoiceFocusSupported } = useVoiceFocus();
  const [userWantsVoiceFocus, setUserWantsVoiceFocus] = useState(true); // Set via UI such as a checkbox

  const joinMeeting = async () => {
    // Only enable WebAudio when Voice Focus is supported and desired
    const enableWebAudio = userWantsVoiceFocus && (isVoiceFocusSupported === true);

    await meetingManager.join(meetingSessionConfiguration, {
      enableWebAudio
    });
  };

  return <AudioInputVFControl />;
};

const App = () => {
  return (
    <VoiceFocusProvider {...vfConfigValue}>
      <MeetingProvider>
        <MeetingComponent />
      </MeetingProvider>
    </VoiceFocusProvider>
  );
};

```

--------------------------------

### Use DevicesProvider with MeetingProvider

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/DevicesProvider/docs/DevicesProvider.mdx

Demonstrates how to use DevicesProvider within a MeetingProvider. When MeetingProvider is used, DevicesProvider is rendered by default. This example shows how to access video input devices and their labels.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useVideoInputs,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
  const { devices, selectedDevice } = useVideoInputs();
  const items = devices.map((device) => <li>{device.label}</li>);

  return (
    <div>
      <p>Current Selected Device: {selectedDevice}</p>
      <p>Devices</p>
      <ul>{items}</ul>
    </div>
  );
};

```

--------------------------------

### Initialize MeetingProvider with Custom Logger and Shared MeetingManager

Source: https://context7.com/aws/amazon-chime-sdk-component-library-react/llms.txt

Configure MeetingProvider with a custom logger and a shared MeetingManager instance. This example also demonstrates enabling multi-content share.

```tsx
// Option B: custom logger + shared MeetingManager + multi content share
import { MeetingManager } from 'amazon-chime-sdk-component-library-react';
const logger = new ConsoleLogger('MyApp', LogLevel.DEBUG);
const sharedManager = new MeetingManager(logger);

const AppWithCustomLogger = () => (
  <LoggerProvider logger={logger}>
    <ThemeProvider theme={lightTheme}>
      <GlobalStyles />
      <MeetingProvider meetingManager={sharedManager} maxContentShares={2}>
        <MyMeetingView />
      </MeetingProvider>
    </ThemeProvider>
  </LoggerProvider>
);

```

--------------------------------

### Basic VideoTile Usage

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/VideoTile/VideoTile.mdx

Render a VideoTile component with a nameplate. This example demonstrates the basic usage within a styled container.

```jsx
<VideoTile nameplate="Test name" />
```

--------------------------------

### Providing AudioVideo Instance Manually

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/AudioVideoProvider/docs/AudioVideoProvider.mdx

Shows how to manually provide the audioVideo instance using AudioVideoContext.Provider when opting out of MeetingProvider. This is useful for integrating with custom meeting session setups.

```jsx
import React from 'react';
import { AudioVideoContext } from 'amazon-chime-sdk-component-library-react';
import { DefaultMeetingSession } from 'amazon-chime-sdk-js';

const App = () => {
  const [audioVideo, setAudioVideo] = useState(null);

  function async getMeeting() {
    // retrieve credentials and create session
    const credentials = await fetch();
    const session = new DefaultMeetingSession(MyConfig);
    // Store our audioVideo instance
    setAudioVideo(session);
  }

  return (
    <AudioVideoContext.Provider value={audioVideo}>
      <MyMeetingApp />
      <button onClick={getMeeting}>Join a meeting</button>
    </AudioVideoContext.Provider>
  );
};

```

--------------------------------

### Install/Update Amazon Chime SDK Packages

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/migrationToV3.mdx

Use npm to uninstall the current versions and install version 3.x.x of the component library and SDK.

```bash
npm uninstall amazon-chime-sdk-component-library-react amazon-chime-sdk-js
npm install --save amazon-chime-sdk-component-library-react@3 amazon-chime-sdk-js@3
```

--------------------------------

### Basic RadioGroup Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/RadioGroup/RadioGroup.mdx

Render a RadioGroup with a predefined set of options. The `value` prop sets the initially selected option, and `onChange` handles user interactions.

```jsx
<Flex layout="fill-space-centered">
  <RadioGroup
    options={[
      { value: 'bananas', label: 'Bananas' },
      { value: 'monkeynuts', label: 'Monkeynuts' },
      { value: 'grapes', label: 'Grapes' },
    ]}
    value="monkeynuts"
    onChange={() => {}}
  />
</Flex>
```

--------------------------------

### Navigate to Sauce Connect Proxy Client Directory

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/integration/README.md

Change directory to the 'bin' folder of the Sauce Connect Proxy client installation on your local machine.

```plaintext
cd sc-4.7.1-osx/bin
```

--------------------------------

### Using useBackgroundReplacement Hook

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/BackgroundReplacementProvider/docs/useBackgroundReplacement.mdx

This example demonstrates how to use the useBackgroundReplacement hook to toggle background replacement, create a background replacement device, and change the background image. Ensure you have the necessary imports and providers set up.

```jsx
import React, { useEffect, useState } from 'react';
import { VideoTransformDevice } from 'amazon-chime-sdk-js';
import {
  useMeetingManager,
  useBackgroundReplacement,
  useVideoInputs,
  useLogger,
} from 'amazon-chime-sdk-component-library-react';

const MyChild = () => {
  const meetingManager = useMeetingManager();
  const { selectedDevice } = useVideoInputs();
  const [isVideoTransformCheckBoxOn, setisVideoTransformCheckBoxOn] = useState(false);
  const {
    isBackgroundReplacementSupported,
    createBackgroundReplacementDevice,
    changeBackgroundReplacementImage,
  } = useBackgroundReplacement();
  const logger = useLogger();

  useEffect(() => {
    async function toggleBackgroundReplacement() {
      try {
        let current = selectedDevice;
        if (isVideoTransformCheckBoxOn) {
          current = await createBackgroundReplacementDevice(selectedDevice);
        } else {
          if (isVideoTransformDevice(selectedDevice)) {
            let intrinsicDevice = await selectedDevice.intrinsicDevice();
            selectedDevice.stop();
            current = intrinsicDevice;
          }
        }
        await meetingManager.startVideoInputDevice(current);
      } catch (error) {
        // Handle device selection failure here
        console.error('Failed to toggle BackgroundReplacement');
      }
    }

    toggleBackgroundReplacement();
  }, [isVideoTransformCheckBoxOn]);

  const onClick = () => {
    setisVideoTransformCheckBoxOn((current) => !current);
  };

  const changeBackgroundReplacementOption = async (hexColor: string) => {
    let current = selectedDevice;
    if (current === undefined) {
      return;
    }
    try {
      const blob = await createBlob(hexColor); // Refer to https://github.com/aws-samples/amazon-chime-sdk/blob/main/apps/meeting/src/utils/background-replacement.ts#L7 for the implementation.
      await changeBackgroundReplacementImage(blob);
    } catch (error) {
      logger.error(`Error trying to change background replacement image ${error}`);
    }
  };

  return (
    <div>
      {isBackgroundReplacementSupported && (
        <button onClick={onClick}>
          {isVideoTranformDevice(selectedDevice)
            ? 'Background Replacement Enabled'
            : 'Enable Background Replacement'}
        </button>
        <button
            onClick={async () => await changeBackgroundReplacementOption('#000000')}
        >
          'Change background replacement to Black'
        </button>
      )}
    </div>
  );
};

```

--------------------------------

### Basic Usage Example

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/hooks/sdk/docs/useSelectVideoQuality.mdx

Demonstrates how to use the useSelectVideoQuality hook within a React component wrapped by MeetingProvider. It shows how to call the selectVideoQuality function to change the video input quality.

```jsx
import React from 'react';
import { MeetingProvider, useSelectVideoQuality } from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
  const selectVideoQuality = useSelectVideoQuality();

  return (
    <button onClick={() => selectVideoQuality('360p')}> 360p video input quality </button>
    <button onClick={() => selectVideoQuality('540p')}> 540p video input quality </button>
    <button onClick={() => selectVideoQuality('720p')}> 720p video input quality </button>
  )
}
```

--------------------------------

### Usage With Custom Media Stream

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/ContentShareProvider/docs/useContentShareControls.mdx

This example shows how to use `useContentShareControls` to share a custom `MediaStream`, such as one obtained from `navigator.mediaDevices.getDisplayMedia`. This allows sharing specific screens or processed video streams.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useContentShareControls,
} from 'amazon-chime-sdk-component-library-react';

const MyChild = () => {
  const { toggleContentShare } = useContentShareControls();

  const toggleContentShareCustom = async () => {
    const mediaStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
    toggleContentShare(mediaStream);
  };

  return (
    <button onClick={toggleContentShareCustom}>Toggle content share</button>
  );
};

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);
```

--------------------------------

### Using AudioInputProvider with MeetingProvider

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/DevicesProvider/docs/AudioInputProvider.mdx

Example of how to use AudioInputProvider within a MeetingProvider to display available audio input devices and the selected device. This snippet requires the useAudioInputs hook.

```jsx
import React from 'react';
import {
  MeetingProvider,
  useAudioInputs,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    <MyChild />
  </MeetingProvider>
);

const MyChild = () => {
  const { devices, selectedDevice } = useAudioInputs();
  const items = devices.map((device) => (
    <li key={device.deviceId}>{device.label}</li>
  ));

  return (
    <div>
      <p>
        Current Selected Audio Input Device: {JSON.stringify(selectedDevice)}
      </p>
      <p>Devices</p>
      <ul>{items}</ul>
    </div>
  );
};

```

--------------------------------

### PopOver Component Usage

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/ui/PopOver/PopOver.mdx

This example demonstrates how to use the PopOver component with its header, items, and submenus. It shows how to render a custom button to trigger the popover and includes different types of items like links and buttons.

```APIDOC
## PopOver Component

### Description
The PopOver component displays a pop-up with a list of clickable options, it can contain buttons and links.
You can define the placement of the PopOver to the button, available options are `top-start`, `top-end`, `bottom-start`, `bottom-end`, `right-start`, `right-end`, `left-start`, and `left-end`.

### Importing
```javascript
import {
  PopOver,
  PopOverHeader,
  PopOverSeparator,
  PopOverItem,
  PopOverSubMenu,
} from 'amazon-chime-sdk-component-library-react';
```

### Example Usage
```jsx
<PopOver
  a11yLabel="Click me"
  renderButton={(isOpen) => (
    <PrimaryButton
      style={{ backgroundColor: `${isOpen ? `#0042bb` : '#075fff'}` }}
      label="Open PopOver"
    />
  )}>
  <PopOverHeader title="Title text" subtitle="Subtitle text" />
  <PopOverItem
    as="a"
    href="https://www.amazon.com"
    children={<span>Visit amazon.com</span>}
  />
  <PopOverItem
    as="button"
    onClick={() => {}}
    children={<span>Option 1</span>}
  />
  <PopOverSubMenu text="This is a submenu">
    <PopOverItem
      as="button"
      onClick={() => {}}
      children={<span>Option 2</span>}
    />
    <PopOverItem
      as="button"
      onClick={() => {}}
      children={<span>Option 3</span>}
    />
  </PopOverSubMenu>
</PopOver>
```

### Props
#### PopOver Props
(Refer to Storybook ArgTypes for detailed props)

#### PopOverHeader Props
(Refer to Storybook ArgTypes for detailed props)

#### PopOverItem Props
(Refer to Storybook ArgTypes for detailed props)

#### PopOverSubMenu Props
(Refer to Storybook ArgTypes for detailed props)
```

--------------------------------

### Integrate Background Replacement Provider

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/BackgroundReplacementProvider/docs/BackgroundReplacementProvider.mdx

Wrap your meeting components with BackgroundReplacementProvider and MeetingProvider to enable background replacement. This example shows the basic setup and usage of hooks like useBackgroundReplacement.

```jsx
import React from 'react';
import {
  isVideoTranformDevice,
  VideoTransformDevice,
} from 'amazon-chime-sdk-js';
import {
  MeetingProvider,
  BackgroundReplacementProvider,
  useMeetingManager,
  useBackgroundReplacement,
  useVideoInputs,
  useLogger,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <BackgroundReplacementProvider>
    <MeetingProvider>
      <MyChild />
    </MeetingProvider>
  </BackgroundReplacementProvider>
);

const MyChild = () => {
  const meetingManager = useMeetingManager();
  const { selectedDevice } = useVideoInputs();
  const [isVideoTransformCheckBoxOn, setisVideoTransformCheckBoxOn] = 
    useState(false);
  const {
    isBackgroundReplacementSupported,
    createBackgroundReplacementDevice,
    changeBackgroundReplacementImage,
  } = useBackgroundReplacement();
  const logger = useLogger();

  useEffect(() => {
    async function toggleBackgroundReplacement() {
      try {
        let current = selectedDevice;
        if (isVideoTransformChecked) {
          current = await createBackgroundReplacementDevice(selectedDevice);
        } else {
          if (isVideoTransformDevice(selectedDevice)) {
            let intrinsicDevice = await selectedDevice.intrinsicDevice();
            selectedDevice.stop();
            current = intrinsicDevice;
          }
        }
        await meetingManager.startVideoInputDevice(current);
      } catch (error) {
        // Handle device selection failure here
        console.error('Failed to toggle Background Replacement');
      }
    }

    toggleBackgroundReplacement();
  }, [isVideoTransformChecked]);

  const onClick = () => {
    setisVideoTransformCheckOn((current) => !current);
  };

  const changeBackgroundReplacementOption = async (hexColor: string) => {
    let current = selectedDevice;
    if (current === undefined) {
      return;
    }
    try {
      const blob = await createBlob(hexColor); // Refer to https://github.com/aws-samples/amazon-chime-sdk/blob/main/apps/meeting/src/utils/background-replacement.ts#L7 for the implementation.
      await changeBackgroundReplacementImage(blob);
    } catch (error) {
      logger.error(`Error trying to change background replacement image ${error}`);
    }
  };

  return (
    <div>
      {isBackgroundReplacementSupported && (
        <button onClick={onClick}>
          {isVideoTranformDevice(selectedDevice)
            ? 'Background Replacement Enabled'
            : 'Enable Background Replacement'}
        </button>
        <button
            onClick={async () => await changeBackgroundReplacementOption('#000000')}
        >
          'Change background replacement to Black'
        </button>
      )}
    </div>
  );
};

```

--------------------------------

### Set up ThemeProvider and MeetingProvider

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/components/introduction.mdx

Wrap your application with `ThemeProvider` and `MeetingProvider` in the root. `GlobalStyles` should be placed under `ThemeProvider` to reset CSS.

```jsx
import { ThemeProvider } from 'styled-components';
import {
  MeetingProvider,
  lightTheme,
  GlobalStyles,
} from 'amazon-chime-sdk-component-library-react';

const Root = () => (
  <ThemeProvider theme={lightTheme}>
    <GlobalStyles />
    <MeetingProvider>
      <MyApp />
    </MeetingProvider>
  </ThemeProvider>
);
```

--------------------------------

### Apply Light or Dark Theme Globally

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/theme/themes.mdx

Wrap your application with `ThemeProvider` and include `GlobalStyles` to apply the chosen theme. This setup is necessary for all components to inherit the theme's styles.

```jsx
import { ThemeProvider } from 'styled-components';
import { lightTheme, darkTheme, GlobalStyles } from './';

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <MyApp />
</ThemeProvider>;
```

--------------------------------

### Configuring Multiple Content Shares

Source: https://github.com/aws/amazon-chime-sdk-component-library-react/blob/main/src/providers/ContentShareProvider/docs/ContentShareProvider.mdx

Configure the `ContentShareProvider` with the `maxContentShares` prop to allow more than one concurrent content share, up to a maximum of two. This example demonstrates accessing the number of available shares and the mapping of tile IDs to attendee IDs.

```jsx
import React from 'react';
import {
  MeetingProvider,
  ContentShareProvider,
  useContentShareState,
} from 'amazon-chime-sdk-component-library-react';

const App = () => (
  <MeetingProvider>
    {/* Override the default maxContentShares value (1) in ContentShareProvider */}
    <ContentShareProvider maxContentShares={2}>
      <MyComponent />
    </ContentShareProvider>
  </MeetingProvider>
);

const MyComponent = () => {
  const { tiles, tileIdToAttendeeId, canStartContentShare } = 
    useContentShareState();

  return (
    <div>
      <p>Content shares available: {tiles.length}</p>
      <p>Can start content share: {canStartContentShare ? 'Yes' : 'No'}</p>
      <div>
        {tiles.map((tileId) => (
          <ContentShare
            key={tileId}
            tileId={tileId}
            nameplate={`Shared by: ${tileIdToAttendeeId[tileId.toString()]}`}
          />
        ))}
      </div>
    </div>
  );
};
```