Change duration to countdown in MessageAudio

Message Audio UI should display remaining time not the duration of the audio.
signalapp · Mar 22, 2021 · d6063d7 · d6063d7
1 parent 544e20e
commit d6063d7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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>
   );
 };