mirror of
https://github.com/vector-im/element-call.git
synced 2024-11-30 00:50:48 +08:00
d3f069e763
* Keep tiles in a stable order This introduces a new layer of abstraction on top of MediaViewModel: TileViewModel, which gives us a place to store data relating to tiles rather than their media, and also generally makes it easier to reason about tiles as they move about the call layout. I have created a class called TileStore to keep track of these tiles. This allows us to swap out the media shown on a tile as the spotlight speaker changes, and avoid moving tiles around unless they really need to jump between the visible/invisible regions of the layout. * Don't throttle spotlight updates Since we now assume that the spotlight and grid will be in sync (i.e. an active speaker in one will behave as an active speaker in the other), we don't want the spotlight to ever lag behind due to throttling. If this causes usability issues we should maybe look into making LiveKit's 'speaking' indicators less erratic first. * Make layout shifts due to a change in speaker less surprising Although we try now to avoid layout shifts due to the spotlight speaker changing wherever possible, a spotlight speaker coming from off screen can still trigger one. Let's shift the layout a bit more gracefully in this case. * Improve the tile ordering tests * Maximize the spotlight tile in portrait layout * Tell tiles whether they're actually visible in a more timely manner * Fix test * Fix speaking indicators logic * Improve readability of marbles * Fix test case --------- Co-authored-by: Hugh Nimmo-Smith <hughns@element.io>
79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { forwardRef } from "react";
|
|
import { useObservableEagerState } from "observable-hooks";
|
|
import classNames from "classnames";
|
|
|
|
import { CallLayout } from "./CallLayout";
|
|
import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
|
|
import styles from "./SpotlightLandscapeLayout.module.css";
|
|
import { useUpdateLayout } from "./Grid";
|
|
|
|
/**
|
|
* An implementation of the "spotlight landscape" layout, in which the spotlight
|
|
* tile takes up most of the space on the left, and the grid of participants is
|
|
* shown as a scrolling rail on the right.
|
|
*/
|
|
export const makeSpotlightLandscapeLayout: CallLayout<
|
|
SpotlightLandscapeLayoutModel
|
|
> = ({ minBounds }) => ({
|
|
scrollingOnTop: false,
|
|
|
|
fixed: forwardRef(function SpotlightLandscapeLayoutFixed(
|
|
{ model, Slot },
|
|
ref,
|
|
) {
|
|
useUpdateLayout();
|
|
useObservableEagerState(minBounds);
|
|
|
|
return (
|
|
<div ref={ref} className={styles.layer}>
|
|
<div className={styles.spotlight}>
|
|
<Slot
|
|
className={styles.slot}
|
|
id="spotlight"
|
|
model={model.spotlight}
|
|
/>
|
|
</div>
|
|
<div className={styles.grid} />
|
|
</div>
|
|
);
|
|
}),
|
|
|
|
scrolling: forwardRef(function SpotlightLandscapeLayoutScrolling(
|
|
{ model, Slot },
|
|
ref,
|
|
) {
|
|
useUpdateLayout();
|
|
useObservableEagerState(minBounds);
|
|
const withIndicators =
|
|
useObservableEagerState(model.spotlight.media).length > 1;
|
|
|
|
return (
|
|
<div ref={ref} className={styles.layer}>
|
|
<div
|
|
className={classNames(styles.spotlight, {
|
|
[styles.withIndicators]: withIndicators,
|
|
})}
|
|
/>
|
|
<div className={styles.grid}>
|
|
{model.grid.map((m) => (
|
|
<Slot
|
|
key={m.id}
|
|
className={styles.slot}
|
|
id={m.id}
|
|
model={m}
|
|
onVisibilityChange={m.setVisible}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}),
|
|
});
|