From 5a704d883eafff7dfd06518c692550db2f37e46f Mon Sep 17 00:00:00 2001 From: mgamis-msft <79475487+mgamis-msft@users.noreply.github.com> Date: Thu, 3 Oct 2024 14:04:06 -0700 Subject: [PATCH] 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 <94866715+dmceachernmsft@users.noreply.github.com> --- ...-a33f45ab-78c2-4cc2-bc1d-426376fad0cc.json | 9 +++++ .../src/components/HorizontalGallery.tsx | 2 +- .../src/components/LocalVideoTile.tsx | 1 + .../src/components/VerticalGallery.tsx | 2 +- .../src/components/VideoGallery.test.tsx | 36 +++++++++++++++++++ .../ScrollableHorizontalGallery.tsx | 2 +- 6 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 change/@azure-communication-react-a33f45ab-78c2-4cc2-bc1d-426376fad0cc.json diff --git a/change/@azure-communication-react-a33f45ab-78c2-4cc2-bc1d-426376fad0cc.json b/change/@azure-communication-react-a33f45ab-78c2-4cc2-bc1d-426376fad0cc.json new file mode 100644 index 00000000000..e3dba273231 --- /dev/null +++ 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": "79475487+mgamis-msft@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/src/components/HorizontalGallery.tsx b/packages/react-components/src/components/HorizontalGallery.tsx index e7f284f7ee4..61acfdfa478 100644 --- 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 index 7561f542257..851818c5a2f 100644 --- 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 ( diff --git a/packages/react-components/src/components/VerticalGallery.tsx b/packages/react-components/src/components/VerticalGallery.tsx index 175153a3052..8398a1b2b29 100644 --- 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 index 435a47bd3ac..327abb93b8d 100644 --- 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(); + (localParticipant.isScreenSharingOn = true), + (localParticipant.screenShareStream = { + isAvailable: true, + renderElement: createRemoteScreenShareVideoDivElement() + }); + rerender(); + + 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 index 455f21c06bf..abaeb1ffa29 100644 --- 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]);