Merge branch 'livekit' into valere/noise_cancellation

src/state/CallViewModel/CallViewModel.ts

@@ -15,9 +15,9 @@ import {
 } from "livekit-client";
 import { type Room as MatrixRoom } from "matrix-js-sdk";
 import {
+  BehaviorSubject,
   combineLatest,
   distinctUntilChanged,
-  EMPTY,
   filter,
   fromEvent,
   map,
@@ -28,7 +28,6 @@ import {
   pairwise,
   race,
   scan,
-  skip,
   skipWhile,
   startWith,
   Subject,
@@ -101,8 +100,7 @@ import { createHomeserverConnected$ } from "./localMember/HomeserverConnected.ts
 import {
   createLocalMembership$,
   enterRTCSession,
-  LivekitState,
-  type LocalMemberConnectionState,
+  RTCBackendState,
 } from "./localMember/LocalMembership.ts";
 import { createLocalTransport$ } from "./localMember/LocalTransport.ts";
 import {
@@ -202,7 +200,7 @@ export interface CallViewModel {
   hangup: () => void;
 
   // joining
-  join: () => LocalMemberConnectionState;
+  join: () => void;
 
   // screen sharing
   /**
@@ -476,6 +474,9 @@ export function createCallViewModel$(
         mediaDevices,
         muteStates,
         trackProcessorState$,
+        logger.getChild(
+          "[Publisher" + connection.transport.livekit_service_url + "]",
+        ),
       );
     },
     connectionManager: connectionManager,
@@ -574,15 +575,6 @@ export function createCallViewModel$(
     ),
   );
 
-  // CODESMELL?
-  // This is functionally the same Observable as leave$, except here it's
-  // hoisted to the top of the class. This enables the cyclic dependency between
-  // leave$ -> autoLeave$ -> callPickupState$ -> livekitConnectionState$ ->
-  // localConnection$ -> transports$ -> joined$ -> leave$.
-  const leaveHoisted$ = new Subject<
-    "user" | "timeout" | "decline" | "allOthersLeft"
-  >();
-
   /**
    * Whether various media/event sources should pretend to be disconnected from
    * all network input, even if their connection still technically works.
@@ -593,7 +585,6 @@ export function createCallViewModel$(
   // in a split-brained state.
   // DISCUSSION own membership manager ALSO this probably can be simplifis
   const reconnecting$ = localMembership.reconnecting$;
-  const pretendToBeDisconnected$ = reconnecting$;
 
   const audioParticipants$ = scope.behavior(
     matrixLivekitMembers$.pipe(
@@ -642,7 +633,7 @@ export function createCallViewModel$(
   );
 
   const handsRaised$ = scope.behavior(
-    handsRaisedSubject$.pipe(pauseWhen(pretendToBeDisconnected$)),
+    handsRaisedSubject$.pipe(pauseWhen(reconnecting$)),
   );
 
   const reactions$ = scope.behavior(
@@ -655,7 +646,7 @@ export function createCallViewModel$(
           ]),
         ),
       ),
-      pauseWhen(pretendToBeDisconnected$),
+      pauseWhen(reconnecting$),
     ),
   );
 
@@ -676,7 +667,7 @@ export function createCallViewModel$(
           { value: matrixLivekitMembers },
           duplicateTiles,
         ]) {
-          let localParticipantId = undefined;
+          let localParticipantId: string | undefined = undefined;
           // add local member if available
           if (localMatrixLivekitMember) {
             const { userId, participant$, connection$, membership$ } =
@@ -746,7 +737,7 @@ export function createCallViewModel$(
             livekitRoom$,
             focusUrl$,
             mediaDevices,
-            pretendToBeDisconnected$,
+            reconnecting$,
             displayName$,
             matrixMemberMetadataStore.createAvatarUrlBehavior$(userId),
             handsRaised$.pipe(map((v) => v[participantId]?.time ?? null)),
@@ -842,10 +833,7 @@ export function createCallViewModel$(
     merge(
       autoLeave$,
       merge(userHangup$, widgetHangup$).pipe(map(() => "user" as const)),
-    ).pipe(
-      scope.share,
-      tap((reason) => leaveHoisted$.next(reason)),
-    );
+    ).pipe(scope.share);
 
   const spotlightSpeaker$ = scope.behavior<UserMediaViewModel | null>(
     userMedia$.pipe(
@@ -994,7 +982,14 @@ export function createCallViewModel$(
     spotlightExpandedToggle$.pipe(accumulate(false, (expanded) => !expanded)),
   );
 
-  const gridModeUserSelection$ = new Subject<GridMode>();
+  const gridModeUserSelection$ = new BehaviorSubject<GridMode>("grid");
+
+  // Callback to set the grid mode desired by the user.
+  // Notice that this is only a preference, the actual grid mode can be overridden
+  // if there is a remote screen share active.
+  const setGridMode = (value: GridMode): void => {
+    gridModeUserSelection$.next(value);
+  };
   /**
    * The layout mode of the media tile grid.
    */
@@ -1003,28 +998,34 @@ export function createCallViewModel$(
     // automatically switch to spotlight mode and reset when screen sharing ends
     scope.behavior<GridMode>(
       gridModeUserSelection$.pipe(
-        switchMap((userSelection) =>
-          (userSelection === "spotlight"
-            ? EMPTY
-            : combineLatest([hasRemoteScreenShares$, windowMode$]).pipe(
-                skip(userSelection === null ? 0 : 1),
-                map(
-                  ([hasScreenShares, windowMode]): GridMode =>
-                    hasScreenShares || windowMode === "flat"
-                      ? "spotlight"
-                      : "grid",
-                ),
-              )
-          ).pipe(startWith(userSelection ?? "grid")),
-        ),
+        switchMap((userSelection): Observable<GridMode> => {
+          if (userSelection === "spotlight") {
+            // If already in spotlight mode, stay there
+            return of("spotlight");
+          } else {
+            // Otherwise, check if there is a remote screen share active
+            // as this could force us into spotlight mode.
+            return combineLatest([hasRemoteScreenShares$, windowMode$]).pipe(
+              map(([hasScreenShares, windowMode]): GridMode => {
+                const isFlatMode = windowMode === "flat";
+                if (hasScreenShares || isFlatMode) {
+                  logger.debug(
+                    `Forcing spotlight mode, hasScreenShares=${hasScreenShares} windowMode=${windowMode}`,
+                  );
+                  // override to spotlight mode
+                  return "spotlight";
+                } else {
+                  // respect user choice
+                  return "grid";
+                }
+              }),
+            );
+          }
+        }),
       ),
       "grid",
     );
 
-  const setGridMode = (value: GridMode): void => {
-    gridModeUserSelection$.next(value);
-  };
-
   const gridLayoutMedia$: Observable<GridLayoutMedia> = combineLatest(
     [grid$, spotlight$],
     (grid, spotlight) => ({
@@ -1450,16 +1451,13 @@ export function createCallViewModel$(
   // reassigned here to make it publicly accessible
   const toggleScreenSharing = localMembership.toggleScreenSharing;
 
-  const join = localMembership.requestConnect;
-  // TODO-MULTI-SFU: Use this view model for the lobby as well, and only call this once 'join' is clicked?
-  join();
   return {
     autoLeave$: autoLeave$,
     callPickupState$: callPickupState$,
     ringOverlay$: ringOverlay$,
     leave$: leave$,
     hangup: (): void => userHangup$.next(),
-    join: join,
+    join: localMembership.requestConnect,
     toggleScreenSharing: toggleScreenSharing,
     sharingScreen$: sharingScreen$,
 
@@ -1470,7 +1468,7 @@ export function createCallViewModel$(
 
     fatalError$: scope.behavior(
       localMembership.connectionState.livekit$.pipe(
-        filter((v) => v.state === LivekitState.Error),
+        filter((v) => v.state === RTCBackendState.Error),
         map((s) => s.error),
       ),
       null,