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) =>
-        createLocalTransport$({
-          scope: scope,
-          memberships$: memberships$,
-          ownMembershipIdentity,
-          client,
-          delayId$: scope.behavior(
-            (
-              fromEvent(
-                matrixRTCSession,
-                MembershipManagerEvent.DelayIdChanged,
-                // The type of reemitted event includes the original emitted as the second arg.
-              ) as Observable<[string | undefined, IMembershipManager]>
-            ).pipe(map(([delayId]) => delayId ?? null)),
-            matrixRTCSession.delayId ?? null,
-          ),
-          roomId: matrixRoom.roomId,
-          forceJwtEndpoint:
-            mode === MatrixRTCMode.Matrix_2_0
-              ? JwtEndpointVersion.Matrix_2_0
-              : JwtEndpointVersion.Legacy,
-          useOldestMember: mode === MatrixRTCMode.Legacy,
-        }),
+      generateItem(
+        "CallViewModel localTransport$",
+        // Re-create LocalTransport whenever the mode changes
+        (mode) => ({ keys: [mode], data: undefined }),
+        (scope, _data$, mode) =>
+          createLocalTransport$({
+            scope: scope,
+            memberships$: memberships$,
+            ownMembershipIdentity,
+            client,
+            delayId$: scope.behavior(
+              (
+                fromEvent(
+                  matrixRTCSession,
+                  MembershipManagerEvent.DelayIdChanged,
+                  // The type of reemitted event includes the original emitted as the second arg.
+                ) as Observable<[string | undefined, IMembershipManager]>
+              ).pipe(map(([delayId]) => delayId ?? null)),
+              matrixRTCSession.delayId ?? null,
+            ),
+            roomId: matrixRoom.roomId,
+            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[]],