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

putting it all together

Browse Source
This commit is contained in:
or-else
2022-03-15 18:20:24 -07:00
parent 2ab56887b7
commit e121b1645f
21 changed files with 461 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+2
View File
@@ -2666,10 +2666,12 @@ ul.tabbar li.active > a {
.audio-player .material-icons.large {
font-size: 2.5rem;
color: #009688;
}
.audio-player .material-icons.disabled {
color: #999;
cursor: default;
}
.audio-player .visualiser {
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n/de.json
+9 -2
View File
@@ -1362,10 +1362,17 @@
"obsolete": false
},
"drafty_unknown": {
"translation": "",
"translation": "Nicht unterstützt",
"defaultMessage": "Unsupported",
"description": "Unsupported entity in drafty",
"missing": true,
"missing": false,
"obsolete": false
},
"preview_unavailable": {
"translation": "nicht verfügbar",
"defaultMessage": "unavailable",
"description": "Message shown when media preview is not available",
"missing": false,
"obsolete": false
}
}
src/i18n/en.json
+7
View File
@@ -1367,5 +1367,12 @@
"description": "Unsupported entity in drafty",
"missing": false,
"obsolete": false
},
"preview_unavailable": {
"translation": "unavailable",
"defaultMessage": "unavailable",
"description": "Message shown when media preview is not available",
"missing": false,
"obsolete": false
}
}
src/i18n/es.json
+9 -2
View File
@@ -1362,10 +1362,17 @@
"obsolete": false
},
"drafty_unknown": {
"translation": "",
"translation": "No soportado",
"defaultMessage": "Unsupported",
"description": "Unsupported entity in drafty",
"missing": true,
"missing": false,
"obsolete": false
},
"preview_unavailable": {
"translation": "indisponible",
"defaultMessage": "unavailable",
"description": "Message shown when media preview is not available",
"missing": false,
"obsolete": false
}
}
src/i18n/ex/base-en.json
+4
View File
@@ -608,6 +608,10 @@
"defaultMessage": "phone",
"description": "Dative case of 'phone', i.e. 'phone' in 'by phone'"
},
"preview_unavailable": {
"defaultMessage": "unavailable",
"description": "Message shown when media preview is not available"
},
"private_editing_placeholder": {
"defaultMessage": "Visible to you only",
"description": "Placeholder for editing 'private'"
src/i18n/ko.json
+9 -2
View File
@@ -1362,10 +1362,17 @@
"obsolete": false
},
"drafty_unknown": {
"translation": "",
"translation": "지원되지 않음",
"defaultMessage": "Unsupported",
"description": "Unsupported entity in drafty",
"missing": true,
"missing": false,
"obsolete": false
},
"preview_unavailable": {
"translation": "없는",
"defaultMessage": "unavailable",
"description": "Message shown when media preview is not available",
"missing": false,
"obsolete": false
}
}
src/i18n/ro.json
+9 -2
View File
@@ -1362,10 +1362,17 @@
"obsolete": false
},
"drafty_unknown": {
"translation": "",
"translation": "Neacceptat",
"defaultMessage": "Unsupported",
"description": "Unsupported entity in drafty",
"missing": true,
"missing": false,
"obsolete": false
},
"preview_unavailable": {
"translation": "indisponibil",
"defaultMessage": "unavailable",
"description": "Message shown when media preview is not available",
"missing": false,
"obsolete": false
}
}
src/i18n/ru.json
+9 -2
View File
@@ -1362,10 +1362,17 @@
"obsolete": false
},
"drafty_unknown": {
"translation": "",
"translation": "Не поддерживается",
"defaultMessage": "Unsupported",
"description": "Unsupported entity in drafty",
"missing": true,
"missing": false,
"obsolete": false
},
"preview_unavailable": {
"translation": "недоступно",
"defaultMessage": "unavailable",
"description": "Message shown when media preview is not available",
"missing": false,
"obsolete": false
}
}
src/i18n/zh-TW.json
+9 -2
View File
@@ -1362,10 +1362,17 @@
"obsolete": false
},
"drafty_unknown": {
"translation": "",
"translation": "不支持",
"defaultMessage": "Unsupported",
"description": "Unsupported entity in drafty",
"missing": true,
"missing": false,
"obsolete": false
},
"preview_unavailable": {
"translation": "不可用",
"defaultMessage": "unavailable",
"description": "Message shown when media preview is not available",
"missing": false,
"obsolete": false
}
}
src/i18n/zh.json
+9 -2
View File
@@ -1362,10 +1362,17 @@
"obsolete": false
},
"drafty_unknown": {
"translation": "",
"translation": "不支持",
"defaultMessage": "Unsupported",
"description": "Unsupported entity in drafty",
"missing": true,
"missing": false,
"obsolete": false
},
"preview_unavailable": {
"translation": "不可用",
"defaultMessage": "unavailable",
"description": "Message shown when media preview is not available",
"missing": false,
"obsolete": false
}
}
src/lib/formatters.js
+18 -10
View File
@@ -115,6 +115,9 @@ export function fullFormatter(style, data, values, key, stack) {
case 'BR':
values = null;
break;
case 'EX':
// Ignore.
break;
case 'HL':
// Highlighted text. Assign class name.
attr.className = 'highlight';
@@ -161,15 +164,17 @@ export function fullFormatter(style, data, values, key, stack) {
attr.onClick = this.onQuoteClick;
break;
default:
// Unknown element.
el = React.Fragment;
attr = {key: key};
// Generate comment for unknown element.
let body = values;
if (!Array.isArray(values) || !values.join('').trim()) {
body = [<span key="x1" className="gray">{this.formatMessage(messages.drafty_unknown)}</span>];
if (!el) {
// Unknown element.
el = React.Fragment;
attr = {key: key};
// Generate comment for unknown element.
let body = values;
if (!Array.isArray(values) || !values.join('').trim()) {
body = [<span key="x1" className="gray">{this.formatMessage(messages.drafty_unknown)}</span>];
}
values = [<i key="x0" className="material-icons gray">extension</i>, ' '].concat(body);
}
values = [<i key="x0" className="material-icons gray">extension</i>, ' '].concat(body);
break;
}
if (!el) {
@@ -246,8 +251,11 @@ export function previewFormatter(style, data, values, key) {
values = null;
break;
default:
el = React.Fragment;
values = [<i key="x0" className="material-icons gray">extension</i>, ' ', this.formatMessage(messages.drafty_unknown)];
if (!el) {
// Unknown element.
el = React.Fragment;
values = [<i key="x0" className="material-icons gray">extension</i>, ' ', this.formatMessage(messages.drafty_unknown)];
}
break;
}
if (!el) {
src/messages.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/views/messages-view.jsx
+3 -3
View File
@@ -21,7 +21,7 @@ import SendMessage from '../widgets/send-message.jsx';
import { DEFAULT_P2P_ACCESS_MODE, IMAGE_PREVIEW_DIM, KEYPRESS_DELAY,
MESSAGES_PAGE, MAX_EXTERN_ATTACHMENT_SIZE, MAX_IMAGE_DIM, MAX_INBAND_ATTACHMENT_SIZE,
READ_DELAY, QUOTED_REPLY_LENGTH } from '../config.js';
import { blobToBase64, fileToBase64, imageScaled, intArrayToBase64, makeImageUrl } from '../lib/blob-helpers.js';
import { blobToBase64, fileToBase64, imageScaled, makeImageUrl } from '../lib/blob-helpers.js';
import HashNavigation from '../lib/navigation.js';
import { bytesToHumanSize, shortDateFormat } from '../lib/strformat.js';
@@ -889,7 +889,7 @@ class MessagesView extends React.Component {
mime: blob.type,
size: blob.size,
duration: duration,
preview: intArrayToBase64(preview),
preview: preview,
urlPromise: uploadCompletionPromise
});
// Pass data and the uploader to the TinodeWeb.
@@ -903,7 +903,7 @@ class MessagesView extends React.Component {
size: blob.size,
data: b64.bits,
duration: duration,
preview: intArrayToBase64(preview),
preview: preview,
}))
})
}
src/widgets/audio-player.jsx
+115 -41
View File
@@ -1,6 +1,7 @@
// Audio recorder widget.
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { secondsToTime } from '../lib/strformat';
import { base64ToIntArray } from '../lib/blob-helpers';
@@ -11,9 +12,10 @@ const CANVAS_UPSCALING = 2.0;
const LINE_WIDTH = 3 * CANVAS_UPSCALING;
// Spacing between two visualization bars.
const SPACING = 2 * CANVAS_UPSCALING;
// Color of histogram bars
const BAR_COLOR = '#8fbed6';
const BAR_COLOR_DARK = '#5f8ea5';
// Color of histogram bars (base color #009688).
const BAR_COLOR = '#85c7c5';
const BAR_COLOR_DARK = '#559695';
const THUMB_COLOR = '#246867';
// Background color
const BKG_COLOR = '#fff';
@@ -37,6 +39,8 @@ export default class AudioPlayer extends React.PureComponent {
preview: preview
};
this.initAudio = this.initAudio.bind(this);
this.initCanvas = this.initCanvas.bind(this);
this.calcPreviewBars = this.calcPreviewBars.bind(this);
this.visualize = this.visualize.bind(this);
@@ -52,60 +56,109 @@ export default class AudioPlayer extends React.PureComponent {
componentDidMount() {
if (this.props.src) {
this.audioPlayer = new Audio(this.props.src);
this.audioPlayer.addEventListener('canplay', _ => this.setState({canPlay: true}));
this.audioPlayer.addEventListener('timeupdate', _ => this.setState({currentTime: secondsToTime(this.audioPlayer.currentTime)}));
this.audioPlayer.addEventListener('ended', _ => this.setState({playing: false, currentTime: secondsToTime(0)}));
this.initAudio();
}
if (this.state.preview) {
// Force canvas aspect ration to match one of the element + upscale canvas to reduce blurring.
this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;
this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;
this.canvasContext = this.canvasRef.current.getContext('2d');
this.canvasContext.lineCap = 'round';
this.viewBuffer = this.calcPreviewBars(this.state.preview);
this.visualize();
this.initCanvas();
}
}
componentWillUnmount() {
if (this.audioPlayer) {
this.audioPlayer.oncanplay = null;
this.audioPlayer.ontimeupdate = null;
this.audioPlayer.onended = null;
this.audioPlayer.pause();
this.audioPlayer = null;
}
}
componentDidUpdate(prevProps) {
if (this.props.src != prevProps.src) {
this.initAudio();
}
if (this.props.preview != prevProps.preview) {
let preview = base64ToIntArray(this.props.preview);
if (Array.isArray(preview) && preview.length < MIN_PREVIEW_LENGTH) {
preview = null;
}
this.setState({preview: preview}, this.initCanvas);
}
}
initAudio() {
this.audioPlayer = new Audio(this.props.src);
this.audioPlayer.oncanplay = _ => this.setState({canPlay: true});
this.audioPlayer.ontimeupdate = _ => this.setState({currentTime: secondsToTime(this.audioPlayer.currentTime)});
this.audioPlayer.onended = _ => {
this.audioPlayer.currentTime = 0;
this.setState({playing: false, currentTime: secondsToTime(0)})
}
}
initCanvas() {
// Force canvas aspect ration to match one of the element + upscale canvas to reduce blurring.
this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;
this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;
this.canvasContext = this.canvasRef.current.getContext('2d');
this.canvasContext.lineCap = 'round';
this.viewBuffer = this.calcPreviewBars(this.state.preview);
this.visualize();
}
// Draw amplitude of sound.
visualize() {
const width = this.canvasRef.current.width;
const width = this.effectiveWidth;
const height = this.canvasRef.current.height;
this.canvasContext.lineWidth = LINE_WIDTH;
const drawFrame = () => {
this.canvasContext.clearRect(0, 0, width, height);
if (!this.canvasRef.current) {
// The component is unmounted.
return;
}
// Start new drawing.
this.canvasContext.beginPath();
this.canvasContext.clearRect(0, 0, this.canvasRef.current.width, height);
if (this.viewBuffer) {
window.requestAnimationFrame(drawFrame);
if (this.state.playing) {
window.requestAnimationFrame(drawFrame);
}
// Current pplayback position.
const thumbAt = this.props.duration ?
Math.max(0, Math.min(this.audioPlayer.currentTime * 1000 / this.props.duration, 1)) * (width - LINE_WIDTH * 2) : -1;
this.canvasContext.strokeStyle = BAR_COLOR;
// Draw amplitude bars.
this.canvasContext.beginPath();
this.canvasContext.strokeStyle = BAR_COLOR_DARK;
for (let i = 0; i < this.viewBuffer.length; i++) {
let x = 1 + i * (LINE_WIDTH + SPACING) + LINE_WIDTH * 0.5;
let y = this.viewBuffer[i] * height * 0.9;
const color = x < thumbAt ? BAR_COLOR_DARK : BAR_COLOR;
if (this.canvasContext.strokeStyle != color) {
this.canvasContext.stroke();
this.canvasContext.beginPath();
this.canvasContext.strokeStyle = color;
}
this.canvasContext.moveTo(x, (height - y) * 0.5);
this.canvasContext.lineTo(x, height * 0.5 + y * 0.5);
}
// Actually draw the bars on canvas.
this.canvasContext.stroke();
// Draw thumb.
if (this.props.duration) {
this.canvasContext.beginPath();
const x = Math.max(0, Math.min(this.audioPlayer.currentTime * 1000 / this.props.duration, 1)) * width;
this.canvasContext.arc(x + LINE_WIDTH * 0.5, height * 0.5, LINE_WIDTH * 2, 0, 2 * Math.PI);
this.canvasContext.fillStyle = BAR_COLOR_DARK;
this.canvasContext.arc(thumbAt + LINE_WIDTH * 2, height * 0.5, LINE_WIDTH * 2, 0, 2 * Math.PI);
this.canvasContext.fillStyle = THUMB_COLOR;
this.canvasContext.fill();
}
}
@@ -116,7 +169,7 @@ export default class AudioPlayer extends React.PureComponent {
// Quick and dirty downsampling of the original preview bars into a smaller (or equal) number of bars we can display here.
calcPreviewBars(original) {
const barCount = Math.min(original.length, ((this.canvasRef.current.width - 1) / (LINE_WIDTH + SPACING)) | 0);
const barCount = Math.min(original.length, ((this.canvasRef.current.width - SPACING) / (LINE_WIDTH + SPACING)) | 0);
const factor = original.length / barCount;
let amps = [];
let max = -1;
@@ -132,6 +185,8 @@ export default class AudioPlayer extends React.PureComponent {
}
if (max > 0) {
// Remove extra padding on the right due to fractional bar which is not drawn.
this.effectiveWidth = barCount * (LINE_WIDTH + SPACING) + SPACING;
return amps.map(a => a / max);
}
return null;
@@ -144,12 +199,11 @@ export default class AudioPlayer extends React.PureComponent {
}
if (this.state.playing) {
this.audioPlayer.pause();
this.startedOn = null;
this.setState({playing: false});
} else {
this.audioPlayer.play();
this.startedOn = Date.now();
this.setState({playing: true}, this.visualize);
}
this.setState({playing: !this.state.playing});
}
handleError(err) {
@@ -160,27 +214,47 @@ export default class AudioPlayer extends React.PureComponent {
e.preventDefault();
if (e.target && this.props.duration) {
const rect = e.target.getBoundingClientRect();
const offset = (e.clientX - rect.left) / rect.width;
const offset = (e.clientX - rect.left) / this.effectiveWidth * CANVAS_UPSCALING;
this.audioPlayer.currentTime = this.props.duration * offset / 1000;
this.setState({currentTime: secondsToTime(this.audioPlayer.currentTime)});
if (!this.state.playing && this.state.preview) {
this.visualize();
}
}
}
render() {
const playClass = 'material-icons large' + (this.state.canPlay ? '' : ' disabled');
return (
<div className="audio-player">
<a href="#" onClick={this.handlePlay} title="Play">
<i className={playClass}>{this.state.playing ? 'pause_circle' : 'play_circle'}</i>
</a>
const playClass = 'material-icons' +
(this.props.short ? '' : ' large') +
(this.state.canPlay ? '' : ' disabled');
const play = (<a href="#" onClick={this.handlePlay} title="Play">
<i className={playClass}>{this.state.playing ? 'pause_circle' : 'play_circle'}</i>
</a>);
return (<div className="audio-player">{this.props.short ?
<>
<div>
{this.state.preview ?
<canvas className="visualiser" ref={this.canvasRef} onClick={this.handleSeek} /> :
<div className="visualiser">unavailable</div>
<div className="visualiser"> - </div>
}
</div>
{play}
</>
:
<>
{play}
<div>
{this.state.preview ?
<canvas className="visualiser" ref={this.canvasRef} onClick={this.handleSeek} /> :
<div className="visualiser">
<FormattedMessage
id="preview_unavailable" defaultMessage="unavailable" description="Message shown when media preview is not available" />
</div>
}
<div className="timer">{this.state.currentTime}/{this.state.duration}</div>
</div>
</div>
);
</>
}
</div>);
}
}
src/widgets/audio-recorder.jsx
+40 -9
View File
@@ -2,6 +2,9 @@
import React from 'react';
import AudioPlayer from './audio-player.jsx';
import { intArrayToBase64 } from '../lib/blob-helpers.js'
import { secondsToTime } from '../lib/strformat';
// FFT resolution.
@@ -34,11 +37,14 @@ export default class AudioRecorder extends React.PureComponent {
audioRecord: null,
recording: true,
paused: false,
duration: '0:00'
duration: '0:00',
blobUrl: null,
preview: null
};
this.visualize = this.visualize.bind(this);
this.initMediaRecording = this.initMediaRecording.bind(this);
this.getRecording = this.getRecording.bind(this);
this.cleanUp = this.cleanUp.bind(this);
this.handleResume = this.handleResume.bind(this);
@@ -159,9 +165,10 @@ export default class AudioRecorder extends React.PureComponent {
handlePause(e) {
e.preventDefault();
this.mediaRecorder.pause();
this.mediaRecorder.requestData();
this.durationMillis += Date.now() - this.startedOn;
this.startedOn = null;
this.setState({recording: false, duration: secondsToTime(this.durationMillis / 1000)});
this.setState({recording: false});
}
handleResume(e) {
@@ -207,13 +214,9 @@ export default class AudioRecorder extends React.PureComponent {
this.audioInput.connect(this.analyser);
this.mediaRecorder.onstop = _ => {
const blob = new Blob(this.audioChunks, {'type' : 'audio/mp3; codecs=mp3'});
this.audioChunks = [];
const url = window.URL.createObjectURL(blob);
if (this.durationMillis > MIN_DURATION) {
blob.arrayBuffer().then(ab => this.audioContext.decodeAudioData(ab))
.then(data => this.createPreview(data))
.then(preview => this.props.onFinished(url, preview, this.durationMillis));
this.getRecording()
.then(result => this.props.onFinished(result.url, result.preview, this.durationMillis));
} else {
this.props.onDeleted();
}
@@ -224,6 +227,15 @@ export default class AudioRecorder extends React.PureComponent {
if (e.data.size > 0) {
this.audioChunks.push(e.data);
}
if (this.mediaRecorder.state != 'inactive') {
this.getRecording().then(result => {
this.setState({
blobUrl: result.url,
preview: result.preview
});
});
}
}
this.durationMillis = 0;
@@ -232,6 +244,17 @@ export default class AudioRecorder extends React.PureComponent {
this.visualize();
}
// Obtain data in a form sutable for sending or playing back.
getRecording() {
const blob = new Blob(this.audioChunks, {'type' : 'audio/mp3; codecs=mp3'});
const url = window.URL.createObjectURL(blob);
return blob.arrayBuffer().then(ab => this.audioContext.decodeAudioData(ab))
.then(data => this.createPreview(data))
.then(preview => {
return {url: url, preview: intArrayToBase64(preview)}
});
}
// Preview must be calculated at the source: Chrome does not allow background AudioContext.
createPreview(audio) {
const data = audio.getChannelData(0);
@@ -269,7 +292,15 @@ export default class AudioRecorder extends React.PureComponent {
<a href="#" onClick={this.handleDelete} title="Delete">
<i className="material-icons">delete_outline</i>
</a>
<canvas className="visualiser" ref={this.canvasRef} />
{this.state.recording ?
<canvas className="visualiser" ref={this.canvasRef} />
:
<AudioPlayer
src={this.state.blobUrl}
preview={this.state.preview}
duration={this.durationMillis}
short={true} />
}
<div className="duration">{this.state.duration}</div>
{this.state.recording ?
<a href="#" onClick={this.handlePause} title="Pause">
src/widgets/send-message.jsx
+1 -1
View File
@@ -45,7 +45,7 @@ class SendMessage extends React.PureComponent {
quote: null,
message: '',
audioRec: false,
audioEnabled: !!navigator.mediaDevices.getUserMedia,
audioEnabled: !!navigator.mediaDevices.getUserMedia && this.props.onAttachAudio,
// Make initial keypress time as if it happened 5001 milliseconds in the past.
keypressTimestamp: new Date().getTime() - KEYPRESS_DELAY - 1
};
umd/index.dev.js
+203 -85
View File
File diff suppressed because one or more lines are too long
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