Add model for one-on-one layout

src/room/InCallView.tsx

@@ -330,10 +330,7 @@ export const InCallView: FC<InCallViewProps> = ({
       vm.layout.pipe(
         map((l) => {
           let makeLayout: CallLayout<Layout>;
-          if (
+          if (l.type === "grid")
-            l.type === "grid" &&
-            !(l.grid.length === 2 && l.spotlight === undefined)
-          )
             makeLayout = makeGridLayout as CallLayout<Layout>;
           else if (l.type === "spotlight")
             makeLayout = makeSpotlightLayout as CallLayout<Layout>;

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 => ({
+                    (grid, spotlight, screenShares): Layout =>
-                      type: "grid",
+                      grid.length == 2
-                      spotlight:
+                        ? {
-                        screenShares.length > 0 || grid.length > 20
+                            type: "one-on-one",
-                          ? spotlight
+                            spotlight:
-                          : undefined,
+                              screenShares.length > 0 ? spotlight : undefined,
-                      grid,
+                            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(