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(
+  const reactions = useObservableEagerState(vm.reactions$);
-    vm.reactions$.pipe(
+  const myReaction = useMemo(
-      map((v) =>
+    () =>
       myMembershipIdentifier !== undefined
-          ? v[myMembershipIdentifier]
+        ? reactions[myMembershipIdentifier]
         : undefined,
-      ),
+    [myMembershipIdentifier, reactions],
-    ),
   );
 
-  const myRaisedHand = useObservableEagerState(
+  const handsRaised = useObservableEagerState(vm.handsRaised$);
-    vm.handsRaised$.pipe(
+  const myRaisedHand = useMemo(
-      map((v) =>
+    () =>
       myMembershipIdentifier !== undefined
-          ? v[myMembershipIdentifier]
+        ? 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
+            // We imagine that only two tiles (the first two) will be visible on screen at a time
-            // on screen at a time
             vm.layout$.subscribe((layout) => {
               if (layout.type === "grid") {
                 layout.setVisibleTiles(2);

src/state/CallViewModel.ts

@@ -1216,9 +1216,8 @@ export class CallViewModel extends ViewModel {
   /**
    * Emits an array of reactions that should be visible on the screen.
    */
-  public readonly visibleReactions$ = showReactions.value$
+  public readonly visibleReactions$ = showReactions.value$.pipe(
-    .pipe(switchMap((show) => (show ? this.reactions$ : of({}))))
+    switchMap((show) => (show ? this.reactions$ : of({}))),
-    .pipe(
     scan<
       Record<string, ReactionOption>,
       { sender: string; emoji: string; startX: number }[]
@@ -1232,19 +1231,15 @@ export class CallViewModel extends ViewModel {
       }
       return newSet;
     }, []),
-    )
+  );
-    .pipe(this.scope.state());
 
   /**
    * Emits an array of reactions that should be played.
    */
-  public readonly audibleReactions$ = playReactionsSound.value$
+  public readonly audibleReactions$ = playReactionsSound.value$.pipe(
-    .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) => {
@@ -1260,8 +1255,7 @@ export class CallViewModel extends ViewModel {
       { playing: [], newSounds: [] },
     ),
     map((v) => v.newSounds),
-    )
+  );
-    .pipe(this.scope.state());
 
   /**
    * Emits an event every time a new hand is raised in