mirror of
https://github.com/vector-im/element-call.git
synced 2026-02-08 04:19:11 +00:00
00056a7cd9
Instead of tracking for each individual tile whether it's visible, just track the total number of tiles that appear on screen. This ought to make the whole thing a lot less dynamic, which is crucial given that our UI renders asynchronously and RxJS doesn't really support cyclic dependencies in any rigorous way. In particular this ought to make the following kind of situation impossible: 1. There 3 tiles, ABC. A and B are on screen. 2. Now C becomes important. The requested order is now CAB. 3. To reduce the size of the layout shift, the algorithm selects to swap just B and C in the original order, giving ACB. However, the UI is blocked and doesn't render this order yet. 4. For whatever reason, a spurious update of the importance algorithm occurs. It once again requests CAB. 5. Now because the UI was blocked, the layout still thinks that A and B are on screen (rather than A and C). It thinks that C is some weird island of "off-screen territory" in the middle of the tile order. This confuses it into swapping A and C rather than keeping the layout stable. The reality is that whenever we think N tiles are visible on screen, we're always referring to the first N tiles in the grid. It's best if the code reflects this assumption.
31 lines
774 B
TypeScript
31 lines
774 B
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { type OneOnOneLayout, type OneOnOneLayoutMedia } from "./CallViewModel";
|
|
import { type TileStore } from "./TileStore";
|
|
|
|
/**
|
|
* Produces a one-on-one layout with the given media.
|
|
*/
|
|
export function oneOnOneLayout(
|
|
media: OneOnOneLayoutMedia,
|
|
prevTiles: TileStore,
|
|
): [OneOnOneLayout, TileStore] {
|
|
const update = prevTiles.from(2);
|
|
update.registerGridTile(media.local);
|
|
update.registerGridTile(media.remote);
|
|
const tiles = update.build();
|
|
return [
|
|
{
|
|
type: media.type,
|
|
local: tiles.gridTilesByMedia.get(media.local)!,
|
|
remote: tiles.gridTilesByMedia.get(media.remote)!,
|
|
},
|
|
tiles,
|
|
];
|
|
}
|