OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Disconnect other connected devices (of the same user) when joining an Element call (#9379)

t3chguy/dedup-icons-17oct
Šimon Brandner 2022-10-14 15:17:49 +02:00 committed by GitHub
parent ba5bd74ac8
commit 54008cff58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 160 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/views/messages/CallEvent.tsx
View File

@ -20,7 +20,13 @@ import type { MatrixEvent } from "matrix-js-sdk/src/models/event";
import type { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { Call, ConnectionState } from "../../../models/Call";
import { _t } from "../../../languageHandler";
import { useCall, useConnectionState, useJoinCallButtonDisabledTooltip, useParticipants } from "../../../hooks/useCall";
import {
useCall,
useConnectionState,
useJoinCallButtonDisabled,
useJoinCallButtonTooltip,
useParticipants,
} from "../../../hooks/useCall";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { Action } from "../../../dispatcher/actions";
@ -106,7 +112,8 @@ interface ActiveLoadedCallEventProps {
const ActiveLoadedCallEvent = forwardRef<any, ActiveLoadedCallEventProps>(({ mxEvent, call }, ref) => {
const connectionState = useConnectionState(call);
const participants = useParticipants(call);
const joinCallButtonDisabledTooltip = useJoinCallButtonDisabledTooltip(call);
const joinCallButtonTooltip = useJoinCallButtonTooltip(call);
const joinCallButtonDisabled = useJoinCallButtonDisabled(call);
const connect = useCallback((ev: ButtonEvent) => {
ev.preventDefault();
@ -138,8 +145,8 @@ const ActiveLoadedCallEvent = forwardRef<any, ActiveLoadedCallEventProps>(({ mxE
participants={participants}
buttonText={buttonText}
buttonKind={buttonKind}
buttonDisabled={Boolean(joinCallButtonDisabledTooltip)}
buttonTooltip={joinCallButtonDisabledTooltip}
buttonDisabled={joinCallButtonDisabled}
buttonTooltip={joinCallButtonTooltip}
onButtonClick={onButtonClick}
/>;
});

23
src/components/views/voip/CallView.tsx
View File

@ -22,7 +22,13 @@ import { defer, IDeferred } from "matrix-js-sdk/src/utils";
import type { Room } from "matrix-js-sdk/src/models/room";
import type { ConnectionState } from "../../../models/Call";
import { Call, CallEvent, ElementCall, isConnected } from "../../../models/Call";
import { useCall, useConnectionState, useJoinCallButtonDisabledTooltip, useParticipants } from "../../../hooks/useCall";
import {
useCall,
useConnectionState,
useJoinCallButtonDisabled,
useJoinCallButtonTooltip,
useParticipants,
} from "../../../hooks/useCall";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import AppTile from "../elements/AppTile";
import { _t } from "../../../languageHandler";
@ -110,11 +116,12 @@ const MAX_FACES = 8;
interface LobbyProps {
room: Room;
connect: () => Promise<void>;
joinCallButtonDisabledTooltip?: string;
joinCallButtonTooltip?: string;
joinCallButtonDisabled?: boolean;
children?: ReactNode;
}
export const Lobby: FC<LobbyProps> = ({ room, joinCallButtonDisabledTooltip, connect, children }) => {
export const Lobby: FC<LobbyProps> = ({ room, joinCallButtonDisabled, joinCallButtonTooltip, connect, children }) => {
const [connecting, setConnecting] = useState(false);
const me = useMemo(() => room.getMember(room.myUserId)!, [room]);
const videoRef = useRef<HTMLVideoElement>(null);
@ -237,11 +244,11 @@ export const Lobby: FC<LobbyProps> = ({ room, joinCallButtonDisabledTooltip, con
<AccessibleTooltipButton
className="mx_CallView_connectButton"
kind="primary"
disabled={connecting || Boolean(joinCallButtonDisabledTooltip)}
disabled={connecting || joinCallButtonDisabled}
onClick={onConnectClick}
title={_t("Join")}
label={_t("Join")}
tooltip={connecting ? _t("Connecting") : joinCallButtonDisabledTooltip}
tooltip={connecting ? _t("Connecting") : joinCallButtonTooltip}
/>
</div>;
};
@ -323,7 +330,8 @@ const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call }) => {
const cli = useContext(MatrixClientContext);
const connected = isConnected(useConnectionState(call));
const participants = useParticipants(call);
const joinCallButtonDisabledTooltip = useJoinCallButtonDisabledTooltip(call);
const joinCallButtonTooltip = useJoinCallButtonTooltip(call);
const joinCallButtonDisabled = useJoinCallButtonDisabled(call);
const connect = useCallback(async () => {
// Disconnect from any other active calls first, since we don't yet support holding
@ -350,7 +358,8 @@ const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call }) => {
lobby = <Lobby
room={room}
connect={connect}
joinCallButtonDisabledTooltip={joinCallButtonDisabledTooltip}
joinCallButtonTooltip={joinCallButtonTooltip}
joinCallButtonDisabled={joinCallButtonDisabled}
>
{ facePile }
</Lobby>;

23
src/hooks/useCall.ts
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { useState, useCallback } from "react";
import { useState, useCallback, useMemo } from "react";
import type { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { Call, ConnectionState, ElementCall, Layout } from "../models/Call";
@ -24,6 +24,7 @@ import { CallStore, CallStoreEvent } from "../stores/CallStore";
import { useEventEmitter } from "./useEventEmitter";
import SdkConfig, { DEFAULTS } from "../SdkConfig";
import { _t } from "../languageHandler";
import { MatrixClientPeg } from "../MatrixClientPeg";
export const useCall = (roomId: string): Call | null => {
const [call, setCall] = useState(() => CallStore.instance.getCall(roomId));
@ -56,15 +57,33 @@ export const useFull = (call: Call): boolean => {
);
};
export const useJoinCallButtonDisabledTooltip = (call: Call): string | null => {
export const useIsAlreadyParticipant = (call: Call): boolean => {
const client = MatrixClientPeg.get();
const participants = useParticipants(call);
return useMemo(() => {
return participants.has(client.getRoom(call.roomId).getMember(client.getUserId()));
}, [participants, client, call]);
};
export const useJoinCallButtonTooltip = (call: Call): string | null => {
const isFull = useFull(call);
const state = useConnectionState(call);
const isAlreadyParticipant = useIsAlreadyParticipant(call);
if (state === ConnectionState.Connecting) return _t("Connecting");
if (isFull) return _t("Sorry — this call is currently full");
if (isAlreadyParticipant) return _t("You have already joined this call from another device");
return null;
};
export const useJoinCallButtonDisabled = (call: Call): boolean => {
const isFull = useFull(call);
const state = useConnectionState(call);
return isFull || state === ConnectionState.Connecting;
};
export const useLayout = (call: ElementCall): Layout =>
useTypedEventEmitterState(
call,

1
src/i18n/strings/en_EN.json
View File

@ -1023,6 +1023,7 @@
"This is your list of users/servers you have blocked - don't leave the room!": "This is your list of users/servers you have blocked - don't leave the room!",
"Connecting": "Connecting",
"Sorry — this call is currently full": "Sorry — this call is currently full",
"You have already joined this call from another device": "You have already joined this call from another device",
"Create account": "Create account",
"You made it!": "You made it!",
"Find and invite your friends": "Find and invite your friends",

36
src/models/Call.ts
View File

@ -17,7 +17,7 @@ limitations under the License.
import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
import { logger } from "matrix-js-sdk/src/logger";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
import { RoomEvent } from "matrix-js-sdk/src/models/room";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { CallType } from "matrix-js-sdk/src/webrtc/call";
@ -606,8 +606,11 @@ export interface ElementCallMemberContent {
export class ElementCall extends Call {
public static readonly CALL_EVENT_TYPE = new NamespacedValue(null, "org.matrix.msc3401.call");
public static readonly MEMBER_EVENT_TYPE = new NamespacedValue(null, "org.matrix.msc3401.call.member");
public static readonly DUPLICATE_CALL_DEVICE_EVENT_TYPE = "io.element.duplicate_call_device";
public readonly STUCK_DEVICE_TIMEOUT_MS = 1000 * 60 * 60; // 1 hour
private kickedOutByAnotherDevice = false;
private connectionTime: number | null = null;
private participantsExpirationTimer: number | null = null;
private terminationTimer: number | null = null;
@ -785,6 +788,16 @@ export class ElementCall extends Call {
audioInput: MediaDeviceInfo | null,
videoInput: MediaDeviceInfo | null,
): Promise<void> {
this.kickedOutByAnotherDevice = false;
this.client.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
this.connectionTime = Date.now();
await this.client.sendToDevice(ElementCall.DUPLICATE_CALL_DEVICE_EVENT_TYPE, {
[this.client.getUserId()]: {
"*": { device_id: this.client.getDeviceId(), timestamp: this.connectionTime },
},
});
try {
await this.messaging!.transport.send(ElementWidgetActions.JoinCall, {
audioInput: audioInput?.label ?? null,
@ -808,6 +821,7 @@ export class ElementCall extends Call {
}
public setDisconnected() {
this.client.off(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
this.messaging!.off(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
this.messaging!.on(`action:${ElementWidgetActions.TileLayout}`, this.onTileLayout);
this.messaging!.on(`action:${ElementWidgetActions.SpotlightLayout}`, this.onSpotlightLayout);
@ -845,8 +859,13 @@ export class ElementCall extends Call {
}
private get mayTerminate(): boolean {
return this.groupCall.getContent()["m.intent"] !== "m.room"
&& this.room.currentState.mayClientSendStateEvent(ElementCall.CALL_EVENT_TYPE.name, this.client);
if (this.kickedOutByAnotherDevice) return false;
if (this.groupCall.getContent()["m.intent"] === "m.room") return false;
if (
!this.room.currentState.mayClientSendStateEvent(ElementCall.CALL_EVENT_TYPE.name, this.client)
) return false;
return true;
}
private async terminate(): Promise<void> {
@ -868,6 +887,17 @@ export class ElementCall extends Call {
if ("m.terminated" in newGroupCall.getContent()) this.destroy();
};
private onToDeviceEvent = (event: MatrixEvent): void => {
const content = event.getContent();
if (event.getType() !== ElementCall.DUPLICATE_CALL_DEVICE_EVENT_TYPE) return;
if (event.getSender() !== this.client.getUserId()) return;
if (content.device_id === this.client.getDeviceId()) return;
if (content.timestamp <= this.connectionTime) return;
this.kickedOutByAnotherDevice = true;
this.disconnect();
};
private onConnectionState = (state: ConnectionState, prevState: ConnectionState) => {
if (
(state === ConnectionState.Connected && !isConnected(prevState))

7
src/toasts/IncomingCallToast.tsx
View File

@ -30,7 +30,7 @@ import {
LiveContentSummaryWithCall,
LiveContentType,
} from "../components/views/rooms/LiveContentSummary";
import { useCall, useJoinCallButtonDisabledTooltip } from "../hooks/useCall";
import { useCall, useJoinCallButtonDisabled, useJoinCallButtonTooltip } from "../hooks/useCall";
import { useRoomState } from "../hooks/useRoomState";
import { ButtonEvent } from "../components/views/elements/AccessibleButton";
import { useDispatcher } from "../hooks/useDispatcher";
@ -45,12 +45,13 @@ interface JoinCallButtonWithCallProps {
}
function JoinCallButtonWithCall({ onClick, call }: JoinCallButtonWithCallProps) {
const tooltip = useJoinCallButtonDisabledTooltip(call);
const tooltip = useJoinCallButtonTooltip(call);
const disabled = useJoinCallButtonDisabled(call);
return <AccessibleTooltipButton
className="mx_IncomingCallToast_joinButton"
onClick={onClick}
disabled={Boolean(tooltip)}
disabled={disabled}
tooltip={tooltip}
kind="primary"
>

75
test/models/Call-test.ts
View File

@ -18,10 +18,11 @@ import EventEmitter from "events";
import { mocked } from "jest-mock";
import { waitFor } from "@testing-library/react";
import { RoomType } from "matrix-js-sdk/src/@types/event";
import { PendingEventOrdering } from "matrix-js-sdk/src/client";
import { ClientEvent, PendingEventOrdering } from "matrix-js-sdk/src/client";
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { Widget } from "matrix-widget-api";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import type { Mocked } from "jest-mock";
import type { MatrixClient, IMyDevice } from "matrix-js-sdk/src/client";
@ -85,6 +86,7 @@ const setUpClientRoomAndStores = (): {
client.getRoom.mockImplementation(roomId => roomId === room.roomId ? room : null);
client.getRooms.mockReturnValue([room]);
client.getUserId.mockReturnValue(alice.userId);
client.getDeviceId.mockReturnValue("alices_device");
client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
client.sendStateEvent.mockImplementation(async (roomId, eventType, content, stateKey = "") => {
if (roomId !== room.roomId) throw new Error("Unknown room");
@ -814,6 +816,77 @@ describe("ElementCall", () => {
call.off(CallEvent.Destroy, onDestroy);
});
describe("being kicked out by another device", () => {
const onDestroy = jest.fn();
beforeEach(async () => {
await call.connect();
call.on(CallEvent.Destroy, onDestroy);
jest.advanceTimersByTime(100);
jest.clearAllMocks();
});
afterEach(() => {
call.off(CallEvent.Destroy, onDestroy);
});
it("does not terminate the call if we are the last", async () => {
client.emit(ClientEvent.ToDeviceEvent, {
getType: () => (ElementCall.DUPLICATE_CALL_DEVICE_EVENT_TYPE),
getContent: () => ({ device_id: "random_device_id", timestamp: Date.now() }),
getSender: () => (client.getUserId()),
} as MatrixEvent);
expect(client.sendStateEvent).not.toHaveBeenCalled();
expect(
[ConnectionState.Disconnecting, ConnectionState.Disconnected].includes(call.connectionState),
).toBeTruthy();
});
it("ignores messages from our device", async () => {
client.emit(ClientEvent.ToDeviceEvent, {
getSender: () => (client.getUserId()),
getType: () => (ElementCall.DUPLICATE_CALL_DEVICE_EVENT_TYPE),
getContent: () => ({ device_id: client.getDeviceId(), timestamp: Date.now() }),
} as MatrixEvent);
expect(client.sendStateEvent).not.toHaveBeenCalled();
expect(
[ConnectionState.Disconnecting, ConnectionState.Disconnected].includes(call.connectionState),
).toBeFalsy();
expect(onDestroy).not.toHaveBeenCalled();
});
it("ignores messages from other users", async () => {
client.emit(ClientEvent.ToDeviceEvent, {
getSender: () => (bob.userId),
getType: () => (ElementCall.DUPLICATE_CALL_DEVICE_EVENT_TYPE),
getContent: () => ({ device_id: "random_device_id", timestamp: Date.now() }),
} as MatrixEvent);
expect(client.sendStateEvent).not.toHaveBeenCalled();
expect(
[ConnectionState.Disconnecting, ConnectionState.Disconnected].includes(call.connectionState),
).toBeFalsy();
expect(onDestroy).not.toHaveBeenCalled();
});
it("ignores messages from the past", async () => {
client.emit(ClientEvent.ToDeviceEvent, {
getSender: () => (client.getUserId()),
getType: () => (ElementCall.DUPLICATE_CALL_DEVICE_EVENT_TYPE),
getContent: () => ({ device_id: "random_device_id", timestamp: 0 }),
} as MatrixEvent);
expect(client.sendStateEvent).not.toHaveBeenCalled();
expect(
[ConnectionState.Disconnecting, ConnectionState.Disconnected].includes(call.connectionState),
).toBeFalsy();
expect(onDestroy).not.toHaveBeenCalled();
});
});
it("ends the call after a random delay if the last participant leaves without ending it", async () => {
// Bob connects
await client.sendStateEvent(