Merge pull request #535 from robintown/fix-call-type-dropdown

Fix the call type selector
This commit is contained in:
Robin 2022-08-19 09:09:32 -04:00 committed by GitHub
commit 3406b46db5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 60 additions and 22 deletions

View file

@ -58,7 +58,7 @@ export function LeftNav({
interface RightNavProps extends HTMLAttributes<HTMLElement> { interface RightNavProps extends HTMLAttributes<HTMLElement> {
children?: ReactNode; children?: ReactNode;
className?: string; className?: string;
hideMobile?: string; hideMobile?: boolean;
} }
export function RightNav({ export function RightNav({

View file

@ -56,13 +56,13 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
const data = new FormData(e.target as HTMLFormElement); const data = new FormData(e.target as HTMLFormElement);
const roomNameData = data.get("callName"); const roomNameData = data.get("callName");
const roomName = typeof roomNameData === "string" ? roomNameData : ""; const roomName = typeof roomNameData === "string" ? roomNameData : "";
// const ptt = callType === CallType.Radio; const ptt = callType === CallType.Radio;
async function submit() { async function submit() {
setError(undefined); setError(undefined);
setLoading(true); setLoading(true);
const [roomIdOrAlias] = await createRoom(client, roomName); const [roomIdOrAlias] = await createRoom(client, roomName, ptt);
if (roomIdOrAlias) { if (roomIdOrAlias) {
history.push(`/room/${roomIdOrAlias}`); history.push(`/room/${roomIdOrAlias}`);
@ -82,7 +82,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
} }
}); });
}, },
[client, history, modalState] [client, history, modalState, callType]
); );
const recentRooms = useGroupCallRooms(client); const recentRooms = useGroupCallRooms(client);

View file

@ -14,45 +14,46 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useState } from "react"; import React, { FC, useCallback, useState, FormEventHandler } from "react";
import { useHistory } from "react-router-dom";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { useClient } from "../ClientContext"; import { useClient } from "../ClientContext";
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header"; import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
import { UserMenuContainer } from "../UserMenuContainer"; import { UserMenuContainer } from "../UserMenuContainer";
import { useHistory } from "react-router-dom";
import { FieldRow, InputField, ErrorMessage } from "../input/Input"; import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { Button } from "../button"; import { Button } from "../button";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils"; import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
import { useInteractiveRegistration } from "../auth/useInteractiveRegistration"; import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
import { useModalTriggerState } from "../Modal"; import { useModalTriggerState } from "../Modal";
import { JoinExistingCallModal } from "./JoinExistingCallModal"; import { JoinExistingCallModal } from "./JoinExistingCallModal";
import { useRecaptcha } from "../auth/useRecaptcha"; import { useRecaptcha } from "../auth/useRecaptcha";
import { Body, Caption, Link, Headline } from "../typography/Typography"; import { Body, Caption, Link } from "../typography/Typography";
import { Form } from "../form/Form"; import { Form } from "../form/Form";
import { CallType, CallTypeDropdown } from "./CallTypeDropdown"; import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
import styles from "./UnauthenticatedView.module.css"; import styles from "./UnauthenticatedView.module.css";
import commonStyles from "./common.module.css"; import commonStyles from "./common.module.css";
import { generateRandomName } from "../auth/generateRandomName"; import { generateRandomName } from "../auth/generateRandomName";
export function UnauthenticatedView() { export const UnauthenticatedView: FC = () => {
const { setClient } = useClient(); const { setClient } = useClient();
const [callType, setCallType] = useState(CallType.Video); const [callType, setCallType] = useState(CallType.Video);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(); const [error, setError] = useState<Error>();
const [privacyPolicyUrl, recaptchaKey, register] = const [privacyPolicyUrl, recaptchaKey, register] =
useInteractiveRegistration(); useInteractiveRegistration();
const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey); const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
const { modalState, modalProps } = useModalTriggerState(); const { modalState, modalProps } = useModalTriggerState();
const [onFinished, setOnFinished] = useState(); const [onFinished, setOnFinished] = useState<() => void>();
const history = useHistory(); const history = useHistory();
const onSubmit = useCallback( const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
(e) => { (e) => {
e.preventDefault(); e.preventDefault();
const data = new FormData(e.target); const data = new FormData(e.target as HTMLFormElement);
const roomName = data.get("callName"); const roomName = data.get("callName") as string;
const displayName = data.get("displayName"); const displayName = data.get("displayName") as string;
const ptt = callType === CallType.Radio; const ptt = callType === CallType.Radio;
async function submit() { async function submit() {
@ -68,12 +69,12 @@ export function UnauthenticatedView() {
true true
); );
let roomIdOrAlias; let roomIdOrAlias: string;
try { try {
[roomIdOrAlias] = await createRoom(client, roomName, ptt); [roomIdOrAlias] = await createRoom(client, roomName, ptt);
} catch (error) { } catch (error) {
if (error.errcode === "M_ROOM_IN_USE") { if (error.errcode === "M_ROOM_IN_USE") {
setOnFinished(() => () => { setOnFinished(() => {
setClient(client, session); setClient(client, session);
const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName); const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName);
const [, serverName] = client.getUserId().split(":"); const [, serverName] = client.getUserId().split(":");
@ -100,7 +101,7 @@ export function UnauthenticatedView() {
reset(); reset();
}); });
}, },
[register, reset, execute, history, callType] [register, reset, execute, history, callType, modalState, setClient]
); );
const callNameLabel = const callNameLabel =
@ -177,4 +178,4 @@ export function UnauthenticatedView() {
)} )}
</> </>
); );
} };

