From e0b10d89b5c78ec5d11f1757c77ce722f610fdd9 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 7 Jun 2024 12:27:13 -0400
Subject: [PATCH] Add model for one-on-one layout

---
 src/room/InCallView.tsx    |  5 +----
 src/state/CallViewModel.ts | 37 +++++++++++++++++++++++++++++--------
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 3a16e1c6..bab24991 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -330,10 +330,7 @@ export const InCallView: FC<InCallViewProps> = ({
       vm.layout.pipe(
         map((l) => {
           let makeLayout: CallLayout<Layout>;
-          if (
-            l.type === "grid" &&
-            !(l.grid.length === 2 && l.spotlight === undefined)
-          )
+          if (l.type === "grid")
             makeLayout = makeGridLayout as CallLayout<Layout>;
           else if (l.type === "spotlight")
             makeLayout = makeSpotlightLayout as CallLayout<Layout>;
diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts
index 3d48da22..62c35a8e 100644
--- a/src/state/CallViewModel.ts
+++ b/src/state/CallViewModel.ts
@@ -102,6 +102,13 @@ export interface SpotlightLayout {
   grid: UserMediaViewModel[];
 }
 
+export interface OneOnOneLayout {
+  type: "one-on-one";
+  spotlight?: ScreenShareViewModel[];
+  local: LocalUserMediaViewModel;
+  remote: RemoteUserMediaViewModel;
+}
+
 export interface FullScreenLayout {
   type: "full screen";
   spotlight: MediaViewModel[];
@@ -120,6 +127,7 @@ export interface PipLayout {
 export type Layout =
   | GridLayout
   | SpotlightLayout
+  | OneOnOneLayout
   | FullScreenLayout
   | PipLayout;
 
@@ -501,14 +509,27 @@ export class CallViewModel extends ViewModel {
                 case "grid":
                   return combineLatest(
                     [this.grid, this.spotlight, this.screenShares],
-                    (grid, spotlight, screenShares): Layout => ({
-                      type: "grid",
-                      spotlight:
-                        screenShares.length > 0 || grid.length > 20
-                          ? spotlight
-                          : undefined,
-                      grid,
-                    }),
+                    (grid, spotlight, screenShares): Layout =>
+                      grid.length == 2
+                        ? {
+                            type: "one-on-one",
+                            spotlight:
+                              screenShares.length > 0 ? spotlight : undefined,
+                            local: grid.find(
+                              (vm) => vm.local,
+                            ) as LocalUserMediaViewModel,
+                            remote: grid.find(
+                              (vm) => !vm.local,
+                            ) as RemoteUserMediaViewModel,
+                          }
+                        : {
+                            type: "grid",
+                            spotlight:
+                              screenShares.length > 0 || grid.length > 20
+                                ? spotlight
+                                : undefined,
+                            grid,
+                          },
                   );
                 case "spotlight":
                   return combineLatest(