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"> <SentryRoute exact path="/register">
<RegisterPage onRegister={register} /> <RegisterPage onRegister={register} />
</SentryRoute> </SentryRoute>
<SentryRoute path="/room/:roomId"> <SentryRoute path="/room/:roomId?">
{authenticated ? ( {authenticated ? (
<Room client={client} /> <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. 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 { useHistory, Link } from "react-router-dom";
import { import {
useGroupCallRooms, useGroupCallRooms,
@ -33,11 +33,21 @@ import { Facepile } from "./Facepile";
const colorHash = new ColorHash({ lightness: 0.3 }); 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 }) { export function Home({ client, onLogout }) {
const history = useHistory(); const history = useHistory();
const roomNameRef = useRef(); const [roomName, setRoomName] = useState("");
const guestAccessRef = useRef(); const [roomAlias, setRoomAlias] = useState("");
const [guestAccess, setGuestAccess] = useState(false);
const [createRoomError, setCreateRoomError] = useState(); const [createRoomError, setCreateRoomError] = useState();
const [showAdvanced, setShowAdvanced] = useState();
const rooms = useGroupCallRooms(client); const rooms = useGroupCallRooms(client);
const publicRooms = usePublicRooms( const publicRooms = usePublicRooms(
client, client,
@ -49,11 +59,12 @@ export function Home({ client, onLogout }) {
e.preventDefault(); e.preventDefault();
setCreateRoomError(undefined); setCreateRoomError(undefined);
async function createRoom(name, guestAccess) { async function createRoom(name, roomAlias, guestAccess) {
const { room_id } = await client.createRoom({ const { room_id, room_alias } = await client.createRoom({
visibility: "private", visibility: "private",
preset: "public_chat", preset: "public_chat",
name, name,
room_alias_name: roomAlias,
power_level_content_override: { power_level_content_override: {
invite: 100, invite: 100,
kick: 100, kick: 100,
@ -92,13 +103,18 @@ export function Home({ client, onLogout }) {
GroupCallIntent.Prompt GroupCallIntent.Prompt
); );
history.push(`/room/${room_id}`); history.push(`/room/${room_alias || room_id}`);
} }
createRoom( const data = new FormData(e.target);
roomNameRef.current.value, const roomName = data.get("roomName");
guestAccessRef.current.checked const roomAlias = data.get("roomAlias");
).catch(setCreateRoomError); const guestAccess = data.get("guestAccess");
createRoom(roomName, roomAlias, guestAccess).catch((error) => {
setCreateRoomError(error);
setShowAdvanced(true);
});
}, },
[client] [client]
); );
@ -124,18 +140,35 @@ export function Home({ client, onLogout }) {
required required
autoComplete="off" autoComplete="off"
placeholder="Room Name" placeholder="Room Name"
ref={roomNameRef} value={roomName}
/> onChange={(e) => setRoomName(e.target.value)}
</FieldRow>
<FieldRow>
<InputField
id="guestAccess"
name="guestAccess"
label="Allow Guest Access"
type="checkbox"
ref={guestAccessRef}
/> />
</FieldRow> </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 && ( {createRoomError && (
<FieldRow> <FieldRow>
<ErrorMessage>{createRoomError.message}</ErrorMessage> <ErrorMessage>{createRoomError.message}</ErrorMessage>
@ -175,7 +208,7 @@ export function Home({ client, onLogout }) {
<Link <Link
className={styles.roomListItem} className={styles.roomListItem}
key={room.roomId} key={room.roomId}
to={`/room/${room.roomId}`} to={`/room/${room.getCanonicalAlias() || room.roomId}`}
> >
<div <div
className={styles.roomAvatar} 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). */ (to avoid having to maintain a fork of Inter). */
:root { :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-face {
font-family: 'Inter'; font-family: "Inter";
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
unicode-range: var(--inter-unicode-range); unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-Regular.woff2") format("woff2"), 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-face {
font-family: 'Inter'; font-family: "Inter";
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
unicode-range: var(--inter-unicode-range); unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-Italic.woff2") format("woff2"), 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-face {
font-family: 'Inter'; font-family: "Inter";
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
unicode-range: var(--inter-unicode-range); unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-Medium.woff2") format("woff2"), 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-face {
font-family: 'Inter'; font-family: "Inter";
font-style: italic; font-style: italic;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
unicode-range: var(--inter-unicode-range); unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"), 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-face {
font-family: 'Inter'; font-family: "Inter";
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-display: swap; font-display: swap;
unicode-range: var(--inter-unicode-range); unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-SemiBold.woff2") format("woff2"), 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-face {
font-family: 'Inter'; font-family: "Inter";
font-style: italic; font-style: italic;
font-weight: 600; font-weight: 600;
font-display: swap; font-display: swap;
unicode-range: var(--inter-unicode-range); unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"), 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-face {
font-family: 'Inter'; font-family: "Inter";
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
unicode-range: var(--inter-unicode-range); unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-Bold.woff2") format("woff2"), 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-face {
font-family: 'Inter'; font-family: "Inter";
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
unicode-range: var(--inter-unicode-range); unicode-range: var(--inter-unicode-range);
src: url("/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"), 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 { body {
background-color: #15191e; background-color: #15191e;
color: #fff; color: #fff;
margin: 0; margin: 0;
font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
html, body, #root { html,
body,
#root {
height: 100%; height: 100%;
} }
@ -129,6 +132,19 @@ a {
font-weight: bold; font-weight: bold;
} }
a:hover, a:active { a:hover,
a:active {
opacity: 0.8; opacity: 0.8;
} }
summary {
font-size: 14px;
}
details > :not(summary) {
margin-left: 16px;
}
details[open] > summary {
margin-bottom: 16px;
}