Fix resource leak due to unsafe scope reference

src/state/CallViewModel/CallViewModel.ts

@@ -60,6 +60,7 @@ import {
 import {
   accumulate,
   filterBehavior,
+  generateItem,
   generateItems,
   pauseWhen,
 } from "../../utils/observable";
@@ -446,29 +447,33 @@ export function createCallViewModel$(
 
   const localTransport$ = scope.behavior(
     matrixRTCMode$.pipe(
-      map((mode) =>
+      generateItem(
-        createLocalTransport$({
+        "CallViewModel localTransport$",
-          scope: scope,
+        // Re-create LocalTransport whenever the mode changes
-          memberships$: memberships$,
+        (mode) => ({ keys: [mode], data: undefined }),
-          ownMembershipIdentity,
+        (scope, _data$, mode) =>
-          client,
+          createLocalTransport$({
-          delayId$: scope.behavior(
+            scope: scope,
-            (
+            memberships$: memberships$,
-              fromEvent(
+            ownMembershipIdentity,
-                matrixRTCSession,
+            client,
-                MembershipManagerEvent.DelayIdChanged,
+            delayId$: scope.behavior(
-                // The type of reemitted event includes the original emitted as the second arg.
+              (
-              ) as Observable<[string | undefined, IMembershipManager]>
+                fromEvent(
-            ).pipe(map(([delayId]) => delayId ?? null)),
+                  matrixRTCSession,
-            matrixRTCSession.delayId ?? null,
+                  MembershipManagerEvent.DelayIdChanged,
-          ),
+                  // The type of reemitted event includes the original emitted as the second arg.
-          roomId: matrixRoom.roomId,
+                ) as Observable<[string | undefined, IMembershipManager]>
-          forceJwtEndpoint:
+              ).pipe(map(([delayId]) => delayId ?? null)),
-            mode === MatrixRTCMode.Matrix_2_0
+              matrixRTCSession.delayId ?? null,
-              ? JwtEndpointVersion.Matrix_2_0
+            ),
-              : JwtEndpointVersion.Legacy,
+            roomId: matrixRoom.roomId,
-          useOldestMember: mode === MatrixRTCMode.Legacy,
+            forceJwtEndpoint:
-        }),
+              mode === MatrixRTCMode.Matrix_2_0
+                ? JwtEndpointVersion.Matrix_2_0
+                : JwtEndpointVersion.Legacy,
+            useOldestMember: mode === MatrixRTCMode.Legacy,
+          }),
       ),
     ),
   );

src/utils/observable.ts

@@ -213,6 +213,38 @@ export function filterBehavior<T, S extends T>(
     );
 }
 
+/**
+ * Maps a changing input value to an item whose lifetime is tied to a certain
+ * computed key. The item may capture some dynamic data from the input.
+ */
+export function generateItem<
+  Input,
+  Keys extends [unknown, ...unknown[]],
+  Data,
+  Item,
+>(
+  name: string,
+  generator: (input: Input) => { keys: readonly [...Keys]; data: Data },
+  factory: (
+    scope: ObservableScope,
+    data$: Behavior<Data>,
+    ...keys: Keys
+  ) => Item,
+): OperatorFunction<Input, Item> {
+  return (input$) =>
+    input$.pipe(
+      generateItemsInternal(
+        name,
+        function* (input) {
+          yield generator(input);
+        },
+        factory,
+        (items) => items,
+      ),
+      map(([item]) => item),
+    );
+}
+
 function generateItemsInternal<
   Input,
   Keys extends [unknown, ...unknown[]],