From c430ebb3a335312c18cfeb5fd91496f927ee3963 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Wed, 27 Apr 2022 15:18:55 -0700 Subject: [PATCH] Finish first pass at PTT lobby UI --- src/room/AudioPreview.jsx | 61 ++++++++++++++++++++ src/room/AudioPreview.module.css | 27 +++++++++ src/room/GroupCallView.jsx | 1 + src/room/LobbyView.jsx | 96 ++++++++++++-------------------- src/room/LobbyView.module.css | 66 ---------------------- src/room/VideoPreview.jsx | 80 ++++++++++++++++++++++++++ src/room/VideoPreview.module.css | 65 +++++++++++++++++++++ 7 files changed, 271 insertions(+), 125 deletions(-) create mode 100644 src/room/AudioPreview.jsx create mode 100644 src/room/AudioPreview.module.css create mode 100644 src/room/VideoPreview.jsx create mode 100644 src/room/VideoPreview.module.css diff --git a/src/room/AudioPreview.jsx b/src/room/AudioPreview.jsx new file mode 100644 index 0000000..7cfd612 --- /dev/null +++ b/src/room/AudioPreview.jsx @@ -0,0 +1,61 @@ +import React from "react"; +import styles from "./AudioPreview.module.css"; +import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall"; +import { SelectInput } from "../input/SelectInput"; +import { Item } from "@react-stately/collections"; +import { Body } from "../typography/Typography"; + +export function AudioPreview({ + state, + roomName, + audioInput, + audioInputs, + setAudioInput, + audioOutput, + audioOutputs, + setAudioOutput, +}) { + return ( + <> +

{`${roomName} - Radio Call`}

+
+ {state === GroupCallState.LocalCallFeedUninitialized && ( + + Microphone permissions needed to join the call. + + )} + {state === GroupCallState.InitializingLocalCallFeed && ( + + Accept microphone permissions to join the call. + + )} + {state === GroupCallState.LocalCallFeedInitialized && ( + <> + + {audioInputs.map(({ deviceId, label }) => ( + {label} + ))} + + {audioOutputs.length > 0 && ( + + {audioOutputs.map(({ deviceId, label }) => ( + {label} + ))} + + )} + + )} +
+ + ); +} diff --git a/src/room/AudioPreview.module.css b/src/room/AudioPreview.module.css new file mode 100644 index 0000000..f01c69b --- /dev/null +++ b/src/room/AudioPreview.module.css @@ -0,0 +1,27 @@ +.preview { + margin: 20px 0; + padding: 24px 20px; + border-radius: 8px; + width: calc(100% - 40px); + max-width: 414px; +} + +.inputField { + width: 100%; +} + +.inputField:last-child { + margin-bottom: 0; +} + +.microphonePermissions { + margin: 20px; + text-align: center; +} + +@media (min-width: 800px) { + .preview { + margin-top: 40px; + background-color: #21262C; + } +} diff --git a/src/room/GroupCallView.jsx b/src/room/GroupCallView.jsx index 3f21a3b..e4780a3 100644 --- a/src/room/GroupCallView.jsx +++ b/src/room/GroupCallView.jsx @@ -126,6 +126,7 @@ export function GroupCallView({ return ( { onInitLocalCallFeed(); @@ -64,53 +64,31 @@ export function LobbyView({
-
-
+ {groupCall.isPtt ? ( + + ) : ( + + )}