From dbf76db5906d8ee066fa9853344ebe7ff8264deb Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 15 Apr 2026 13:06:47 +0200
Subject: [PATCH] cleanup ReactionData

---
 src/button/Button.tsx                    |  9 ++++++---
 src/button/ReactionToggleButton.test.tsx |  8 +++++++-
 src/button/ReactionToggleButton.tsx      | 18 +++++++++++++-----
 src/components/CallFooter.stories.tsx    |  1 -
 src/components/CallFooter.tsx            | 13 +++++--------
 5 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index fd1345d7..1ad5b124 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -140,13 +140,16 @@ interface LoudspeakerButtonProps extends ComponentPropsWithoutRef<"button"> {
    */
   isEarpieceTarget: boolean;
 }
-export const LoudspeakerButton: FC<LoudspeakerButtonProps> = (props) => {
+export const LoudspeakerButton: FC<LoudspeakerButtonProps> = ({
+  isEarpieceTarget,
+  ...props
+}) => {
   const { t } = useTranslation();
-  const label = props.isEarpieceTarget
+  const label = isEarpieceTarget
     ? t("settings.devices.handset")
     : t("settings.devices.loudspeaker");
   // if the target is the earpice, we are currently in loudspeaker mode.
-  const enabled = props.isEarpieceTarget;
+  const enabled = isEarpieceTarget;
   return (
     <Tooltip label={label}>
       <CpdButton
diff --git a/src/button/ReactionToggleButton.test.tsx b/src/button/ReactionToggleButton.test.tsx
index 86954869..5c8d375c 100644
--- a/src/button/ReactionToggleButton.test.tsx
+++ b/src/button/ReactionToggleButton.test.tsx
@@ -37,7 +37,13 @@ function TestComponent({
         vm={vm}
         rtcSession={rtcSession.asMockedSession()}
       >
-        <ReactionToggleButton reactionData={vm} identifier={localIdent} />
+        <ReactionToggleButton
+          reactionData={{
+            reactions$: vm.reactions$,
+            handsRaised$: vm.handsRaised$,
+          }}
+          identifier={localIdent}
+        />
       </ReactionsSenderProvider>
     </TooltipProvider>
   );
diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx
index 6fe52308..39804a5f 100644
--- a/src/button/ReactionToggleButton.tsx
+++ b/src/button/ReactionToggleButton.tsx
@@ -28,13 +28,14 @@ import classNames from "classnames";
 import { useReactionsSender } from "../reactions/useReactionsSender";
 import styles from "./ReactionToggleButton.module.css";
 import {
+  type RaisedHandInfo,
   type ReactionOption,
   ReactionSet,
   ReactionsRowSize,
 } from "../reactions";
 import { Modal } from "../Modal";
-import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { useBehavior } from "../useBehavior";
+import { type Behavior } from "../state/Behavior";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
   raised: boolean;
@@ -163,15 +164,22 @@ export function ReactionPopupMenu({
   );
 }
 
+export interface ReactionData {
+  handsRaised$: Behavior<Record<string, RaisedHandInfo>>;
+  /** List of reactions. Keys are: membership.membershipId (currently predefined as: `${membershipEvent.userId}:${membershipEvent.deviceId}`)*/
+  reactions$: Behavior<Record<string, ReactionOption>>;
+}
+
 interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
+  reactionData: ReactionData;
   identifier: string;
-  reactionData: Pick<CallViewModel, "handsRaised$" | "reactions$">;
   size?: "sm" | "lg";
+  /** List of participants raising their hand */
 }
 
 export function ReactionToggleButton({
   identifier,
-  reactionData,
+  reactionData: { handsRaised$, reactions$ },
   ...props
 }: ReactionToggleButtonProps): ReactNode {
   const { t } = useTranslation();
@@ -180,8 +188,8 @@ export function ReactionToggleButton({
   const [showReactionsMenu, setShowReactionsMenu] = useState(false);
   const [errorText, setErrorText] = useState<string>();
 
-  const isHandRaised = !!useBehavior(reactionData.handsRaised$)[identifier];
-  const canReact = !useBehavior(reactionData.reactions$)[identifier];
+  const isHandRaised = !!useBehavior(handsRaised$)[identifier];
+  const canReact = !useBehavior(reactions$)[identifier];
 
   useEffect(() => {
     // Clear whenever the reactions menu state changes.
diff --git a/src/components/CallFooter.stories.tsx b/src/components/CallFooter.stories.tsx
index fcf0be3d..bf639f44 100644
--- a/src/components/CallFooter.stories.tsx
+++ b/src/components/CallFooter.stories.tsx
@@ -124,7 +124,6 @@ export const Pip: Story = {
     asPip: true,
   },
 };
-
 export const NoControlsWithLogo: Story = {
   ...Default,
   args: {
diff --git a/src/components/CallFooter.tsx b/src/components/CallFooter.tsx
index 60d210dc..aee47491 100644
--- a/src/components/CallFooter.tsx
+++ b/src/components/CallFooter.tsx
@@ -20,13 +20,11 @@ import {
   ReactionToggleButton,
   LoudspeakerButton,
   SettingsIconButton,
+  type ReactionData,
 } from "../button";
 import styles from "./CallFooter.module.css";
 import { LayoutToggle } from "../room/LayoutToggle";
-import {
-  type CallViewModel,
-  type GridMode,
-} from "../state/CallViewModel/CallViewModel";
+import { type GridMode } from "../state/CallViewModel/CallViewModel";
 
 export interface AudioOutputSwitcher {
   targetOutput: string;
@@ -69,7 +67,7 @@ export interface FooterProps {
   hangup?: () => void;
 
   reactionIdentifier?: string;
-  reactionData?: Pick<CallViewModel, "handsRaised$" | "reactions$">;
+  reactionData?: ReactionData;
 
   hideLogo?: boolean;
   // debug stuff
@@ -157,11 +155,10 @@ export const CallFooter: FC<FooterProps> = ({
       <ReactionToggleButton
         size={buttonSize}
         reactionData={
-          reactionData ??
-          ({
+          reactionData ?? {
             handsRaised$: new BehaviorSubject({}),
             reactions$: new BehaviorSubject({}),
-          } as Pick<CallViewModel, "handsRaised$" | "reactions$">)
+          }
         }
         key="raise_hand"
         className={styles.raiseHand}