lint

src/reactions/useReactionsSender.tsx

@@ -16,7 +16,6 @@ import {
 import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useObservableEagerState } from "observable-hooks";
-import { map } from "rxjs";
 
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { useClientState } from "../ClientContext";
@@ -75,24 +74,22 @@ export const ReactionsSenderProvider = ({
       : undefined;
   }, [memberships, myUserId]);
 
-  const myReaction = useObservableEagerState(
-    vm.reactions$.pipe(
-      map((v) =>
-        myMembershipIdentifier !== undefined
-          ? v[myMembershipIdentifier]
-          : undefined,
-      ),
-    ),
+  const reactions = useObservableEagerState(vm.reactions$);
+  const myReaction = useMemo(
+    () =>
+      myMembershipIdentifier !== undefined
+        ? reactions[myMembershipIdentifier]
+        : undefined,
+    [myMembershipIdentifier, reactions],
   );
 
-  const myRaisedHand = useObservableEagerState(
-    vm.handsRaised$.pipe(
-      map((v) =>
-        myMembershipIdentifier !== undefined
-          ? v[myMembershipIdentifier]
-          : undefined,
-      ),
-    ),
+  const handsRaised = useObservableEagerState(vm.handsRaised$);
+  const myRaisedHand = useMemo(
+    () =>
+      myMembershipIdentifier !== undefined
+        ? handsRaised[myMembershipIdentifier]
+        : undefined,
+    [myMembershipIdentifier, handsRaised],
   );
 
   const toggleRaisedHand = useCallback(async () => {

src/state/CallViewModel.test.ts

@@ -805,8 +805,7 @@ it("should rank raised hands above video feeds and below speakers and presenters
       (vm, { raisedHands$ }) => {
         schedule("ab", {
           a: () => {
-            // We imagine that only three tiles (the first three) will be visible
-            // on screen at a time
+            // We imagine that only two tiles (the first two) will be visible on screen at a time
             vm.layout$.subscribe((layout) => {
               if (layout.type === "grid") {
                 layout.setVisibleTiles(2);

src/state/CallViewModel.ts

@@ -1216,52 +1216,46 @@ export class CallViewModel extends ViewModel {
   /**
    * Emits an array of reactions that should be visible on the screen.
    */
-  public readonly visibleReactions$ = showReactions.value$
-    .pipe(switchMap((show) => (show ? this.reactions$ : of({}))))
-    .pipe(
-      scan<
-        Record<string, ReactionOption>,
-        { sender: string; emoji: string; startX: number }[]
-      >((acc, latest) => {
-        const newSet: { sender: string; emoji: string; startX: number }[] = [];
-        for (const [sender, reaction] of Object.entries(latest)) {
-          const startX =
-            acc.find((v) => v.sender === sender && v.emoji)?.startX ??
-            Math.ceil(Math.random() * 80) + 10;
-          newSet.push({ sender, emoji: reaction.emoji, startX });
-        }
-        return newSet;
-      }, []),
-    )
-    .pipe(this.scope.state());
+  public readonly visibleReactions$ = showReactions.value$.pipe(
+    switchMap((show) => (show ? this.reactions$ : of({}))),
+    scan<
+      Record<string, ReactionOption>,
+      { sender: string; emoji: string; startX: number }[]
+    >((acc, latest) => {
+      const newSet: { sender: string; emoji: string; startX: number }[] = [];
+      for (const [sender, reaction] of Object.entries(latest)) {
+        const startX =
+          acc.find((v) => v.sender === sender && v.emoji)?.startX ??
+          Math.ceil(Math.random() * 80) + 10;
+        newSet.push({ sender, emoji: reaction.emoji, startX });
+      }
+      return newSet;
+    }, []),
+  );
 
   /**
    * Emits an array of reactions that should be played.
    */
-  public readonly audibleReactions$ = playReactionsSound.value$
-    .pipe(
-      switchMap((show) =>
-        show ? this.reactions$ : of<Record<string, ReactionOption>>({}),
-      ),
-    )
-    .pipe(
-      map((reactions) => Object.values(reactions).map((v) => v.name)),
-      scan<string[], { playing: string[]; newSounds: string[] }>(
-        (acc, latest) => {
-          return {
-            playing: latest.filter(
-              (v) => acc.playing.includes(v) || acc.newSounds.includes(v),
-            ),
-            newSounds: latest.filter(
-              (v) => !acc.playing.includes(v) && !acc.newSounds.includes(v),
-            ),
-          };
-        },
-        { playing: [], newSounds: [] },
-      ),
-      map((v) => v.newSounds),
-    )
-    .pipe(this.scope.state());
+  public readonly audibleReactions$ = playReactionsSound.value$.pipe(
+    switchMap((show) =>
+      show ? this.reactions$ : of<Record<string, ReactionOption>>({}),
+    ),
+    map((reactions) => Object.values(reactions).map((v) => v.name)),
+    scan<string[], { playing: string[]; newSounds: string[] }>(
+      (acc, latest) => {
+        return {
+          playing: latest.filter(
+            (v) => acc.playing.includes(v) || acc.newSounds.includes(v),
+          ),
+          newSounds: latest.filter(
+            (v) => !acc.playing.includes(v) && !acc.newSounds.includes(v),
+          ),
+        };
+      },
+      { playing: [], newSounds: [] },
+    ),
+    map((v) => v.newSounds),
+  );
 
   /**
    * Emits an event every time a new hand is raised in