View file

@ -17,7 +17,12 @@ import { Visibility, Preset } from "matrix-js-sdk/src/@types/partials";
import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync"; import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
import { WidgetApi } from "matrix-widget-api"; import { WidgetApi } from "matrix-widget-api";
import { logger } from "matrix-js-sdk/src/logger"; import { logger } from "matrix-js-sdk/src/logger";
import {
GroupCallIntent,
GroupCallType,
} from "matrix-js-sdk/src/webrtc/groupCall";
import type { Room } from "matrix-js-sdk/src/models/room";
import IndexedDBWorker from "./IndexedDBWorker?worker"; import IndexedDBWorker from "./IndexedDBWorker?worker";
import { getRoomParams } from "./room/useRoomParams"; import { getRoomParams } from "./room/useRoomParams";
@ -290,9 +295,10 @@ export function isLocalRoomId(roomId: string): boolean {
export async function createRoom( export async function createRoom(
client: MatrixClient, client: MatrixClient,
name: string name: string,
ptt: boolean
): Promise<[string, string]> { ): Promise<[string, string]> {
const result = await client.createRoom({ const createPromise = client.createRoom({
visibility: Visibility.Private, visibility: Visibility.Private,
preset: Preset.PublicChat, preset: Preset.PublicChat,
name, name,
@ -322,6 +328,36 @@ export async function createRoom(
}, },
}); });
// Wait for the room to arrive
await new Promise<void>((resolve, reject) => {
const onRoom = async (room: Room) => {
if (room.roomId === (await createPromise).room_id) {
resolve();
cleanUp();
}
};
createPromise.catch((e) => {
reject(e);
cleanUp();
});
const cleanUp = () => {
client.off(ClientEvent.Room, onRoom);
};
client.on(ClientEvent.Room, onRoom);
});
const result = await createPromise;
console.log(`Creating ${ptt ? "PTT" : "video"} group call room`);
await client.createGroupCall(
result.room_id,
ptt ? GroupCallType.Voice : GroupCallType.Video,
ptt,
GroupCallIntent.Room
);
return [fullAliasFromRoomName(name, client), result.room_id]; return [fullAliasFromRoomName(name, client), result.room_id];
} }

View file

@ -87,7 +87,8 @@ export const useLoadGroupCall = (
// The room doesn't exist, but we can create it // The room doesn't exist, but we can create it
const [, roomId] = await createRoom( const [, roomId] = await createRoom(
client, client,
roomNameFromRoomId(roomIdOrAlias) roomNameFromRoomId(roomIdOrAlias),
createPtt
); );
// likewise, wait for the room // likewise, wait for the room
return await waitForRoom(roomId); return await waitForRoom(roomId);