Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2024-11-30 00:50:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Tidy up and finish test rewrites

Browse Source
This commit is contained in:
Half-Shot 2024-10-29 16:49:37 +00:00
parent 5a5c1bedfe
commit ff7da135ca
5 changed files with 79 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/button/RaisedHandToggleButton.tsx
View File

@ -61,13 +61,8 @@ export function RaiseHandToggleButton({
client,
rtcSession,
}: RaisedHandToggleButton): ReactNode {
const {
raisedHands,
removeRaisedHand,
addRaisedHand,
myReactionId,
setMyReactionId,
} = useReactions();
const { raisedHands, removeRaisedHand, addRaisedHand, myReactionId } =
useReactions();
const [busy, setBusy] = useState(false);
const userId = client.getUserId()!;
const isHandRaised = !!raisedHands[userId];
@ -81,7 +76,6 @@ export function RaiseHandToggleButton({
.redactEvent(rtcSession.room.roomId, myReactionId)
.then(() => {
logger.debug("Redacted raise hand event");
setMyReactionId(null);
removeRaisedHand(userId);
})
.catch((e) => {
@ -109,7 +103,6 @@ export function RaiseHandToggleButton({
})
.then((reaction) => {
logger.debug("Sent raise hand event", reaction.event_id);
setMyReactionId(reaction.event_id);
addRaisedHand(userId, {
membershipEventId: parentEventId,
reactionEventId: reaction.event_id,
@ -131,7 +124,6 @@ export function RaiseHandToggleButton({
rtcSession.room.roomId,
addRaisedHand,
removeRaisedHand,
setMyReactionId,
userId,
]);

6
src/settings/PreferencesSettingsTab.tsx
View File

@ -15,11 +15,7 @@ import {
useSetting,
} from "./settings";
interface Props {
roomId?: string;
}
export const PreferencesSettingsTab: FC<Props> = ({}) => {
export const PreferencesSettingsTab: FC = () => {
const { t } = useTranslation();
const [showHandRaisedTimer, setShowHandRaisedTimer] = useSetting(
showHandRaisedTimerSetting,

2
src/tile/SpotlightTile.tsx
View File

@ -53,7 +53,6 @@ interface SpotlightItemBaseProps {
unencryptedWarning: boolean;
displayName: string;
"aria-hidden"?: boolean;
raisedHand: boolean;
}
interface SpotlightUserMediaItemBaseProps extends SpotlightItemBaseProps {
@ -158,7 +157,6 @@ const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
unencryptedWarning,
displayName,
"aria-hidden": ariaHidden,
raisedHand: false,
};
return vm instanceof ScreenShareViewModel ? (

110
src/useReactions.test.tsx
View File

@ -26,23 +26,31 @@ import { randomUUID } from "crypto";
import { ReactionsProvider, useReactions } from "./useReactions";
const membership = [
"@alice:example.org",
"@bob:example.org",
"@charlie:example.org",
];
const memberUserIdAlice = "@alice:example.org";
const memberEventAlice = "$membership-alice:example.org";
const memberUserIdBob = "@bob:example.org";
const memberEventBob = "$membership-bob:example.org";
const membership: Record<string, string> = {
[memberEventAlice]: memberUserIdAlice,
[memberEventBob]: memberUserIdBob,
"$membership-charlie:example.org": "@charlie:example.org",
};
const TestComponent: FC = () => {
const { raisedHands } = useReactions();
const { raisedHands, myReactionId } = useReactions();
return (
<ul>
{Object.entries(raisedHands).map(([userId, date]) => (
<li key={userId}>
<span>{userId}</span>
<time>{date.getTime()}</time>
</li>
))}
</ul>
<div>
<ul>
{Object.entries(raisedHands).map(([userId, date]) => (
<li key={userId}>
<span>{userId}</span>
<time>{date.getTime()}</time>
</li>
))}
</ul>
<p>{myReactionId ? "Local reaction" : "No local reaction"}</p>
</div>
);
};
@ -59,9 +67,9 @@ const TestComponentWrapper = ({
};
export class MockRTCSession extends EventEmitter {
public memberships = membership.map((sender) => ({
public memberships = Object.entries(membership).map(([eventId, sender]) => ({
sender,
eventId: `!fake-${randomUUID()}:event`,
eventId,
createdTs: (): Date => new Date(),
}));
@ -69,12 +77,12 @@ export class MockRTCSession extends EventEmitter {
super();
}
public testRemoveMember(userId: string) {
public testRemoveMember(userId: string): void {
this.memberships = this.memberships.filter((u) => u.sender !== userId);
this.emit(MatrixRTCSessionEvent.MembershipsChanged);
}
public testAddMember(sender: string) {
public testAddMember(sender: string): void {
this.memberships.push({
sender,
eventId: `!fake-${randomUUID()}:event`,
@ -84,25 +92,27 @@ export class MockRTCSession extends EventEmitter {
}
}
function createReaction(sender: string): MatrixEvent {
function createReaction(parentMemberEvent: string): MatrixEvent {
return new MatrixEvent({
sender,
sender: membership[parentMemberEvent],
type: EventType.Reaction,
origin_server_ts: new Date().getTime(),
content: {
"m.relates_to": {
key: "🖐️",
event_id: parentMemberEvent,
},
},
event_id: randomUUID(),
});
}
function createRedaction(sender: string): MatrixEvent {
function createRedaction(sender: string, reactionEventId: string): MatrixEvent {
return new MatrixEvent({
sender,
type: EventType.RoomRedaction,
origin_server_ts: new Date().getTime(),
redacts: reactionEventId,
content: {},
event_id: randomUUID(),
});
@ -115,29 +125,27 @@ export class MockRoom extends EventEmitter {
public get client(): MatrixClient {
return {
getUserId: (): string => "@alice:example.org",
getUserId: (): string => memberUserIdAlice,
} as unknown as MatrixClient;
}
public get relations(): Room["relations"] {
return {
getChildEventsForEvent: () => ({
getRelations: () => this.existingRelations,
getChildEventsForEvent: (membershipEventId: string) => ({
getRelations: (): MatrixEvent[] => {
const sender = membership[membershipEventId];
return this.existingRelations.filter((r) => r.getSender() === sender);
},
}),
} as unknown as Room["relations"];
}
public testSendReaction(sender: string): void {
this.emit(
RoomEvent.Timeline,
createReaction(sender),
this,
undefined,
false,
{
timeline: new EventTimeline(new EventTimelineSet(undefined)),
},
);
public testSendReaction(parentMemberEvent: string): string {
const evt = createReaction(parentMemberEvent);
this.emit(RoomEvent.Timeline, evt, this, undefined, false, {
timeline: new EventTimeline(new EventTimelineSet(undefined)),
});
return evt.getId()!;
}
}
@ -149,16 +157,26 @@ describe("useReactions", () => {
);
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});
test("handles own raised hand", () => {
const room = new MockRoom();
const rtcSession = new MockRTCSession(room);
const { queryByText, rerender } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
);
room.testSendReaction(memberEventAlice);
rerender(<TestComponentWrapper rtcSession={rtcSession} />);
expect(queryByText("Local reaction")).toBeTruthy();
});
test("handles incoming raised hand", () => {
const room = new MockRoom();
const rtcSession = new MockRTCSession(room);
const { queryByRole, rerender } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
);
room.testSendReaction("@foo:bar");
room.testSendReaction(memberEventAlice);
rerender(<TestComponentWrapper rtcSession={rtcSession} />);
expect(queryByRole("list")?.children).to.have.lengthOf(1);
room.testSendReaction("@baz:bar");
room.testSendReaction(memberEventBob);
rerender(<TestComponentWrapper rtcSession={rtcSession} />);
expect(queryByRole("list")?.children).to.have.lengthOf(2);
});
@ -168,12 +186,12 @@ describe("useReactions", () => {
const { queryByRole, rerender } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
);
room.testSendReaction("@foo:bar");
const reactionEventId = room.testSendReaction(memberEventAlice);
rerender(<TestComponentWrapper rtcSession={rtcSession} />);
expect(queryByRole("list")?.children).to.have.lengthOf(1);
room.emit(
RoomEvent.Redaction,
createRedaction("@foo:bar"),
createRedaction(memberUserIdAlice, reactionEventId),
room,
undefined,
);
@ -181,33 +199,33 @@ describe("useReactions", () => {
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});
test("handles loading events from cold", () => {
const room = new MockRoom([createReaction(membership[0])]);
const room = new MockRoom([createReaction(memberEventAlice)]);
const rtcSession = new MockRTCSession(room);
const { queryByRole } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
);
expect(queryByRole("list")?.children).to.have.lengthOf(1);
});
test.only("will remove reaction when a member leaves the call", () => {
const room = new MockRoom([createReaction(membership[0])]);
test("will remove reaction when a member leaves the call", () => {
const room = new MockRoom([createReaction(memberEventAlice)]);
const rtcSession = new MockRTCSession(room);
const { queryByRole, rerender } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
);
expect(queryByRole("list")?.children).to.have.lengthOf(1);
rtcSession.testRemoveMember(membership[0]);
rtcSession.testRemoveMember(memberUserIdAlice);
rerender(<TestComponentWrapper rtcSession={rtcSession} />);
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});
test("will remove reaction when a member joins via a new event", () => {
const room = new MockRoom([createReaction(membership[0])]);
const room = new MockRoom([createReaction(memberEventAlice)]);
const rtcSession = new MockRTCSession(room);
const { queryByRole, rerender } = render(
<TestComponentWrapper rtcSession={rtcSession} />,
);
expect(queryByRole("list")?.children).to.have.lengthOf(1);
rtcSession.testRemoveMember(membership[0]);
rtcSession.testAddMember(membership[0]);
rtcSession.testRemoveMember(memberUserIdAlice);
rtcSession.testAddMember(memberUserIdAlice);
rerender(<TestComponentWrapper rtcSession={rtcSession} />);
expect(queryByRole("list")?.children).to.have.lengthOf(0);
});

28
src/useReactions.tsx
View File

@ -22,10 +22,10 @@ import {
useMemo,
} from "react";
import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
import { logger } from "matrix-js-sdk/src/logger";
import { useMatrixRTCSessionMemberships } from "./useMatrixRTCSessionMemberships";
import { useClientState } from "./ClientContext";
import { logger } from "matrix-js-sdk/src/logger";
interface ReactionsContextType {
raisedHands: Record<string, Date>;
@ -33,7 +33,6 @@ interface ReactionsContextType {
removeRaisedHand: (userId: string) => void;
supportsReactions: boolean;
myReactionId: string | null;
setMyReactionId: (id: string | null) => void;
}
const ReactionsContext = createContext<ReactionsContextType | undefined>(
@ -54,6 +53,9 @@ export const useReactions = (): ReactionsContextType => {
return context;
};
/**
* Provider that handles raised hand reactions for a given `rtcSession`.
*/
export const ReactionsProvider = ({
children,
rtcSession,
@ -64,14 +66,19 @@ export const ReactionsProvider = ({
const [raisedHands, setRaisedHands] = useState<
Record<string, RaisedHandInfo>
>({});
const [myReactionId, setMyReactionId] = useState<string | null>(null);
const memberships = useMatrixRTCSessionMemberships(rtcSession);
const clientState = useClientState();
const supportsReactions =
clientState?.state === "valid" && clientState.supportedFeatures.reactions;
const room = rtcSession.room;
const myUserId = room.client.getUserId();
const myReactionId = useMemo((): string | null => {
const myUserId = room.client.getUserId();
if (myUserId) {
return raisedHands[myUserId]?.reactionEventId;
}
return null;
}, [raisedHands, room]);
const addRaisedHand = useCallback(
(userId: string, info: RaisedHandInfo) => {
@ -86,9 +93,6 @@ export const ReactionsProvider = ({
const removeRaisedHand = useCallback(
(userId: string) => {
delete raisedHands[userId];
if (userId === myUserId) {
setMyReactionId(null);
}
setRaisedHands({ ...raisedHands });
},
[raisedHands],
@ -106,7 +110,6 @@ export const ReactionsProvider = ({
return allEvents.length > 0 ? allEvents[0] : undefined;
};
console.log(memberships, raisedHands);
// Remove any raised hands for users no longer joined to the call.
for (const userId of Object.keys(raisedHands).filter(
(rhId) => !memberships.find((u) => u.sender == rhId),
@ -133,19 +136,14 @@ export const ReactionsProvider = ({
if (reaction && reaction.getType() === EventType.Reaction) {
const content = reaction.getContent() as ReactionEventContent;
if (content?.["m.relates_to"]?.key === "🖐️") {
console.log("found key, raising hand", m.sender);
addRaisedHand(m.sender, {
membershipEventId: m.eventId,
reactionEventId: eventId,
time: new Date(reaction.localTimestamp),
});
if (m.sender === room.client.getUserId()) {
setMyReactionId(eventId);
}
}
}
}
console.log("After", raisedHands);
// Deliberately ignoring addRaisedHand, raisedHands which was causing looping.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [room, memberships]);
@ -186,7 +184,6 @@ export const ReactionsProvider = ({
const targetUser = Object.entries(raisedHands).find(
([u, r]) => r.reactionEventId === targetEvent,
)?.[0];
console.log(targetEvent, raisedHands);
if (!targetUser) {
// Reaction target was not for us, ignoring
return;
@ -202,7 +199,7 @@ export const ReactionsProvider = ({
room.off(MatrixRoomEvent.Timeline, handleReactionEvent);
room.off(MatrixRoomEvent.Redaction, handleReactionEvent);
};
}, [room, addRaisedHand, removeRaisedHand]);
}, [room, addRaisedHand, removeRaisedHand, memberships, raisedHands]);
// Reduce the data down for the consumers.
const resultRaisedHands = useMemo(
@ -221,7 +218,6 @@ export const ReactionsProvider = ({
removeRaisedHand,
supportsReactions,
myReactionId,
setMyReactionId,
}}
>
{children}