rebuilt with the webm fix & code splitting

src/widgets/audio-recorder.jsx

@@ -4,7 +4,8 @@ import React from 'react';
 
 import AudioPlayer from './audio-player.jsx';
 // Workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=642012
-import fixWebmDuration from 'fix-webm-duration';
+// It adds duration and SeekHead to the webm record.
+import fixWebmDuration from 'webm-duration-fix';
 
 import { intArrayToBase64 } from '../lib/blob-helpers.js'
 import { secondsToTime } from '../lib/strformat';
@@ -269,8 +270,9 @@ export default class AudioRecorder extends React.PureComponent {
   // Obtain data in a form sutable for sending or playing back.
   // If duration is valid, apply fix for Chrome's WebM duration bug.
   getRecording(mimeType, duration) {
-    let blob = new Blob(this.audioChunks, {type: mimeType || AUDIO_MIME_TYPE});
-    return (duration > 0 ? fixWebmDuration(blob, duration, {logger: false}) : Promise.resolve(blob))
+    mimeType = mimeType || AUDIO_MIME_TYPE;
+    let blob = new Blob(this.audioChunks, {type: mimeType});
+    return fixWebmDuration(blob, mimeType)
       .then(fixedBlob => { blob = fixedBlob; return fixedBlob.arrayBuffer(); })
       .then(arrayBuff => this.audioContext.decodeAudioData(arrayBuff))
       .then(decoded => this.createPreview(decoded))

src/widgets/send-message.jsx

@@ -1,9 +1,11 @@
 // Send message form.
-import React from 'react';
+import React, { Suspense } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Drafty } from 'tinode-sdk';
 
-import AudioRecorder from './audio-recorder.jsx';
+// Lazy-loading AudioRecorder because it's quite large due to
+// a dependency on webm-duration-fix.
+const AudioRecorder = React.lazy(_ => import('./audio-recorder.jsx'));
 
 import { KEYPRESS_DELAY } from '../config.js';
 import { filePasted } from '../lib/blob-helpers.js';
@@ -231,9 +233,11 @@ class SendMessage extends React.PureComponent {
               {this.props.noInput ?
                 (quote || <div className="hr thin" />) :
                 (this.state.audioRec ?
-                  <AudioRecorder
-                    onDeleted={_ => this.setState({audioRec: false})}
-                    onFinished={this.handleAttachAudio}/> :
+                  (<Suspense fallback={<div>Loading...</div>}>
+                    <AudioRecorder
+                      onDeleted={_ => this.setState({audioRec: false})}
+                      onFinished={this.handleAttachAudio}/>
+                  </Suspense>) :
                   <textarea id="sendMessage" placeholder={prompt}
                     value={this.state.message}
                     onChange={this.handleMessageTyping}