Add avatar when muted in lobby

This commit is contained in:
Robert Long 2022-01-21 11:55:10 -08:00
parent 6da369f3fe
commit d1368f4622
2 changed files with 34 additions and 2 deletions

View file

@ -9,6 +9,9 @@ import { getRoomUrl } from "../matrix-utils";
import { OverflowMenu } from "./OverflowMenu"; import { OverflowMenu } from "./OverflowMenu";
import { UserMenuContainer } from "../UserMenuContainer"; import { UserMenuContainer } from "../UserMenuContainer";
import { Body, Link } from "../typography/Typography"; import { Body, Link } from "../typography/Typography";
import { Avatar } from "../Avatar";
import { getAvatarUrl } from "../matrix-utils";
import { useProfile } from "../profile/useProfile";
export function LobbyView({ export function LobbyView({
client, client,
@ -27,6 +30,8 @@ export function LobbyView({
}) { }) {
const { stream } = useCallFeed(localCallFeed); const { stream } = useCallFeed(localCallFeed);
const videoRef = useMediaStream(stream, true); const videoRef = useMediaStream(stream, true);
const { displayName, avatarUrl } = useProfile(client);
const avatarSize = 96;
useEffect(() => { useEffect(() => {
onInitLocalCallFeed(); onInitLocalCallFeed();
@ -58,6 +63,20 @@ export function LobbyView({
)} )}
{state === GroupCallState.LocalCallFeedInitialized && ( {state === GroupCallState.LocalCallFeedInitialized && (
<> <>
{localVideoMuted && (
<div className={styles.avatarContainer}>
<Avatar
style={{
width: avatarSize,
height: avatarSize,
borderRadius: avatarSize,
fontSize: Math.round(avatarSize / 2),
}}
src={avatarUrl && getAvatarUrl(client, avatarUrl, 96)}
fallback={displayName.slice(0, 1).toUpperCase()}
/>
</div>
)}
<Button <Button
className={styles.joinCallButton} className={styles.joinCallButton}
disabled={state !== GroupCallState.LocalCallFeedInitialized} disabled={state !== GroupCallState.LocalCallFeedInitialized}

View file

@ -57,11 +57,24 @@ limitations under the License.
} }
.preview video { .preview video {
width: 100%; width: calc(100% + 1px);
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
background-color: black; background-color: black;
transform: scaleX(-1); /* transform scale doesn't perfectly match width, so make -1.01 border issues */
transform: scaleX(-1.01);
}
.avatarContainer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 66px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--bgColor3);
} }
.webcamPermissions { .webcamPermissions {