xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add room aliases to room creation

Browse source
This commit is contained in:
Robert Long 2021-11-17 14:24:52 -08:00
parent 123a68e3b0
commit 56ba87f25d
3 changed files with 100 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.jsx
View file

@ -65,7 +65,7 @@ export default function App() {
<SentryRoute exact path="/register">
<RegisterPage onRegister={register} />
</SentryRoute>
<SentryRoute path="/room/:roomId">
<SentryRoute path="/room/:roomId?">
{authenticated ? (
<Room client={client} />
) : (

75
src/Home.jsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useCallback, useRef, useState } from "react";
import React, { useCallback, useState } from "react";
import { useHistory, Link } from "react-router-dom";
import {
useGroupCallRooms,
@ -33,11 +33,21 @@ import { Facepile } from "./Facepile";
const colorHash = new ColorHash({ lightness: 0.3 });
function roomAliasFromRoomName(roomName) {
return roomName
.trim()
.replace(/\s/g, "-")
.replace(/[^\w-]/g, "")
.toLowerCase();
}
export function Home({ client, onLogout }) {
const history = useHistory();
const roomNameRef = useRef();
const guestAccessRef = useRef();
const [roomName, setRoomName] = useState("");
const [roomAlias, setRoomAlias] = useState("");
const [guestAccess, setGuestAccess] = useState(false);
const [createRoomError, setCreateRoomError] = useState();
const [showAdvanced, setShowAdvanced] = useState();
const rooms = useGroupCallRooms(client);
const publicRooms = usePublicRooms(
client,
@ -49,11 +59,12 @@ export function Home({ client, onLogout }) {
e.preventDefault();
setCreateRoomError(undefined);
async function createRoom(name, guestAccess) {
const { room_id } = await client.createRoom({
async function createRoom(name, roomAlias, guestAccess) {
const { room_id, room_alias } = await client.createRoom({
visibility: "private",
preset: "public_chat",
name,
room_alias_name: roomAlias,
power_level_content_override: {
invite: 100,
kick: 100,
@ -92,13 +103,18 @@ export function Home({ client, onLogout }) {
GroupCallIntent.Prompt
);
history.push(`/room/${room_id}`);
history.push(`/room/${room_alias || room_id}`);
}
createRoom(
roomNameRef.current.value,
guestAccessRef.current.checked
).catch(setCreateRoomError);
const data = new FormData(e.target);
const roomName = data.get("roomName");
const roomAlias = data.get("roomAlias");
const guestAccess = data.get("guestAccess");
createRoom(roomName, roomAlias, guestAccess).catch((error) => {
setCreateRoomError(error);
setShowAdvanced(true);
});
},
[client]
);
@ -124,18 +140,35 @@ export function Home({ client, onLogout }) {
required
autoComplete="off"
placeholder="Room Name"
ref={roomNameRef}
/>
</FieldRow>
<FieldRow>
<InputField
id="guestAccess"
name="guestAccess"
label="Allow Guest Access"
type="checkbox"
ref={guestAccessRef}
value={roomName}
onChange={(e) => setRoomName(e.target.value)}
/>
</FieldRow>
<details open={showAdvanced}>
<summary>Advanced</summary>
<FieldRow>
<InputField
id="roomAlias"
name="roomAlias"
label="Room Alias"
type="text"
autoComplete="off"
placeholder="Room Alias"
value={roomAlias || roomAliasFromRoomName(roomName)}
onChange={(e) => setRoomAlias(e.target.value)}
/>
</FieldRow>
<FieldRow>
<InputField
id="guestAccess"
name="guestAccess"
label="Allow Guest Access"
type="checkbox"
checked={guestAccess}
onChange={(e) => setGuestAccess(e.target.checked)}
/>
</FieldRow>
</details>
{createRoomError && (
<FieldRow>
<ErrorMessage>{createRoomError.message}</ErrorMessage>
@ -175,7 +208,7 @@ export function Home({ client, onLogout }) {
<Link
className={styles.roomListItem}
key={room.roomId}
to={`/room/${room.roomId}`}
to={`/room/${room.getCanonicalAlias() || room.roomId}`}
>
<div
className={styles.roomAvatar}

74
src/index.css
View file

@ -21,101 +21,104 @@ limitations under the License.
(to avoid having to maintain a fork of Inter). */
:root {
--inter-unicode-range: U+0000-20e2,U+20e4-23ce,U+23d0-24c1,U+24c3-259f,U+25c2-2664,U+2666-2763,U+2765-2b05,U+2b07-2b1b,U+2b1d-10FFFF;
--inter-unicode-range: U+0000-20e2, U+20e4-23ce, U+23d0-24c1, U+24c3-259f,
U+25c2-2664, U+2666-2763, U+2765-2b05, U+2b07-2b1b, U+2b1d-10FFFF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-Regular.woff2") format("woff2"),
url("/fonts/Inter/Inter-Regular.woff") format("woff");
url("/fonts/Inter/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-family: "Inter";
font-style: italic;
font-weight: 400;
font-display: swap;
unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-Italic.woff2") format("woff2"),
url("/fonts/Inter/Inter-Italic.woff") format("woff");
url("/fonts/Inter/Inter-Italic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-Medium.woff2") format("woff2"),
url("/fonts/Inter/Inter-Medium.woff") format("woff");
url("/fonts/Inter/Inter-Medium.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-family: "Inter";
font-style: italic;
font-weight: 500;
font-display: swap;
unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"),
url("/fonts/Inter/Inter-MediumItalic.woff") format("woff");
url("/fonts/Inter/Inter-MediumItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-SemiBold.woff2") format("woff2"),
url("/fonts/Inter/Inter-SemiBold.woff") format("woff");
url("/fonts/Inter/Inter-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-family: "Inter";
font-style: italic;
font-weight: 600;
font-display: swap;
unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"),
url("/fonts/Inter/Inter-SemiBoldItalic.woff") format("woff");
url("/fonts/Inter/Inter-SemiBoldItalic.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-Bold.woff2") format("woff2"),
url("/fonts/Inter/Inter-Bold.woff") format("woff");
url("/fonts/Inter/Inter-Bold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-family: "Inter";
font-style: italic;
font-weight: 700;
font-display: swap;
unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"),
url("/fonts/Inter/Inter-BoldItalic.woff") format("woff");
url("/fonts/Inter/Inter-BoldItalic.woff") format("woff");
}
body {
background-color: #15191e;
color: #fff;
margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html, body, #root {
html,
body,
#root {
height: 100%;
}
@ -129,6 +132,19 @@ a {
font-weight: bold;
}
a:hover, a:active {
a:hover,
a:active {
opacity: 0.8;
}
summary {
font-size: 14px;
}
details > :not(summary) {
margin-left: 16px;
}
details[open] > summary {
margin-bottom: 16px;
}