Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-02-15 07:28:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reintroduce black bars around 1:1 remote video

Browse Source
This commit is contained in:
Scott Nonnenberg
2026-01-14 07:40:30 +10:00
committed by GitHub
parent 91f8176c12
commit 3fe00d80ea
2 changed files with 25 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
stylesheets/_modules.scss
View File

@@ -3557,8 +3557,8 @@ button.module-image__border-overlay:focus {
}
.module-ongoing-call {
&__remote-video-enabled {
max-width: 100%;
max-height: 100%;
height: 100%;
width: 100%;
position: relative;
&--reconnecting {
filter: blur(15px);

52
ts/calling/VideoSupport.preload.ts
View File

@@ -514,43 +514,37 @@ export class CanvasVideoRenderer {
width <= 2 ||
height <= 2 ||
width > MAX_VIDEO_CAPTURE_WIDTH ||
height > MAX_VIDEO_CAPTURE_HEIGHT ||
canvas.clientWidth <= 0 ||
canvas.clientHeight <= 0
height > MAX_VIDEO_CAPTURE_HEIGHT
) {
return;
}
const aspectRatio = width / height;
const frameAspectRatio = width / height;
const canvasAspectRatio = canvas.clientWidth / canvas.clientHeight;
const { parentElement } = canvas;
let parentAspectRatio = 1;
let dx = 0;
let dy = 0;
if (parentElement) {
parentAspectRatio =
parentElement.clientWidth / parentElement.clientHeight;
}
let style;
if (aspectRatio >= 1) {
// landscape
style = 'width: 100%';
if (frameAspectRatio > canvasAspectRatio) {
// Frame wider than view: We need bars at the top and bottom
canvas.width = width;
canvas.height = width / canvasAspectRatio;
dy = (canvas.height - height) / 2;
} else if (frameAspectRatio < canvasAspectRatio) {
// Frame narrower than view: We need pillars on the sides
canvas.width = height * canvasAspectRatio;
canvas.height = height;
dx = (canvas.width - width) / 2;
} else {
// portrait
style = 'height: 100%';
}
// container is more landscape than video
if (aspectRatio > 1 && parentAspectRatio > aspectRatio) {
style = 'height: 100%';
}
// container is more portait than video
if (aspectRatio < 1 && parentAspectRatio < aspectRatio) {
style = 'width: 100%';
// Will stretch perfectly with no bars
canvas.width = width;
canvas.height = height;
}
canvas.width = width;
canvas.height = height;
canvas.setAttribute('style', style);
if (dx > 0 || dy > 0) {
context.fillStyle = 'black';
context.fillRect(0, 0, canvas.width, canvas.height);
}
const sizeChanged =
this.imageData?.width !== width || this.imageData?.height !== height;
@@ -559,7 +553,7 @@ export class CanvasVideoRenderer {
this.imageData = new ImageData(width, height);
}
this.imageData.data.set(this.buffer.subarray(0, width * height * 4));
context.putImageData(this.imageData, 0, 0);
context.putImageData(this.imageData, dx, dy);
if (sizeChanged) {
this.sizeCallback?.({ width, height });