diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx index 0d98173e..f593d6eb 100644 --- a/src/button/ReactionToggleButton.tsx +++ b/src/button/ReactionToggleButton.tsx @@ -24,14 +24,14 @@ import { import { useTranslation } from "react-i18next"; import { logger } from "matrix-js-sdk/src/logger"; import classNames from "classnames"; +import { useObservableState } from "observable-hooks"; +import { map } from "rxjs"; import { useReactions } from "../useReactions"; import styles from "./ReactionToggleButton.module.css"; import { ReactionOption, ReactionSet, ReactionsRowSize } from "../reactions"; import { Modal } from "../Modal"; import { CallViewModel } from "../state/CallViewModel"; -import { useObservableState } from "observable-hooks"; -import { map } from "rxjs"; interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> { raised: boolean; diff --git a/src/room/ReactionsOverlay.tsx b/src/room/ReactionsOverlay.tsx index 3db2e61f..dad23bf7 100644 --- a/src/room/ReactionsOverlay.tsx +++ b/src/room/ReactionsOverlay.tsx @@ -6,9 +6,10 @@ Please see LICENSE in the repository root for full details. */ import { ReactNode } from "react"; +import { useObservableState } from "observable-hooks"; + import styles from "./ReactionsOverlay.module.css"; import { CallViewModel } from "../state/CallViewModel"; -import { useObservableState } from "observable-hooks"; export function ReactionsOverlay({ vm }: { vm: CallViewModel }): ReactNode { const reactionsIcons = useObservableState(vm.visibleReactions); diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts index 9a638ee3..61251600 100644 --- a/src/state/CallViewModel.ts +++ b/src/state/CallViewModel.ts @@ -1117,12 +1117,17 @@ export class CallViewModel extends ViewModel { this.scope.state(), ); - public readonly handsRaised = new Subject>(); - public readonly reactions = new Subject>(); + private readonly handsRaisedSubject = new Subject>(); + private readonly reactionsSubject = new Subject< + Record + >(); - public updateReactions(data: ReturnType) { - this.handsRaised.next(data.raisedHands); - this.reactions.next(data.reactions); + public readonly handRaised = this.handsRaisedSubject.asObservable(); + public readonly reactions = this.reactionsSubject.asObservable(); + + public updateReactions(data: ReturnType): void { + this.handsRaisedSubject.next(data.raisedHands); + this.reactionsSubject.next(data.reactions); } /** diff --git a/src/useReactions.tsx b/src/useReactions.tsx index a250fbf3..0470ab0c 100644 --- a/src/useReactions.tsx +++ b/src/useReactions.tsx @@ -108,7 +108,7 @@ export const ReactionsProvider = ({ memberships.find( (m) => m.sender === myUserId && m.deviceId === myDeviceId, )?.eventId, - [memberships, myUserId], + [memberships, myUserId, myDeviceId], ); const myMembershipIdentifier = useMemo(() => { const membership = memberships.find((m) => m.sender === myUserId);