Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit ef12d91

Browse files
robintownrobintown
committed
Add local echo of connected devices in video rooms
1 parent 605fbd3 commit ef12d91

File tree

7 files changed

+126
-43
lines changed

7 files changed

+126
-43
lines changed

‎src/components/views/rooms/RoomTile.tsx

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ interface IState {
8181
messagePreview?: string;
8282
videoStatus: VideoStatus;
8383
// Active video channel members, according to room state
84-
videoMembers: RoomMember[];
84+
videoMembers: Set<RoomMember>;
8585
// Active video channel members, according to Jitsi
8686
jitsiParticipants: IJitsiParticipant[];
8787
}
@@ -124,7 +124,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
124124
// generatePreview() will return nothing if the user has previews disabled
125125
messagePreview: "",
126126
videoStatus,
127-
videoMembers: getConnectedMembers(this.props.room.currentState),
127+
videoMembers: getConnectedMembers(this.props.room, videoStatus === VideoStatus.Connected),
128128
jitsiParticipants: VideoChannelStore.instance.participants,
129129
};
130130
this.generatePreview();
@@ -593,7 +593,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
593593
}
594594

595595
private updateVideoMembers = () => {
596-
this.setState({ videoMembers: getConnectedMembers(this.props.room.currentState) });
596+
this.setState(state => ({
597+
videoMembers: getConnectedMembers(this.props.room, state.videoStatus === VideoStatus.Connected),
598+
}));
597599
};
598600

