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/state/CallViewModel.ts

@@ -69,7 +69,12 @@ import {
 } from "./MediaViewModel";
 import { accumulate, finalizeValue } from "../utils/observable";
 import { ObservableScope } from "./ObservableScope";
-import { duplicateTiles, showNonMemberTiles } from "../settings/settings";
+import {
+  duplicateTiles,
+  playReactionsSound,
+  showReactions,
+  showNonMemberTiles,
+} from "../settings/settings";
 import { isFirefox } from "../Platform";
 import { setPipEnabled$ } from "../controls";
 import {
@@ -82,6 +87,11 @@ import { spotlightExpandedLayout } from "./SpotlightExpandedLayout";
 import { oneOnOneLayout } from "./OneOnOneLayout";
 import { pipLayout } from "./PipLayout";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import {
+  type RaisedHandInfo,
+  type ReactionInfo,
+  type ReactionOption,
+} from "../reactions";
 import { observeSpeaker$ } from "./observeSpeaker";
 import { shallowEquals } from "../utils/array";
 
@@ -210,6 +220,10 @@ enum SortingBin {
    * Participants that have been speaking recently.
    */
   Speakers,
+  /**
+   * Participants that have their hand raised.
+   */
+  HandRaised,
   /**
    * Participants with video.
    */
@@ -244,6 +258,8 @@ class UserMedia {
     participant: LocalParticipant | RemoteParticipant | undefined,
     encryptionSystem: EncryptionSystem,
     livekitRoom: LivekitRoom,
+    handRaised$: Observable<Date | null>,
+    reaction$: Observable<ReactionOption | null>,
   ) {
     this.participant$ = new BehaviorSubject(participant);
 
@@ -254,6 +270,8 @@ class UserMedia {
         this.participant$.asObservable() as Observable<LocalParticipant>,
         encryptionSystem,
         livekitRoom,
+        handRaised$,
+        reaction$,
       );
     } else {
       this.vm = new RemoteUserMediaViewModel(
@@ -264,6 +282,8 @@ class UserMedia {
         >,
         encryptionSystem,
         livekitRoom,
+        handRaised$,
+        reaction$,
       );
     }
 
@@ -473,6 +493,8 @@ export class CallViewModel extends ViewModel {
               let livekitParticipantId =
                 rtcMember.sender + ":" + rtcMember.deviceId;
 
+              const matrixIdentifier = `${rtcMember.sender}:${rtcMember.deviceId}`;
+
               let participant:
                 | LocalParticipant
                 | RemoteParticipant
@@ -522,6 +544,12 @@ export class CallViewModel extends ViewModel {
                       participant,
                       this.encryptionSystem,
                       this.livekitRoom,
+                      this.handsRaised$.pipe(
+                        map((v) => v[matrixIdentifier]?.time ?? null),
+                      ),
+                      this.reactions$.pipe(
+                        map((v) => v[matrixIdentifier] ?? undefined),
+                      ),
                     ),
                 ];
 
@@ -574,6 +602,8 @@ export class CallViewModel extends ViewModel {
                             participant,
                             this.encryptionSystem,
                             this.livekitRoom,
+                            of(null),
+                            of(null),
                           ),
                       ];
                     }
@@ -681,11 +711,12 @@ export class CallViewModel extends ViewModel {
               m.speaker$,
               m.presenter$,
               m.vm.videoEnabled$,
+              m.vm.handRaised$,
               m.vm instanceof LocalUserMediaViewModel
                 ? m.vm.alwaysShow$
                 : of(false),
             ],
-            (speaker, presenter, video, alwaysShow) => {
+            (speaker, presenter, video, handRaised, alwaysShow) => {
               let bin: SortingBin;
               if (m.vm.local)
                 bin = alwaysShow
@@ -693,6 +724,7 @@ export class CallViewModel extends ViewModel {
                   : SortingBin.SelfNotAlwaysShown;
               else if (presenter) bin = SortingBin.Presenters;
               else if (speaker) bin = SortingBin.Speakers;
+              else if (handRaised) bin = SortingBin.HandRaised;
               else if (video) bin = SortingBin.Video;
               else bin = SortingBin.NoVideo;
 
@@ -1170,6 +1202,77 @@ export class CallViewModel extends ViewModel {
     }),
     this.scope.state(),
   );
+
+  public readonly reactions$ = this.reactionsSubject$.pipe(
+    map((v) =>
+      Object.fromEntries(
+        Object.entries(v).map(([a, { reactionOption }]) => [a, reactionOption]),
+      ),
+    ),
+  );
+
+  public readonly handsRaised$ = this.handsRaisedSubject$.pipe();
+
+  /**
+   * Emits an array of reactions that should be visible on the screen.
+   */
+  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>>({}),
+    ),
+    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
+   * the call.
+   */
+  public readonly newHandRaised$ = this.handsRaised$.pipe(
+    map((v) => Object.keys(v).length),
+    scan(
+      (acc, newValue) => ({
+        value: newValue,
+        playSounds: newValue > acc.value,
+      }),
+      { value: 0, playSounds: false },
+    ),
+    filter((v) => v.playSounds),
+  );
+
   /**
    * Emits an event every time a new screenshare is started in
    * the call.
@@ -1192,6 +1295,12 @@ export class CallViewModel extends ViewModel {
     private readonly livekitRoom: LivekitRoom,
     private readonly encryptionSystem: EncryptionSystem,
     private readonly connectionState$: Observable<ECConnectionState>,
+    private readonly handsRaisedSubject$: Observable<
+      Record<string, RaisedHandInfo>
+    >,
+    private readonly reactionsSubject$: Observable<
+      Record<string, ReactionInfo>
+    >,
   ) {
     super();
   }