diff --git a/stylesheets/components/MessageAudio.scss b/stylesheets/components/MessageAudio.scss index 7104f8433..6a3dd9d64 100644 --- a/stylesheets/components/MessageAudio.scss +++ b/stylesheets/components/MessageAudio.scss @@ -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; diff --git a/ts/components/conversation/MessageAudio.tsx b/ts/components/conversation/MessageAudio.tsx index b93c2bc8c..7f6861764 100644 --- a/ts/components/conversation/MessageAudio.tsx +++ b/ts/components/conversation/MessageAudio.tsx @@ -523,6 +523,8 @@ export const MessageAudio: React.FC = (props: Props) => { ); } + const countDown = duration - currentTime; + return (
= (props: Props) => { > {button} {waveform} -
{timeToText(duration)}
+
{timeToText(countDown)}
); };