jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "Let CallingAudioIndicator background linger" 

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