speaking indicator design tweaks

This commit is contained in:
Jamie Kyle 2023-03-06 14:47:22 -08:00 committed by GitHub
parent e3a1f81885
commit 9dc9808420
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 2 deletions

View file

@ -3975,16 +3975,23 @@ button.module-image__border-overlay:focus {
&:after {
content: '';
position: absolute;
z-index: $z-index-above-above-base;
width: 100%;
height: 100%;
border: 0 solid transparent;
border-radius: 5px;
transition: border-width 200ms, border-color 200ms;
transition-property: border-width, border-color;
// Slow down the transition when the user stops speaking.
transition-duration: 300ms;
transition-delay: 1000ms;
transition-timing-function: ease-in-out;
}
&--speaking:after {
border-width: 3px;
border-color: $color-white;
// Speed up the transition when the user starts speaking.
transition-duration: 50ms;
transition-delay: 0ms;
}
&__remote-video {

View file

@ -9,7 +9,7 @@ import { useSpring, animated } from '@react-spring/web';
import { AUDIO_LEVEL_INTERVAL_MS } from '../calling/constants';
import { missingCaseError } from '../util/missingCaseError';
export const SPEAKING_LINGER_MS = 500;
export const SPEAKING_LINGER_MS = 200;
const BASE_CLASS_NAME = 'CallingAudioIndicator';
const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;