Refactor reactions / hand raised to use rxjs and start ordering tiles based on hand raised. (#2885)

* Add support for using CallViewModel for reactions sounds. * Drop setting * Convert reaction sounds to call view model / rxjs * Use call view model for hand raised reactions * Support raising reactions for matrix rtc members. * Tie up last bits of useReactions * linting * Update calleventaudiorenderer * Update reaction audio renderer * more test bits * All the test bits and pieces * More refactors * Refactor reactions into a sender and receiver. * Fixup reaction toggle button * Adapt reactions test * Tests all pass. * lint * fix a couple of bugs * remove unused helper file * lint * finnish notation * Add tests for useReactionsReader * remove mistaken vitest file * fix * filter * invert * fixup tests with fake timers * Port useReactionsReader hook to ReactionsReader class. * lint * exclude some files from coverage * Add screen share sound effect. * cancel sub on destroy * tidy tidy
2024-12-19 15:54:28 +00:00
parent 7d00f85abc
commit abf2ecd521
28 changed files with 1835 additions and 1184 deletions
--- a/src/utils/test-viewmodel.ts
+++ b/src/utils/test-viewmodel.ts
@@ -0,0 +1,150 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { ConnectionState } from "livekit-client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type RoomMember } from "matrix-js-sdk/src/matrix";
+import {
+  type CallMembership,
+  type MatrixRTCSession,
+} from "matrix-js-sdk/src/matrixrtc";
+import { BehaviorSubject, of } from "rxjs";
+import { vitest } from "vitest";
+import { type RelationsContainer } from "matrix-js-sdk/src/models/relations-container";
+import EventEmitter from "events";
+
+import { E2eeType } from "../e2ee/e2eeType";
+import { CallViewModel } from "../state/CallViewModel";
+import { mockLivekitRoom, mockMatrixRoom, MockRTCSession } from "./test";
+import {
+  aliceRtcMember,
+  aliceParticipant,
+  localParticipant,
+  localRtcMember,
+} from "./test-fixtures";
+import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
+
+export function getBasicRTCSession(
+  members: RoomMember[],
+  initialRemoteRtcMemberships: CallMembership[] = [aliceRtcMember],
+): {
+  rtcSession: MockRTCSession;
+  remoteRtcMemberships$: BehaviorSubject<CallMembership[]>;
+} {
+  const matrixRoomId = "!myRoomId:example.com";
+  const matrixRoomMembers = new Map(members.map((p) => [p.userId, p]));
+
+  const roomEmitter = new EventEmitter();
+  const clientEmitter = new EventEmitter();
+  const matrixRoom = mockMatrixRoom({
+    relations: {
+      getChildEventsForEvent: vitest.fn(),
+    } as Partial<RelationsContainer> as RelationsContainer,
+    client: {
+      getUserId: () => localRtcMember.sender,
+      getDeviceId: () => localRtcMember.deviceId,
+      sendEvent: vitest.fn().mockResolvedValue({ event_id: "$fake:event" }),
+      redactEvent: vitest.fn().mockResolvedValue({ event_id: "$fake:event" }),
+      decryptEventIfNeeded: vitest.fn().mockResolvedValue(undefined),
+      on: vitest
+        .fn()
+        .mockImplementation(
+          (eventName: string, fn: (...args: unknown[]) => void) => {
+            clientEmitter.on(eventName, fn);
+          },
+        ),
+      emit: (eventName: string, ...args: unknown[]) =>
+        clientEmitter.emit(eventName, ...args),
+      off: vitest
+        .fn()
+        .mockImplementation(
+          (eventName: string, fn: (...args: unknown[]) => void) => {
+            clientEmitter.off(eventName, fn);
+          },
+        ),
+    } as Partial<MatrixClient> as MatrixClient,
+    getMember: (userId) => matrixRoomMembers.get(userId) ?? null,
+    roomId: matrixRoomId,
+    on: vitest
+      .fn()
+      .mockImplementation(
+        (eventName: string, fn: (...args: unknown[]) => void) => {
+          roomEmitter.on(eventName, fn);
+        },
+      ),
+    emit: (eventName: string, ...args: unknown[]) =>
+      roomEmitter.emit(eventName, ...args),
+    off: vitest
+      .fn()
+      .mockImplementation(
+        (eventName: string, fn: (...args: unknown[]) => void) => {
+          roomEmitter.off(eventName, fn);
+        },
+      ),
+  });
+
+  const remoteRtcMemberships$ = new BehaviorSubject<CallMembership[]>(
+    initialRemoteRtcMemberships,
+  );
+
+  const rtcSession = new MockRTCSession(
+    matrixRoom,
+    localRtcMember,
+  ).withMemberships(remoteRtcMemberships$);
+
+  return {
+    rtcSession,
+    remoteRtcMemberships$,
+  };
+}
+
+/**
+ * Construct a basic CallViewModel to test components that make use of it.
+ * @param members
+ * @param initialRemoteRtcMemberships
+ * @returns
+ */
+export function getBasicCallViewModelEnvironment(
+  members: RoomMember[],
+  initialRemoteRtcMemberships: CallMembership[] = [aliceRtcMember],
+): {
+  vm: CallViewModel;
+  remoteRtcMemberships$: BehaviorSubject<CallMembership[]>;
+  rtcSession: MockRTCSession;
+  handRaisedSubject$: BehaviorSubject<Record<string, RaisedHandInfo>>;
+  reactionsSubject$: BehaviorSubject<Record<string, ReactionInfo>>;
+} {
+  const { rtcSession, remoteRtcMemberships$ } = getBasicRTCSession(
+    members,
+    initialRemoteRtcMemberships,
+  );
+  const handRaisedSubject$ = new BehaviorSubject({});
+  const reactionsSubject$ = new BehaviorSubject({});
+
+  const remoteParticipants$ = of([aliceParticipant]);
+  const liveKitRoom = mockLivekitRoom(
+    { localParticipant },
+    { remoteParticipants$ },
+  );
+  const vm = new CallViewModel(
+    rtcSession as unknown as MatrixRTCSession,
+    liveKitRoom,
+    {
+      kind: E2eeType.PER_PARTICIPANT,
+    },
+    of(ConnectionState.Connected),
+    handRaisedSubject$,
+    reactionsSubject$,
+  );
+  return {
+    vm,
+    remoteRtcMemberships$,
+    rtcSession,
+    handRaisedSubject$: handRaisedSubject$,
+    reactionsSubject$: reactionsSubject$,
+  };
+}