pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
or-else
2022-05-07 15:10:35 -07:00
parent 30d57e11f2
commit 2c4f005d76
10 changed files with 43 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+4 -4
View File
@@ -2671,11 +2671,11 @@ ul.tabbar li.active > a {
.audio-player .material-icons.large { .audio-player .material-icons.large {
font-size: 2.4rem; font-size: 2.4rem;
color: #667575; color: #667575CC;
} }
.audio-player .material-icons.disabled { .audio-player .material-icons.disabled {
color: #999; color: #999C;
cursor: default; cursor: default;
} }
@@ -2692,13 +2692,13 @@ ul.tabbar li.active > a {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #757575; color: #757575CC;
font-size: small; font-size: small;
} }
.audio-player .timer { .audio-player .timer {
font-size: smaller; font-size: smaller;
color: #666; color: #666C;
} }
/* /*
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/config.js
+7 -2
View File
@@ -16,7 +16,7 @@ export const DEFAULT_HOST = KNOWN_HOSTS.hosted;
export const LOGGING_ENABLED = true; export const LOGGING_ENABLED = true;
// Minimum time between two keypress notifications, milliseconds. // 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. // Delay before sending a {note} for reciving a message, milliseconds.
export const RECEIVED_DELAY = 500; export const RECEIVED_DELAY = 500;
// Delay before sending a read notification, milliseconds. // Delay before sending a read notification, milliseconds.
@@ -64,7 +64,7 @@ export const MESSAGES_PAGE = 24;
// for instance 1024 bytes. // for instance 1024 bytes.
// Increase this limit to a greater value in production, if desired. Also increase // Increase this limit to a greater value in production, if desired. Also increase
// max_message_size in the server config. // 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. // 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. // 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. // Length of a preview of a forwarded message.
export const FORWARDED_PREVIEW_LENGTH = 84; 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". // Link for "Contact Us".
export const LINK_CONTACT_US = 'email:support@tinode.co'; export const LINK_CONTACT_US = 'email:support@tinode.co';
src/views/tinode-web.jsx
+1 -1
View File
@@ -586,7 +586,7 @@ class TinodeWeb extends React.Component {
this.handleError( this.handleError(
formatMessage(messages.reconnect_countdown, {seconds: timeLeft}), formatMessage(messages.reconnect_countdown, {seconds: timeLeft}),
'warn', 'warn',
() => { _ => {
clearInterval(this.reconnectCountdown); clearInterval(this.reconnectCountdown);
this.tinode.reconnect(); this.tinode.reconnect();
}, },
src/widgets/audio-player.jsx
+3 -4
View File
@@ -1,7 +1,6 @@
// Audio recorder widget. // Audio recorder widget.
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl';
import { secondsToTime } from '../lib/strformat'; import { secondsToTime } from '../lib/strformat';
import { base64ToIntArray } from '../lib/blob-helpers'; import { base64ToIntArray } from '../lib/blob-helpers';
@@ -13,9 +12,9 @@ const LINE_WIDTH = 3 * CANVAS_UPSCALING;
// Spacing between two visualization bars. // Spacing between two visualization bars.
const SPACING = 2 * CANVAS_UPSCALING; const SPACING = 2 * CANVAS_UPSCALING;
// Color of histogram bars. // Color of histogram bars.
const BAR_COLOR = '#bbb'; const BAR_COLOR = '#888A';
const BAR_COLOR_DARK = '#888'; const BAR_COLOR_DARK = '#666C';
const THUMB_COLOR = '#666'; const THUMB_COLOR = '#444E';
// Minimum number of amplitude bars to draw. // Minimum number of amplitude bars to draw.
const MIN_PREVIEW_LENGTH = 16; const MIN_PREVIEW_LENGTH = 16;
src/widgets/audio-recorder.jsx
+2 -5
View File
@@ -8,6 +8,7 @@ import fixWebmDuration from 'fix-webm-duration';
import { intArrayToBase64 } from '../lib/blob-helpers.js' import { intArrayToBase64 } from '../lib/blob-helpers.js'
import { secondsToTime } from '../lib/strformat'; import { secondsToTime } from '../lib/strformat';
import { MAX_DURATION, MIN_DURATION } from '../config.js';
// FFT resolution. // FFT resolution.
const BUFFER_SIZE = 256; const BUFFER_SIZE = 256;
@@ -20,13 +21,9 @@ const SPACING = 2 * CANVAS_UPSCALING;
// Duration represented by one visualization bar. // Duration represented by one visualization bar.
const MILLIS_PER_BAR = 100; const MILLIS_PER_BAR = 100;
// Color of histogram bars // Color of histogram bars
const BAR_COLOR = '#bbb'; const BAR_COLOR = '#BBBD';
// Vertical scaling for visualization bars. // Vertical scaling for visualization bars.
const BAR_SCALE = 64.0; 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. // Number of bars in preview.
const VISUALIZATION_BARS = 96; const VISUALIZATION_BARS = 96;
// Maximum number of samples per bar. // Maximum number of samples per bar.
umd/index.dev.js
+22 -21
View File
@@ -2157,6 +2157,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ "LINK_TERMS_OF_SERVICE": () => (/* binding */ LINK_TERMS_OF_SERVICE), /* harmony export */ "LINK_TERMS_OF_SERVICE": () => (/* binding */ LINK_TERMS_OF_SERVICE),
/* harmony export */ "LOGGING_ENABLED": () => (/* binding */ LOGGING_ENABLED), /* harmony export */ "LOGGING_ENABLED": () => (/* binding */ LOGGING_ENABLED),
/* harmony export */ "MAX_AVATAR_BYTES": () => (/* binding */ MAX_AVATAR_BYTES), /* harmony export */ "MAX_AVATAR_BYTES": () => (/* binding */ MAX_AVATAR_BYTES),
/* harmony export */ "MAX_DURATION": () => (/* binding */ MAX_DURATION),
/* harmony export */ "MAX_EXTERN_ATTACHMENT_SIZE": () => (/* binding */ MAX_EXTERN_ATTACHMENT_SIZE), /* harmony export */ "MAX_EXTERN_ATTACHMENT_SIZE": () => (/* binding */ MAX_EXTERN_ATTACHMENT_SIZE),
/* harmony export */ "MAX_IMAGE_DIM": () => (/* binding */ MAX_IMAGE_DIM), /* harmony export */ "MAX_IMAGE_DIM": () => (/* binding */ MAX_IMAGE_DIM),
/* harmony export */ "MAX_INBAND_ATTACHMENT_SIZE": () => (/* binding */ MAX_INBAND_ATTACHMENT_SIZE), /* harmony export */ "MAX_INBAND_ATTACHMENT_SIZE": () => (/* binding */ MAX_INBAND_ATTACHMENT_SIZE),
@@ -2168,6 +2169,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ "MEDIA_BREAKPOINT": () => (/* binding */ MEDIA_BREAKPOINT), /* harmony export */ "MEDIA_BREAKPOINT": () => (/* binding */ MEDIA_BREAKPOINT),
/* harmony export */ "MESSAGES_PAGE": () => (/* binding */ MESSAGES_PAGE), /* harmony export */ "MESSAGES_PAGE": () => (/* binding */ MESSAGES_PAGE),
/* harmony export */ "MESSAGE_PREVIEW_LENGTH": () => (/* binding */ MESSAGE_PREVIEW_LENGTH), /* harmony export */ "MESSAGE_PREVIEW_LENGTH": () => (/* binding */ MESSAGE_PREVIEW_LENGTH),
/* harmony export */ "MIN_DURATION": () => (/* binding */ MIN_DURATION),
/* harmony export */ "MIN_TAG_LENGTH": () => (/* binding */ MIN_TAG_LENGTH), /* harmony export */ "MIN_TAG_LENGTH": () => (/* binding */ MIN_TAG_LENGTH),
/* harmony export */ "NEW_GRP_ACCESS_MODE": () => (/* binding */ NEW_GRP_ACCESS_MODE), /* harmony export */ "NEW_GRP_ACCESS_MODE": () => (/* binding */ NEW_GRP_ACCESS_MODE),
/* harmony export */ "NO_ACCESS_MODE": () => (/* binding */ NO_ACCESS_MODE), /* harmony export */ "NO_ACCESS_MODE": () => (/* binding */ NO_ACCESS_MODE),
@@ -2186,7 +2188,7 @@ const KNOWN_HOSTS = {
}; };
const DEFAULT_HOST = KNOWN_HOSTS.hosted; const DEFAULT_HOST = KNOWN_HOSTS.hosted;
const LOGGING_ENABLED = true; const LOGGING_ENABLED = true;
const KEYPRESS_DELAY = 3 * 1000; const KEYPRESS_DELAY = 3000;
const RECEIVED_DELAY = 500; const RECEIVED_DELAY = 500;
const READ_DELAY = 1000; const READ_DELAY = 1000;
const MIN_TAG_LENGTH = 2; const MIN_TAG_LENGTH = 2;
@@ -2213,6 +2215,8 @@ const MAX_TOPIC_DESCRIPTION_LENGTH = 360;
const MESSAGE_PREVIEW_LENGTH = 80; const MESSAGE_PREVIEW_LENGTH = 80;
const QUOTED_REPLY_LENGTH = 30; const QUOTED_REPLY_LENGTH = 30;
const FORWARDED_PREVIEW_LENGTH = 84; const FORWARDED_PREVIEW_LENGTH = 84;
const MIN_DURATION = 2000;
const MAX_DURATION = 600000;
const LINK_CONTACT_US = 'email:support@tinode.co'; const LINK_CONTACT_US = 'email:support@tinode.co';
const LINK_PRIVACY_POLICY = 'https://tinode.co/privacy.html'; const LINK_PRIVACY_POLICY = 'https://tinode.co/privacy.html';
const LINK_TERMS_OF_SERVICE = 'https://tinode.co/terms.html'; const LINK_TERMS_OF_SERVICE = 'https://tinode.co/terms.html';
@@ -8218,7 +8222,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
const timeLeft = count > 99 ? (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_17__.secondsToTime)(count) : count; const timeLeft = count > 99 ? (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_17__.secondsToTime)(count) : count;
this.handleError(formatMessage(messages.reconnect_countdown, { this.handleError(formatMessage(messages.reconnect_countdown, {
seconds: timeLeft seconds: timeLeft
}), 'warn', () => { }), 'warn', _ => {
clearInterval(this.reconnectCountdown); clearInterval(this.reconnectCountdown);
this.tinode.reconnect(); this.tinode.reconnect();
}, formatMessage(messages.reconnect_now)); }, formatMessage(messages.reconnect_now));
@@ -9832,25 +9836,22 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ }); /* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react"); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-intl */ "react-intl"); /* harmony import */ var _lib_strformat__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../lib/strformat */ "./src/lib/strformat.js");
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _lib_blob_helpers__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../lib/blob-helpers */ "./src/lib/blob-helpers.js");
/* harmony import */ var _lib_strformat__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../lib/strformat */ "./src/lib/strformat.js");
/* harmony import */ var _lib_blob_helpers__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/blob-helpers */ "./src/lib/blob-helpers.js");
const CANVAS_UPSCALING = 2.0; const CANVAS_UPSCALING = 2.0;
const LINE_WIDTH = 3 * CANVAS_UPSCALING; const LINE_WIDTH = 3 * CANVAS_UPSCALING;
const SPACING = 2 * CANVAS_UPSCALING; const SPACING = 2 * CANVAS_UPSCALING;
const BAR_COLOR = '#bbb'; const BAR_COLOR = '#888A';
const BAR_COLOR_DARK = '#888'; const BAR_COLOR_DARK = '#666C';
const THUMB_COLOR = '#666'; const THUMB_COLOR = '#444E';
const MIN_PREVIEW_LENGTH = 16; const MIN_PREVIEW_LENGTH = 16;
class AudioPlayer extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) { class AudioPlayer extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
constructor(props) { constructor(props) {
super(props); super(props);
let preview = (0,_lib_blob_helpers__WEBPACK_IMPORTED_MODULE_3__.base64ToIntArray)(this.props.preview); let preview = (0,_lib_blob_helpers__WEBPACK_IMPORTED_MODULE_2__.base64ToIntArray)(this.props.preview);
if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) { if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) {
preview = null; preview = null;
@@ -9860,7 +9861,7 @@ class AudioPlayer extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
canPlay: false, canPlay: false,
playing: false, playing: false,
currentTime: '0:00', currentTime: '0:00',
duration: this.props.duration > 0 ? (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_2__.secondsToTime)(this.props.duration / 1000) : '-:--', duration: this.props.duration > 0 ? (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_1__.secondsToTime)(this.props.duration / 1000) : '-:--',
longMin: this.props.duration >= 600000, longMin: this.props.duration >= 600000,
preview: preview preview: preview
}; };
@@ -9900,7 +9901,7 @@ class AudioPlayer extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
} }
if (this.props.preview != prevProps.preview) { if (this.props.preview != prevProps.preview) {
let preview = (0,_lib_blob_helpers__WEBPACK_IMPORTED_MODULE_3__.base64ToIntArray)(this.props.preview); let preview = (0,_lib_blob_helpers__WEBPACK_IMPORTED_MODULE_2__.base64ToIntArray)(this.props.preview);
if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) { if (!Array.isArray(preview) || preview.length < MIN_PREVIEW_LENGTH) {
preview = null; preview = null;
@@ -9920,14 +9921,14 @@ class AudioPlayer extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
}); });
this.audioPlayer.ontimeupdate = _ => this.setState({ this.audioPlayer.ontimeupdate = _ => this.setState({
currentTime: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_2__.secondsToTime)(this.audioPlayer.currentTime, this.state.longMin) currentTime: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_1__.secondsToTime)(this.audioPlayer.currentTime, this.state.longMin)
}); });
this.audioPlayer.onended = _ => { this.audioPlayer.onended = _ => {
this.audioPlayer.currentTime = 0; this.audioPlayer.currentTime = 0;
this.setState({ this.setState({
playing: false, playing: false,
currentTime: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_2__.secondsToTime)(0, this.state.longMin) currentTime: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_1__.secondsToTime)(0, this.state.longMin)
}); });
}; };
} }
@@ -10065,7 +10066,7 @@ class AudioPlayer extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
const offset = (e.clientX - rect.left) / this.effectiveWidth * CANVAS_UPSCALING; const offset = (e.clientX - rect.left) / this.effectiveWidth * CANVAS_UPSCALING;
this.audioPlayer.currentTime = this.props.duration * offset / 1000; this.audioPlayer.currentTime = this.props.duration * offset / 1000;
this.setState({ this.setState({
currentTime: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_2__.secondsToTime)(this.audioPlayer.currentTime, this.state.longMin) currentTime: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_1__.secondsToTime)(this.audioPlayer.currentTime, this.state.longMin)
}); });
if (!this.state.playing) { if (!this.state.playing) {
@@ -10120,6 +10121,8 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var fix_webm_duration__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(fix_webm_duration__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var fix_webm_duration__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(fix_webm_duration__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js"); /* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
/* harmony import */ var _lib_strformat__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../lib/strformat */ "./src/lib/strformat.js"); /* harmony import */ var _lib_strformat__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../lib/strformat */ "./src/lib/strformat.js");
/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
@@ -10130,10 +10133,8 @@ const CANVAS_UPSCALING = 2.0;
const LINE_WIDTH = 3 * CANVAS_UPSCALING; const LINE_WIDTH = 3 * CANVAS_UPSCALING;
const SPACING = 2 * CANVAS_UPSCALING; const SPACING = 2 * CANVAS_UPSCALING;
const MILLIS_PER_BAR = 100; const MILLIS_PER_BAR = 100;
const BAR_COLOR = '#bbb'; const BAR_COLOR = '#BBBD';
const BAR_SCALE = 64.0; const BAR_SCALE = 64.0;
const MIN_DURATION = 200;
const MAX_DURATION = 600000;
const VISUALIZATION_BARS = 96; const VISUALIZATION_BARS = 96;
const MAX_SAMPLES_PER_BAR = 10; const MAX_SAMPLES_PER_BAR = 10;
const AUDIO_MIME_TYPE = 'audio/webm'; const AUDIO_MIME_TYPE = 'audio/webm';
@@ -10214,7 +10215,7 @@ class AudioRecorder extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
duration: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_4__.secondsToTime)(duration / 1000) duration: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_4__.secondsToTime)(duration / 1000)
}); });
if (duration > MAX_DURATION) { if (duration > _config_js__WEBPACK_IMPORTED_MODULE_5__.MAX_DURATION) {
this.startedOn = null; this.startedOn = null;
this.mediaRecorder.pause(); this.mediaRecorder.pause();
this.durationMillis += Date.now() - this.startedOn; this.durationMillis += Date.now() - this.startedOn;
@@ -10336,7 +10337,7 @@ class AudioRecorder extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo
this.audioInput.connect(this.analyser); this.audioInput.connect(this.analyser);
this.mediaRecorder.onstop = _ => { this.mediaRecorder.onstop = _ => {
if (this.durationMillis > MIN_DURATION) { if (this.durationMillis > _config_js__WEBPACK_IMPORTED_MODULE_5__.MIN_DURATION) {
this.getRecording(this.mediaRecorder.mimeType, this.durationMillis).then(result => this.props.onFinished(result.url, result.preview, this.durationMillis)); this.getRecording(this.mediaRecorder.mimeType, this.durationMillis).then(result => this.props.onFinished(result.url, result.preview, this.durationMillis));
} else { } else {
this.props.onDeleted(); this.props.onDeleted();
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long