Merge pull request #978 from konstantinullrich/#901-TTL-Display-Clock-Alternative

Add a numeric TTL Countdown if the time left is under 1 minute

stylesheets/_modules.scss

@@ -653,11 +653,14 @@
 
 // Module: Expire Timer
 
+.module-expire-timer-margin {
+  margin-left: 6px;
+}
+
 .module-expire-timer {
   width: 12px;
   height: 12px;
   display: inline-block;
-  margin-left: 6px;
   margin-bottom: 2px;
   @include color-svg('../images/timer-60.svg', $color-gray-60);
 }

ts/components/conversation/ExpireTimer.tsx

@@ -47,11 +47,27 @@ export class ExpireTimer extends React.Component<Props> {
     } = this.props;
 
     const bucket = getTimerBucket(expirationTimestamp, expirationLength);
+    let timeLeft = Math.round((expirationTimestamp - Date.now()) / 1000);
+    timeLeft = timeLeft >= 0 ? timeLeft : 0;
+    if (timeLeft <= 60) {
+      return (
+        <span
+          className={classNames(
+            'module-expire-timer-margin',
+            'module-message__metadata__date',
+            `module-message__metadata__date--${direction}`
+          )}
+        >
+          {timeLeft}
+        </span>
+      );
+    }
 
     return (
       <div
         className={classNames(
           'module-expire-timer',
+          'module-expire-timer-margin',
           `module-expire-timer--${bucket}`,
           `module-expire-timer--${direction}`,
           withImageNoCaption