Skip to content

fix(call): polish speaker view #19216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DorraJaouad wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix(call): polish speaker view #19216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5a38215
fix(call): align one participant stripe to the end.
DorraJaouad Aug 31, 2026
19b4bef
fix(call): paint the tiles of a call on a solid background
DorraJaouad Aug 31, 2026
7f695a8
feat(call): lay the stripe out as a card
DorraJaouad Aug 31, 2026
7f064f6
fix(call): float the stripe while nobody else is in the call
DorraJaouad Aug 31, 2026
7225340
refactor(call): name the promoted video prop after the layout it drives
DorraJaouad Aug 31, 2026
fb58d55
fix(Stripe): adjust positioning of stripe against promoted area
DorraJaouad Aug 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/components/CallView/CallView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
:model="selectedCallParticipantModel"
:sharedData="sharedDatas[selectedVideoPeerId]"
:showTalkingHighlight="false"
:isOneToOne="isOneToOne"
:isFullPage="showFullPage"
isGrid
isBig
fitVideo />
Expand Down Expand Up @@ -77,7 +77,6 @@
:models="promotedSpeakerModels"
:sharedDatas="sharedDatas"
:showVideoOverlay="showVideoOverlay"
:isOneToOne="isOneToOne"
@selectVideo="handleSelectVideo" />
<!-- Promoted "autopilot" mode -->
<VideoVue
Expand All @@ -91,7 +90,7 @@
isGrid
fitVideo
isBig
:isOneToOne="isOneToOne"
:isFullPage="showFullPage"
:isSidebar="isSidebar"
@forcePromoteVideo="forcePromotedModel = $event" />
<!-- presenter overlay -->
Expand Down Expand Up @@ -451,12 +450,13 @@ export default {
return this.selectedVideoPeerId !== null && !this.screens.includes(this.selectedVideoPeerId)
},

isOneToOne() {
return this.callParticipantModels.length === 1
},

// Whether the promoted video covers the whole call view, with the stripe
// floating over it rather than taking room of its own. A promoted area
// held by a single participant is laid out that way, and so is one with
// nobody in it yet.
showFullPage() {
return this.isOneToOne && !(this.showLocalScreen || this.showRemoteScreen || this.showSelectedScreen)
return this.callParticipantModels.length <= 1
&& !(this.showLocalScreen || this.showRemoteScreen || this.showSelectedScreen)
},

