WIP removing NaN dsiaply timer text.

stylesheets/_session_conversation.scss

@@ -180,7 +180,8 @@
     border-top: themed('sessionBorder');
   }
 
-  & > .session-icon-button {
+   .session-icon-button {
+  // & > .session-icon-button {
     margin-right: $session-margin-sm;
   }
   .session-icon-button {

ts/components/session/conversation/SessionRecording.tsx

@@ -106,6 +106,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
     } = this.state;
 
     const hasRecordingAndPaused = !isRecording && !isPlaying;
+    const hasRecording = this.audioElement?.duration && this.audioElement?.duration > 0;
     const actionPauseAudio = !isRecording && !isPaused && isPlaying;
 
     // const actionDefault = !actionStopRecording && !actionPlayAudio && !actionPauseAudio;
@@ -122,17 +123,16 @@ class SessionRecordingInner extends React.Component<Props, State> {
       0;
     let displayTimeString = moment.utc(displayTimeMs).format('m:ss');
 
-    const recordingLengthMs = this.audioElement?.duration ? this.audioElement?.duration * 1000 : undefined;
+    const recordingDurationMs = this.audioElement?.duration ? this.audioElement?.duration * 1000 : undefined;
 
     let remainingTimeString;
-    if (recordingLengthMs !== undefined) {
+    if (recordingDurationMs !== undefined) {
-      console.log({ recordingLengthMs });
+      remainingTimeString = ` / ${moment.utc(recordingDurationMs).format('m:ss')}`;
-      console.log({ displayTimeMs });
-      remainingTimeString = ` / ${moment.utc(recordingLengthMs).format('m:ss')}`;
       displayTimeString += remainingTimeString;
     }
 
-    const actionPauseFn = isPlaying ? this.pauseAudio : this.onStopRecordingClick;
+    const actionPauseFn = isPlaying ? this.pauseAudio : this.stopRecordingStream;
+    // const actionPauseFn = isPlaying ? this.pauseAudio : this.onStopRecordingClick;
 
     return (
       <div role="main" className="session-recording" tabIndex={0} onKeyDown={this.onKeyDown}>
@@ -156,24 +156,25 @@ class SessionRecordingInner extends React.Component<Props, State> {
               onClick={actionPauseFn}
             />
           )}
-          {hasRecordingAndPaused && (
+          <StyledFlexWrapper
-            <StyledFlexWrapper
+            flexDirection='row'
-              flexDirection='row'
+            marginHorizontal={Constants.UI.SPACING.marginXs}
-              marginHorizontal={Constants.UI.SPACING.marginXs}
+          >
-            >
+            {hasRecordingAndPaused && (
               <SessionIconButton
                 iconType={SessionIconType.Play}
                 iconSize={SessionIconSize.Medium}
                 onClick={this.playAudio}
               />
-              <SessionButton
+            )}
-                text={window.i18n('delete')}
+            {hasRecording && (
-                buttonType={SessionButtonType.Brand}
+              <SessionIconButton
-                buttonColor={SessionButtonColor.Secondary}
+                iconType={SessionIconType.Delete2}
+                iconSize={SessionIconSize.Medium}
                 onClick={this.onDeleteVoiceMessage}
               />
-            </StyledFlexWrapper>
+            )}
-          )}
+          </StyledFlexWrapper>
 
           {actionDefault && (
             <SessionIconButton
@@ -183,7 +184,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
           )}
         </div>
 
-        {isRecording || (!isRecording && remainingTimeString) ?
+        {isRecording || (!isRecording && hasRecording) ?
           <div className={classNames('session-recording--timer', !isRecording && 'playback-timer')}>
             {displayTimeString}
             {isRecording && <div className="session-recording--timer-light" />}
@@ -347,6 +348,7 @@ class SessionRecordingInner extends React.Component<Props, State> {
     this.recorder = undefined;
 
     this.audioBlobMp3 = blob;
+    this.updateAudioElementAndDuration();
 
     // Stop recording
     this.stopRecordingState();

ts/components/session/icon/Icons.tsx

@@ -12,6 +12,9 @@ export enum SessionIconType {
   CirclePlus = 'circlePlus',
   CircleElipses = 'circleElipses',
   Contacts = 'contacts',
+  Delete = 'delete',
+  Delete2 = 'delete2',
+  Delete3 = 'delete3',
   Ellipses = 'ellipses',
   Emoji = 'emoji',
   Error = 'error',
@@ -126,6 +129,24 @@ export const icons = {
     viewBox: '4 4 7 7',
     ratio: 1,
   },
+  [SessionIconType.Delete]: {
+    path:
+      'M1.63 97.99l36.55-36.55L1.63 24.89c-2.17-2.17-2.17-5.73 0-7.9L16.99 1.63c2.17-2.17 5.73-2.17 7.9 0l36.55 36.55L97.99 1.63c2.17-2.17 5.73-2.17 7.9 0l15.36 15.36c2.17 2.17 2.17 5.73 0 7.9L84.7 61.44l36.55 36.55c2.17 2.17 2.17 5.73 0 7.9l-15.36 15.36c-2.17 2.17-5.73 2.17-7.9 0L61.44 84.7l-36.55 36.55c-2.17 2.17-5.73 2.17-7.9 0L1.63 105.89c-2.17-2.17-2.17-5.73 0-7.9z',
+    viewBox: '0 0 122.88 122.88',
+    ratio: 1,
+  },
+  [SessionIconType.Delete2]: {
+    path:
+      'M11.17 37.16h83.48a8.4 8.4 0 012 .16 5.93 5.93 0 012.88 1.56 5.43 5.43 0 011.64 3.34 7.65 7.65 0 01-.06 1.44L94 117.31V117.72a7.06 7.06 0 01-.2.9v.06a5.89 5.89 0 01-5.47 4.07H17.32a6.17 6.17 0 01-1.25-.19 6.17 6.17 0 01-1.16-.48 6.18 6.18 0 01-3.08-4.88l-7-73.49a7.69 7.69 0 01-.06-1.66 5.37 5.37 0 011.63-3.29 6 6 0 013-1.58 8.94 8.94 0 011.79-.13zM5.65 8.8h31.47V6a2.44 2.44 0 010-.27 6 6 0 011.76-4A6 6 0 0143.09 0h19.67a6 6 0 015.7 6v2.8h32.39a4.7 4.7 0 014.31 4.43v10.36a2.59 2.59 0 01-2.59 2.59H2.59A2.59 2.59 0 010 23.62V13.53a1.56 1.56 0 010-.31 4.72 4.72 0 013.88-4.34 10.4 10.4 0 011.77-.08zm42.1 52.7a4.77 4.77 0 019.49 0v37a4.77 4.77 0 01-9.49 0v-37zm23.73-.2a4.58 4.58 0 015-4.06 4.47 4.47 0 014.51 4.46l-2 37a4.57 4.57 0 01-5 4.06 4.47 4.47 0 01-4.51-4.46l2-37zM25 61.7a4.46 4.46 0 014.5-4.46 4.58 4.58 0 015 4.06l2 37a4.47 4.47 0 01-4.51 4.46 4.57 4.57 0 01-5-4.06l-2-37z',
+    viewBox: '0 0 105.16 122.88',
+    ratio: 1,
+  },
+  [SessionIconType.Delete3]: {
+    path:
+      'M4.873 9.058h33.35V6.187c0-.095.002-.186.014-.279.075-1.592.762-3.037 1.816-4.086l-.007-.007C41.15.711 42.683.025 44.371.009l.023.002V0H64.325c.106 0 .207.009.309.022 1.583.084 3.019.76 4.064 1.81 1.102 1.104 1.786 2.635 1.803 4.315l-.003.021h.014V9.057h32.926c.138 0 .268.014.401.034 1.182.106 2.254.625 3.034 1.41l.004.007.005-.007c.851.857 1.386 2.048 1.401 3.368l-.002.032h.014v10.861c0 1.472-1.195 2.665-2.667 2.665H2.667C1.195 27.426 0 26.233 0 24.762V13.919c0-.106.004-.211.018-.315v-.021c.089-1.207.624-2.304 1.422-3.098l-.007-.002c.862-.861 2.057-1.396 3.377-1.414l.032.002v-.013h.031zM77.79 49.097h-5.945v56.093h5.945V49.097zm-19.33 0h-5.948v56.093h5.948V49.097zm-19.33 0h-5.946v56.093h5.946V49.097zM10.837 31.569h87.385l.279.018.127.007.134.011h.009l.163.023c1.363.163 2.638.789 3.572 1.708 1.04 1.025 1.705 2.415 1.705 3.964 0 .098-.009.193-.019.286l-.002.068-.014.154-7.393 79.335-.007.043h.007l-.016.139-.051.283-.002.005-.002.018c-.055.331-.12.646-.209.928l-.007.022-.002.005-.009.018-.023.062-.004.021c-.118.354-.264.698-.432 1.009-1.009 1.88-2.879 3.187-5.204 3.187H18.13l-.247-.014v.003l-.011-.003-.032-.004c-.46-.023-.889-.091-1.288-.202-.415-.116-.818-.286-1.197-.495l-.009-.002-.002.002c-1.785-.977-2.975-2.882-3.17-5.022L4.88 37.79l-.011-.125-.011-.247-.004-.116h-.005c0-1.553.664-2.946 1.707-3.971.976-.955 2.32-1.599 3.756-1.726l.122-.004v-.007l.3-.013.104.002v-.014h-.001zm87.386 5.334H10.837v-.007l-.116.004c-.163.022-.322.106-.438.222-.063.063-.104.132-.104.179h-.007l.007.118 7.282 79.244h-.002l.002.012c.032.376.202.691.447.825l-.002.004.084.032.063.012H90.825c.207 0 .399-.157.518-.377l.084-.197.054-.216.014-.138h.005l7.384-79.21-.003-.11c0-.045-.041-.111-.103-.172-.12-.118-.286-.202-.451-.227l-.104.002zm.111-.002h-.016.016zm.549.512v-.004.004zm5.297.377l-.002.018.002-.018zM40.887 14.389H5.332v7.706h97.63v-7.706H67.844c-1.472 0-2.664-1.192-2.664-2.664V6.168h.007c-.007-.22-.106-.433-.259-.585-.137-.141-.324-.229-.521-.252H44.394v-.006c-.213.007-.422.104-.576.259l-.004-.004-.007.004c-.131.134-.231.313-.259.501l.007.102v5.537c-.001 1.472-1.196 2.665-2.668 2.665z',
+    viewBox: '0 0 108.294 122.88',
+    ratio: 1,
+  },
   [SessionIconType.DoubleCheckCircleFilled]: {
     path:
       'M7.91731278,0.313257194 C6.15053376,1.58392424 5,3.65760134 5,6 C5,6.343797 5.0247846,6.68180525 5.07266453,7.01233547 L5,7.085 L3.205,5.295 L2.5,6 L5,8.5 L5.33970233,8.16029767 C5.80439817,9.59399486 6.71914823,10.8250231 7.91731278,11.6867428 C7.31518343,11.8898758 6.67037399,12 6,12 C2.688,12 0,9.312 0,6 C0,2.688 2.688,0 6,0 C6.67037399,0 7.31518343,0.110124239 7.91731278,0.313257194 Z M12,0 C15.312,0 18,2.688 18,6 C18,9.312 15.312,12 12,12 C8.688,12 6,9.312 6,6 C6,2.688 8.688,0 12,0 Z M11,8.5 L15.5,4 L14.795,3.29 L11,7.085 L9.205,5.295 L8.5,6 L11,8.5 Z',