From 377b7ff5de0b014e594ef969657918fb3e758af4 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Thu, 18 Jul 2024 11:33:20 -0400
Subject: [PATCH] Explain each layout

---
 src/grid/GridLayout.tsx               | 4 ++++
 src/grid/OneOnOneLayout.tsx           | 4 ++++
 src/grid/SpotlightExpandedLayout.tsx  | 4 ++++
 src/grid/SpotlightLandscapeLayout.tsx | 5 +++++
 src/grid/SpotlightPortraitLayout.tsx  | 5 +++++
 5 files changed, 22 insertions(+)

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<GridLayoutModel> = ({
   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<OneOnOneLayoutModel> = ({
   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 }) => ({