From 4b0bb13f1efaf7aad342801c32c6daa6db56b98d Mon Sep 17 00:00:00 2001 From: Robert Long Date: Tue, 27 Jul 2021 12:27:59 -0700 Subject: [PATCH] Finish splitting up components --- src/App.jsx | 229 +----------------------- src/ConferenceCallManager.js | 16 ++ src/ConferenceCallManagerHooks.js | 16 ++ src/JoinOrCreateRoom.jsx | 104 +++++++++++ src/LoginOrRegister.jsx | 68 +++++++ src/Room.jsx | 96 ++++++++++ src/{App.module.css => Room.module.css} | 19 -- src/index.css | 38 +++- 8 files changed, 343 insertions(+), 243 deletions(-) create mode 100644 src/JoinOrCreateRoom.jsx create mode 100644 src/LoginOrRegister.jsx create mode 100644 src/Room.jsx rename src/{App.module.css => Room.module.css} (87%) diff --git a/src/App.jsx b/src/App.jsx index b60a9e28..fdeebce5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -14,22 +14,17 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback, useEffect, useRef, useState } from "react"; -import styles from "./App.module.css"; +import React from "react"; import { BrowserRouter as Router, Switch, Route, - useHistory, - useParams, - Link, Redirect, } from "react-router-dom"; -import { - useConferenceCallManager, - useVideoRoom, - useRooms, -} from "./ConferenceCallManagerHooks"; +import { useConferenceCallManager } from "./ConferenceCallManagerHooks"; +import { JoinOrCreateRoom } from "./JoinOrCreateRoom"; +import { LoginOrRegister } from "./LoginOrRegister"; +import { Room } from "./Room"; export default function App() { const { protocol, host } = window.location; @@ -40,7 +35,7 @@ export default function App() { return ( -
+
{error &&

{error.message}

} {loading ? (

Loading...

@@ -66,215 +61,3 @@ export default function App() { ); } - -function LoginOrRegister({ onRegister, onLogin }) { - const registerUsernameRef = useRef(); - const registerPasswordRef = useRef(); - const loginUsernameRef = useRef(); - const loginPasswordRef = useRef(); - - const onSubmitRegisterForm = useCallback((e) => { - e.preventDefault(); - onRegister(usernameRef.current.value, passwordRef.current.value); - }); - - const onSubmitLoginForm = useCallback((e) => { - e.preventDefault(); - onLogin(usernameRef.current.value, passwordRef.current.value); - }); - - return ( -
-

Matrix Video Chat

-

Register

-
- - - -
-

Login

-
- - - -
-
- ); -} - -function JoinOrCreateRoom({ manager }) { - const history = useHistory(); - const roomNameRef = useRef(); - const roomIdRef = useRef(); - const [createRoomError, setCreateRoomError] = useState(); - const [joinRoomError, setJoinRoomError] = useState(); - const rooms = useRooms(manager); - - const onCreateRoom = useCallback( - (e) => { - e.preventDefault(); - setCreateRoomError(undefined); - - manager.client - .createRoom({ - visibility: "private", - preset: "public_chat", - name: roomNameRef.current.value, - }) - .then(({ room_id }) => { - history.push(`/room/${room_id}`); - }) - .catch(setCreateRoomError); - }, - [manager] - ); - - const onJoinRoom = useCallback( - (e) => { - e.preventDefault(); - setJoinRoomError(undefined); - - manager.client - .joinRoom(roomIdRef.current.value) - .then(({ roomId }) => { - history.push(`/room/${roomId}`); - }) - .catch(setJoinRoomError); - }, - [manager] - ); - - return ( -
-

Matrix Video Chat

-
-

Create New Room

- - {createRoomError &&

{createRoomError.message}

} - -
-
-

Join Existing Room

- - {joinRoomError &&

{joinRoomError.message}

} - -
-

Rooms:

-
    - {rooms.map((room) => ( -
  • - {room.name} -
    • - ))} -
-
- ); -} - -function Room({ manager }) { - const { roomId } = useParams(); - const { loading, joined, room, participants, error, joinCall } = useVideoRoom( - manager, - roomId - ); - - return ( -
- {!loading && room && ( -
-

{room.name}

-
-
{manager.client.getUserId()}
-
-
- )} - {loading && ( -
-

Loading room...

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

Members:

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

Waiting for other participants...

-
- )} - {!loading && room && joined && participants.length > 0 && ( -
- {participants.map((participant) => ( - - ))} -
- )} -
- ); -} - -function Participant({ participant }) { - const videoRef = useRef(); - - useEffect(() => { - if (participant.feed) { - if (participant.muted) { - videoRef.current.muted = true; - } - - videoRef.current.srcObject = participant.feed.stream; - videoRef.current.play(); - } - }, [participant.feed]); - - return ( -
- -
-

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

-
-
- ); -} diff --git a/src/ConferenceCallManager.js b/src/ConferenceCallManager.js index c0477318..06bd9f81 100644 --- a/src/ConferenceCallManager.js +++ b/src/ConferenceCallManager.js @@ -1,3 +1,19 @@ +/* +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. +*/ + import EventEmitter from "events"; const CONF_ROOM = "me.robertlong.conf"; diff --git a/src/ConferenceCallManagerHooks.js b/src/ConferenceCallManagerHooks.js index 570d9212..9bdd7dce 100644 --- a/src/ConferenceCallManagerHooks.js +++ b/src/ConferenceCallManagerHooks.js @@ -1,3 +1,19 @@ +/* +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. +*/ + import { useCallback, useEffect, useState } from "react"; import { ConferenceCallManager } from "./ConferenceCallManager"; diff --git a/src/JoinOrCreateRoom.jsx b/src/JoinOrCreateRoom.jsx new file mode 100644 index 00000000..2b0eff18 --- /dev/null +++ b/src/JoinOrCreateRoom.jsx @@ -0,0 +1,104 @@ +/* +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. +*/ + +import React, { useCallback, useRef, useState } from "react"; +import { useHistory, Link } from "react-router-dom"; +import { useRooms } from "./ConferenceCallManagerHooks"; + +export function JoinOrCreateRoom({ manager }) { + const history = useHistory(); + const roomNameRef = useRef(); + const roomIdRef = useRef(); + const [createRoomError, setCreateRoomError] = useState(); + const [joinRoomError, setJoinRoomError] = useState(); + const rooms = useRooms(manager); + + const onCreateRoom = useCallback( + (e) => { + e.preventDefault(); + setCreateRoomError(undefined); + + manager.client + .createRoom({ + visibility: "private", + preset: "public_chat", + name: roomNameRef.current.value, + }) + .then(({ room_id }) => { + history.push(`/room/${room_id}`); + }) + .catch(setCreateRoomError); + }, + [manager] + ); + + const onJoinRoom = useCallback( + (e) => { + e.preventDefault(); + setJoinRoomError(undefined); + + manager.client + .joinRoom(roomIdRef.current.value) + .then(({ roomId }) => { + history.push(`/room/${roomId}`); + }) + .catch(setJoinRoomError); + }, + [manager] + ); + + return ( +
+

Matrix Video Chat

+
+

Create New Room

+ + {createRoomError &&

{createRoomError.message}

} + +
+
+

Join Existing Room

+ + {joinRoomError &&

{joinRoomError.message}

} + +
+

Rooms:

+
    + {rooms.map((room) => ( +
  • + {room.name} +
    • + ))} +
+
+ ); +} diff --git a/src/LoginOrRegister.jsx b/src/LoginOrRegister.jsx new file mode 100644 index 00000000..029d0de3 --- /dev/null +++ b/src/LoginOrRegister.jsx @@ -0,0 +1,68 @@ +/* +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. +*/ + +import React, { useCallback, useRef } from "react"; + +export function LoginOrRegister({ onRegister, onLogin }) { + const registerUsernameRef = useRef(); + const registerPasswordRef = useRef(); + const loginUsernameRef = useRef(); + const loginPasswordRef = useRef(); + + const onSubmitRegisterForm = useCallback((e) => { + e.preventDefault(); + onRegister(usernameRef.current.value, passwordRef.current.value); + }); + + const onSubmitLoginForm = useCallback((e) => { + e.preventDefault(); + onLogin(usernameRef.current.value, passwordRef.current.value); + }); + + return ( +
+

Matrix Video Chat

+

Register

+
+ + + +
+

Login

+
+ + + +
+
+ ); +} diff --git a/src/Room.jsx b/src/Room.jsx new file mode 100644 index 00000000..1a26a228 --- /dev/null +++ b/src/Room.jsx @@ -0,0 +1,96 @@ +/* +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. +*/ + +import React, { useEffect, useRef } from "react"; +import styles from "./Room.module.css"; +import { useParams } from "react-router-dom"; +import { useVideoRoom } from "./ConferenceCallManagerHooks"; + +export function Room({ manager }) { + const { roomId } = useParams(); + const { loading, joined, room, participants, error, joinCall } = useVideoRoom( + manager, + roomId + ); + + return ( +
+ {!loading && room && ( +
+

{room.name}

+
+
{manager.client.getUserId()}
+
+
+ )} + {loading && ( +
+

Loading room...

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

Members:

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

Waiting for other participants...

+
+ )} + {!loading && room && joined && participants.length > 0 && ( +
+ {participants.map((participant) => ( + + ))} +
+ )} +
+ ); +} + +function Participant({ participant }) { + const videoRef = useRef(); + + useEffect(() => { + if (participant.feed) { + if (participant.muted) { + videoRef.current.muted = true; + } + + videoRef.current.srcObject = participant.feed.stream; + videoRef.current.play(); + } + }, [participant.feed]); + + return ( +
+ +
+

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

+
+
+ ); +} diff --git a/src/App.module.css b/src/Room.module.css similarity index 87% rename from src/App.module.css rename to src/Room.module.css index ed023ab9..32812192 100644 --- a/src/App.module.css +++ b/src/Room.module.css @@ -14,25 +14,6 @@ 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; - padding: 0 20px; -} - -.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; diff --git a/src/index.css b/src/index.css index 218e4efe..d72554fe 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,19 @@ +/* +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. +*/ + body { background-color: #333; color: #fff; @@ -31,4 +47,24 @@ a { a:hover, a:active { color: rgb(76, 134, 173); -} \ No newline at end of file +} + +.page { + margin: 0 auto; + max-width: 960px; + display: flex; + flex-direction: column; + padding: 0 20px; +} + +.page input { + padding: 8px 4px; + font-size: 16px; + border-radius: 4px; + border: 1px solid #888; +} + +.page input, .page button { + display: block; + margin-top: 16px; +}