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