Add support for multiple content shares (#998)

Author: xuesichao

CHANGELOG.md

@@ -11,6 +11,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added support for multiple content shares in meetings through the `ContentShareProvider`. The provider now accepts a `maxContentShares` prop (default: 1, range 1-2) to specify the maximum number of concurrent content shares allowed.
+  - Added new collections in `ContentShareState` to track multiple content shares: `tiles`, `tileIdToAttendeeId`, and `attendeeIdToTileId`.
+  - Added optional `tileId` prop to the `ContentShare` component to specify which content share to render.
+  - Added `canStartContentShare` state to control when content sharing is allowed based on the current number of shares and configured maximum.
+  - Maintained backward compatibility by keeping `tileId` and `sharingAttendeeId` properties, which now point to the most recently started content share when multiple shares are present.
+
 ### Removed
 
 ### Changed

src/components/sdk/ContentShare/ContentShare.mdx

@@ -5,12 +5,16 @@ import { ContentShare } from './';
 
 # ContentShare
 
-The `ContentShare` component renders a `ContentTile` for the active content share video, remote or local.
+The `ContentShare` component renders a `ContentTile` for a content share video, remote or local.
 
 If used within the `VideoGrid` component, it will automatically place the active tile in the featured grid slot. It takes precedence over the featured video tile.
 
 Once a meeting session has been started, a user can start and stop content sharing by using the `useContentShareControls` hook.
 
+## Multiple Content Shares
+
+With the support for multiple content shares, you can now specify which content share tile to render by providing the `tileId` prop. If no `tileId` is provided, the component will render the default content share tile from (`const { tileId } = useContentShareState()`).
+
 ## Importing
 
 ```javascript
@@ -19,26 +23,85 @@ import { ContentShare } from 'amazon-chime-sdk-component-library-react';
 
 ## Usage
 
+### With Single Content Share
+
 ```jsx
 import React from 'react';
 import {
   MeetingProvider,
   ContentShare,
-  useContentShareControls
+  useContentShareControls,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => {
   const { toggleContentShare } = useContentShareControls();
 
   return (
     <MeetingProvider>
-      <ContentShare nameplate='Content share' />
+      <ContentShare nameplate="Content share" />
       <button onClick={toggleContentShare}>Toggle content share</button>
     </MeetingProvider>
   );
 };
 ```
 
+### With Multiple Content Shares
+
+```jsx
+import React from 'react';
+import {
+  MeetingProvider,
+  ContentShare,
+  ContentShareProvider,
+  useContentShareState,
+  useContentShareControls,
+} from 'amazon-chime-sdk-component-library-react';
+
+const App = () => {
+  return (
+    <MeetingProvider>
+      <ContentShareProvider maxContentShares={2}>
+        <ContentShareView />
+        <ContentShareControls />
+      </ContentShareProvider>
+    </MeetingProvider>
+  );
+};
+
+const ContentShareView = () => {
+  const { tiles, tileIdToAttendeeId } = useContentShareState();
+
+  return (
+    <div>
+      {tiles.length === 0 ? (
+        <p>No content is being shared</p>
+      ) : (
+        <div className="content-share-container">
+          {tiles.map((tileId) => (
+            <ContentShare
+              key={tileId}
+              tileId={tileId}
+              nameplate={`Shared by: ${tileIdToAttendeeId[tileId.toString()]}`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ContentShareControls = () => {
+  const { toggleContentShare } = useContentShareControls();
+  const { canStartContentShare } = useContentShareState();
+
+  return (
+    <button onClick={toggleContentShare} disabled={!canStartContentShare}>
+      Share content
+    </button>
+  );
+};
+```
+
 ## Props
 
 <ArgTypes of={ContentShare} />

src/components/sdk/ContentShare/index.tsx

@@ -10,37 +10,49 @@ import { BaseSdkProps } from '../Base';
 
 interface Props extends BaseSdkProps {
   nameplate?: string;
+  tileId?: number;
 }
 
 export const ContentShare: React.FC<React.PropsWithChildren<Props>> = ({
   className,
+  tileId,
   ...rest
 }) => {
   const audioVideo = useAudioVideo();
-  const { tileId } = useContentShareState();
+  const contentShareState = useContentShareState();
+
+  // Use the provided tileId or fall back to the default (for backward compatibility)
+  const tileIdToRender =
+    tileId !== undefined ? tileId : contentShareState.tileId;
+
+  const attendeeId = tileIdToRender
+    ? contentShareState.tileIdToAttendeeId[tileIdToRender.toString()]
+    : null;
+
   const videoEl = useRef<HTMLVideoElement | null>(null);
 
   useEffect(() => {
-    if (!audioVideo || !videoEl.current || !tileId) {
+    if (!audioVideo || !videoEl.current || !tileIdToRender) {
       return;
     }
 
-    audioVideo.bindVideoElement(tileId, videoEl.current);
+    audioVideo.bindVideoElement(tileIdToRender, videoEl.current);
 
     return () => {
-      const tile = audioVideo.getVideoTile(tileId);
+      const tile = audioVideo.getVideoTile(tileIdToRender);
       if (tile) {
-        audioVideo.unbindVideoElement(tileId);
+        audioVideo.unbindVideoElement(tileIdToRender);
       }
     };
-  }, [audioVideo, tileId]);
+  }, [audioVideo, tileIdToRender]);
 
-  return tileId ? (
+  return tileIdToRender ? (
     <ContentTile
       objectFit="contain"
-      className={className || ''}
+      className={`ch-content-share--${tileIdToRender} ${className || ''}`}
       {...rest}
       ref={videoEl}
+      data-content-share-attendee={attendeeId}
     />
   ) : null;
 };

src/components/sdk/FeaturedRemoteVideos/index.tsx

@@ -21,19 +21,20 @@ export const FeaturedRemoteVideos: FC<React.PropsWithChildren<Props>> = (
   const gridData = useGridData();
   const { roster } = useRosterState();
   const { tileId: featuredTileId } = useFeaturedTileState();
-  const { tileId: contentTileId } = useContentShareState();
+  const { tiles: contentTiles } = useContentShareState();
   const { tiles, tileIdToAttendeeId } = useRemoteVideoTileState();
 
   return (
     <>
       {tiles.map((tileId) => {
-        const featured = !contentTileId && featuredTileId === tileId;
+        const hasContentShare = contentTiles.length > 0;
+        const featured = !hasContentShare && featuredTileId === tileId;
         const styles = gridData && featured ? 'grid-area: ft;' : '';
         const classes = `${featured ? 'ch-featured-tile' : ''} ${
           props.className || ''
         }`;
         const attendee = roster[tileIdToAttendeeId[tileId]] || {};
-        const { name }: any = attendee;
+        const { name = undefined }: { name?: string } = attendee;
 
         return (
           <RemoteVideo

src/components/sdk/VideoTileGrid/VideoTileGrid.mdx

@@ -5,7 +5,7 @@ import { VideoTileGrid } from './';
 
 # VideoTileGrid
 
-The `VideoTileGrid` component renders all meeting session video tiles in a responsive grid layout. This includes the local tile, remote tiles, and content share tile. By default a user joins without video, so in order to see the VideoTileGrid there must be at least one video tile being shared. To start sharing a video, see the [LocalVideo](?path=/docs/sdk-components-localvideo--page) component. 
+The `VideoTileGrid` component renders all meeting session video tiles in a responsive grid layout. This includes the local tile, remote tiles, and content share tile. By default a user joins without video, so in order to see the VideoTileGrid there must be at least one video tile being shared. To start sharing a video, see the [LocalVideo](?path=/docs/sdk-components-localvideo--page) component.
 
 ## Importing
 
@@ -19,7 +19,7 @@ import { VideoTileGrid } from 'amazon-chime-sdk-component-library-react';
 import React from 'react';
 import {
   MeetingProvider,
-  VideoTileGrid
+  VideoTileGrid,
 } from 'amazon-chime-sdk-component-library-react';
 
 const App = () => (
@@ -29,6 +29,44 @@ const App = () => (
 );
 ```
 
+## Content Share Behavior
+
+The `VideoTileGrid` component does not support displaying multiple content shares simultaneously:
+
+- It can display only one content share tile at a time in the featured area
+- When multiple content shares are active, only the most recently started content share is displayed, and earlier shares are ignored
+- The grid size calculation always allocates exactly one tile space for content sharing (when content is present), regardless of how many content share tiles actually exist
+
+This means that even if there are multiple content share tiles available through `useContentShareState()`, the VideoTileGrid will only render one of them.
+
+### Custom Handling of Multiple Content Shares
+
+If you need to support multiple simultaneous content shares, you'll need to implement a custom grid using `useContentShareState` hook and `ContentShare` sdk component.
+
+```jsx
+import React from 'react';
+import {
+  useContentShareState,
+  ContentShare,
+} from 'amazon-chime-sdk-component-library-react';
+
+const CustomMultiContentShareGrid = () => {
+  // Access all content share tiles
+  const { tiles: contentTiles } = useContentShareState();
+
+  return (
+    <div className="custom-grid">
+      {/* Render each content share tile */}
+      {contentTiles.map((tileId) => (
+        <ContentShare key={tileId} tileId={tileId} />
+      ))}
+
+      {/* Other video tiles */}
+    </div>
+  );
+};
+```
+
 ## Props
 
 <ArgTypes of={VideoTileGrid} />

src/components/sdk/VideoTileGrid/index.tsx

@@ -46,15 +46,21 @@ export const VideoTileGrid: React.FC<React.PropsWithChildren<Props>> = ({
   ...rest
 }) => {
   const { tileId: featureTileId } = useFeaturedTileState();
-  const { tiles } = useRemoteVideoTileState();
-  const { tileId: contentTileId } = useContentShareState();
+  const { tiles: remoteVideoTiles } = useRemoteVideoTileState();
+  const { tiles: contentShareTiles } = useContentShareState();
   const { isVideoEnabled } = useLocalVideo();
-  const featured =
-    (layout === 'featured' && !!featureTileId) || !!contentTileId;
-  const remoteSize = tiles.length + (contentTileId ? 1 : 0);
+
+  const hasContentShare = contentShareTiles.length > 0;
+  // contentShareSize is counted as 1 in the grid size calculation, since only the most
+  // recent content share tile is displayed in the featured area when multiple content shares exist
+  const contentShareSize = hasContentShare ? 1 : 0;
+  const remoteSize = remoteVideoTiles.length + contentShareSize;
   const gridSize =
     remoteSize > 1 && isVideoEnabled ? remoteSize + 1 : remoteSize;
 
+  const featured =
+    (layout === 'featured' && !!featureTileId) || hasContentShare;
+
   return (
     <VideoGrid {...rest} size={gridSize} layout={featured ? 'featured' : null}>
       <ContentShare css="grid-area: ft;" />

src/providers/ContentShareProvider/docs/ContentShareProvider.mdx

@@ -6,13 +6,27 @@ import { Meta } from '@storybook/blocks';
 
 The `ContentShareProvider` provides state and functionality for content sharing.
 
+### Props
+
+```javascript
+{
+  // Maximum number of concurrent content shares allowed (default: 1, range: 1-2)
+  maxContentShares?: number;
+}
+```
+
 ### State
 
 ```javascript
 {
-  // The tile ID of the active content share
+  // The tile ID of the active content share (deprecated, maintained for backward compatibility)
+  // When multiple content shares are present, this points to the most recently started content share
   tileId: number | null;
 
+  // The chime attendee ID of the user sharing (deprecated, maintained for backward compatibility)
+  // When multiple content shares are present, this points to the attendee of the most recently started content share
+  sharingAttendeeId: string | null;
+
   // Whether the content share is paused
   paused: boolean;
 
@@ -22,8 +36,17 @@ The `ContentShareProvider` provides state and functionality for content sharing.
   // Whether or not the local user's content share is loading
   isLocalShareLoading: boolean;
 
-  // The chime attendee ID of the user sharing
-  sharingAttendeeId: string | null;
+  // Whether the user can start a content share based on current limits and `isLocalUserSharing`
+  canStartContentShare: boolean;
+
+  // Array of all content share tile IDs
+  tiles: number[];
+
+  // Map of tile IDs to attendee IDs
+  tileIdToAttendeeId: { [key: string]: string };
+
+  // Map of attendee IDs to tile IDs
+  attendeeIdToTileId: { [key: string]: number };
 }
 ```
 
@@ -53,6 +76,49 @@ const MyChild = () => {
 };
 ```
 
+## Multiple Content Shares
+
+You can configure the maximum number of concurrent content shares allowed (up to 2):
+
+```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>
+  );
+};
+```
+
 ## Usage without MeetingProvider
 
 If you opt out of using `MeetingProvider`, you can drop in a `ContentShareProvider` and use its state. Make sure that its dependencies are rendered higher in the tree.