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
75 lines
2.0 KiB
TypeScript
75 lines
2.0 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, useCallback } from "react";
|
|
import { useObservableEagerState } from "observable-hooks";
|
|
|
|
import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
|
|
import { type CallLayout } from "./CallLayout";
|
|
import { type DragCallback, useUpdateLayout } from "./Grid";
|
|
import styles from "./SpotlightExpandedLayout.module.css";
|
|
|
|
/**
|
|
* An implementation of the "expanded spotlight" layout, in which the spotlight
|
|
* tile stretches edge-to-edge and is overlaid by a picture-in-picture tile.
|
|
*/
|
|
export const makeSpotlightExpandedLayout: CallLayout<
|
|
SpotlightExpandedLayoutModel
|
|
> = ({ pipAlignment }) => ({
|
|
scrollingOnTop: true,
|
|
|
|
fixed: forwardRef(function SpotlightExpandedLayoutFixed(
|
|
{ model, Slot },
|
|
ref,
|
|
) {
|
|
useUpdateLayout();
|
|
|
|
return (
|
|
<div ref={ref} className={styles.layer}>
|
|
<Slot
|
|
className={styles.spotlight}
|
|
id="spotlight"
|
|
model={model.spotlight}
|
|
/>
|
|
</div>
|
|
);
|
|
}),
|
|
|
|
scrolling: forwardRef(function SpotlightExpandedLayoutScrolling(
|
|
{ model, Slot },
|
|
ref,
|
|
) {
|
|
useUpdateLayout();
|
|
const pipAlignmentValue = useObservableEagerState(pipAlignment);
|
|
|
|
const onDragPip: DragCallback = useCallback(
|
|
({ xRatio, yRatio }) =>
|
|
pipAlignment.next({
|
|
block: yRatio < 0.5 ? "start" : "end",
|
|
inline: xRatio < 0.5 ? "start" : "end",
|
|
}),
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<div ref={ref} className={styles.layer}>
|
|
{model.pip && (
|
|
<Slot
|
|
className={styles.pip}
|
|
id={model.pip.id}
|
|
model={model.pip}
|
|
onDrag={onDragPip}
|
|
onVisibilityChange={model.pip.setVisible}
|
|
data-block-alignment={pipAlignmentValue.block}
|
|
data-inline-alignment={pipAlignmentValue.inline}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}),
|
|
});
|