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

speaking indicator design tweaks

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

9
stylesheets/_modules.scss
View file

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

2
ts/components/CallingAudioIndicator.tsx
View file

@ -9,7 +9,7 @@ import { useSpring, animated } from '@react-spring/web';
import { AUDIO_LEVEL_INTERVAL_MS } from '../calling/constants'; import { AUDIO_LEVEL_INTERVAL_MS } from '../calling/constants';
import { missingCaseError } from '../util/missingCaseError'; import { missingCaseError } from '../util/missingCaseError';
export const SPEAKING_LINGER_MS = 500; export const SPEAKING_LINGER_MS = 200;
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`;