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

out of band image uploads work, need testing and polish

Browse Source
This commit is contained in:
or-else
2020-10-24 20:49:43 -07:00
parent cede800726
commit 28d825c681
12 changed files with 54 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/chat-message.jsx
+7 -9
View File
@@ -174,17 +174,12 @@ function draftyFormatter(style, data, values, key) {
case 'IM':
// Additional processing for images
if (data) {
const uploading = Drafty.isProcessing(data);
if (uploading) {
// Use custom element instead of <img>.
el = UploadingImage;
}
attr.className = 'inline-image';
let dim = fitImageSize(data.width, data.height,
Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false);
dim = dim || {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
const dim = fitImageSize(data.width, data.height,
Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false) ||
{dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
attr.style = { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' };
if (!uploading) {
if (!Drafty.isProcessing(data)) {
attr.src = this.props.tinode.authorizeURL(sanitizeImageUrl(attr.src));
if (attr.src) {
attr.onClick = this.handleImagePreview;
@@ -192,6 +187,9 @@ function draftyFormatter(style, data, values, key) {
} else {
attr.src = 'img/broken_image.png';
}
} else {
// Use custom element instead of <img>.
el = UploadingImage;
}
}
break;
src/widgets/uploading-image.jsx
+4 -2
View File
@@ -12,8 +12,10 @@ export default class UploadingImage extends React.PureComponent {
render() {
return (
<div className="inline-image">
<img src={this.props.src} />
<FileProgress progress={this.props.progress} onCancel={this.props.onCancelUpload} />
{React.createElement('img', this.props)}
<div className="rounded-container">
<FileProgress progress={this.props.progress} onCancel={this.props.onCancelUpload} />
</div>
</div>
);
}