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

Revert "Let CallingAudioIndicator background linger"

Browse source 
This reverts commit a924591a8c.
This commit is contained in:
Fedor Indutny 2022-05-12 14:03:43 -07:00 • committed by GitHub
parent bdc4f53e91
commit de9deb444a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

52
ts/components/CallingAudioIndicator.tsx
View file

@ -9,50 +9,29 @@ import animationData from '../../images/lottie-animations/CallingSpeakingIndicat
import { Lottie } from './Lottie'; import { Lottie } from './Lottie';
const SPEAKING_LINGER_MS = 100; const SPEAKING_LINGER_MS = 100;
const SPEAKING_BACKGROUND_LINGER_MS = 500;
const BASE_CLASS_NAME = 'CallingAudioIndicator'; const BASE_CLASS_NAME = 'CallingAudioIndicator';
const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`; const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
enum SpeakingState {
None = 'None',
Speaking = 'Speaking',
BackgroundOnly = 'BackgroundOnly',
}
export function CallingAudioIndicator({ export function CallingAudioIndicator({
hasAudio, hasAudio,
isSpeaking, isSpeaking,
}: Readonly<{ hasAudio: boolean; isSpeaking: boolean }>): ReactElement { }: Readonly<{ hasAudio: boolean; isSpeaking: boolean }>): ReactElement {
const [speakingState, setSpeakingState] = useState( const [shouldShowSpeaking, setShouldShowSpeaking] = useState(isSpeaking);
isSpeaking ? SpeakingState.Speaking : SpeakingState.None
);
useEffect(() => { useEffect(() => {
if (isSpeaking) { if (isSpeaking) {
setSpeakingState(SpeakingState.Speaking); setShouldShowSpeaking(true);
return noop; } else if (shouldShowSpeaking) {
} const timeout = setTimeout(() => {
setShouldShowSpeaking(false);
if (speakingState === SpeakingState.None) {
return noop;
}
let timeout: NodeJS.Timeout;
if (speakingState === SpeakingState.Speaking) {
timeout = setTimeout(() => {
setSpeakingState(SpeakingState.BackgroundOnly);
}, SPEAKING_LINGER_MS); }, SPEAKING_LINGER_MS);
} else if (speakingState === SpeakingState.BackgroundOnly) { return () => {
timeout = setTimeout(() => { clearTimeout(timeout);
setSpeakingState(SpeakingState.None); };
}, SPEAKING_BACKGROUND_LINGER_MS);
} }
return noop;
return () => { }, [isSpeaking, shouldShowSpeaking]);
clearTimeout(timeout);
};
}, [isSpeaking, speakingState]);
if (!hasAudio) { if (!hasAudio) {
return ( return (
@ -72,14 +51,7 @@ export function CallingAudioIndicator({
); );
} }
if (speakingState !== SpeakingState.None) { if (shouldShowSpeaking) {
let maybeAnimation: React.ReactElement | undefined;
if (speakingState === SpeakingState.Speaking) {
maybeAnimation = (
<Lottie animationData={animationData} className={CONTENT_CLASS_NAME} />
);
}
return ( return (
<div <div
className={classNames( className={classNames(
@ -87,7 +59,7 @@ export function CallingAudioIndicator({
`${BASE_CLASS_NAME}--with-content` `${BASE_CLASS_NAME}--with-content`
)} )}
> >
{maybeAnimation} <Lottie animationData={animationData} className={CONTENT_CLASS_NAME} />
</div> </div>
); );
} }