Fix focus connection state typo, simplify its initialization

src/state/CallViewModel.ts

@@ -607,7 +607,7 @@ export class CallViewModel extends ViewModel {
       switchMap((c) =>
         c?.state === "ready"
           ? // TODO mapping to ConnectionState for compatibility, but we should use the full state?
-            c.value.focusedConnectionState$.pipe(
+            c.value.focusConnectionState$.pipe(
               map((s) => {
                 if (s.state === "ConnectedToLkRoom") return s.connectionState;
                 return ConnectionState.Disconnected;

src/state/Connection.test.ts

@@ -159,7 +159,7 @@ describe("Start connection states", () => {
     };
     const connection = new RemoteConnection(opts, undefined);
 
-    expect(connection.focusedConnectionState$.getValue().state).toEqual(
+    expect(connection.focusConnectionState$.getValue().state).toEqual(
       "Initialized",
     );
   });
@@ -179,7 +179,7 @@ describe("Start connection states", () => {
     const connection = new RemoteConnection(opts, undefined);
 
     const capturedStates: FocusConnectionState[] = [];
-    connection.focusedConnectionState$.subscribe((value) => {
+    connection.focusConnectionState$.subscribe((value) => {
       capturedStates.push(value);
     });
 
@@ -231,7 +231,7 @@ describe("Start connection states", () => {
     const connection = new RemoteConnection(opts, undefined);
 
     const capturedStates: FocusConnectionState[] = [];
-    connection.focusedConnectionState$.subscribe((value) => {
+    connection.focusConnectionState$.subscribe((value) => {
       capturedStates.push(value);
     });
 
@@ -287,7 +287,7 @@ describe("Start connection states", () => {
     const connection = new RemoteConnection(opts, undefined);
 
     const capturedStates: FocusConnectionState[] = [];
-    connection.focusedConnectionState$.subscribe((value) => {
+    connection.focusConnectionState$.subscribe((value) => {
       capturedStates.push(value);
     });
 
@@ -343,7 +343,7 @@ describe("Start connection states", () => {
     const connection = setupRemoteConnection();
 
     const capturedState: FocusConnectionState[] = [];
-    connection.focusedConnectionState$.subscribe((value) => {
+    connection.focusConnectionState$.subscribe((value) => {
       capturedState.push(value);
     });
 
@@ -368,7 +368,7 @@ describe("Start connection states", () => {
     await connection.start();
 
     let capturedState: FocusConnectionState[] = [];
-    connection.focusedConnectionState$.subscribe((value) => {
+    connection.focusConnectionState$.subscribe((value) => {
       capturedState.push(value);
     });
 
@@ -417,12 +417,6 @@ describe("Start connection states", () => {
     vi.useFakeTimers();
 
     const connection = setupRemoteConnection();
-
-    let capturedState: FocusConnectionState[] = [];
-    connection.focusedConnectionState$.subscribe((value) => {
-      capturedState.push(value);
-    });
-
     await connection.start();
 
     const stopSpy = vi.spyOn(connection, "stop");
@@ -430,16 +424,6 @@ describe("Start connection states", () => {
 
     expect(stopSpy).toHaveBeenCalled();
     expect(fakeLivekitRoom.disconnect).toHaveBeenCalled();
-
-    /// Ensures that focusedConnectionState$ is bound to the scope.
-    capturedState = [];
-    // the subscription should be closed, and no new state should be received
-    // @ts-expect-error: Accessing private field for testing purposes
-    connection._focusedConnectionState$.next({ state: "Initialized" });
-    // @ts-expect-error: Accessing private field for testing purposes
-    connection._focusedConnectionState$.next({ state: "ConnectingToLkRoom" });
-
-    expect(capturedState.length).toEqual(0);
   });
 });
 

src/state/Connection.ts

@@ -66,13 +66,14 @@ export type FocusConnectionState =
  */
 export class Connection {
   // Private Behavior
-  private readonly _focusedConnectionState$ =
+  private readonly _focusConnectionState$ =
     new BehaviorSubject<FocusConnectionState>({ state: "Initialized" });
 
   /**
    * The current state of the connection to the focus server.
    */
-  public readonly focusedConnectionState$: Behavior<FocusConnectionState>;
+  public readonly focusConnectionState$: Behavior<FocusConnectionState> =
+    this._focusConnectionState$;
 
   /**
    * Whether the connection has been stopped.
@@ -91,7 +92,7 @@ export class Connection {
   public async start(): Promise<void> {
     this.stopped = false;
     try {
-      this._focusedConnectionState$.next({
+      this._focusConnectionState$.next({
         state: "FetchingConfig",
         focus: this.localTransport,
       });
@@ -100,7 +101,7 @@ export class Connection {
       // If we were stopped while fetching the config, don't proceed to connect
       if (this.stopped) return;
 
-      this._focusedConnectionState$.next({
+      this._focusConnectionState$.next({
         state: "ConnectingToLkRoom",
         focus: this.localTransport,
       });
@@ -108,13 +109,13 @@ export class Connection {
       // If we were stopped while connecting, don't proceed to update state.
       if (this.stopped) return;
 
-      this._focusedConnectionState$.next({
+      this._focusConnectionState$.next({
         state: "ConnectedToLkRoom",
         focus: this.localTransport,
         connectionState: this.livekitRoom.state,
       });
     } catch (error) {
-      this._focusedConnectionState$.next({
+      this._focusConnectionState$.next({
         state: "FailedToStart",
         error: error instanceof Error ? error : new Error(`${error}`),
         focus: this.localTransport,
@@ -139,7 +140,7 @@ export class Connection {
   public async stop(): Promise<void> {
     if (this.stopped) return;
     await this.livekitRoom.disconnect();
-    this._focusedConnectionState$.next({
+    this._focusConnectionState$.next({
       state: "Stopped",
       focus: this.localTransport,
     });
@@ -172,15 +173,9 @@ export class Connection {
   ) {
     const { transport, client, scope, remoteTransports$ } = opts;
 
-    this.livekitRoom = livekitRoom;
     this.localTransport = transport;
     this.client = client;
 
-    this.focusedConnectionState$ = scope.behavior(
-      this._focusedConnectionState$,
-      { state: "Initialized" },
-    );
-
     const participantsIncludingSubscribers$ = scope.behavior(
       connectedParticipantsObserver(this.livekitRoom),
       [],
@@ -212,10 +207,10 @@ export class Connection {
     scope
       .behavior<ConnectionState>(connectionStateObserver(this.livekitRoom))
       .subscribe((connectionState) => {
-        const current = this._focusedConnectionState$.value;
+        const current = this._focusConnectionState$.value;
         // Only update the state if we are already connected to the LiveKit room.
         if (current.state === "ConnectedToLkRoom") {
-          this._focusedConnectionState$.next({
+          this._focusConnectionState$.next({
             state: "ConnectedToLkRoom",
             connectionState,
             focus: current.focus,