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
Show stats 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;
margin-left: 12px;
/* Prevent text from jumping when countdown changes */
min-width: 32px;
text-align: right;
@include font-caption;
@ -277,8 +280,8 @@
margin-left: 4px;
}
/* Clip the duration text when it is too long on small screens */
.module-message__audio-attachment__duration {
/* Clip the countdown text when it is too long on small screens */
.module-message__audio-attachment__countdown {
margin-left: 4px;
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 (
<div
className={classNames(
@ -534,7 +536,7 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
>
{button}
{waveform}
<div className={`${CSS_BASE}__duration`}>{timeToText(duration)}</div>
<div className={`${CSS_BASE}__countdown`}>{timeToText(countDown)}</div>
</div>
);
};