jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change duration to countdown in MessageAudio 

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>
);
};