Use native js-sdk group call support (#9625)

* Use native js-sdk group call support

Now that the js-sdk supports group calls natively, our group call implementation can be simplified a bit. Switching to the js-sdk implementation also brings the react-sdk up to date with recent MSC3401 changes, and adds support for joining calls from multiple devices. (So, the previous logic which sent to-device messages to prevent multi-device sessions is no longer necessary.)

* Fix strings

* Fix strict type errors
This commit is contained in:
Robin 2022-11-28 16:37:32 -05:00 committed by GitHub
parent 3c7781a561
commit 2c612d5aa1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 383 additions and 567 deletions

View file

@ -24,7 +24,6 @@ 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));
@ -41,49 +40,51 @@ export const useConnectionState = (call: Call): ConnectionState =>
useCallback(state => state ?? call.connectionState, [call]),
);
export const useParticipants = (call: Call): Set<RoomMember> =>
export const useParticipants = (call: Call): Map<RoomMember, Set<string>> =>
useTypedEventEmitterState(
call,
CallEvent.Participants,
useCallback(state => state ?? call.participants, [call]),
);
export const useFull = (call: Call): boolean => {
const participants = useParticipants(call);
return (
participants.size
>= (SdkConfig.get("element_call").participant_limit ?? DEFAULTS.element_call.participant_limit)
);
};
export const useIsAlreadyParticipant = (call: Call): boolean => {
const client = MatrixClientPeg.get();
export const useParticipantCount = (call: Call): number => {
const participants = useParticipants(call);
return useMemo(() => {
return participants.has(client.getRoom(call.roomId).getMember(client.getUserId()));
}, [participants, client, call]);
let count = 0;
for (const devices of participants.values()) count += devices.size;
return count;
}, [participants]);
};
export const useJoinCallButtonTooltip = (call: Call): string | null => {
export const useParticipatingMembers = (call: Call): RoomMember[] => {
const participants = useParticipants(call);
return useMemo(() => {
const members: RoomMember[] = [];
for (const [member, devices] of participants) {
// Repeat the member for as many devices as they're using
for (let i = 0; i < devices.size; i++) members.push(member);
}
return members;
}, [participants]);
};
export const useFull = (call: Call): boolean => {
return useParticipantCount(call) >= (
SdkConfig.get("element_call").participant_limit ?? DEFAULTS.element_call.participant_limit!
);
};
export const useJoinCallButtonDisabledTooltip = (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,