Skip to content

fix(call): polish speaker view - #19216

Open
DorraJaouad wants to merge 6 commits into
mainfrom
feat/noid/call-view-stripe-card
Open

fix(call): polish speaker view#19216
DorraJaouad wants to merge 6 commits into
mainfrom
feat/noid/call-view-stripe-card

Conversation

@DorraJaouad

Copy link
Copy Markdown
Contributor

β˜‘οΈ Resolves

AI (if applicable)

  • The content of this PR was partly or fully generated using AI

πŸ–ŒοΈ UI Checklist

πŸ–ΌοΈ Screenshots / Screencasts

🏚️ Before 🏑 After
image image
-- --
image image

🏁 Checklist

  • 🌏 Tested with different browsers / clients:
    • Chromium (Chrome / Edge / Opera / Brave)
    • Firefox
    • Safari
    • Talk Desktop
    • Integrations with Files sidebar and other apps
    • Not risky to browser differences / client
  • πŸ–ŒοΈ Design was reviewed, approved or inspired by the design team
  • ⛑️ Tests are included or not possible
  • πŸ“— User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

@DorraJaouad
DorraJaouad requested a review from Antreesy August 31, 2026 11:30
@DorraJaouad DorraJaouad self-assigned this Aug 31, 2026
@nextcloud-command nextcloud-command added the AI assisted This PR contains AI-assisted commits label Aug 31, 2026
@DorraJaouad DorraJaouad changed the title fix(call): align one participant stripe to the end. fix(call): polish speaker view Aug 31, 2026
Assisted-by: ClaudeCode:claude-opus-5

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The background of a tile was a translucent tint, so whatever the tile sat
over - the promoted video, in a stripe - showed through it in full detail.
Paint the shade that tint used to composite to instead, and drop the
`background-image` reset left over with it: no rule sets an image here.

Assisted-by: ClaudeCode:claude-opus-5

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The stripe took no surface of its own, so its tiles floated over the call
background whether or not there was anything behind them. Give it a card
with its leading corners rounded, which reads as being pulled up and pushed
back down as the stripe expands and collapses.

Assisted-by: ClaudeCode:claude-opus-5

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The promoted video covers the whole call view, the stripe floating over it,
while a single participant fills the promoted area. A call nobody else has
joined yet was left out, so the stripe sat on a card of its own for as long
as it was the only thing on screen and dropped it the moment somebody
joined. Lay an empty promoted area out the same way.

Assisted-by: ClaudeCode:claude-opus-5

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
`isOneToOne` counted the participants of the call to inset the promoted
video by the padding of the wrapper, which is what the full page layout asks
for. It names the call rather than the layout, and the two have since parted
ways: a call nobody else has joined is laid out full page and is not one to
one. Pass the layout itself.

SpeakersGrid handed the flag to tiles that are never big, where the class it
sets matches no rule, so it is dropped there.

Assisted-by: ClaudeCode:claude-opus-5

Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
@DorraJaouad
DorraJaouad force-pushed the feat/noid/call-view-stripe-card branch from bb19f47 to fb58d55 Compare August 31, 2026 12:19

@Antreesy Antreesy left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested, looks better. My only concern is new background color

// capped, so the grid itself has to place them. A stripe holding
// a single tile keeps it at the inline end, where the tiles of a
// fuller stripe end as well, rather than in the middle.
justifyContent: this.isStripe && this.totalTiles === 1 ? 'end' : 'center',

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This probably needs a guard for noLocalVideoReserve - so if it's three people, but your video will be hidden, don't shift a sole person in stripe to your place

// left in a one to one call - are lifted off the call by a shadow instead
.overlap & :deep(.localVideoContainer),
.overlap & :deep(.video-container-grid) {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shadow is cropped at bottom, as it's larger than allowed area:
Image

// The card the tiles sit on. It is pulled up out of the bottom of the call
// view and pushed back down when it collapses, so only the corners it leads
// with are rounded
.grid-main-wrapper:not(.overlap) & {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bottom area feels weird/abrupt, as above and below stripe it's transparent:

Image

Maybe there should be a divider, so a cut-off of video tiles from controls looks intended?

Image

Even rounding up bottom corners feels better to me:

Image

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @nimishavijay for opinion

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AI assisted This PR contains AI-assisted commits feature: call πŸ“Ή Voice and video calls feature: frontend πŸ–ŒοΈ "Web UI" client

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants