speaking indicator design tweaks
This commit is contained in:
parent
e3a1f81885
commit
9dc9808420
2 changed files with 9 additions and 2 deletions
|
@ -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 {
|
||||
|
|
|
@ -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`;
|
||||
|
||||
|
|
Loading…
Reference in a new issue