Add support for using CallViewModel for reactions sounds.

src/room/GroupCallView.tsx

@@ -41,6 +41,7 @@ import { InviteModal } from "./InviteModal";
 import { useUrlParams } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
 import { Link } from "../button/Link";
+import { ReactionsProvider } from "../useReactions";
 
 declare global {
   interface Window {
@@ -328,18 +329,20 @@ export const GroupCallView: FC<Props> = ({
     return (
       <>
         {shareModal}
-        <ActiveCall
-          client={client}
-          matrixInfo={matrixInfo}
-          rtcSession={rtcSession as unknown as MatrixRTCSession}
-          participantCount={participantCount}
-          onLeave={onLeave}
-          hideHeader={hideHeader}
-          muteStates={muteStates}
-          e2eeSystem={e2eeSystem}
-          //otelGroupCallMembership={otelGroupCallMembership}
-          onShareClick={onShareClick}
-        />
+        <ReactionsProvider rtcSession={rtcSession}>
+          <ActiveCall
+            client={client}
+            matrixInfo={matrixInfo}
+            rtcSession={rtcSession as MatrixRTCSession}
+            participantCount={participantCount}
+            onLeave={onLeave}
+            hideHeader={hideHeader}
+            muteStates={muteStates}
+            e2eeSystem={e2eeSystem}
+            //otelGroupCallMembership={otelGroupCallMembership}
+            onShareClick={onShareClick}
+          />
+        </ReactionsProvider>
       </>
     );
   } else if (left && widget === null) {

src/room/InCallView.tsx

@@ -107,6 +107,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     [connState],
   );
   const [vm, setVm] = useState<CallViewModel | null>(null);
+  const reactions = useReactions();
 
   useEffect(() => {
     return (): void => {
@@ -117,6 +118,10 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    vm?.updateReactions(reactions);
+  }, [vm, reactions]);
+
   useEffect(() => {
     if (livekitRoom !== undefined) {
       const vm = new CallViewModel(
@@ -638,7 +643,7 @@ export const InCallView: FC<InCallViewProps> = ({
       {renderContent()}
       <CallEventAudioRenderer vm={vm} />
       <ReactionsAudioRenderer />
-      <ReactionsOverlay />
+      <ReactionsOverlay vm={vm} />
       {footer}
       {layout.type !== "pip" && (
         <>

src/room/ReactionsOverlay.tsx

@@ -5,33 +5,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useMemo } from "react";
-
-import { useReactions } from "../useReactions";
+import { ReactNode } from "react";
 import {
   showReactions as showReactionsSetting,
   useSetting,
 } from "../settings/settings";
 import styles from "./ReactionsOverlay.module.css";
+import { CallViewModel } from "../state/CallViewModel";
+import { useObservableState } from "observable-hooks";
 
-export function ReactionsOverlay(): ReactNode {
-  const { reactions } = useReactions();
+export function ReactionsOverlay({ vm }: { vm: CallViewModel }): ReactNode {
   const [showReactions] = useSetting(showReactionsSetting);
-  const reactionsIcons = useMemo(
-    () =>
-      showReactions
-        ? Object.entries(reactions).map(([sender, { emoji }]) => ({
-            sender,
-            emoji,
-            startX: Math.ceil(Math.random() * 80) + 10,
-          }))
-        : [],
-    [showReactions, reactions],
-  );
+  const reactionsIcons = useObservableState(vm.visibleReactions);
+
+  if (!showReactions) {
+    return;
+  }
 
   return (
     <div className={styles.container}>
-      {reactionsIcons.map(({ sender, emoji, startX }) => (
+      {reactionsIcons?.map(({ sender, emoji, startX }) => (
         <span
           // Reactions effects are considered presentation elements. The reaction
           // is also present on the sender's tile, which assistive technology can

src/state/CallViewModel.ts

@@ -66,7 +66,7 @@ import {
 } from "./MediaViewModel";
 import { accumulate, finalizeValue } from "../utils/observable";
 import { ObservableScope } from "./ObservableScope";
-import { duplicateTiles } from "../settings/settings";
+import { duplicateTiles, showReactions } from "../settings/settings";
 import { isFirefox } from "../Platform";
 import { setPipEnabled } from "../controls";
 import { GridTileViewModel, SpotlightTileViewModel } from "./TileViewModel";
@@ -77,6 +77,8 @@ import { oneOnOneLayout } from "./OneOnOneLayout";
 import { pipLayout } from "./PipLayout";
 import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { observeSpeaker } from "./observeSpeaker";
+import { useReactions } from "../useReactions";
+import { ReactionOption } from "../reactions";
 
 // How long we wait after a focus switch before showing the real participant
 // list again
@@ -1091,6 +1093,36 @@ export class CallViewModel extends ViewModel {
     this.scope.state(),
   );
 
+  public readonly handsRaised = new Subject<Record<string, Date>>();
+  public readonly reactions = new Subject<Record<string, ReactionOption>>();
+
+  public updateReactions(data: ReturnType<typeof useReactions>) {
+    this.handsRaised.next(data.raisedHands);
+    this.reactions.next(data.reactions);
+  }
+
+  public readonly visibleReactions = combineLatest([
+    this.reactions,
+    showReactions.value,
+  ])
+    .pipe(
+      map(([reactions, setting]) => (setting ? reactions : {})),
+      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;
+      }, []),
+    )
+    .pipe(this.scope.state());
+
   public constructor(
     // A call is permanently tied to a single Matrix room and LiveKit room
     private readonly matrixRTCSession: MatrixRTCSession,