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

Change duration to countdown in MessageAudio

Browse source 
Message Audio UI should display remaining time not the duration of the
audio.
This commit is contained in:
Fedor Indutny 2021-03-22 11:15:59 -07:00 • committed by GitHub
parent 544e20e1d8
commit d6063d71e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
stylesheets/components/MessageAudio.scss
View file

@ -228,9 +228,12 @@
} }
} }
.module-message__audio-attachment__duration { .module-message__audio-attachment__countdown {
flex-shrink: 1; flex-shrink: 1;
margin-left: 12px;
/* Prevent text from jumping when countdown changes */
min-width: 32px;
text-align: right;
@include font-caption; @include font-caption;
@ -277,8 +280,8 @@
margin-left: 4px; margin-left: 4px;
} }
/* Clip the duration text when it is too long on small screens */ /* Clip the countdown text when it is too long on small screens */
.module-message__audio-attachment__duration { .module-message__audio-attachment__countdown {
margin-left: 4px; margin-left: 4px;
max-width: 46px; max-width: 46px;

4
ts/components/conversation/MessageAudio.tsx
View file

@ -523,6 +523,8 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
); );
} }
const countDown = duration - currentTime;
return ( return (
<div <div
className={classNames( className={classNames(
@ -534,7 +536,7 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
> >
{button} {button}
{waveform} {waveform}
<div className={`${CSS_BASE}__duration`}>{timeToText(duration)}</div> <div className={`${CSS_BASE}__countdown`}>{timeToText(countDown)}</div>
</div> </div>
); );
}; };