use webm-duration-fix to add SeekHead, use code splitting

package.json

@@ -71,7 +71,7 @@
     "react-dom": "^17.0.2",
     "react-intl": "^5.20.2",
     "tinode-sdk": "^0.20.2",
-    "ts-ebml": "^2.0.2"
+    "webm-duration-fix": "^1.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.14.5",

src/widgets/audio-recorder.jsx

@@ -4,8 +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 * as ebml from 'ts-ebml';
+import fixWebmDuration from 'webm-duration-fix';
 
 import { intArrayToBase64 } from '../lib/blob-helpers.js'
 import { secondsToTime } from '../lib/strformat';
@@ -272,36 +272,11 @@ export default class AudioRecorder extends React.PureComponent {
   getRecording(mimeType, duration) {
     mimeType = mimeType || AUDIO_MIME_TYPE;
     let blob = new Blob(this.audioChunks, {type: mimeType});
-    return this.tempFixMetadata(blob, mimeType)
+    return fixWebmDuration(blob, mimeType)
       .then(fixedBlob => { blob = fixedBlob; return fixedBlob.arrayBuffer(); })
       .then(arrayBuff => this.audioContext.decodeAudioData(arrayBuff))
       .then(decoded => this.createPreview(decoded))
       .then(preview => ({url: window.URL.createObjectURL(blob), preview: intArrayToBase64(preview)}));
-    /*
-    return (duration > 0 ? ysFixWebmDuration(blob, duration, {logger: false}) : Promise.resolve(blob))
-      .then(fixedBlob => { blob = fixedBlob; return fixedBlob.arrayBuffer(); })
-      .then(arrayBuff => this.audioContext.decodeAudioData(arrayBuff))
-      .then(decoded => this.createPreview(decoded))
-      .then(preview => ({url: window.URL.createObjectURL(blob), preview: intArrayToBase64(preview)}));
-      */
-  }
-
-  tempFixMetadata(blob, mimeType) {
-    const decoder = new ebml.Decoder();
-    const reader = new ebml.Reader();
-    reader.logging = true;
-    reader.logGroup = "Raw WebM file";
-    reader.drop_default_duration = false;
-    let webmBuf;
-    blob.arrayBuffer()
-      .then(buf => { webmBuf = buf; return decoder.decode(buf); })
-      .then(elms => {
-        elms.forEach(elm => reader.read(elm))
-        reader.stop();
-        const fixedMetadataBuf = ebml.tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
-        const body = webmBuf.slice(reader.metadataSize);
-        return new Blob([fixedMetadataBuf, body], {type: mimeType});
-      });
   }
 
   // Preview must be calculated at the source: Chrome does not allow background AudioContext.

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';
@@ -221,9 +223,11 @@ class SendMessage extends React.PureComponent {
               {this.props.noInput ?
                 (quote || <div className="hr thin" />) :
                 (this.state.audioRec ?
+                  (<Suspense fallback={<div>Loading...</div>}>
                     <AudioRecorder
                       onDeleted={_ => this.setState({audioRec: false})}
-                    onFinished={this.handleAttachAudio}/> :
+                      onFinished={this.handleAttachAudio}/>
+                  </Suspense>) :
                   <textarea id="sendMessage" placeholder={prompt}
                     value={this.state.message} onChange={this.handleMessageTyping}
                     onKeyPress={this.handleKeyPress}

webpack.config.js

@@ -26,6 +26,7 @@ module.exports = (env, argv) => {
       publicPath: '/umd/'
     },
     optimization: {
+      runtimeChunk: 'single',
       minimize: (mode === 'prod'),
       minimizer: [
         new TerserPlugin({
@@ -63,7 +64,6 @@ module.exports = (env, argv) => {
       }),
     ],
     externals: {
-      // 'fix-webm-duration': 'fixWebmDuration',
       'react': 'React',
       'react-dom': 'ReactDOM',
       'react-intl': 'ReactIntl',