Hugh Nimmo-SmithandGitHub
0087e37f30
* Enable @typescript-eslint/consistent-type-imports lint rule This is to help ensure that we get proper vite/rollup lazy loading by not `import`ing more than we need to. Revert "Enable @typescript-eslint/consistent-type-imports lint rule" This reverts commit ba385fa00b7e410cc508fd5fb9fe972233ae114f. Enable @typescript-eslint/consistent-type-imports lint rule This is to help ensure that we get proper vite/rollup lazy loading by not `import`ing more than we need to. . * Format
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 { type CallLayout } from "./CallLayout";
|
|
import { type 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>
|
|
);
|
|
}),
|
|
});
|