Grid misordered when reloading web page

[erdnaxe]

Scenario causing the issue:

• All users join a room,
• User already in the room start sharing or unsharing (Ready/Panic), the video grid is in the same order for all participants,
• One user reload their webpage and loses the order of the grid.

It would be nice to have consistent grid order between all clients as it would enable people to point to their partners, which is not something working well in other meeting software.

I did not look in details yet but I guess this is caused by the client receiving WebRTC tracks in disorder and then creating HTML elements (in disorder).
What is your opinion about explicitly ordering the grid with WebRTC track identifiers ? I might try writing a pull request if you consider this as useful.

[jech]

I agree, the current behaviour is confusing. I'm not sure what the proper ordering is, perhaps we could have the server timestamp video streams? Or perhaps we want multiple streams coming from the same user to appear together?

Another, perhaps related, issue is the need to have multiple layouts — I'd like the user to be able to switch between the current matrix layout and a layout where a single video occupies most of the tab and the other videos are smaller, in a column on the right. (Vertical column rather than row at the bottom, since modern laptops have wide screens.)

If you're competent with DOM handling, and know how to do that, I'd be grateful for help.

[erdnaxe]

I agree, the current behaviour is confusing. I'm not sure what the proper ordering is, perhaps we could have the server timestamp video streams? Or perhaps we want multiple streams coming from the same user to appear together?

If we order video streams by creation time then the behaviour is easy to understand for end-users/teacher/students. We might want to always show op/speaker streams first. I like this approach, should I propose this on the mailing list?

If we go for grouping multiple streams coming from the same user then the layout will drastically change if the first user adds a video stream, moving all other streams.

On implementation side, should we put the creation time in Stream.userdata or it is important enough to add a new attribute?

We could also go really fancy (with more JavaSscript...) and enable the operator to drag&drop streams, reordering the grid for all participants, but then we need to modify the protocol and this adds complexity.

Another, perhaps related, issue is the need to have multiple layouts — I'd like the user to be able to switch between the current matrix layout and a layout where a single video occupies most of the tab and the other videos are smaller, in a column on the right. (Vertical column rather than row at the bottom, since modern laptops have wide screens.)

If you're competent with DOM handling, and know how to do that, I'd be grateful for help.

I would consider this as a separate issue. I am used to VueJS and I have an idea of how to implement this, but I am not competent in plain DOM handling. I can try but it is going to take some trials, errors and time.

I think we might want a behaviour like Jitsi but rather that focusing a video when clicking on it (witch can be frustrating when misclicking), it would be nicer to add a "focus" button in the video-controls of each stream.