diff --git a/src/grid/GridLayout.tsx b/src/grid/GridLayout.tsx index b49bb32a..18a10cbf 100644 --- a/src/grid/GridLayout.tsx +++ b/src/grid/GridLayout.tsx @@ -36,6 +36,10 @@ interface GridCSSProperties extends CSSProperties { "--height": string; } +/** + * An implementation of the "grid" layout, in which all participants are shown + * together in a scrolling grid. + */ export const makeGridLayout: CallLayout = ({ minBounds, spotlightAlignment, diff --git a/src/grid/OneOnOneLayout.tsx b/src/grid/OneOnOneLayout.tsx index 1f9a39e7..635c7898 100644 --- a/src/grid/OneOnOneLayout.tsx +++ b/src/grid/OneOnOneLayout.tsx @@ -24,6 +24,10 @@ import { useReactiveState } from "../useReactiveState"; import styles from "./OneOnOneLayout.module.css"; import { DragCallback } from "./Grid"; +/** + * An implementation of the "one-on-one" layout, in which the remote participant + * is shown at maximum size, overlaid by a small view of the local participant. + */ export const makeOneOnOneLayout: CallLayout = ({ minBounds, pipAlignment, diff --git a/src/grid/SpotlightExpandedLayout.tsx b/src/grid/SpotlightExpandedLayout.tsx index 40f77ca9..b92460ee 100644 --- a/src/grid/SpotlightExpandedLayout.tsx +++ b/src/grid/SpotlightExpandedLayout.tsx @@ -23,6 +23,10 @@ import { DragCallback } from "./Grid"; import styles from "./SpotlightExpandedLayout.module.css"; import { useReactiveState } from "../useReactiveState"; +/** + * 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 > = ({ minBounds, pipAlignment }) => ({ diff --git a/src/grid/SpotlightLandscapeLayout.tsx b/src/grid/SpotlightLandscapeLayout.tsx index 40b02f9a..e3ca1bf9 100644 --- a/src/grid/SpotlightLandscapeLayout.tsx +++ b/src/grid/SpotlightLandscapeLayout.tsx @@ -23,6 +23,11 @@ import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../st import styles from "./SpotlightLandscapeLayout.module.css"; import { useReactiveState } from "../useReactiveState"; +/** + * 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 }) => ({ diff --git a/src/grid/SpotlightPortraitLayout.tsx b/src/grid/SpotlightPortraitLayout.tsx index 5c0cb0a8..5b82ca62 100644 --- a/src/grid/SpotlightPortraitLayout.tsx +++ b/src/grid/SpotlightPortraitLayout.tsx @@ -34,6 +34,11 @@ interface GridCSSProperties extends CSSProperties { "--grid-tile-height": string; } +/** + * An implementation of the "spotlight portrait" layout, in which the spotlight + * tile is shown across the top of the screen, and the grid of participants + * scrolls behind it. + */ export const makeSpotlightPortraitLayout: CallLayout< SpotlightPortraitLayoutModel > = ({ minBounds }) => ({