Fix runtime error when starting screenshare alone in a call (#5240)

* Fix runtime error when starting screenshare alone in a call * Change files * add unit test --------- Co-authored-by: Donald McEachern <[email protected]>
Azure · Oct 3, 2024 · 5a704d8 · 5a704d8
1 parent 106e04d
commit 5a704d8
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 3 deletions.
diff --git a/change/@azure-communication-react-a33f45ab-78c2-4cc2-bc1d-426376fad0cc.json b/change/@azure-communication-react-a33f45ab-78c2-4cc2-bc1d-426376fad0cc.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Video tile rendering",
+  "comment": "Fix runtime error when starting screenshare alone in a call",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/components/HorizontalGallery.tsx b/packages/react-components/src/components/HorizontalGallery.tsx
@@ -68,7 +68,7 @@ export const HorizontalGallery = (props: HorizontalGalleryProps): JSX.Element =>
 
   useEffect(() => {
     if (onFetchTilesToRender && indexesArray) {
-      onFetchTilesToRender(indexesArray[page]);
+      onFetchTilesToRender(indexesArray[page] ?? []);
     }
   }, [indexesArray, onFetchTilesToRender, page]);
 

diff --git a/packages/react-components/src/components/LocalVideoTile.tsx b/packages/react-components/src/components/LocalVideoTile.tsx
@@ -236,6 +236,7 @@ export const _LocalVideoTile = React.memo(
 
     return (
       <Stack
+        data-ui-id="local-video-tile"
         className={mergeStyles({ width: '100%', height: '100%' })}
         onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}
       >

diff --git a/packages/react-components/src/components/VerticalGallery.tsx b/packages/react-components/src/components/VerticalGallery.tsx
@@ -108,7 +108,7 @@ export const VerticalGallery = (props: VerticalGalleryProps): JSX.Element => {
 
   useEffect(() => {
     if (onFetchTilesToRender && indexesArray) {
-      onFetchTilesToRender(indexesArray[page - 1]);
+      onFetchTilesToRender(indexesArray[page - 1] ?? []);
     }
   }, [indexesArray, onFetchTilesToRender, page]);
 

diff --git a/packages/react-components/src/components/VideoGallery.test.tsx b/packages/react-components/src/components/VideoGallery.test.tsx
@@ -766,8 +766,44 @@ describe('VideoGallery with vertical overflow gallery tests', () => {
   });
 });
 
+test.only('should render screenshare component and local user video tile when local user is alone', () => {
+  const localParticipant = createLocalParticipant({
+    videoStream: { isAvailable: true, renderElement: createVideoDivElement() }
+  });
+
+  const videoGalleryProps: VideoGalleryProps = {
+    layout: 'floatingLocalVideo',
+    localParticipant,
+    overflowGalleryPosition: 'verticalRight'
+  };
+  const { rerender, container } = render(<VideoGallery {...videoGalleryProps} />);
+  (localParticipant.isScreenSharingOn = true),
+    (localParticipant.screenShareStream = {
+      isAvailable: true,
+      renderElement: createRemoteScreenShareVideoDivElement()
+    });
+  rerender(<VideoGallery {...videoGalleryProps} />);
+
+  const videoGalleryTiles = getTiles(container);
+  // Should have 2 tiles in video gallery: local video tile and local screenshare tile
+  expect(videoGalleryTiles.length).toBe(2);
+  expect(getDisplayName(videoGalleryTiles[0])).toBe('You');
+  expect(tileIsVideo(videoGalleryTiles[0])).toBe(true);
+  expect(getDisplayName(videoGalleryTiles[1])).toBe('Local Participant');
+  expect(tileIsVideo(videoGalleryTiles[1])).toBe(true);
+
+  const localVideoTile = getLocalVideoTile(container);
+  if (!localVideoTile) {
+    throw Error('Local video tile not found');
+  }
+  expect(getDisplayName(localVideoTile)).toBe('You');
+  expect(tileIsVideo(localVideoTile)).toBe(true);
+});
+
 const getFloatingLocalVideoModal = (root: Element | null): Element | null =>
   root?.querySelector('[data-ui-id="floating-local-video-host"]') ?? null;
+const getLocalVideoTile = (root: Element | null): Element | null =>
+  root?.querySelector('[data-ui-id="local-video-tile"]') ?? null;
 
 const getGridLayout = (root: Element | null): Element | null =>
   root?.querySelector('[data-ui-id="grid-layout"]') ?? null;

diff --git a/packages/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx b/packages/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.tsx
@@ -23,7 +23,7 @@ export const ScrollableHorizontalGallery = (props: {
   useEffect(() => {
     const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];
     if (onFetchTilesToRender && indexesArray) {
-      onFetchTilesToRender(indexesArray);
+      onFetchTilesToRender(indexesArray ?? []);
     }
   }, [onFetchTilesToRender, horizontalGalleryElements?.length]);