# Gallery Layout Only Responding to Canvas Dimension Changes

**URL:** <https://devforum.zoom.us/t/gallery-layout-only-responding-to-canvas-dimension-changes/103180>\
**Category:** Web\
**Created:** [February 5, 2024, 7:00am UTC](https://devforum.zoom.us/t/gallery-layout-only-responding-to-canvas-dimension-changes/103180 "2024-02-05T07:00:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![godwin.owonam](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/godwin.owonam/32/53602_2.png) [@godwin.owonam](https://devforum.zoom.us/u/godwin.owonam)\
**Post date:** [February 5, 2024, 7:00am UTC](https://devforum.zoom.us/t/gallery-layout-only-responding-to-canvas-dimension-changes/103180/1 "2024-02-05T07:00:05Z")

</div>

**Description**  
Hi there, team.  
I have noticed, having been working on the Web SDK implementation with ReactTS, for over a year now, that the gallery layout only responds to canvas dimension changes in the implementation.

I understand that this might be the expected working, but it has huge effects on the working of the implementation, knowing the shortcoming of the react useState hook.

This is very much glaring **when the camera is kept on** while interacting with the SDK. Some of the instances which these effects are notable are:

1. When you toggle the chats container.
2. Viewing from the receiver’s end when screensharing is stopped.
3. When user’s are removed/leave the meeting

Now, we have tried to workaround this by hooking the layout to listen to several events such as:

1. ‘user-added’
2. ‘user-removed’
3. ‘user-updated’
4. ‘active-share-change’
5. ‘share-content-dimension-change’

But the issues persist. In fact, only the ‘user-updated’ event seems to really be working. Now when I test with all participants muted. It seems like the application cannot even respond to anything else. But if at least two participants are unmuted, the application begins to respond. If everywhere is in still silence, it also behaves as when all participants were muted - unreactive.

While I know (and had stated already above) that this maybe inherent to the framework, or probably the SDK API, I don’t know where to look anymore and this is really bad for our company because these issues have contributed heavily to delayed delivery of our product.

So I kindly ask, is there a remedy for this? I sincerely don’t know where to look anymore.

**Which Web Video SDK version?**  
1.9.5

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [February 7, 2024, 8:44am UTC](https://devforum.zoom.us/t/gallery-layout-only-responding-to-canvas-dimension-changes/103180/2 "2024-02-07T08:44:05Z")

</div>

Hey @godwin.owonam

Thanks for your feedback.

It depends on how you design the layout of the gallery view.

Here are some thoughts for your reference:

- If there are many participants and you need to paginate the participant list, I suggest listening for the `user-added`, `user-removed`, and `user-updated` events because triggering these events means that participants have performed some actions, such as starting video (which can be determined from the `user.bVideoOn` property).

- If you need to simultaneously display shared content and the participant list, I suggest listening for the `active-share-change` event to determine whether to display the shared content and the layout change.

- Additionally, changes in the viewport size can also affect the layout of the gallery view. You can use `ResizeObserver` to bind to the elements you need to monitor and then perform the necessary layout calculations.

> **[ResizeObserver - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)**
>
> The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![godwin.owonam](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/godwin.owonam/32/53602_2.png) [@godwin.owonam](https://devforum.zoom.us/u/godwin.owonam)\
**Post date:** [February 9, 2024, 1:24pm UTC](https://devforum.zoom.us/t/gallery-layout-only-responding-to-canvas-dimension-changes/103180/3 "2024-02-09T13:24:24Z")

</div>

Thanks @vic.yang for responding.

Do you have any idea why the implementation seems not to be responding when the camera is on and all the users are muted?

Meanwhile, I will try your suggestion.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [March 10, 2024, 11:24pm UTC](https://devforum.zoom.us/t/gallery-layout-only-responding-to-canvas-dimension-changes/103180/4 "2024-03-10T23:24:26Z")

</div>

Closed on March 10, 2024, 11:24pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
