Add audio mute indicator for local preview and group remote participants

stylesheets/_modules.scss

@@ -6257,6 +6257,7 @@ button.module-image__border-overlay:focus {
   &__group-call-remote-participant {
     display: flex;
     justify-content: center;
+    position: relative;
 
     line-height: 0;
     overflow: hidden;
@@ -6268,6 +6269,20 @@ button.module-image__border-overlay:focus {
       // The background-color is seen while the video loads.
       background-color: $color-gray-75;
     }
+
+    &--audio-muted::before {
+      @include color-svg(
+        '../images/icons/v2/mic-off-solid-28.svg',
+        $color-white
+      );
+      bottom: 12px;
+      content: '';
+      height: 28px;
+      position: absolute;
+      right: 12px;
+      width: 28px;
+      z-index: 1;
+    }
   }
 
   &__footer {
@@ -6298,6 +6313,7 @@ button.module-image__border-overlay:focus {
       height: $local-preview-height;
       margin: 2px 16px 16px 0;
       overflow: hidden;
+      position: relative;
       width: $local-preview-width;
 
       &__video {
@@ -6307,6 +6323,20 @@ button.module-image__border-overlay:focus {
         transform: rotateY(180deg);
         width: 100%;
       }
+
+      &--audio-muted::before {
+        @include color-svg(
+          '../images/icons/v2/mic-off-solid-28.svg',
+          $color-white
+        );
+        bottom: 6px;
+        content: '';
+        height: 14px;
+        position: absolute;
+        right: 6px;
+        width: 14px;
+        z-index: 1;
+      }
     }
   }
 

ts/components/CallScreen.tsx

@@ -273,7 +273,11 @@ export const CallScreen: React.FC<PropsType> = ({
             tooltipDistance={24}
           />
         </div>
-        <div className="module-ongoing-call__footer__local-preview">
+        <div
+          className={classNames('module-ongoing-call__footer__local-preview', {
+            'module-ongoing-call__footer__local-preview--audio-muted': !hasLocalAudio,
+          })}
+        >
           {hasLocalVideo ? (
             <video
               className="module-ongoing-call__footer__local-preview__video"

ts/components/GroupCallRemoteParticipant.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React, { useRef, useEffect, CSSProperties } from 'react';
+import classNames from 'classnames';
 import { noop } from 'lodash';
 import { CanvasVideoRenderer, VideoFrameSource } from '../types/Calling';
 import { CallBackgroundBlur } from './CallBackgroundBlur';
@@ -10,6 +11,7 @@ interface PropsType {
   createCanvasVideoRenderer: () => CanvasVideoRenderer;
   demuxId: number;
   getGroupCallVideoFrameSource: (demuxId: number) => VideoFrameSource;
+  hasRemoteAudio: boolean;
   hasRemoteVideo: boolean;
   height: number;
   left: number;
@@ -21,6 +23,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = ({
   createCanvasVideoRenderer,
   demuxId,
   getGroupCallVideoFrameSource,
+  hasRemoteAudio,
   hasRemoteVideo,
   height,
   left,
@@ -60,7 +63,12 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = ({
 
   return (
     <div
-      className="module-ongoing-call__group-call-remote-participant"
+      className={classNames(
+        'module-ongoing-call__group-call-remote-participant',
+        {
+          'module-ongoing-call__group-call-remote-participant--audio-muted': !hasRemoteAudio,
+        }
+      )}
       style={{
         position: 'absolute',
         width,

ts/components/GroupCallRemoteParticipants.tsx

@@ -199,6 +199,7 @@ export const GroupCallRemoteParticipants: React.FC<PropsType> = ({
             createCanvasVideoRenderer={createCanvasVideoRenderer}
             demuxId={remoteParticipant.demuxId}
             getGroupCallVideoFrameSource={getGroupCallVideoFrameSource}
+            hasRemoteAudio={remoteParticipant.hasRemoteAudio}
             hasRemoteVideo={remoteParticipant.hasRemoteVideo}
             height={gridParticipantHeight}
             left={left}

ts/util/lint/exceptions.json

@@ -14598,7 +14598,7 @@
     "rule": "React-useRef",
     "path": "ts/components/GroupCallRemoteParticipant.js",
     "line": "    const remoteVideoRef = react_1.useRef(null);",
-    "lineNumber": 16,
+    "lineNumber": 20,
     "reasonCategory": "usageTrusted",
     "updated": "2020-11-11T21:56:04.179Z",
     "reasonDetail": "Needed to render the remote video element."
@@ -14607,7 +14607,7 @@
     "rule": "React-useRef",
     "path": "ts/components/GroupCallRemoteParticipant.js",
     "line": "    const canvasVideoRendererRef = react_1.useRef(createCanvasVideoRenderer());",
-    "lineNumber": 17,
+    "lineNumber": 21,
     "reasonCategory": "usageTrusted",
     "updated": "2020-11-11T21:56:04.179Z",
     "reasonDetail": "Doesn't touch the DOM."
@@ -14616,7 +14616,7 @@
     "rule": "React-useRef",
     "path": "ts/components/GroupCallRemoteParticipant.tsx",
     "line": "  const canvasVideoRendererRef = useRef(createCanvasVideoRenderer());",
-    "lineNumber": 31,
+    "lineNumber": 34,
     "reasonCategory": "usageTrusted",
     "updated": "2020-11-11T21:56:04.179Z",
     "reasonDetail": "Doesn't touch the DOM."