From a74733f6bc2de54038cd08e393641553c2c29698 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Fri, 12 May 2023 14:32:16 -0400
Subject: [PATCH] Show audio mute status next to people's names
Previously we were showing a combination of audio and video status icons on people's name badges, which meant there was no way to tell whether someone who had their video off was muted or not. The designs call for only microphone icons to be shown here.
---
src/video-grid/VideoTile.module.css | 10 ++++++----
src/video-grid/VideoTile.tsx | 5 ++---
2 files changed, 8 insertions(+), 7 deletions(-)
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index a83d1f0..db2e50b 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -83,6 +83,12 @@ limitations under the License.
z-index: 1;
}
+.infoBubble > svg {
+ height: 16px;
+ width: 16px;
+ margin-right: 4px;
+}
+
.toolbar {
position: absolute;
top: 0;
@@ -126,10 +132,6 @@ limitations under the License.
bottom: 16px;
}
-.memberName > * {
- margin-right: 6px;
-}
-
.memberName > :last-child {
margin-right: 0px;
}
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index e3d26ad..005e10c 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -20,8 +20,8 @@ import classNames from "classnames";
import { useTranslation } from "react-i18next";
import styles from "./VideoTile.module.css";
+import { ReactComponent as MicIcon } from "../icons/Mic.svg";
import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
-import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
import { AudioButton, FullscreenButton } from "../button/Button";
import { ConnectionState } from "../room/useGroupCall";
@@ -178,9 +178,8 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
Mute state is currently sent over to-device messages, which
aren't quite real-time, so this is an important kludge to make
sure no one appears muted when they've clearly begun talking. */
- audioMuted && !videoMuted && !speaking && <MicMutedIcon />
+ speaking || !audioMuted ? <MicIcon /> : <MicMutedIcon />
}
- {videoMuted && <VideoMutedIcon />}
<span data-testid="videoTile_caption" title={caption}>
{caption}
</span>