141 lines
4.5 KiB
JavaScript
141 lines
4.5 KiB
JavaScript
/*
|
|
Copyright 2022 Matrix.org Foundation C.I.C.
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
import React, { useState, useCallback } from "react";
|
|
import { createRoom, roomAliasFromRoomName } from "../matrix-utils";
|
|
import { useGroupCallRooms } from "./useGroupCallRooms";
|
|
import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
|
|
import commonStyles from "./common.module.css";
|
|
import styles from "./RegisteredView.module.css";
|
|
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
|
|
import { Button } from "../button";
|
|
import { CallList } from "./CallList";
|
|
import { UserMenuContainer } from "../UserMenuContainer";
|
|
import { useModalTriggerState } from "../Modal";
|
|
import { JoinExistingCallModal } from "./JoinExistingCallModal";
|
|
import { useHistory } from "react-router-dom";
|
|
import { Title } from "../typography/Typography";
|
|
import { Form } from "../form/Form";
|
|
import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
|
|
|
|
export function RegisteredView({ client }) {
|
|
const [callType, setCallType] = useState(CallType.Video);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState();
|
|
const history = useHistory();
|
|
const onSubmit = useCallback(
|
|
(e) => {
|
|
e.preventDefault();
|
|
const data = new FormData(e.target);
|
|
const roomName = data.get("callName");
|
|
const ptt = callType === CallType.Radio;
|
|
|
|
async function submit() {
|
|
setError(undefined);
|
|
setLoading(true);
|
|
|
|
const roomIdOrAlias = await createRoom(client, roomName, ptt);
|
|
|
|
if (roomIdOrAlias) {
|
|
history.push(`/room/${roomIdOrAlias}`);
|
|
}
|
|
}
|
|
|
|
submit().catch((error) => {
|
|
if (error.errcode === "M_ROOM_IN_USE") {
|
|
setExistingRoomId(roomAliasFromRoomName(roomName));
|
|
setLoading(false);
|
|
setError(undefined);
|
|
modalState.open();
|
|
} else {
|
|
console.error(error);
|
|
setLoading(false);
|
|
setError(error);
|
|
reset();
|
|
}
|
|
});
|
|
},
|
|
[client, callType]
|
|
);
|
|
|
|
const recentRooms = useGroupCallRooms(client);
|
|
|
|
const { modalState, modalProps } = useModalTriggerState();
|
|
const [existingRoomId, setExistingRoomId] = useState();
|
|
const onJoinExistingRoom = useCallback(() => {
|
|
history.push(`/${existingRoomId}`);
|
|
}, [history, existingRoomId]);
|
|
|
|
const callNameLabel =
|
|
callType === CallType.Video ? "Video call name" : "Radio call name";
|
|
|
|
return (
|
|
<>
|
|
<Header>
|
|
<LeftNav>
|
|
<HeaderLogo />
|
|
</LeftNav>
|
|
<RightNav>
|
|
<UserMenuContainer />
|
|
</RightNav>
|
|
</Header>
|
|
<div className={commonStyles.container}>
|
|
<main className={commonStyles.main}>
|
|
<HeaderLogo className={commonStyles.logo} />
|
|
<CallTypeDropdown callType={callType} setCallType={setCallType} />
|
|
<Form className={styles.form} onSubmit={onSubmit}>
|
|
<FieldRow className={styles.fieldRow}>
|
|
<InputField
|
|
id="callName"
|
|
name="callName"
|
|
label={callNameLabel}
|
|
placeholder={callNameLabel}
|
|
type="text"
|
|
required
|
|
autoComplete="off"
|
|
/>
|
|
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
className={styles.button}
|
|
disabled={loading}
|
|
>
|
|
{loading ? "Loading..." : "Go"}
|
|
</Button>
|
|
</FieldRow>
|
|
{error && (
|
|
<FieldRow className={styles.fieldRow}>
|
|
<ErrorMessage>{error.message}</ErrorMessage>
|
|
</FieldRow>
|
|
)}
|
|
</Form>
|
|
{recentRooms.length > 0 && (
|
|
<>
|
|
<Title className={styles.recentCallsTitle}>
|
|
Your recent Calls
|
|
</Title>
|
|
<CallList rooms={recentRooms} client={client} disableFacepile />
|
|
</>
|
|
)}
|
|
</main>
|
|
</div>
|
|
{modalState.isOpen && (
|
|
<JoinExistingCallModal onJoin={onJoinExistingRoom} {...modalProps} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|