feat(call): Improve Speaker view layout - #19035
Conversation
f9daf03 to
4592082
Compare
|
Looking really nice! The ratios are much better now on small screens :) Some feedback for design:
All together will look like this: talk.speaker.row.mp4 |
I don't see it as connected though. The control should trigger something that covers what it will move, like a background or frame on the stripe. With only floating position, it is not clear its boundaries. Maybe keep a background without fade it on hover?
The chevron right and left should be shown without hover to know there are more participants. I perceived toggling as a secondary action comparing to pagination but we can show them on both level like
I think that animation keeps the screen clean and not overwhelming, only showing what is necessary at the right state
Only the last page is not centered but it is aligned to the start, because there can be one video or two in that page hanging in the middle, my thinking was better to align them so it is perceived a good continuity of the stripe |
|
When alone in the call:
I would also prefer this. Maybe show pagination buttons as a detached element, then on follow-up you'd need a place to put 'Hide yourself' button somewhere anyway
Maybe more generic icon as an indicator for controls, and other buttons shows up on hover?
I mentioned before we should change a couple of lines, so last page in pagination just overlaps with page N-1, and shows as many tiles as it: #18355 (comment) What would also allow to drop first two commits with alignStart, which makes no sense to have IMO |
Hmm, another idea I had was to have 2 full height buttons on either side, similar to the left/right buttons in the dashboard events. That would make it pretty clear, but I liked your idea of the small pill button because I don't have to drag my mouse across the screen to go back to the previous "page". What do you think?
Yes, agreed that we don't need to show it at all times, only commented on the animation itself. Instead of extending it, we can have a simple fade (see screenshare)
Sure, rather than the camera controls icon maybe groups, recent actors, or switch accounts which is more related to showing the "participant" stripe? (also checked bottom panel open but IMO that is a niche icon that is not providing much info to the user) Agreed with @Antreesy about the last page :) |
That was my first thought too but because we have another chevron up button, it wasn't well structured |
4592082 to
9bd71f7
Compare
DorraJaouad
added
enhancement
feature: frontend 🖌️
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
The stripe kept the default placement, so its tiles were always laid out from the start of the row. They are now placed like the tiles of the grid, which centers them. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The local video was pinned next to the stripe with a size of its own, so it was neither paginated nor placed like the tiles it sits with. It now takes a slot of the stripe grid, exactly like it already does in the full grid, and is centered with the other tiles when the stripe holds every participant. The local video keeps being left out of the recording, which is the only mode not reserving a slot for it anymore. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The stripe took 250px of the call view, which is more than it needs now that its tiles are laid out like the tiles of the grid. The compact tiles have to fit in what is left of the stripe once the padding of its grid is taken out, so their minimum height follows. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The columns of the grid shared whatever width was left, so a grid with room to spare stretched its tiles far past the aspect ratio it aims for: a stripe holding a few tiles laid them out at a ratio of 2 instead of 1.5. The number of columns is the only thing the layout can shrink, and dropping a column only makes the remaining tiles wider, so the width of a column is now capped and the room to spare is left around the tiles rather than in them. The columns no longer take the whole width once they are capped, so the grid centers them. The stripe aimed for square tiles, which is neither what its tiles are capped to now nor what a camera gives, so every grid targets the same aspect ratio and the mode does not have to be given to pick it. The top padding of the stripe moves to its wrapper, as the height of the grid is what the height of its tiles is derived from. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The hypothetical tile height with one row less was divided by zero when the grid had a single row, so removing a row looked better than removing a column and the loop stopped without shrinking anything: a stripe kept as many columns as the screen could hold, however few tiles it had. An axis which is down to a single track is now never the one to remove, which also makes the guards inside the branches redundant. A grid holding nothing but the local video keeps a column for it, as an implicit, content sized column would collapse to nothing as soon as the camera is off. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The stripe was paginated by two arrows sitting on its sides and collapsed by a button of its own, which took room over the call and told nothing about the pages there are. The three of them now sit together over the top corner of the stripe, on the surface the bottom bar puts its own buttons over the call and painted with the dark palette the call view is painted with whichever theme is set. Paging through the tiles and collapsing the stripe are two controls of their own, so each of them keeps a surface of its own. The controls are only there for as long as the call is being looked at, and barely there until they are the ones hovered, as they sit over the tiles. Paging only shows the arrows of the pages there are, so that a stripe holding more participants than it can show says so, and unfolds into the page it is on once it is hovered or focused. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
…area The stripe slid down on its way out while being taken out of the flow right away, so the promoted area took the room of the stripe as soon as the transition started and was resized in one go while the stripe was still on its way. The stripe is now collapsed and expanded by its height, so the promoted area is laid out again on every frame and follows it. The tiles keep their height while it happens, so they slide out of the way rather than being squashed, and the transition is left out for whoever asked not to be shown motion. The transition also runs both ways now: the classes of the shared transitions are the ones of Vue 2, so only the way out was animated. The box holding the grid is renamed on the way, as `wrapper` is also the name of the root of VideoBottomBar, whose root is given the scope of the grid and would be laid out over the whole height of its tile by the rules of that box. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
…e videos do not divide evenly into pages. Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
b2d8aa7 to
f7751e7
Compare
5 participants
☑️ Resolves
It is also a pre requesite for flexible stripe (Restructured the stripe to also include local video)
AI (if applicable)
🖌️ UI Checklist
🖼️ Screenshots / Screencasts
BEFORE
Screen.Recording.2026-08-19.at.21.48.21.mov
AFTER
Screen.Recording.2026-08-19.at.21.44.34.mov
🚧 Tasks
🏁 Checklist