How are Jitsi video tiles sorted in tiles mode?

Hello,

last year I developed a Jitsi bookmarklet which users can use to sort their videotiles alphabetically or however they want, thus somewhat solving the issue that participants see the video tiles in different order. Here’s the link: https://github.com/kaiyazeera/jitsi-bookmarklets
However, since 2022, the bookmarklet is not working anymore.

My questions are:

  • How has the CSS changed lately regarding the order of video tiles?
  • How are Jitsi video tiles currently sorted?

My 2021-version used the order- attribute of display: flex. I already manually played around with the CSS a lot, removed position: absolute, top: n px` and so on, I do seem to (still) work on the correct elements, but I cannot purposefully influence their order anymore in a controlled fashion.
Please note, that I am not a web-frontend-developer, even though I am accustomed with the web basics.
Anyone here that can point me in the right direction?

The order is based on recent speaker, alphabetical and raised hand.

What I meant is, how are they ordered from a technical perspective, like which CSS elements are relevant?

No idea.

Here’s the DOM tree, the elements I am manipulating in the script (see link above) are marked red. Prior to 2022, adding order to them was enough (even though, their position in the tree has changed lately, but unluckily, I did not document the old DOM tree)

Yep, many things changed there, you can search in the PRs about the sorting (multiple prs) and check the react code

Is there no documentation at all? :dizzy_face:

If you add these properties, the tiles will no longer be absolutely positioned and then you will be able to order them by changing order property on span.videocontainer elements.

span.videocontainer {
  position: relative !important;
  top: unset !important;
  left: unset !important;
}
.tile-view .remote-videos > div {
  flex-wrap: wrap;
}
1 Like

Many thanks, that was it, I will update the bookmarklet soon :slight_smile:

Edit: Bookmarklets are working again

Hello, we have a very similar problem. The main problem is unfortunately not to overwrite the positioning in css, but that not all tiles are in the DOM tree at all, but only those of which jitsi believes to be visible due to its position calculations.

Your sorting function therefore no longer sorts over all tiles but only over the visible ones (+N).

Unfortunately, this also very easily kills the possibility of correct scrolling in order to reload tiles at all.

1 Like

Hello Salocin, thanks for reporting!
Damn, you’re correct, while it seems to work with maximum screen size and/or few participants there are some issues when I join with 26 participants and reduce the browser window size, the whole thing becomes buggy.
In 2021, all tiles were in the DOM tree (as far as I know, at least I never experienced any problems), but now that seems to have changed. I will check back on that some time later (though if anyone likes to contribute, feel free).

I am also considering modifying server-side, but have not yet found the time to sufficiently review the code.

Not everything is in the DOM this was an optimization done to be able to accommodate large meetings, and this is client change. Anyway CSS modification on top of meet is not something that will work for long. We are working on some more UI changes which will break anything that maybe working today.

Can I ask, what of the current sorting doesn’t work for you?

1 Like

We need a static sort of participants so that we do not have to distribute a dynamic order of speekers via a secondary channel. The dynamic sorting is not working for our usecase.

Would disabling thumbnail reordering help?

1 Like

Not sure, will need to test it against participants joining and leaving.