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

everything seems to work as expected

Browse Source
This commit is contained in:
or-else
2021-09-18 15:02:27 -07:00
parent c2c3b743b3 8de413c5b5
commit 4175cffa4d
19 changed files with 599 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/avatar-crop.jsx
+7 -9
View File
@@ -34,16 +34,14 @@ export default class AvatarCrop extends React.PureComponent {
handleSubmit() {
imageCrop(this.props.mime, this.props.avatar,
this.state.left, this.state.top,
this.state.width, this.state.height,
this.state.scale,
(mime, blob, width, height) => {
this.props.onSubmit(mime, blob, width, height);
},
(err) => {
this.state.left, this.state.top, this.state.width, this.state.height,
this.state.scale)
.then(img => {
this.props.onSubmit(img.mime, img.blob, img.width, img.height);
})
.catch(err => {
this.props.onError(err);
}
);
});
}
render() {
src/widgets/doc-preview.jsx
+4 -2
View File
@@ -2,7 +2,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl';
import SendMessage from '../widgets/send-message.jsx';
import { bytesToHumanSize } from '../lib/strformat.js';
import { bytesToHumanSize, shortenFileName } from '../lib/strformat.js';
// Get material icon name from mime type.
function iconFromMime(mime) {
@@ -31,12 +31,14 @@ export default class DocPreview extends React.PureComponent {
return (
<div id="image-preview">
<div id="image-preview-caption-panel">
<span>{this.props.content.filename}</span>
<span>{this.props.content.name}</span>
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
</div>
<div id="image-preview-container">
<div className="flex-column narrow">
<i className="material-icons gray">{iconFromMime(this.props.content.type)}</i>
<div><b><FormattedMessage id="label_file_name" defaultMessage="File name:"
description="Label for a file name" /></b> {shortenFileName(this.props.content.name, 24) || '-'}</div>
<div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"
description="Label for file content type (mime)" /></b> {this.props.content.type || 'application/octet-stream'}</div>
<div><b><FormattedMessage id="label_size" defaultMessage="Size:"
src/widgets/image-preview.jsx
+7 -9
View File
@@ -4,7 +4,7 @@ import SendMessage from '../widgets/send-message.jsx';
import { REM_SIZE } from '../config.js';
import { fitImageSize } from '../lib/blob-helpers.js';
import { bytesToHumanSize } from '../lib/strformat.js';
import { bytesToHumanSize, shortenFileName } from '../lib/strformat.js';
export default class ImagePreview extends React.PureComponent {
constructor(props) {
@@ -45,29 +45,27 @@ export default class ImagePreview extends React.PureComponent {
size.maxWidth = '100%';
size.maxHeight = '100%';
let filename = this.props.content.filename;
// Average font aspect ratio is ~0.5; File name takes 1/3 of the viewport width.
const maxlength = Math.max(((this.state.width / REM_SIZE / 1.5) | 0) - 2, 12);
if (filename.length > maxlength) {
filename = filename.slice(0, maxlength/2 - 1) + '…' + filename.slice(1 - maxlength/2);
}
const fname = shortenFileName(this.props.content.name, maxlength) || '-';
const width = this.props.content.width || '-';
const height = this.props.content.height || '-';
return (
<div id="image-preview">
<div id="image-preview-caption-panel">
{!this.props.onSendMessage ?
<a href={this.props.content.url} download={this.props.content.filename}>
<a href={this.props.content.url} download={this.props.content.name}>
<i className="material-icons">file_download</i> <FormattedMessage
id="download_action" defaultMessage="download" description="Call to action [download]" />
</a>
:
<span>{this.props.content.filename}</span>
<span>{fname}</span>
}
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
</div>
<div id="image-preview-container" ref={(node) => this.assignWidth(node)}>
<img src={this.props.content.url} style={size} className="image-preview" alt={this.props.content.filename} />
<img src={this.props.content.url} style={size} className="image-preview" alt={this.props.content.name} />
</div>
{this.props.onSendMessage ?
<SendMessage
@@ -83,7 +81,7 @@ export default class ImagePreview extends React.PureComponent {
<div>
<div><b><FormattedMessage id="label_file_name" defaultMessage="File name:"
description="Label for a file name" /></b></div>
<div><span title={this.props.content.filename}>{filename ? filename : '-'}</span></div>
<div><span title={this.props.content.name}>{fname}</span></div>
</div>
<div>
<div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"
src/widgets/lazy-image.jsx
+13 -3
View File
@@ -8,18 +8,28 @@ export default class LazyImage extends React.PureComponent {
this.state = {
src: 'img/placeholder.png',
style: this.props.style,
style: Object.assign({padding: '4px'}, this.props.style),
className: this.props.className,
loading: 'lazy',
alt: this.props.alt,
onClick: this.props.onClick,
};
}
componentDidMount() {
this.props.whenDone
.then(data => this.setState({src: data.src}))
.then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
.catch(() => this.setState({src: 'img/broken_image.png'}));
}
componentDidUpdate(prevProps) {
if (prevProps.whenDone != this.props.whenDone) {
this.setState({src: 'img/placeholder.png', style: {...this.state.style, padding: '4px'}});
this.props.whenDone
.then(data => this.setState({src: data.src, style: {...this.state.style, padding: 0}}))
.catch(() => this.setState({src: 'img/broken_image.png'}));
}
}
render() {
return React.createElement('img', this.state);
}
src/widgets/send-message.jsx
+12 -10
View File
@@ -67,10 +67,19 @@ class SendMessage extends React.PureComponent {
}
}
componentDidUpdate() {
componentDidUpdate(prevProps) {
if (this.messageEditArea) {
this.messageEditArea.focus();
}
if (prevProps.replyTo != this.props.replyTo) {
this.setState({quote: this.props.replyTo ?
Drafty.format(this.props.replyTo.content, replyFormatter, {
formatMessage: this.props.intl.formatMessage.bind(this.props.intl),
authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
}) :
null});
}
}
handlePasteEvent(e) {
@@ -161,21 +170,14 @@ class SendMessage extends React.PureComponent {
formatMessage(messages[this.props.messagePrompt]) :
formatMessage(messages.type_new_message));
const quote = this.props.replyTo ?
Drafty.format(this.props.replyTo.content, replyFormatter, {
formatMessage: formatMessage.bind(this.props.intl),
authorizeURL: this.props.tinode.authorizeURL.bind(this.props.tinode)
}) :
null;
return (
<div id="send-message-wrapper">
{quote ?
{this.state.quote ?
<div id="reply-quote-preview">
<div className="cancel">
<a href="#" onClick={(e) => {e.preventDefault(); this.props.onCancelReply();}}><i className="material-icons gray">close</i></a>
</div>
{quote}
{this.state.quote}
</div>
:
null}
src/widgets/topic-desc-edit.jsx
+13 -11
View File
@@ -108,7 +108,8 @@ export default class TopicDescEdit extends React.Component {
// Utility method for converting cropped avatar blob to bytes for sending inband or
// for uploading it to the server out of band.
uploadAvatar(mime, blob, width, height) {
const readyToUpload = (mime, blob, width, height) => {
const readyToUpload = (image) => {
let {mime, blob, width, height} = image;
if (blob.size > MAX_AVATAR_BYTES) {
// Too large to send inband - uploading out of band and sending as a link.
const uploader = this.props.tinode.getLargeFileHelper();
@@ -127,24 +128,25 @@ export default class TopicDescEdit extends React.Component {
} else {
this.setState({uploading: true});
// Convert blob to base64-encoded bits.
blobToBase64(blob, (unused, base64bits) => {
const du = makeImageUrl({data: base64bits, type: mime});
this.setState({source: du});
this.props.onUpdateTopicDesc(this.props.topic, theCard(null, du));
this.setState({uploading: false});
});
blobToBase64(blob)
.then(b64 => {
const du = makeImageUrl({data: b64.bits, type: mime});
this.setState({source: du});
this.props.onUpdateTopicDesc(this.props.topic, theCard(null, du));
this.setState({uploading: false});
});
}
};
if (width > AVATAR_SIZE || height > AVATAR_SIZE || width != height) {
// Avatar is not square or too large even after cropping. Shrink it and make square.
imageScaled(blob, AVATAR_SIZE, AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE, true,
readyToUpload,
(err) => {
imageScaled(blob, AVATAR_SIZE, AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE, true)
.then(scaled => readyToUpload)
.catch(err => {
this.props.onError(err, 'err');
});
} else {
readyToUpload(mime, blob, width, height);
readyToUpload({mime: mime, blob: blob, width: width, height: height});
}
}