Add audio mute indicator for local preview and group remote participants

This commit is contained in:
Evan Hahn 2020-11-16 13:57:58 -06:00 committed by Josh Perez
parent 022c4bd0f4
commit c6e4c1d1a9
5 changed files with 48 additions and 5 deletions

View file

@ -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,