Im working on a video chat app, which is implemented using Chime SDK and React. Curently im working on a sorting algorithm to sort user tiles based on their video state and microphone activity.
The attendees are represented as an array of objects which look similar to this (simplified)
attendees = [{id: 1, name "User 1"}, {id: 2, name: "User 2"}, ...];
Then I have an array of user ids which represent user activity baset on the quantity of their activity:
activeSpeakers = [2, 1]
This array can be empty which means nobody is speaking, or if there are items, the first item is the id of the most active speaker and the last is the id of the least active speaker.
I also have an array of user Id which contains chronogicaly ordered id of users who have the camera on. This array also can be empty meaning that nobody has the camera active.
attendeeToTileId = [2]
My task is to sort the user tiles based theese condirions:
- Camera active and active speaker
- Camera active and inactive speaker
- Camera inactive and active speaker
- Camera inactive and inactive speaker
Also if you familiar with the Chime SDK, you know that theese states update frequent, and my idea is to throthle the sorting.
So i stared with something like this
useEffect(() => {
// sort logic here
// but should be throtthled
// or maybe debounced?
}, [attendees, attendeeToTileId, activeSpeakers])
I tryed custom throtling implementation as well as the lodash library, but nothing seems to work correctly.
So in summary:
- I need an advice for a sorting algorithm
- I need a throthling/debounce strategy for react
With either one, I would be happy. I just need a good starting point.