hasLocalVideo() {
Expand Down
3 changes: 0 additions & 3 deletions src/components/CallView/Grid/SpeakersGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ const props = defineProps<{
sharedDatas: Record<string, object>
/** Whether the video overlay is currently shown */
showVideoOverlay?: boolean
/** Whether the call is a one to one conversation */
isOneToOne?: boolean
}>()

const emit = defineEmits<{
Expand Down Expand Up @@ -101,7 +99,6 @@ function tileStyle(index: number) {
:model="model"
:sharedData="sharedDatas[model.attributes.peerId]"
:showVideoOverlay="showVideoOverlay"
:isOneToOne="isOneToOne"
isGrid
fitVideo
@clickVideo="emit('selectVideo', model.attributes.peerId)" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/CallView/Grid/StripeControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const toggleLabel = computed(() => props.isOpen
align-items: center;
gap: var(--default-grid-baseline);
width: fit-content;
padding-block-start: var(--default-grid-baseline);
padding-block-start: var(--grid-gap);
// Barely there while the call is not being looked at, as they sit over the
// tiles, and in their own color as soon as it is
opacity: .4;
Expand Down
32 changes: 27 additions & 5 deletions src/components/CallView/Grid/VideosGrid.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,8 +465,10 @@ export default {
gridTemplateColumns: `repeat(${getHalfColumnCount(columns)}, ${halfColumnWidth})`,
gridTemplateRows: `repeat(${rows}, minmax(${this.dpiAwareMinHeight}px, 1fr))`,
// The columns no longer take the whole width once they are
// capped, so the grid itself has to center them
justifyContent: 'center',
// 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',

@Antreesy Antreesy Aug 31, 2026

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

@DorraJaouad DorraJaouad Sep 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

But then, one video will be centered in the middle which is an issue at the moment

@Antreesy Antreesy Sep 1, 2026

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.

maybe put it to 'start', if it's not you?

}
},

Expand Down Expand Up @@ -614,6 +616,7 @@ export default {

&--stripe {
height: var(--stripe-height);
margin-block-start: var(--grid-gap);
}
}

Expand Down Expand Up @@ -669,6 +672,25 @@ export default {
// Kept out of the grid itself, whose measured height is the height of its
// tiles
padding-block: var(--grid-gap);
// Keeps the tiles off the rounded corners of the card
padding-inline: var(--grid-gap);

// 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) & {

@Antreesy Antreesy Aug 31, 2026

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

@Antreesy Antreesy Aug 31, 2026

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

@DorraJaouad DorraJaouad Sep 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I also agree, because the bottom bar shares the same color as the call view background so the card looks it coming out of nowhere

@nimishavijay nimishavijay Sep 1, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I don't see the issue with not having a background at all. We are losing more pixel space if we add this and visually creating 2 "lines"between the main speaker and the rest of the participants. If we do want to have a background then I'd vote for a the rounded corners

@DorraJaouad DorraJaouad Sep 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

The reason we are adding the background is that we received frequent feedback that the control buttons are perceived as detached from the stripe when there is not full line of participants. I have added the background specifically for that reason so that is why I am reverting it back.

Maybe there is a better approach?

background-color: #262626;
border-start-start-radius: var(--border-radius-container);
border-start-end-radius: var(--border-radius-container);
}

// A stripe overlapping the promoted video takes no card of its own, which
// would band that video across: its tiles - the self camera, the only one
// 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);

@Antreesy Antreesy Aug 31, 2026

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

@DorraJaouad DorraJaouad Sep 1, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Sharp eye, I check if it is harmless to add a few pixels down

}
}

.dev-mode-video {
Expand Down Expand Up @@ -744,15 +766,15 @@ export default {

.stripe-controls-position {
position: absolute;
top: var(--grid-gap);
inset-inline-end: var(--grid-gap);
top: calc(var(--default-grid-baseline) * 3);
inset-inline-end: calc(var(--default-grid-baseline) * 3);
z-index: 2;
transition: top var(--animation-slow) ease-in-out;

// A collapsed stripe holds no tile to sit over, and no room of its own to
// sit in, so the controls take the room above it
&--collapsed {
top: calc(-1 * (var(--clickable-area-small) + var(--default-grid-baseline) + var(--grid-gap)));
top: calc(-1 * (var(--clickable-area-small) + var(--grid-gap) + var(--grid-gap)));
}
}

Expand Down
10 changes: 6 additions & 4 deletions src/components/CallView/shared/VideoBackground.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,14 @@ const isDarkTheme = useIsDarkTheme()
top: 0;
height: 100%;
width: 100%;
background-color: rgba(var(--overlay-color), 0.3);
background-image: none;
// A solid surface: nothing of the call view behind the tile shows through
// it. The two colours are what the translucent tint they replace used to
// composite to over the background of the call, so a tile keeps the shade
// it had in either theme.
background-color: #363636;

--overlay-color: 0, 0, 0;
&.dark-theme {
--overlay-color: 255, 255, 255;
background-color: #515151;
}
}
</style>
9 changes: 5 additions & 4 deletions src/components/CallView/shared/VideoVue.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,8 +189,9 @@ export default {
default: false,
},

// True when this video component is used in one to one conversations
isOneToOne: {
// True when this video fills the whole call view, with the stripe
// floating over it
isFullPage: {
type: Boolean,
default: false,
},
Expand Down Expand Up @@ -323,7 +324,7 @@ export default {
presenter: this.isPresenterOverlay && this.mouseover,
'video-container-grid': this.isGrid,
'video-container-big': this.isBig,
'one-to-one': this.isOneToOne,
'full-page': this.isFullPage,
'presenter-overlay': this.isPresenterOverlay,
}
},
Expand Down Expand Up @@ -654,7 +655,7 @@ export default {
.video-container-big {
position: absolute;

&.one-to-one {
&.full-page {
width: calc(100% - var(--wrapper-padding) * 2);
}

Expand Down
Loading