cleanup ReactionData

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

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>
   );

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 isHandRaised = !!useBehavior(handsRaised$)[identifier];
-  const canReact = !useBehavior(reactionData.reactions$)[identifier];
+  const canReact = !useBehavior(reactions$)[identifier];
 
   useEffect(() => {
     // Clear whenever the reactions menu state changes.

src/components/CallFooter.stories.tsx

@@ -124,7 +124,6 @@ export const Pip: Story = {
     asPip: true,
   },
 };
-
 export const NoControlsWithLogo: Story = {
   ...Default,
   args: {

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 {
+import { type GridMode } from "../state/CallViewModel/CallViewModel";
-  type CallViewModel,
-  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}