mirror of
https://github.com/vector-im/element-call.git
synced 2026-08-17 20:39:19 +00:00
1e128c4da0
It turns out that the timers which repeatedly poll the RTP stats of each video track all run independently of each other and can add up to a small but constant sink of CPU. Meanwhile we can replace these timers with HTMLVideoElement 'resize' event listeners, which is way more efficient and reacts instantly to orientation changes.
31 lines
1.5 KiB
TypeScript
31 lines
1.5 KiB
TypeScript
/*
|
|
Copyright 2026 Element Creations Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
/**
|
|
* Computes the appropriate video fit mode ("cover" or "contain") based on the aspect ratios of the video and the tile.
|
|
* - If the video and tile have the same orientation (both landscape or both portrait), we use "cover" to fill the tile, even if it means cropping.
|
|
* - If the video and tile have different orientations, we use "contain" to ensure the entire video is visible, even if it means letterboxing (black bars).
|
|
*/
|
|
export function autoVideoFit(
|
|
videoAspectRatio: number,
|
|
tileAspectRatio: number,
|
|
): "cover" | "contain" {
|
|
if (Number.isNaN(videoAspectRatio) || Number.isNaN(tileAspectRatio)) {
|
|
// If we have invalid sizes (e.g. width or height is 0), default to cover to avoid black bars.
|
|
return "cover";
|
|
}
|
|
|
|
// If video is landscape (ratio > 1) and tile is portrait (ratio < 1) or vice versa,
|
|
// we want to use "contain" (fit) mode to avoid excessive cropping
|
|
const videoIsLandscape = videoAspectRatio > 1;
|
|
const tileIsLandscape = tileAspectRatio > 1;
|
|
|
|
// If the orientations are the same, use the cover mode (Preserves the aspect ratio, and the image fills the container.)
|
|
// If they're not the same orientation, use the contain mode (Preserves the aspect ratio, but the image is letterboxed - black bars- to fit within the container.)
|
|
return videoIsLandscape === tileIsLandscape ? "cover" : "contain";
|
|
}
|