From d6063d71e547060c257cf88a954c17ba2ebd4c13 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Mon, 22 Mar 2021 11:15:59 -0700
Subject: [PATCH] Change duration to countdown in MessageAudio

Message Audio UI should display remaining time not the duration of the
audio.
---
 stylesheets/components/MessageAudio.scss    | 11 +++++++----
 ts/components/conversation/MessageAudio.tsx |  4 +++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/stylesheets/components/MessageAudio.scss b/stylesheets/components/MessageAudio.scss
index 7104f84336..6a3dd9d64a 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 b93c2bc8cc..7f68617649 100644
--- 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>
   );
 };