Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-08-29 21:15:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename one-on-one layouts to be orientation-agnostic

Browse Source
This commit is contained in:
Robin
2026-07-14 16:47:03 +02:00
parent 062e0a00fb
commit 0b21cff020
11 changed files with 85 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/grid/OneOnOneLandscapeLayout.module.css → src/grid/OneOnOneDesktopLayout.module.css
View File

14
src/grid/OneOnOneLandscapeLayout.tsx → src/grid/OneOnOneDesktopLayout.tsx
View File

@@ -10,28 +10,28 @@ import { type ReactNode, useCallback, useMemo } from "react";
import { useObservableEagerState } from "observable-hooks";
import classNames from "classnames";
import { type OneOnOneLandscapeLayout as OneOnOneLandscapeLayoutModel } from "../state/layout-types.ts";
import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
import { type CallLayout, arrangeTiles } from "./CallLayout";
import styles from "./OneOnOneLandscapeLayout.module.css";
import styles from "./OneOnOneDesktopLayout.module.css";
import { type DragCallback, useUpdateLayout } from "./Grid";
import { useBehavior } from "../useBehavior";
/**
* An implementation of the "one-on-one" layout for landscape screens, in which
* An implementation of the "one-on-one" layout for desktop platforms, in which
* the remote participant is shown at maximum size, overlaid by a small view of
* the local participant.
*/
export const makeOneOnOneLandscapeLayout: CallLayout<
OneOnOneLandscapeLayoutModel
export const makeOneOnOneDesktopLayout: CallLayout<
OneOnOneDesktopLayoutModel
> = ({ minBounds$ }) => ({
foreground: "fixed",
fixed: function OneOnOneLandscapeLayoutFixed({ ref }): ReactNode {
fixed: function OneOnOneDesktopLayoutFixed({ ref }): ReactNode {
useUpdateLayout();
return <div ref={ref} />;
},
scrolling: function OneOnOneLandscapeLayoutScrolling({
scrolling: function OneOnOneDesktopLayoutScrolling({
ref,
model,
Slot,

0
src/grid/OneOnOnePortraitLayout.module.css → src/grid/OneOnOneMobileLayout.module.css
View File

14
src/grid/OneOnOnePortraitLayout.tsx → src/grid/OneOnOneMobileLayout.tsx
View File

@@ -9,23 +9,23 @@ Please see LICENSE in the repository root for full details.
import { type ReactNode, useCallback } from "react";
import classNames from "classnames";
import { type OneOnOnePortraitLayout as OneOnOnePortraitLayoutModel } from "../state/layout-types.ts";
import { type OneOnOneMobileLayout as OneOnOneMobileLayoutModel } from "../state/layout-types.ts";
import { type CallLayout } from "./CallLayout";
import styles from "./OneOnOnePortraitLayout.module.css";
import styles from "./OneOnOneMobileLayout.module.css";
import { type DragCallback, useUpdateLayout } from "./Grid";
import { useBehavior } from "../useBehavior";
/**
* An implementation of the "one-on-one" layout for portrait screens, in which
* An implementation of the "one-on-one" layout for mobile platforms, in which
* the remote participant is shown at maximum size, overlaid by a small view of
* the local participant.
*/
export const makeOneOnOnePortraitLayout: CallLayout<
OneOnOnePortraitLayoutModel
export const makeOneOnOneMobileLayout: CallLayout<
OneOnOneMobileLayoutModel
> = () => ({
foreground: "scrolling",
fixed: function OneOnOnePortraitLayoutFixed({ ref, model, Slot }): ReactNode {
fixed: function OneOnOneMobileLayoutFixed({ ref, model, Slot }): ReactNode {
useUpdateLayout();
return (
<div ref={ref} className={styles.layer}>
@@ -38,7 +38,7 @@ export const makeOneOnOnePortraitLayout: CallLayout<
);
},
scrolling: function OneOnOnePortraitLayoutScrolling({
scrolling: function OneOnOneMobileLayoutScrolling({
ref,
model,
Slot,