From 8a650c7323a4127e55dac760e780b78027900705 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Fri, 1 Oct 2021 11:24:49 -0700 Subject: [PATCH 1/8] Add screenshare button styling --- src/Room.jsx | 6 +++++- src/RoomButton.jsx | 13 +++++++++++++ src/RoomButton.module.css | 21 +++++++++++++-------- src/icons/Screenshare.svg | 3 +++ 4 files changed, 34 insertions(+), 9 deletions(-) create mode 100644 src/icons/Screenshare.svg diff --git a/src/Room.jsx b/src/Room.jsx index fa5b081..4b26717 100644 --- a/src/Room.jsx +++ b/src/Room.jsx @@ -22,6 +22,7 @@ import { MicButton, VideoButton, LayoutToggleButton, + ScreenshareButton, } from "./RoomButton"; import { Header, LeftNav, RightNav, CenterNav } from "./Header"; import { Button, ErrorMessage } from "./Input"; @@ -301,7 +302,10 @@ function InRoomView({ enabled={localVideoMuted} onClick={toggleLocalVideoMuted} /> - + diff --git a/src/RoomButton.jsx b/src/RoomButton.jsx index b38d13a..3f49d41 100644 --- a/src/RoomButton.jsx +++ b/src/RoomButton.jsx @@ -9,6 +9,7 @@ import { ReactComponent as HangupIcon } from "./icons/Hangup.svg"; import { ReactComponent as SettingsIcon } from "./icons/Settings.svg"; import { ReactComponent as GridIcon } from "./icons/Grid.svg"; import { ReactComponent as SpeakerIcon } from "./icons/Speaker.svg"; +import { ReactComponent as ScreenshareIcon } from "./icons/Screenshare.svg"; export function RoomButton({ on, className, children, ...rest }) { return ( @@ -37,6 +38,18 @@ export function VideoButton({ enabled, ...rest }) { ); } +export function ScreenshareButton({ enabled, className, ...rest }) { + return ( + + + + ); +} + export function HangupButton({ className, ...rest }) { return ( + + From a53fc21640e2768bc4bc8bf65cbcab3c1618015d Mon Sep 17 00:00:00 2001 From: Robert Long Date: Fri, 1 Oct 2021 11:25:02 -0700 Subject: [PATCH 2/8] Get rid of old dependencies --- package.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/package.json b/package.json index 79914d8..a96bc72 100644 --- a/package.json +++ b/package.json @@ -6,19 +6,15 @@ "serve": "vite preview" }, "dependencies": { - "@react-spring/web": "^9.2.4", "classnames": "^2.3.1", "color-hash": "^2.0.1", "events": "^3.3.0", - "lodash-move": "^1.1.1", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#robertlong/group-call", "matrix-react-sdk": "github:matrix-org/matrix-react-sdk#robertlong/group-call", "re-resizable": "^6.9.0", "react": "^17.0.0", "react-dom": "^17.0.0", - "react-router-dom": "^5.2.0", - "react-use-gesture": "^9.1.3", - "react-use-measure": "^2.0.4" + "react-router-dom": "^5.2.0" }, "devDependencies": { "sass": "^1.42.1", From 16e12fab8aa2a6b690a81c756383cd142137aad9 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Fri, 1 Oct 2021 11:51:44 -0700 Subject: [PATCH 3/8] Update README --- README.md | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ef665b5..de51102 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,38 @@ Testbed for full mesh video chat. ## Getting Started -You must first run a local Synapse server on port 8008 +`matrix-video-chat` is built against the `robertlong/group-call` branch of both [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/1902) and [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/pull/6848). Because of how these packages are configured and Vite's requirements, you will need to clone them locally and use `yarn link` to stich things together. + +First clone, install, and link `matrix-js-sdk` ``` +git clone https://github.com/matrix-org/matrix-js-sdk.git +cd matrix-js-sdk +git checkout robertlong/group-call +yarn +yarn link +``` + +Then clone, install, link `matrix-js-sdk` into `matrix-react-sdk`, and link `matrix-react-sdk` + +``` +git clone https://github.com/matrix-org/matrix-react-sdk.git +cd matrix-react-sdk +git checkout robertlong/group-call +yarn +yarn link matrix-js-sdk +yarn link +``` + +Next you'll also need [Synapse](https://matrix-org.github.io/synapse/latest/setup/installation.html) installed locally and running on port 8008. + +Finally we can set up this project. + +``` +git clone https://github.com/vector-im/matrix-video-chat.git cd matrix-video-chat yarn +yarn link matrix-js-sdk +yarn link matrix-react-sdk yarn dev ``` From 44446b8d4758572a50db355e031302e1e9116708 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Fri, 1 Oct 2021 16:17:47 -0700 Subject: [PATCH 4/8] List group rooms and public group rooms properly --- .env | 8 ++++++++ README.md | 4 ++++ src/ConferenceCallManagerHooks.js | 31 ++++++++++++++++++++++++----- src/Home.jsx | 33 +++++++++++++++++++++++++++++-- 4 files changed, 69 insertions(+), 7 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 0000000..55ce932 --- /dev/null +++ b/.env @@ -0,0 +1,8 @@ +#### +# App Config +# Environment files are documented here: +# https://vitejs.dev/guide/env-and-mode.html#env-files +#### + +# The room id for the space to use for listing public group call rooms +# VITE_PUBLIC_SPACE_ROOM_ID=!hjdfshkdskjdsk:myhomeserver.com \ No newline at end of file diff --git a/README.md b/README.md index de51102..a9eb707 100644 --- a/README.md +++ b/README.md @@ -39,3 +39,7 @@ yarn link matrix-js-sdk yarn link matrix-react-sdk yarn dev ``` + +## Config + +Configuration options are documented in the `.env` file. diff --git a/src/ConferenceCallManagerHooks.js b/src/ConferenceCallManagerHooks.js index 103ed47..f2e4f28 100644 --- a/src/ConferenceCallManagerHooks.js +++ b/src/ConferenceCallManagerHooks.js @@ -277,24 +277,45 @@ function sortRooms(client, rooms) { }); } -export function useRooms(client) { +export function useGroupCallRooms(client) { const [rooms, setRooms] = useState([]); useEffect(() => { function updateRooms() { - const visibleRooms = client.getVisibleRooms(); - const sortedRooms = sortRooms(client, visibleRooms); + const groupCalls = client.groupCallEventHandler.groupCalls.values(); + const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room); + const sortedRooms = sortRooms(client, rooms); setRooms(sortedRooms); } updateRooms(); - client.on("Room", updateRooms); + client.on("GroupCall.incoming", updateRooms); return () => { - client.removeListener("Room", updateRooms); + client.removeListener("GroupCall.incoming", updateRooms); }; }, []); return rooms; } + +export function usePublicRooms(client, publicSpaceRoomId, maxRooms = 50) { + const [rooms, setRooms] = useState([]); + + useEffect(() => { + if (publicSpaceRoomId) { + client.getRoomHierarchy(publicSpaceRoomId, maxRooms).then(({ rooms }) => { + const filteredRooms = rooms.filter( + (room) => room.room_type !== "m.space" + ); + + setRooms(filteredRooms); + }); + } else { + setRooms([]); + } + }, [publicSpaceRoomId]); + + return rooms; +} diff --git a/src/Home.jsx b/src/Home.jsx index 42faaa6..be506c0 100644 --- a/src/Home.jsx +++ b/src/Home.jsx @@ -16,7 +16,10 @@ limitations under the License. import React, { useCallback, useRef, useState } from "react"; import { useHistory, Link } from "react-router-dom"; -import { useRooms } from "./ConferenceCallManagerHooks"; +import { + useGroupCallRooms, + usePublicRooms, +} from "./ConferenceCallManagerHooks"; import { Header, LeftNav, UserNav } from "./Header"; import ColorHash from "color-hash"; import styles from "./Home.module.css"; @@ -34,7 +37,11 @@ export function Home({ client, onLogout }) { const roomNameRef = useRef(); const guestAccessRef = useRef(); const [createRoomError, setCreateRoomError] = useState(); - const rooms = useRooms(client); + const rooms = useGroupCallRooms(client); + const publicRooms = usePublicRooms( + client, + import.meta.env.VITE_PUBLIC_SPACE_ROOM_ID + ); const onCreateRoom = useCallback( (e) => { @@ -139,6 +146,28 @@ export function Home({ client, onLogout }) { + {publicRooms.length > 0 && ( +
+

Public Rooms

+
+ {publicRooms.map((room) => ( + +
+ {room.name.slice(0, 1)} +
+
{room.name}
+ + ))} +
+
+ )}

Recent Rooms

From 8da7031b9e12f84d87c6f04c5f206086f75592c2 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Mon, 4 Oct 2021 15:25:09 -0700 Subject: [PATCH 5/8] Remove console.log --- src/Room.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Room.jsx b/src/Room.jsx index 4b26717..ad6ded0 100644 --- a/src/Room.jsx +++ b/src/Room.jsx @@ -269,8 +269,6 @@ function InRoomView({ }); } - console.log("items changed", participants); - return participants; }, [userMediaFeeds, activeSpeaker, screenshareFeeds]); From 6f2870340a6dfe8f37921e98756d432490c75e7e Mon Sep 17 00:00:00 2001 From: Robert Long Date: Mon, 4 Oct 2021 15:37:23 -0700 Subject: [PATCH 6/8] Add facepile to homepage --- src/ConferenceCallManagerHooks.js | 13 ++++++++++++- src/Facepile.jsx | 24 ++++++++++++++++++++++++ src/Facepile.module.css | 25 +++++++++++++++++++++++++ src/Home.jsx | 4 +++- 4 files changed, 64 insertions(+), 2 deletions(-) create mode 100644 src/Facepile.jsx create mode 100644 src/Facepile.module.css diff --git a/src/ConferenceCallManagerHooks.js b/src/ConferenceCallManagerHooks.js index f2e4f28..db93e51 100644 --- a/src/ConferenceCallManagerHooks.js +++ b/src/ConferenceCallManagerHooks.js @@ -285,15 +285,26 @@ export function useGroupCallRooms(client) { const groupCalls = client.groupCallEventHandler.groupCalls.values(); const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room); const sortedRooms = sortRooms(client, rooms); - setRooms(sortedRooms); + const items = sortedRooms.map((room) => { + const groupCall = client.getGroupCallForRoom(room.roomId); + + return { + room, + groupCall, + participants: [...groupCall.participants], + }; + }); + setRooms(items); } updateRooms(); client.on("GroupCall.incoming", updateRooms); + client.on("GroupCall.participants", updateRooms); return () => { client.removeListener("GroupCall.incoming", updateRooms); + client.removeListener("GroupCall.participants", updateRooms); }; }, []); diff --git a/src/Facepile.jsx b/src/Facepile.jsx new file mode 100644 index 0000000..f2c7d76 --- /dev/null +++ b/src/Facepile.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import styles from "./Facepile.module.css"; +import ColorHash from "color-hash"; + +const colorHash = new ColorHash({ lightness: 0.3 }); + +export function Facepile({ participants }) { + console.log(participants); + return ( +
member.name).join(", ")} + > + {participants.map((member) => ( +
+ {member.name.slice(0, 1).toUpperCase()} +
+ ))} +
+ ); +} diff --git a/src/Facepile.module.css b/src/Facepile.module.css new file mode 100644 index 0000000..94b29a4 --- /dev/null +++ b/src/Facepile.module.css @@ -0,0 +1,25 @@ +.facepile { + margin: 0 16px; +} + +.facepile .avatar { + position: relative; + width: 20px; + height: 20px; + border-radius: 20px; +} + +.facepile .avatar > * { + position: absolute; + left: 0; + color: #fff; + text-align: center; + pointer-events: none; + font-weight: 600; +} + +.facepile .avatar span { + font-size: 14px; + width: 20px; + line-height: 20px; +} diff --git a/src/Home.jsx b/src/Home.jsx index be506c0..63c4574 100644 --- a/src/Home.jsx +++ b/src/Home.jsx @@ -29,6 +29,7 @@ import { GroupCallIntent, GroupCallType, } from "matrix-js-sdk/src/browser-index"; +import { Facepile } from "./Facepile"; const colorHash = new ColorHash({ lightness: 0.3 }); @@ -171,7 +172,7 @@ export function Home({ client, onLogout }) {

Recent Rooms

- {rooms.map((room) => ( + {rooms.map(({ room, participants }) => ( {room.name.slice(0, 1)}
{room.name}
+ ))}
From 67a3e768026042a326e8c9ddf5561809dacd6dcc Mon Sep 17 00:00:00 2001 From: Robert Long Date: Mon, 4 Oct 2021 15:44:28 -0700 Subject: [PATCH 7/8] Remove console log --- src/Facepile.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Facepile.jsx b/src/Facepile.jsx index f2c7d76..77d158f 100644 --- a/src/Facepile.jsx +++ b/src/Facepile.jsx @@ -5,7 +5,6 @@ import ColorHash from "color-hash"; const colorHash = new ColorHash({ lightness: 0.3 }); export function Facepile({ participants }) { - console.log(participants); return (
Date: Mon, 4 Oct 2021 15:45:20 -0700 Subject: [PATCH 8/8] Update matrix-sdks --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index ffb0121..accbdf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1602,7 +1602,7 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3 "matrix-js-sdk@github:matrix-org/matrix-js-sdk#robertlong/group-call": version "13.0.0" - resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/326aec9f9ea7b29c6c07bbcc84dc5288300abc58" + resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/ba57736bf6d6d99342c64cca5eb6156ee7b9e178" dependencies: "@babel/runtime" "^7.12.5" another-json "^0.2.0" @@ -1617,7 +1617,7 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3 "matrix-react-sdk@github:matrix-org/matrix-react-sdk#robertlong/group-call": version "3.31.0" - resolved "https://codeload.github.com/matrix-org/matrix-react-sdk/tar.gz/7775ac9956bc8fba437fbb15f5cf56b2ee554903" + resolved "https://codeload.github.com/matrix-org/matrix-react-sdk/tar.gz/fc43d1d2f742f92a1ffd113ec557565d74e98167" dependencies: "@babel/runtime" "^7.12.5" "@react-spring/web" "^9.2.4"