better audio wave colors, move audio config values to config.js

src/config.js

@@ -16,7 +16,7 @@ export const DEFAULT_HOST = KNOWN_HOSTS.hosted;
 export const LOGGING_ENABLED = true;
 
 // Minimum time between two keypress notifications, milliseconds.
-export const KEYPRESS_DELAY = 3*1000;
+export const KEYPRESS_DELAY = 3_000;
 // Delay before sending a {note} for reciving a message, milliseconds.
 export const RECEIVED_DELAY = 500;
 // Delay before sending a read notification, milliseconds.
@@ -64,7 +64,7 @@ export const MESSAGES_PAGE = 24;
 // for instance 1024 bytes.
 // Increase this limit to a greater value in production, if desired. Also increase
 // max_message_size in the server config.
-export const MAX_INBAND_ATTACHMENT_SIZE = 262144;
+export const MAX_INBAND_ATTACHMENT_SIZE = 262_144;
 
 // Default absolute maximum attachment size to be used with the server = 8MB.
 // Used when the server-provided value is unavailable. Increase to something like 100MB in production.
@@ -98,6 +98,11 @@ export const QUOTED_REPLY_LENGTH = 30;
 // Length of a preview of a forwarded message.
 export const FORWARDED_PREVIEW_LENGTH = 84;
 
+// Minimum duration of an audio recording in milliseconds (2 sec).
+export const MIN_DURATION = 2_000;
+// Maximum duration of an audio recording in milliseconds (10 min).
+export const MAX_DURATION = 600_000;
+
 // Link for "Contact Us".
 export const LINK_CONTACT_US = 'email:support@tinode.co';
 

src/views/tinode-web.jsx

@@ -586,7 +586,7 @@ class TinodeWeb extends React.Component {
       this.handleError(
         formatMessage(messages.reconnect_countdown, {seconds: timeLeft}),
         'warn',
-        () => {
+        _ => {
           clearInterval(this.reconnectCountdown);
           this.tinode.reconnect();
         },

src/widgets/audio-player.jsx

@@ -1,7 +1,6 @@
 // Audio recorder widget.
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 
 import { secondsToTime } from '../lib/strformat';
 import { base64ToIntArray } from '../lib/blob-helpers';
@@ -13,9 +12,9 @@ const LINE_WIDTH = 3 * CANVAS_UPSCALING;
 // Spacing between two visualization bars.
 const SPACING = 2 * CANVAS_UPSCALING;
 // Color of histogram bars.
-const BAR_COLOR = '#bbb';
-const BAR_COLOR_DARK = '#888';
-const THUMB_COLOR = '#666';
+const BAR_COLOR = '#888A';
+const BAR_COLOR_DARK = '#666C';
+const THUMB_COLOR = '#444E';
 // Minimum number of amplitude bars to draw.
 const MIN_PREVIEW_LENGTH = 16;
 

src/widgets/audio-recorder.jsx

@@ -8,6 +8,7 @@ import fixWebmDuration from 'fix-webm-duration';
 
 import { intArrayToBase64 } from '../lib/blob-helpers.js'
 import { secondsToTime } from '../lib/strformat';
+import { MAX_DURATION, MIN_DURATION } from '../config.js';
 
 // FFT resolution.
 const BUFFER_SIZE = 256;
@@ -20,13 +21,9 @@ const SPACING = 2 * CANVAS_UPSCALING;
 // Duration represented by one visualization bar.
 const MILLIS_PER_BAR = 100;
 // Color of histogram bars
-const BAR_COLOR = '#bbb';
+const BAR_COLOR = '#BBBD';
 // Vertical scaling for visualization bars.
 const BAR_SCALE = 64.0;
-// Minimum duration of a recording in milliseconds.
-const MIN_DURATION = 200;
-// Maximum duration of a recording in milliseconds (10 min).
-const MAX_DURATION = 600000;
 // Number of bars in preview.
 const VISUALIZATION_BARS = 96;
 // Maximum number of samples per bar.