mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages2 Wiki Activity Actions

Add audio mute indicator for local preview and group remote participants

Browse source
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

30
stylesheets/_modules.scss
View file

@ -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;
}
}
}

6
ts/components/CallScreen.tsx
View file

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

10
ts/components/GroupCallRemoteParticipant.tsx
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,

1
ts/components/GroupCallRemoteParticipants.tsx
View file

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

6
ts/util/lint/exceptions.json
View file

@ -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."