Add basic styling

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);
-}

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} />
+                  <div className={styles.page}>
-                  <Login onLogin={login} />
+                    <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>
+      <h2>Register</h2>
-      <input type="password" ref={passwordRef} placeholder="Password"></input>
+      <form onSubmit={onSubmit}>
-      <button type="submit">Register</button>
+        <input type="text" ref={usernameRef} placeholder="Username"></input>
-    </form>
+        <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>
+      <h2>Login</h2>
-      <input type="password" ref={passwordRef} placeholder="Password"></input>
+      <form onSubmit={onSubmit}>
-      <button type="submit">Login</button>
+        <input type="text" ref={usernameRef} placeholder="Username"></input>
-    </form>
+        <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>
+    <div className={styles.room}>
-      <p>User ID:{client.getUserId()}</p>
-      <p>Room ID:{roomId}</p>
-      {loading && <p>Loading room...</p>}
-      {error && <p>{error.message}</p>}
       {!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 ? (
+          <button onClick={joinCall}>Join Call</button>
-            participants.map((participant) => (
+        </div>
-              <Participant key={participant.userId} participant={participant} />
+      )}
-            ))
+      {!loading && room && joined && participants.length === 0 && (
-          ) : (
+        <div className={styles.centerMessage}>
-            <button onClick={joinCall}>Join Call</button>
+          <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>
+    <div className={styles.participant}>
-      <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>
-        </>
-      )}
       <video ref={videoRef}></video>
-    </li>
+      <div className={styles.participantLabel}>
+        <p>
+          {participant.userId} {participant.local && "(You)"}
+        </p>
+      </div>
+    </div>
   );
 }

src/App.module.css

@@ -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);
+}

src/index.css

@@ -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);
+}