Skip to content

Commit 1f5ac41

Browse files
dbkrdbkr
committed
Add warning if incompatible versionsd are being used
This will probably be overly sensitive until we start timing out member events (ie. matrix-org/matrix-js-sdk#2446 lands) because lots of calls might have old member events from people who've joined previously.
1 parent fdcedb5 commit 1f5ac41

File tree

10 files changed

+141
-3
lines changed

10 files changed

+141
-3
lines changed

‎src/Header.jsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import classNames from "classnames";
2-
import React, { useRef } from "react";
2+
import React, { useCallback, useRef } from "react";
33
import { Link } from "react-router-dom";
44
import styles from "./Header.module.css";
55
import { ReactComponent as Logo } from "./icons/Logo.svg";
@@ -8,6 +8,9 @@ import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
88
import { useButton } from "@react-aria/button";
99
import { Subtitle } from "./typography/Typography";
1010
import { Avatar } from "./Avatar";
11+
import { IncompatibleversionModal } from "./IncompatibleversionModal";
12+
import { useModalTriggerState } from "./Modal";
13+
import { Button } from "./button";
1114

1215
export function Header({ children, className, ...rest }) {
1316
return (
@@ -84,3 +87,25 @@ export function RoomSetupHeaderInfo({ roomName, avatarUrl, ...rest }) {
8487
</button>
8588
);
8689
}
90+
91+
export function VersionMismatchWarning({ users, room }) {
92+
const { modalState, modalProps } = useModalTriggerState();
93+
94+
const onDetailsClick = useCallback(() => {
95+
modalState.open();
96+
}, [modalState]);
97+
98+
if (users.size === 0) return null;
99+
100+
return (
101+
<span className={styles.versionMismatchWarning}>
102+
Incomaptible versions!
103+
<Button variant="link" onClick={onDetailsClick}>
104+
Details
105+
</Button>
106+
{modalState.isOpen && (
107+
<IncompatibleversionModal userIds={users} room={room} {...modalProps} />
108+
)}
109+
</span>
110+
);
111+
}

‎src/Header.module.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,24 @@
104104
flex-shrink: 0;
105105
}
106106

107+
.versionMismatchWarning {
108+
padding-left: 15px;
109+
}
110+
111+
.versionMismatchWarning::before {
112+
content: "";
113+
display: inline-block;
114+
position: relative;
115+
top: 2px;
116+
width: 16px;
117+
height: 16px;
118+
mask-image: url("./icons/AlertTriangleFilled.svg");
119+
mask-repeat: no-repeat;
120+
mask-size: contain;
121+
background-color: var(--warning);
122+
padding-right: 3px;
123+
}
124+
107125
@media (min-width: 800px) {
108126
.headerLogo,
109127
.roomAvatar,

‎src/IncompatibleVersionModal.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
Copyright 2022 New Vector Ltd
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import { Room } from "matrix-js-sdk";
18+
import React from "react";
19+
20+
import { Modal, ModalContent } from "./Modal";
21+
import { Body } from "./typography/Typography";
22+
23+
interface Props {
24+
userIds: Set<string>;
25+
room: Room;
26+
}
27+
28+
export const IncompatibleversionModal: React.FC<Props> = ({
29+
userIds,
30+
room,
31+
...rest
32+
}) => {
33+
const userLis = Array.from(userIds).map((u) => (
34+
<li>{room.getMember(u).name}</li>
35+
));
36+
37+
return (
38+
<Modal title="Incompatible Versions" isDismissable {...rest}>
39+
<ModalContent>
40+
<Body>
41+
Other users are trying to join this call from incompatible versions.
42+
These users should ensure that they have refreshed their browsers:
43+
<ul>{userLis}</ul>
44+
</Body>
45+
</ModalContent>
46+
</Modal>
47+
);
48+
};

‎src/button/Button.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const variantToClassName = {
4141
iconCopy: [styles.iconCopyButton],
4242
secondaryHangup: [styles.secondaryHangup],
4343
dropdown: [styles.dropdownButton],
44+
link: [styles.linkButton],
4445
};
4546

4647
export const sizeToClassName = {

‎src/button/Button.module.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,3 +207,10 @@ limitations under the License.
207207
.lg {
208208
height: 40px;
209209
}
210+
211+
.linkButton {
212+
background-color: transparent;
213+
border: none;
214+
text-decoration: underline;
215+
cursor: pointer;
216+
}

‎src/icons/AlertTriangleFilled.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ limitations under the License.
2929
--accent-20: #0dbd8b33;
3030
--alert: #ff5b55;
3131
--alert-20: #ff5b5533;
32+
--warning: #e8bf37;
3233
--links: #0086e6;
3334
--primary-content: #ffffff;
3435
--secondary-content: #a9b2bc;

‎src/room/GroupCallView.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export function GroupCallView({
5353
screenshareFeeds,
5454
hasLocalParticipant,
5555
participants,
56+
unencryptedEventsFromUsers,
5657
} = useGroupCall(groupCall);
5758

5859
const avatarUrl = useRoomAvatar(groupCall.room);
@@ -112,6 +113,7 @@ export function GroupCallView({
112113
localScreenshareFeed={localScreenshareFeed}
113114
screenshareFeeds={screenshareFeeds}
114115
roomId={roomId}
116+
unencryptedEventsFromUsers={unencryptedEventsFromUsers}
115117
/>
116118
);
117119
}

‎src/room/InCallView.jsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,13 @@ import {
2222
VideoButton,
2323
ScreenshareButton,
2424
} from "../button";
25-
import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
25+
import {
26+
Header,
27+
LeftNav,
28+
RightNav,
29+
RoomHeaderInfo,
30+
VersionMismatchWarning,
31+
} from "../Header";
2632
import { VideoGrid, useVideoGridLayout } from "../video-grid/VideoGrid";
2733
import { VideoTileContainer } from "../video-grid/VideoTileContainer";
2834
import { GroupCallInspector } from "./GroupCallInspector";
@@ -59,6 +65,7 @@ export function InCallView({
5965
isScreensharing,
6066
screenshareFeeds,
6167
roomId,
68+
unencryptedEventsFromUsers,
6269
}) {
6370
usePreventScroll();
6471
const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0);
@@ -135,6 +142,10 @@ export function InCallView({
135142
<Header>
136143
<LeftNav>
137144
<RoomHeaderInfo roomName={roomName} avatarUrl={avatarUrl} />
145+
<VersionMismatchWarning
146+
users={unencryptedEventsFromUsers}
147+
room={groupCall.room}
148+
/>
138149
</LeftNav>
139150
<RightNav>
140151
<GridLayoutMenu layout={layout} setLayout={setLayout} />

‎src/room/useGroupCall.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,14 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
import { useCallback, useEffect, useState } from "react";
17+
import { useCallback, useEffect, useReducer, useState } from "react";
1818
import {
1919
GroupCallEvent,
2020
GroupCallState,
2121
GroupCall,
22+
GroupCallErrorCode,
23+
GroupCallUnknownDeviceError,
24+
GroupCallError,
2225
} from "matrix-js-sdk/src/webrtc/groupCall";
2326
import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
2427
import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
@@ -48,6 +51,7 @@ export interface UseGroupCallType {
4851
localDesktopCapturerSourceId: string;
4952
participants: RoomMember[];
5053
hasLocalParticipant: boolean;
54+
unencryptedEventsFromUsers: Set<string>;
5155
}
5256

5357
interface State {
@@ -106,6 +110,13 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
106110
hasLocalParticipant: false,
107111
});
108112

113+
const [unencryptedEventsFromUsers, addUnencryptedEventUser] = useReducer(
114+
(state: Set<string>, newVal: string) => {
115+
return new Set(state).add(newVal);
116+
},
117+
new Set<string>()
118+
);
119+
109120
const updateState = (state: Partial<State>) =>
110121
setState((prevState) => ({ ...prevState, ...state }));
111122

@@ -180,6 +191,13 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
180191
});
181192
}
182193

194+
function onError(e: GroupCallError): void {
195+
if (e.code === GroupCallErrorCode.UnknownDevice) {
196+
const unknownDeviceError = e as GroupCallUnknownDeviceError;
197+
addUnencryptedEventUser(unknownDeviceError.userId);
198+
}
199+
}
200+
183201
groupCall.on(GroupCallEvent.GroupCallStateChanged, onGroupCallStateChanged);
184202
groupCall.on(GroupCallEvent.UserMediaFeedsChanged, onUserMediaFeedsChanged);
185203
groupCall.on(
@@ -194,6 +212,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
194212
);
195213
groupCall.on(GroupCallEvent.CallsChanged, onCallsChanged);
196214
groupCall.on(GroupCallEvent.ParticipantsChanged, onParticipantsChanged);
215+
groupCall.on(GroupCallEvent.Error, onError);
197216

198217
updateState({
199218
error: null,
@@ -242,6 +261,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
242261
GroupCallEvent.ParticipantsChanged,
243262
onParticipantsChanged
244263
);
264+
groupCall.removeListener(GroupCallEvent.Error, onError);
245265
groupCall.leave();
246266
};
247267
}, [groupCall]);
@@ -319,5 +339,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallType {
319339
localDesktopCapturerSourceId,
320340
participants,
321341
hasLocalParticipant,
342+
unencryptedEventsFromUsers,
322343
};
323344
}

0 commit comments

Comments
 (0)