From b038e12750e8720184e170f26ba5ddfdacda2b79 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Mon, 26 Jul 2021 16:58:31 -0700 Subject: [PATCH] Add basic styling --- src/App.css | 23 --------- src/App.jsx | 114 ++++++++++++++++++++++++--------------------- src/App.module.css | 111 +++++++++++++++++++++++++++++++++++++++++++ src/index.css | 26 +++++++++++ 4 files changed, 199 insertions(+), 75 deletions(-) delete mode 100644 src/App.css create mode 100644 src/App.module.css diff --git a/src/App.css b/src/App.css deleted file mode 100644 index a3c85c4..0000000 --- a/src/App.css +++ /dev/null @@ -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); -} diff --git a/src/App.jsx b/src/App.jsx index 3678aab..fd4f984 100644 --- a/src/App.jsx +++ b/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 ( -
+
{error &&

{error.message}

} {loading ? (

Loading...

@@ -47,8 +47,11 @@ export default function App() { ) : ( <> - - +
+

Matrix Video Chat

+ + +
)} @@ -232,11 +235,14 @@ function Register({ onRegister }) { }); return ( -
- - - -
+ <> +

Register

+
+ + + +
+ ); } @@ -250,11 +256,14 @@ function Login({ onLogin }) { }); return ( -
- - - -
+ <> +

Login

+
+ + + +
+ ); } @@ -315,9 +324,10 @@ function JoinOrCreateRoom({ client }) { ); return ( -
+
+

Matrix Video Chat

-

Create New Room

+

Create New Room

Create Room
-

Join Existing Room

+

Join Existing Room

{joinRoomError.message}

}
-

Rooms:

+

Rooms:

    {rooms.map((room) => (
  • @@ -471,27 +481,40 @@ function Room({ client }) { ); return ( -
    -

    User ID:{client.getUserId()}

    -

    Room ID:{roomId}

    - {loading &&

    Loading room...

    } - {error &&

    {error.message}

    } +
    {!loading && room && ( - <> +
    +

    {room.name}

    +
    + )} + {loading && ( +
    +

    Loading room...

    +
    + )} + {error &&
    {error.message}
    } + {!loading && room && !joined && ( +

    Members:

      {room.getMembers().map((member) => (
    • {member.name}
      • ))}
    - {joined ? ( - participants.map((participant) => ( - - )) - ) : ( - - )} - + +
    + )} + {!loading && room && joined && participants.length === 0 && ( +
    +

    Waiting for other participants...

    +
    + )} + {!loading && room && joined && participants.length > 0 && ( +
    + {participants.map((participant) => ( + + ))} +
    )}
    ); @@ -512,26 +535,13 @@ function Participant({ participant }) { }, [participant.feed]); return ( -
  • -

    - User ID:{participant.userId} {participant.local && "(Local)"} -

    - {!participant.local && ( - <> -

    Calls:

    -
      - {participant.calls.map((call) => ( -
    • -

      Call ID: {call.callId}

      -

      Direction: {call.direction}

      -

      State: {call.state}

      -

      Hangup Reason: {call.hangupReason}

      -
      • - ))} -
    - - )} +
    -
    • +
    +

    + {participant.userId} {participant.local && "(You)"} +

    +
    +
); } diff --git a/src/App.module.css b/src/App.module.css new file mode 100644 index 0000000..4e70363 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 1532074..218e4ef 100644 --- a/src/index.css +++ b/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); +} \ No newline at end of file