Add basic styling
This commit is contained in:
Robert Long
parent
c4230b432e
commit
b038e12750
4 changed files with 199 additions and 75 deletions
23
src/App.css
23
src/App.css
|
|
@ -1,23 +0,0 @@
|
|||
/*
|
||||
Copyright 2021 New Vector Ltd
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: calc(10px + 2vmin);
|
||||
}
|
||||
114
src/App.jsx
114
src/App.jsx
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import "./App.css";
|
||||
import styles from "./App.module.css";
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
|
|
@ -36,7 +36,7 @@ export default function App() {
|
|||
|
||||
return (
|
||||
<Router>
|
||||
<div className="App">
|
||||
<div className={styles.app}>
|
||||
{error && <p>{error.message}</p>}
|
||||
{loading ? (
|
||||
<p>Loading...</p>
|
||||
|
|
@ -47,8 +47,11 @@ export default function App() {
|
|||
<JoinOrCreateRoom client={client} />
|
||||
) : (
|
||||
<>
|
||||
<Register onRegister={register} />
|
||||
<Login onLogin={login} />
|
||||
<div className={styles.page}>
|
||||
<h1>Matrix Video Chat</h1>
|
||||
<Register onRegister={register} />
|
||||
<Login onLogin={login} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Route>
|
||||
|
|
@ -232,11 +235,14 @@ function Register({ onRegister }) {
|
|||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<input type="text" ref={usernameRef} placeholder="Username"></input>
|
||||
<input type="password" ref={passwordRef} placeholder="Password"></input>
|
||||
<button type="submit">Register</button>
|
||||
</form>
|
||||
<>
|
||||
<h2>Register</h2>
|
||||
<form onSubmit={onSubmit}>
|
||||
<input type="text" ref={usernameRef} placeholder="Username"></input>
|
||||
<input type="password" ref={passwordRef} placeholder="Password"></input>
|
||||
<button type="submit">Register</button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -250,11 +256,14 @@ function Login({ onLogin }) {
|
|||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<input type="text" ref={usernameRef} placeholder="Username"></input>
|
||||
<input type="password" ref={passwordRef} placeholder="Password"></input>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
<>
|
||||
<h2>Login</h2>
|
||||
<form onSubmit={onSubmit}>
|
||||
<input type="text" ref={usernameRef} placeholder="Username"></input>
|
||||
<input type="password" ref={passwordRef} placeholder="Password"></input>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -315,9 +324,10 @@ function JoinOrCreateRoom({ client }) {
|
|||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.page}>
|
||||
<h1>Matrix Video Chat</h1>
|
||||
<form onSubmit={onCreateRoom}>
|
||||
<h3>Create New Room</h3>
|
||||
<h2>Create New Room</h2>
|
||||
<input
|
||||
id="roomName"
|
||||
name="roomName"
|
||||
|
|
@ -331,7 +341,7 @@ function JoinOrCreateRoom({ client }) {
|
|||
<button type="submit">Create Room</button>
|
||||
</form>
|
||||
<form onSubmit={onJoinRoom}>
|
||||
<h3>Join Existing Room</h3>
|
||||
<h2>Join Existing Room</h2>
|
||||
<input
|
||||
id="roomId"
|
||||
name="roomId"
|
||||
|
|
@ -344,7 +354,7 @@ function JoinOrCreateRoom({ client }) {
|
|||
{joinRoomError && <p>{joinRoomError.message}</p>}
|
||||
<button type="submit">Join Room</button>
|
||||
</form>
|
||||
<h3>Rooms:</h3>
|
||||
<h2>Rooms:</h2>
|
||||
<ul>
|
||||
{rooms.map((room) => (
|
||||
<li key={room.roomId}>
|
||||
|
|
@ -471,27 +481,40 @@ function Room({ client }) {
|
|||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>User ID:{client.getUserId()}</p>
|
||||
<p>Room ID:{roomId}</p>
|
||||
{loading && <p>Loading room...</p>}
|
||||
{error && <p>{error.message}</p>}
|
||||
<div className={styles.room}>
|
||||
{!loading && room && (
|
||||
<>
|
||||
<div className={styles.header}>
|
||||
<h3>{room.name}</h3>
|
||||
</div>
|
||||
)}
|
||||
{loading && (
|
||||
<div className={styles.centerMessage}>
|
||||
<p>Loading room...</p>
|
||||
</div>
|
||||
)}
|
||||
{error && <div className={styles.centerMessage}>{error.message}</div>}
|
||||
{!loading && room && !joined && (
|
||||
<div className={styles.joinRoom}>
|
||||
<h3>Members:</h3>
|
||||
<ul>
|
||||
{room.getMembers().map((member) => (
|
||||
<li key={member.userId}>{member.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
{joined ? (
|
||||
participants.map((participant) => (
|
||||
<Participant key={participant.userId} participant={participant} />
|
||||
))
|
||||
) : (
|
||||
<button onClick={joinCall}>Join Call</button>
|
||||
)}
|
||||
</>
|
||||
<button onClick={joinCall}>Join Call</button>
|
||||
</div>
|
||||
)}
|
||||
{!loading && room && joined && participants.length === 0 && (
|
||||
<div className={styles.centerMessage}>
|
||||
<p>Waiting for other participants...</p>
|
||||
</div>
|
||||
)}
|
||||
{!loading && room && joined && participants.length > 0 && (
|
||||
<div className={styles.roomContainer}>
|
||||
{participants.map((participant) => (
|
||||
<Participant key={participant.userId} participant={participant} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -512,26 +535,13 @@ function Participant({ participant }) {
|
|||
}, [participant.feed]);
|
||||
|
||||
return (
|
||||
<li>
|
||||
<h3>
|
||||
User ID:{participant.userId} {participant.local && "(Local)"}
|
||||
</h3>
|
||||
{!participant.local && (
|
||||
<>
|
||||
<h3>Calls:</h3>
|
||||
<ul>
|
||||
{participant.calls.map((call) => (
|
||||
<li key={call.callId}>
|
||||
<p>Call ID: {call.callId}</p>
|
||||
<p>Direction: {call.direction}</p>
|
||||
<p>State: {call.state}</p>
|
||||
<p>Hangup Reason: {call.hangupReason}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
<div className={styles.participant}>
|
||||
<video ref={videoRef}></video>
|
||||
</li>
|
||||
<div className={styles.participantLabel}>
|
||||
<p>
|
||||
{participant.userId} {participant.local && "(You)"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
111
src/App.module.css
Normal file
111
src/App.module.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
/*
|
||||
Copyright 2021 New Vector Ltd
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
.page {
|
||||
margin: 0 auto;
|
||||
max-width: 960px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page input {
|
||||
padding: 8px 4px;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #888;
|
||||
}
|
||||
|
||||
.page input, .page button {
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.room {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
|
||||
}
|
||||
|
||||
.joinRoom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.joinRoom ul {
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.joinRoom button {
|
||||
border: none;
|
||||
background: green;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.joinRoom button:hover, .joinRoom button:active {
|
||||
background: darkgreen;
|
||||
}
|
||||
|
||||
.centerMessage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.centerMessage p {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.roomContainer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.participant {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.participant video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.participantLabel {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 8px 16px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
body {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
|
|
@ -6,3 +8,27 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: #ccc;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover, button:active {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(102, 180, 233);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
color: rgb(76, 134, 173);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue