audio recorder mostly OK

src/widgets/send-message.jsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Drafty } from 'tinode-sdk';
 
+import AudioRecorder from './audio-recorder.jsx';
+
 import { KEYPRESS_DELAY } from '../config.js';
 import { filePasted } from '../lib/blob-helpers.js';
 import { replyFormatter } from '../lib/formatters.js';
@@ -42,6 +44,8 @@ class SendMessage extends React.PureComponent {
     this.state = {
       quote: null,
       message: '',
+      audioRec: false,
+      audioEnabled: !!navigator.mediaDevices.getUserMedia,
       // Make initial keypress time as if it happened 5001 milliseconds in the past.
       keypressTimestamp: new Date().getTime() - KEYPRESS_DELAY - 1
     };
@@ -49,6 +53,7 @@ class SendMessage extends React.PureComponent {
     this.handlePasteEvent = this.handlePasteEvent.bind(this);
     this.handleAttachImage = this.handleAttachImage.bind(this);
     this.handleAttachFile = this.handleAttachFile.bind(this);
+    this.handleAttachAudio = this.handleAttachAudio.bind(this);
     this.handleSend = this.handleSend.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handleMessageTyping = this.handleMessageTyping.bind(this);
@@ -118,7 +123,6 @@ class SendMessage extends React.PureComponent {
   }
 
   handleAttachFile(e) {
-    const {formatMessage} = this.props.intl;
     if (e.target.files && e.target.files.length > 0) {
       this.props.onAttachFile(e.target.files[0]);
     }
@@ -126,6 +130,12 @@ class SendMessage extends React.PureComponent {
     e.target.value = '';
   }
 
+  handleAttachAudio(url, duration) {
+    this.setState({audioRec: false});
+    console.log("this.props.onAttachAudio", url, duration);
+    // this.props.onAttachAudio(url, duration);
+  }
+
   handleSend(e) {
     e.preventDefault();
     const message = this.state.message.trim();
@@ -137,6 +147,13 @@ class SendMessage extends React.PureComponent {
 
   /* Send on Enter key */
   handleKeyPress(e) {
+    if (this.state.audioRec) {
+      // Ignore key presses while audio is being recorded.
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
     // Remove this if you don't want Enter to trigger send
     if (e.key === 'Enter') {
       // Have Shift-Enter insert a line break instead
@@ -192,7 +209,7 @@ class SendMessage extends React.PureComponent {
         <div id="send-message-panel">
           {!this.props.disabled ?
             <>
-              {this.props.onAttachFile ?
+              {this.props.onAttachFile && !this.state.audioRec ?
                 <>
                   <a href="#" onClick={(e) => {e.preventDefault(); this.attachImage.click();}} title="Add image">
                     <i className="material-icons secondary">photo</i>
@@ -205,14 +222,25 @@ class SendMessage extends React.PureComponent {
                 null}
               {this.props.noInput ?
                 (this.state.quote ? quote : <div className="hr thin" />) :
-                <textarea id="sendMessage" placeholder={prompt}
-                  value={this.state.message} onChange={this.handleMessageTyping}
-                  onKeyPress={this.handleKeyPress}
-                  ref={(ref) => {this.messageEditArea = ref;}}
-                  autoFocus />}
-              <a href="#" onClick={this.handleSend} title="Send">
-                <i className="material-icons">send</i>
-              </a>
+                (this.state.audioRec ?
+                  <AudioRecorder
+                    onDeleted={_ => this.setState({audioRec: false})}
+                    onFinished={this.handleAttachAudio}/> :
+                  <textarea id="sendMessage" placeholder={prompt}
+                    value={this.state.message} onChange={this.handleMessageTyping}
+                    onKeyPress={this.handleKeyPress}
+                    ref={(ref) => {this.messageEditArea = ref;}}
+                    autoFocus />)}
+              {this.state.message || !this.state.audioEnabled ?
+                <a href="#" onClick={this.handleSend} title="Send">
+                  <i className="material-icons">send</i>
+                </a> :
+                !this.state.audioRec ?
+                  <a href="#" onClick={e => {e.preventDefault(); this.setState({audioRec: true})}} title="Voice">
+                    <i className="material-icons">mic</i>
+                  </a> :
+                  null
+              }
               <input type="file" ref={(ref) => {this.attachFile = ref;}}
                 onChange={this.handleAttachFile} style={{display: 'none'}} />
               <input type="file" ref={(ref) => {this.attachImage = ref;}} accept="image/*"