599601
private updateVideoStatus = () => {
@@ -610,7 +612,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
610612

611613
private onConnectVideo = (roomId: string) => {
612614
if (roomId === this.props.room?.roomId) {
613-
this.setState({ videoStatus: VideoStatus.Connected });
615+
this.setState({
616+
videoStatus: VideoStatus.Connected,
617+
videoMembers: getConnectedMembers(this.props.room, true),
618+
});
614619
VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
615620
}
616621
};
@@ -623,7 +628,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
623628

624629
private onDisconnectVideo = (roomId: string) => {
625630
if (roomId === this.props.room?.roomId) {
626-
this.setState({ videoStatus: VideoStatus.Disconnected });
631+
this.setState({
632+
videoStatus: VideoStatus.Disconnected,
633+
videoMembers: getConnectedMembers(this.props.room, false),
634+
});
627635
VideoChannelStore.instance.off(VideoChannelEvent.Participants, this.updateJitsiParticipants);
628636
}
629637
};
@@ -668,12 +676,12 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
668676
case VideoStatus.Disconnected:
669677
videoText = _t("Video");
670678
videoActive = false;
671-
participantCount = this.state.videoMembers.length;
679+
participantCount = this.state.videoMembers.size;
672680
break;
673681
case VideoStatus.Connecting:
674682
videoText = _t("Connecting...");
675683
videoActive = true;
676-
participantCount = this.state.videoMembers.length;
684+
participantCount = this.state.videoMembers.size;
677685
break;
678686
case VideoStatus.Connected:
679687
videoText = _t("Connected");

‎src/components/views/voip/VideoLobby.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const MAX_FACES = 8;
110110
const VideoLobby: FC<{ room: Room }> = ({ room }) => {
111111
const [connecting, setConnecting] = useState(false);
112112
const me = useMemo(() => room.getMember(room.myUserId), [room]);
113-
const connectedMembers = useConnectedMembers(room.currentState);
113+
const connectedMembers = useConnectedMembers(room, false);
114114
const videoRef = useRef<HTMLVideoElement>();
115115

116116
const devices = useAsyncMemo(async () => {
@@ -172,12 +172,12 @@ const VideoLobby: FC<{ room: Room }> = ({ room }) => {
172172
};
173173

174174
let facePile;
175-
if (connectedMembers.length) {
176-
const shownMembers = connectedMembers.slice(0, MAX_FACES);
177-
const overflow = connectedMembers.length > shownMembers.length;
175+
if (connectedMembers.size) {
176+
const shownMembers = [...connectedMembers].slice(0, MAX_FACES);
177+
const overflow = connectedMembers.size > shownMembers.length;
178178

179179
facePile = <div className="mx_VideoLobby_connectedMembers">
180-
{ _t("%(count)s people connected", { count: connectedMembers.length }) }
180+
{ _t("%(count)s people connected", { count: connectedMembers.size }) }
181181
<FacePile members={shownMembers} faceSize={24} overflow={overflow} />
182182
</div>;
183183
}

‎src/utils/VideoChannelUtils.ts

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ limitations under the License.
1717
import { useState } from "react";
1818
import { throttle } from "lodash";
1919
import { CallType } from "matrix-js-sdk/src/webrtc/call";
20-
import { RoomState, RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
20+
import { Room } from "matrix-js-sdk/src/models/room";
21+
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
2122
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
2223

2324
import { useTypedEventEmitter } from "../hooks/useEventEmitter";
@@ -42,17 +43,32 @@ export const addVideoChannel = async (roomId: string, roomName: string) => {
4243
await WidgetUtils.addJitsiWidget(roomId, CallType.Video, "Video channel", VIDEO_CHANNEL, roomName);
4344
};
4445

45-
export const getConnectedMembers = (state: RoomState): RoomMember[] =>
46-
state.getStateEvents(VIDEO_CHANNEL_MEMBER)
46+
export const getConnectedMembers = (room: Room, connectedLocalEcho: boolean): Set<RoomMember> => {
47+
const members = new Set<RoomMember>();
48+
49+
for (const e of room.currentState.getStateEvents(VIDEO_CHANNEL_MEMBER)) {
50+
const member = room.getMember(e.getStateKey());
51+
let devices = e.getContent<IVideoChannelMemberContent>()?.devices ?? [];
52+
53+
// Apply local echo for the disconnected case
54+
if (!connectedLocalEcho && member?.userId === room.client.getUserId()) {
55+
devices = devices.filter(d => d !== room.client.getDeviceId());
56+
}
4757
// Must have a device connected and still be joined to the room
48-
.filter(e => e.getContent<IVideoChannelMemberContent>()?.devices?.length)
49-
.map(e => state.getMember(e.getStateKey()))
50-
.filter(member => member?.membership === "join");
51-
52-
export const useConnectedMembers = (state: RoomState, throttleMs = 100) => {
53-
const [members, setMembers] = useState<RoomMember[]>(getConnectedMembers(state));
54-
useTypedEventEmitter(state, RoomStateEvent.Update, throttle(() => {
55-
setMembers(getConnectedMembers(state));
58+
if (devices.length && member?.membership === "join") members.add(member);
59+
}
60+
61+
// Apply local echo for the connected case
62+
if (connectedLocalEcho) members.add(room.getMember(room.client.getUserId()));
63+
return members;
64+
};
65+
66+
export const useConnectedMembers = (
67+
room: Room, connectedLocalEcho: boolean, throttleMs = 100,
68+
): Set<RoomMember> => {
69+
const [members, setMembers] = useState<Set<RoomMember>>(getConnectedMembers(room, connectedLocalEcho));
70+
useTypedEventEmitter(room.currentState, RoomStateEvent.Update, throttle(() => {
71+
setMembers(getConnectedMembers(room, connectedLocalEcho));
5672
}, throttleMs, { leading: true, trailing: true }));
5773
return members;
5874
};

‎test/components/views/rooms/RoomTile-test.tsx

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import React from "react";
1818
import { mount } from "enzyme";
1919
import { act } from "react-dom/test-utils";
2020
import { mocked } from "jest-mock";
21+
import { MatrixClient } from "matrix-js-sdk/src/client";
22+
import { Room } from "matrix-js-sdk/src/models/room";
2123
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
2224

2325
import {
@@ -26,6 +28,7 @@ import {
2628
mkRoom,
2729
mkVideoChannelMember,
2830
stubVideoChannelStore,
31+
StubVideoChannelStore,
2932
} from "../../../test-utils";
3033
import RoomTile from "../../../../src/components/views/rooms/RoomTile";
3134
import SettingsStore from "../../../../src/settings/SettingsStore";
@@ -39,9 +42,8 @@ describe("RoomTile", () => {
3942
jest.spyOn(PlatformPeg, 'get')
4043
.mockReturnValue({ overrideBrowserShortcuts: () => false } as unknown as BasePlatform);
4144

42-
let cli;
43-
let store;
44-
45+
let cli: MatrixClient;
46+
let store: StubVideoChannelStore;
4547
beforeEach(() => {
4648
const realGetValue = SettingsStore.getValue;
4749
SettingsStore.getValue = <T, >(name: string, roomId?: string): T => {
@@ -52,16 +54,19 @@ describe("RoomTile", () => {
5254
};
5355

5456
stubClient();
55-
cli = mocked(MatrixClientPeg.get());
57+
cli = MatrixClientPeg.get();
5658
store = stubVideoChannelStore();
5759
DMRoomMap.makeShared();
5860
});
5961

6062
afterEach(() => jest.clearAllMocks());
6163

6264
describe("video rooms", () => {
63-
const room = mkRoom(cli, "!1:example.org");
64-
room.isElementVideoRoom.mockReturnValue(true);
65+
let room: Room;
66+
beforeEach(() => {
67+
room = mkRoom(cli, "!1:example.org");
68+
mocked(room.isElementVideoRoom).mockReturnValue(true);
69+
});
6570

6671
it("tracks connection state", () => {
6772
const tile = mount(
@@ -97,7 +102,7 @@ describe("RoomTile", () => {
97102
mkVideoChannelMember("@chris:example.org", ["device 1"]),
98103
]));
99104

100-
mocked(room.currentState).getMember.mockImplementation(userId => ({
105+
mocked(room).getMember.mockImplementation(userId => ({
101106
userId,
102107
membership: userId === "@chris:example.org" ? "leave" : "join",
103108
name: userId,
@@ -117,8 +122,36 @@ describe("RoomTile", () => {
117122
);
118123

119124
// Only Alice should display as connected
120-
const participants = tile.find(".mx_RoomTile_videoParticipants");
121-
expect(participants.text()).toEqual("1");
125+
expect(tile.find(".mx_RoomTile_videoParticipants").text()).toEqual("1");
126+
});
127+
128+
it("reflects local echo in connected members", () => {
129+
mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([
130+
// Make the remote echo claim that we're connected, while leaving the store disconnected
131+
mkVideoChannelMember(cli.getUserId(), [cli.getDeviceId()]),
132+
]));
133+
134+
mocked(room).getMember.mockImplementation(userId => ({
135+
userId,
136+
membership: "join",
137+
name: userId,
138+
rawDisplayName: userId,
139+
roomId: "!1:example.org",
140+
getAvatarUrl: () => {},
141+
getMxcAvatarUrl: () => {},
142+
}) as unknown as RoomMember);
143+
144+
const tile = mount(
145+
<RoomTile
146+
room={room}
147+
showMessagePreview={false}
148+
isMinimized={false}
149+
tag={DefaultTagID.Untagged}
150+
/>,
151+
);
152+
153+
// Because of our local echo, we should still appear as disconnected
154+
expect(tile.find(".mx_RoomTile_videoParticipants").exists()).toEqual(false);
122155
});
123156
});
124157
});

‎test/components/views/voip/VideoLobby-test.tsx

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,14 @@ import React from "react";
1818
import { mount } from "enzyme";
1919
import { act } from "react-dom/test-utils";
2020
import { mocked } from "jest-mock";
21+
import { MatrixClient } from "matrix-js-sdk/src/client";
22+
import { Room } from "matrix-js-sdk/src/models/room";
2123
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
2224

2325
import {
2426
stubClient,
2527
stubVideoChannelStore,
28+
StubVideoChannelStore,
2629
mkRoom,
2730
mkVideoChannelMember,
2831
mockStateEventImplementation,
@@ -33,7 +36,6 @@ import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar"
3336
import VideoLobby from "../../../../src/components/views/voip/VideoLobby";
3437

3538
describe("VideoLobby", () => {
36-
stubClient();
3739
Object.defineProperty(navigator, "mediaDevices", {
3840
value: {
3941
enumerateDevices: jest.fn(),
@@ -42,19 +44,17 @@ describe("VideoLobby", () => {
4244
});
4345
jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
4446

45-
const cli = MatrixClientPeg.get();
46-
const room = mkRoom(cli, "!1:example.org");
47-
48-
let store;
47+
let cli: MatrixClient;
48+
let store: StubVideoChannelStore;
49+
let room: Room;
4950
beforeEach(() => {
51+
stubClient();
52+
cli = MatrixClientPeg.get();
5053
store = stubVideoChannelStore();
54+
room = mkRoom(cli, "!1:example.org");
5155
mocked(navigator.mediaDevices.enumerateDevices).mockResolvedValue([]);
5256
});
5357

54-
afterEach(() => {
55-
jest.clearAllMocks();
56-
});
57-
5858
describe("connected members", () => {
5959
it("hides when no one is connected", async () => {
6060
const lobby = mount(<VideoLobby room={room} />);
@@ -75,7 +75,7 @@ describe("VideoLobby", () => {
7575
mkVideoChannelMember("@chris:example.org", ["device 1"]),
7676
]));
7777

78-
mocked(room.currentState).getMember.mockImplementation(userId => ({
78+
mocked(room).getMember.mockImplementation(userId => ({
7979
userId,
8080
membership: userId === "@chris:example.org" ? "leave" : "join",
8181
name: userId,
@@ -95,6 +95,31 @@ describe("VideoLobby", () => {
9595
expect(memberText).toEqual("1 person connected");
9696
expect(lobby.find(FacePile).find(MemberAvatar).props().member.userId).toEqual("@alice:example.org");
9797
});
98+
99+
it("doesn't include remote echo of this device being connected", async () => {
100+
mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([
101+
// Make the remote echo claim that we're connected, while leaving the store disconnected
102+
mkVideoChannelMember(cli.getUserId(), [cli.getDeviceId()]),
103+
]));
104+
105+
mocked(room).getMember.mockImplementation(userId => ({
106+
userId,
107+
membership: "join",
108+
name: userId,
109+
rawDisplayName: userId,
110+
roomId: "!1:example.org",
111+
getAvatarUrl: () => {},
112+
getMxcAvatarUrl: () => {},
113+
}) as unknown as RoomMember);
114+
115+
const lobby = mount(<VideoLobby room={room} />);
116+
// Wait for state to settle
117+
await act(() => Promise.resolve());
118+
lobby.update();
119+
120+
// Because of our local echo, we should still appear as disconnected
121+
expect(lobby.find(".mx_VideoLobby_connectedMembers").exists()).toEqual(false);
122+
});
98123
});
99124

100125
describe("device buttons", () => {

‎test/test-utils/test-utils.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -379,6 +379,7 @@ export function mkStubRoom(roomId: string = null, name: string, client: MatrixCl
379379
getJoinRule: jest.fn().mockReturnValue("invite"),
380380
loadMembersIfNeeded: jest.fn(),
381381
client,
382+
myUserId: client?.getUserId(),
382383
canInvite: jest.fn(),
383384
} as unknown as Room;
384385
}

‎test/test-utils/video.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { mkEvent } from "./test-utils";
2121
import { VIDEO_CHANNEL_MEMBER } from "../../src/utils/VideoChannelUtils";
2222
import VideoChannelStore, { VideoChannelEvent, IJitsiParticipant } from "../../src/stores/VideoChannelStore";
2323

24-
class StubVideoChannelStore extends EventEmitter {
24+
export class StubVideoChannelStore extends EventEmitter {
2525
private _roomId: string;
2626
public get roomId(): string { return this._roomId; }
2727
private _connected: boolean;

0 commit comments

Comments
 (0)