Merge pull request #1056 from robintown/mute-icon

Show audio mute status next to people's names

src/video-grid/VideoTile.module.css

@@ -89,6 +89,12 @@ limitations under the License.
   z-index: 1;
 }
 
+.infoBubble > svg {
+  height: 16px;
+  width: 16px;
+  margin-right: 4px;
+}
+
 .toolbar {
   position: absolute;
   top: 0;
@@ -132,10 +138,6 @@ limitations under the License.
   bottom: 16px;
 }
 
-.memberName > * {
-  margin-right: 6px;
-}
-
 .memberName > :last-child {
   margin-right: 0px;
 }

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>