diff --git a/src/button/ReactionToggleButton.test.tsx b/src/button/ReactionToggleButton.test.tsx index b13b74fa..a27add1e 100644 --- a/src/button/ReactionToggleButton.test.tsx +++ b/src/button/ReactionToggleButton.test.tsx @@ -83,7 +83,7 @@ test("Can raise hand", async () => { expect(container).toMatchSnapshot(); }); -test("Can lower hand", async () => { +test.only("Can lower hand", async () => { const user = userEvent.setup(); const room = new MockRoom(memberUserIdAlice); const rtcSession = new MockRTCSession(room, membership); diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx index 9dbcc617..c93c58df 100644 --- a/src/button/ReactionToggleButton.tsx +++ b/src/button/ReactionToggleButton.tsx @@ -223,7 +223,6 @@ export function ReactionToggleButton({ const { t } = useTranslation(); const { raisedHands, lowerHand, reactions } = useReactions(); const [busy, setBusy] = useState(false); - const userId = client.getUserId()!; const memberships = useMatrixRTCSessionMemberships(rtcSession); const [showReactionsMenu, setShowReactionsMenu] = useState(false); const [errorText, setErrorText] = useState(); @@ -238,6 +237,8 @@ export function ReactionToggleButton({ [memberships], )?.eventId; + console.log(memberships); + useEffect(() => { // Clear whenever the reactions menu state changes. setErrorText(undefined); diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx index 12f041e2..a73a625c 100644 --- a/src/tile/GridTile.tsx +++ b/src/tile/GridTile.tsx @@ -112,9 +112,14 @@ const UserMediaTile = forwardRef( ); - const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""]; + console.log(vm.member); + + console.log(vm.member?.events.member?.getId(), raisedHands, reactions); + + const handRaised: Date | undefined = + raisedHands[vm.member?.events.member?.getId() ?? ""]; const currentReaction: ReactionOption | undefined = - reactions[vm.member?.userId ?? ""]; + reactions[vm.member?.events.member?.getId() ?? ""]; const raisedHandOnClick = vm.local && handRaised ? (): void => void lowerHand() : undefined; diff --git a/src/useReactions.tsx b/src/useReactions.tsx index 201ba9ef..77a15e9f 100644 --- a/src/useReactions.tsx +++ b/src/useReactions.tsx @@ -199,6 +199,8 @@ export const ReactionsProvider = ({ if (event.getType() === ElementCallReactionEventType) { const content: ECallReactionEventContent = event.getContent(); + console.log(latestMemberships, content); + const membershipEventId = content?.["m.relates_to"]?.event_id; // Check to see if this reaction was made to a membership event (and the // sender of the reaction matches the membership) @@ -318,19 +320,22 @@ export const ReactionsProvider = ({ latestRaisedHands, ]); - const myMembershipEventId = useMemo( - () => - memberships.find( - (m) => - clientState?.state === "valid" && - m.sender === clientState.authenticated?.client.getUserId() && - m.deviceId === clientState.authenticated?.client.getDeviceId(), - ), - [memberships], - )?.eventId; + const myMembershipEventId = useMemo(() => { + console.log( + room.client.getUserId(), + room.client.getDeviceId(), + memberships, + ); + return memberships.find( + (m) => + m.sender === room.client.getUserId() && + m.deviceId === room.client.getDeviceId(), + ); + }, [memberships, room])?.eventId; const lowerHand = useCallback(async () => { if (!myMembershipEventId || !raisedHands[myMembershipEventId]) { + logger.warn(`No membership event for us!`, myMembershipEventId); return; } const myReactionId = raisedHands[myMembershipEventId].reactionEventId; diff --git a/src/utils/testReactions.tsx b/src/utils/testReactions.tsx index 6ccf695f..a5cfecbb 100644 --- a/src/utils/testReactions.tsx +++ b/src/utils/testReactions.tsx @@ -41,6 +41,8 @@ export const TestReactionsWrapper = ({ ); }; +const OWN_DEVICE_ID = "OWN_DEVICE"; + export class MockRTCSession extends EventEmitter { public memberships: { sender: string; @@ -54,12 +56,14 @@ export class MockRTCSession extends EventEmitter { membership: Record, ) { super(); - this.memberships = Object.entries(membership).map(([eventId, sender]) => ({ - sender, - eventId, - deviceId: randomUUID(), - createdTs: (): Date => new Date(), - })); + this.memberships = Object.entries(membership).map( + ([eventId, sender], index) => ({ + sender, + eventId, + deviceId: index === 0 ? OWN_DEVICE_ID : randomUUID(), + createdTs: (): Date => new Date(), + }), + ); } public testRemoveMember(userId: string): void { @@ -121,7 +125,6 @@ export class MockRoom extends EventEmitter { public constructor( private readonly ownUserId: string, - private readonly ownDeviceId: string, private readonly existingRelations: MatrixEvent[] = [], ) { super(); @@ -130,7 +133,7 @@ export class MockRoom extends EventEmitter { public get client(): MatrixClient { return { getUserId: (): string => this.ownUserId, - getDeviceId: (): string => this.ownDeviceId, + getDeviceId: (): string => OWN_DEVICE_ID, sendEvent: async ( ...props: Parameters ): ReturnType => {