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

src/tile/GridTile.test.tsx

@@ -15,7 +15,8 @@ import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSess
 import { GridTile } from "./GridTile";
 import { mockRtcMembership, withRemoteMedia } from "../utils/test";
 import { GridTileViewModel } from "../state/TileViewModel";
-import { ReactionsProvider } from "../useReactions";
+import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
+import type { CallViewModel } from "../state/CallViewModel";
 
 global.IntersectionObserver = class MockIntersectionObserver {
   public observe(): void {}
@@ -44,14 +45,19 @@ test("GridTile is accessible", async () => {
           off: () => {},
           client: {
             getUserId: () => null,
+            getDeviceId: () => null,
             on: () => {},
             off: () => {},
           },
         },
         memberships: [],
       } as unknown as MatrixRTCSession;
+      const cVm = {
+        reactions$: of({}),
+        handsRaised$: of({}),
+      } as Partial<CallViewModel> as CallViewModel;
       const { container } = render(
-        <ReactionsProvider rtcSession={fakeRtcSession}>
+        <ReactionsSenderProvider vm={cVm} rtcSession={fakeRtcSession}>
           <GridTile
             vm={new GridTileViewModel(of(vm))}
             onOpenProfile={() => {}}
@@ -59,7 +65,7 @@ test("GridTile is accessible", async () => {
             targetHeight={200}
             showSpeakingIndicators
           />
-        </ReactionsProvider>,
+        </ReactionsSenderProvider>,
       );
       expect(await axe(container)).toHaveNoViolations();
       // Name should be visible