browser-sdk: Show placeholder cell when there's no stream

Description

Show a placeholder (avatar) when there no stream for a participant in the video grid. Kind of an edge case since isVideoEnabled needs to be true as well, but we had a report for this from a customer.

Summary:

Related Issue:

Testing

I couldn't reproduce this just by blocking media permissions (isVideoEnabled would be false). I created a patch to verify though, and this can be used to test:

On main: Save this snippet as tmp_no_stream.patch, and apply it git apply tmp_no_stream.patch

diff --git a/packages/core/src/redux/slices/remoteParticipants.ts b/packages/core/src/redux/slices/remoteParticipants.ts index 3d1d9de9..2a7a835a 100644 --- a/packages/core/src/redux/slices/remoteParticipants.ts +++ b/packages/core/src/redux/slices/remoteParticipants.ts @@ -25,7 +25,8 @@ function createRemoteParticipant(client: SignalClient, newJoiner = false): Remot return { ...rest, stream: null,

streams: streams.map((streamId) => ({ id: streamId, state: newJoiner ? "new_accept" : "to_accept" })),
streams: [],
isVideoEnabled: true, isLocalParticipant: false, roleName: role?.roleName || "none", presentationStream: null,

Run yarn build && yarn dev
Go to the Video Grid UI story, and join the same room in another tab
Verify that you see an empty cell next to the local participant cell.
Checkout this branch and apply the patch again
Go to the Video Grid UI story, and join the same room in another tab
Verify that you now see an avatar for the remote participant.

Screenshots/GIFs (if applicable)

before

after

Checklist

[x] My code follows the project's coding standards.
[x] Prefixed the PR title and commit messages with the service or package name
[ ] I have written unit tests (if applicable).
[ ] I have updated the documentation (if applicable).
[x] By submitting this pull request, I confirm that my contribution is made under the terms of the MIT license.

whereby / sdk