lint

src/button/ReactionToggleButton.test.tsx

@@ -53,8 +53,11 @@ test("Can open menu", async () => {
 
 test("Can raise hand", async () => {
   const user = userEvent.setup();
-  const { vm, rtcSession, handRaisedSubject } =
-    getBasicCallViewModelEnvironment([local, alice]);
+  const {
+    vm,
+    rtcSession,
+    handRaisedSubject$: handRaisedSubject,
+  } = getBasicCallViewModelEnvironment([local, alice]);
   const { getByLabelText, container } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );
@@ -87,8 +90,11 @@ test("Can raise hand", async () => {
 test("Can lower hand", async () => {
   const reactionEventId = "$my-reaction-event:example.org";
   const user = userEvent.setup();
-  const { vm, rtcSession, handRaisedSubject } =
-    getBasicCallViewModelEnvironment([local, alice]);
+  const {
+    vm,
+    rtcSession,
+    handRaisedSubject$: handRaisedSubject,
+  } = getBasicCallViewModelEnvironment([local, alice]);
   const { getByLabelText, container } = render(
     <TestComponent vm={vm} rtcSession={rtcSession} />,
   );

src/room/CallEventAudioRenderer.test.tsx

@@ -66,10 +66,8 @@ beforeEach(() => {
  * a noise every time.
  */
 test("plays one sound when entering a call", () => {
-  const { vm, remoteRtcMemberships } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, remoteRtcMemberships$: remoteRtcMemberships } =
+    getBasicCallViewModelEnvironment([local, alice]);
   render(<CallEventAudioRenderer vm={vm} />);
 
   // Joining a call usually means remote participants are added later.
@@ -80,10 +78,8 @@ test("plays one sound when entering a call", () => {
 });
 
 test("plays a sound when a user joins", () => {
-  const { vm, remoteRtcMemberships } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, remoteRtcMemberships$: remoteRtcMemberships } =
+    getBasicCallViewModelEnvironment([local, alice]);
   render(<CallEventAudioRenderer vm={vm} />);
 
   act(() => {
@@ -94,10 +90,8 @@ test("plays a sound when a user joins", () => {
 });
 
 test("plays a sound when a user leaves", () => {
-  const { vm, remoteRtcMemberships } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, remoteRtcMemberships$: remoteRtcMemberships } =
+    getBasicCallViewModelEnvironment([local, alice]);
   render(<CallEventAudioRenderer vm={vm} />);
 
   act(() => {
@@ -114,10 +108,8 @@ test("plays no sound when the participant list is more than the maximum size", (
     );
   }
 
-  const { vm, remoteRtcMemberships } = getBasicCallViewModelEnvironment(
-    [local, alice],
-    mockRtcMemberships,
-  );
+  const { vm, remoteRtcMemberships$: remoteRtcMemberships } =
+    getBasicCallViewModelEnvironment([local, alice], mockRtcMemberships);
 
   render(<CallEventAudioRenderer vm={vm} />);
   expect(playSound).not.toBeCalled();
@@ -130,10 +122,8 @@ test("plays no sound when the participant list is more than the maximum size", (
 });
 
 test("plays one sound when a hand is raised", () => {
-  const { vm, handRaisedSubject } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, handRaisedSubject$: handRaisedSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   render(<CallEventAudioRenderer vm={vm} />);
 
   act(() => {
@@ -149,10 +139,8 @@ test("plays one sound when a hand is raised", () => {
 });
 
 test("should not play a sound when a hand raise is retracted", () => {
-  const { vm, handRaisedSubject } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, handRaisedSubject$: handRaisedSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   render(<CallEventAudioRenderer vm={vm} />);
 
   act(() => {

src/room/ReactionAudioRenderer.test.tsx

@@ -80,10 +80,8 @@ test("preloads all audio elements", () => {
 });
 
 test("will play an audio sound when there is a reaction", () => {
-  const { vm, reactionsSubject } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, reactionsSubject$: reactionsSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   playReactionsSound.setValue(true);
   render(<TestComponent vm={vm} />);
 
@@ -103,10 +101,8 @@ test("will play an audio sound when there is a reaction", () => {
 });
 
 test("will play the generic audio sound when there is soundless reaction", () => {
-  const { vm, reactionsSubject } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, reactionsSubject$: reactionsSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   playReactionsSound.setValue(true);
   render(<TestComponent vm={vm} />);
 
@@ -126,10 +122,8 @@ test("will play the generic audio sound when there is soundless reaction", () =>
 });
 
 test("will play multiple audio sounds when there are multiple different reactions", () => {
-  const { vm, reactionsSubject } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, reactionsSubject$: reactionsSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   playReactionsSound.setValue(true);
   render(<TestComponent vm={vm} />);
 

src/room/ReactionsOverlay.test.tsx

@@ -34,10 +34,8 @@ test("defaults to showing no reactions", () => {
 
 test("shows a reaction when sent", () => {
   showReactions.setValue(true);
-  const { vm, reactionsSubject } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, reactionsSubject$: reactionsSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   const { getByRole } = render(<ReactionsOverlay vm={vm} />);
   const reaction = ReactionSet[0];
   act(() => {
@@ -53,10 +51,8 @@ test("shows a reaction when sent", () => {
 test("shows two of the same reaction when sent", () => {
   showReactions.setValue(true);
   const reaction = ReactionSet[0];
-  const { vm, reactionsSubject } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, reactionsSubject$: reactionsSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   const { getAllByRole } = render(<ReactionsOverlay vm={vm} />);
   act(() => {
     reactionsSubject.next({
@@ -70,10 +66,8 @@ test("shows two of the same reaction when sent", () => {
 test("shows two different reactions when sent", () => {
   showReactions.setValue(true);
   const [reactionA, reactionB] = ReactionSet;
-  const { vm, reactionsSubject } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, reactionsSubject$: reactionsSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   const { getAllByRole } = render(<ReactionsOverlay vm={vm} />);
   act(() => {
     reactionsSubject.next({
@@ -89,10 +83,8 @@ test("shows two different reactions when sent", () => {
 test("hides reactions when reaction animations are disabled", () => {
   showReactions.setValue(false);
   const reaction = ReactionSet[0];
-  const { vm, reactionsSubject } = getBasicCallViewModelEnvironment([
-    local,
-    alice,
-  ]);
+  const { vm, reactionsSubject$: reactionsSubject } =
+    getBasicCallViewModelEnvironment([local, alice]);
   const { container } = render(<ReactionsOverlay vm={vm} />);
   act(() => {
     reactionsSubject.next({

src/tile/GridTile.tsx

@@ -98,7 +98,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
       [vm],
     );
     const handRaised = useObservableState(vm.handRaised);
-    const reaction = useObservableState(vm.reactions);
+    const reaction = useObservableState(vm.reaction);
 
     const AudioIcon = locallyMuted
       ? VolumeOffSolidIcon

src/utils/test-viewmodel.ts

@@ -38,17 +38,17 @@ export function getBasicCallViewModelEnvironment(
   initialRemoteRtcMemberships: CallMembership[] = [aliceRtcMember],
 ): {
   vm: CallViewModel;
-  remoteRtcMemberships: BehaviorSubject<CallMembership[]>;
+  remoteRtcMemberships$: BehaviorSubject<CallMembership[]>;
   rtcSession: MockRTCSession;
-  handRaisedSubject: BehaviorSubject<Record<string, RaisedHandInfo>>;
-  reactionsSubject: BehaviorSubject<Record<string, ReactionInfo>>;
+  handRaisedSubject$: BehaviorSubject<Record<string, RaisedHandInfo>>;
+  reactionsSubject$: BehaviorSubject<Record<string, ReactionInfo>>;
 } {
   const matrixRoomId = "!myRoomId:example.com";
   const matrixRoomMembers = new Map(members.map((p) => [p.userId, p]));
-  const remoteParticipants = of([aliceParticipant]);
+  const remoteParticipants$ = of([aliceParticipant]);
   const liveKitRoom = mockLivekitRoom(
     { localParticipant },
-    { remoteParticipants },
+    { remoteParticipants$ },
   );
   const matrixRoom = mockMatrixRoom({
     relations: {
@@ -90,9 +90,9 @@ export function getBasicCallViewModelEnvironment(
   );
   return {
     vm,
-    remoteRtcMemberships,
+    remoteRtcMemberships$: remoteRtcMemberships,
     rtcSession,
-    handRaisedSubject,
-    reactionsSubject,
+    handRaisedSubject$: handRaisedSubject,
+    reactionsSubject$: reactionsSubject,
   };
 }