Change background of the "muted" icon
This commit is contained in:
parent
3cc541db82
commit
8f675cdc16
4 changed files with 55 additions and 15 deletions
|
@ -1,6 +1,7 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { noop } from 'lodash';
|
||||
import type { ReactElement } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
@ -9,6 +10,9 @@ import { Lottie } from './Lottie';
|
|||
|
||||
const SPEAKING_LINGER_MS = 100;
|
||||
|
||||
const BASE_CLASS_NAME = 'CallingAudioIndicator';
|
||||
const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
|
||||
|
||||
export function CallingAudioIndicator({
|
||||
hasAudio,
|
||||
isSpeaking,
|
||||
|
@ -31,16 +35,35 @@ export function CallingAudioIndicator({
|
|||
|
||||
if (!hasAudio) {
|
||||
return (
|
||||
<div className="CallingAudioIndicator CallingAudioIndicator--muted" />
|
||||
<div
|
||||
className={classNames(
|
||||
BASE_CLASS_NAME,
|
||||
`${BASE_CLASS_NAME}--with-content`
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
CONTENT_CLASS_NAME,
|
||||
`${CONTENT_CLASS_NAME}--muted`
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (shouldShowSpeaking) {
|
||||
return (
|
||||
<Lottie animationData={animationData} className="CallingAudioIndicator" />
|
||||
<div
|
||||
className={classNames(
|
||||
BASE_CLASS_NAME,
|
||||
`${BASE_CLASS_NAME}--with-content`
|
||||
)}
|
||||
>
|
||||
<Lottie animationData={animationData} className={CONTENT_CLASS_NAME} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Render an empty spacer so that names don't move around.
|
||||
return <div className="CallingAudioIndicator" />;
|
||||
return <div className={BASE_CLASS_NAME} />;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue