2015-11-27 18:02:32 +03:00
|
|
|
/*
|
2016-01-07 07:06:39 +03:00
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2018-05-17 18:47:17 +03:00
|
|
|
Copyright 2018 New Vector Ltd
|
2019-08-09 16:51:07 +03:00
|
|
|
Copyright 2018, 2019 Michael Telatynski <7t3chguy@gmail.com>
|
2015-11-27 18:02:32 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
2016-11-08 14:42:20 +03:00
|
|
|
import React from 'react';
|
2017-12-26 04:03:18 +03:00
|
|
|
import PropTypes from 'prop-types';
|
2018-02-06 20:50:53 +03:00
|
|
|
import { MatrixClient } from 'matrix-js-sdk';
|
|
|
|
|
2016-11-04 21:20:20 +03:00
|
|
|
import MFileBody from './MFileBody';
|
2016-11-08 14:42:20 +03:00
|
|
|
import Modal from '../../../Modal';
|
|
|
|
import sdk from '../../../index';
|
2018-04-29 05:07:31 +03:00
|
|
|
import { decryptFile } from '../../../utils/DecryptFile';
|
2017-07-12 15:58:14 +03:00
|
|
|
import Promise from 'bluebird';
|
2017-05-30 17:09:57 +03:00
|
|
|
import { _t } from '../../../languageHandler';
|
2017-10-29 10:43:52 +03:00
|
|
|
import SettingsStore from "../../../settings/SettingsStore";
|
2016-11-02 19:26:10 +03:00
|
|
|
|
2018-06-19 10:37:11 +03:00
|
|
|
export default class MImageBody extends React.Component {
|
2018-02-26 17:01:33 +03:00
|
|
|
static propTypes = {
|
2016-02-22 20:19:04 +03:00
|
|
|
/* the MatrixEvent to show */
|
2017-12-26 04:03:18 +03:00
|
|
|
mxEvent: PropTypes.object.isRequired,
|
2016-12-02 14:11:35 +03:00
|
|
|
|
|
|
|
/* called when the image has loaded */
|
2019-03-06 14:27:16 +03:00
|
|
|
onHeightChanged: PropTypes.func.isRequired,
|
2018-05-27 03:40:48 +03:00
|
|
|
|
|
|
|
/* the maximum image height to use */
|
|
|
|
maxImageHeight: PropTypes.number,
|
2018-06-19 10:37:11 +03:00
|
|
|
};
|
2015-11-27 18:02:32 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
static contextTypes = {
|
2018-02-06 20:50:53 +03:00
|
|
|
matrixClient: PropTypes.instanceOf(MatrixClient),
|
2018-06-19 10:37:11 +03:00
|
|
|
};
|
2018-02-06 20:50:53 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
2018-04-23 20:14:59 +03:00
|
|
|
this.onImageError = this.onImageError.bind(this);
|
2018-04-29 06:28:15 +03:00
|
|
|
this.onImageLoad = this.onImageLoad.bind(this);
|
2018-02-26 17:01:33 +03:00
|
|
|
this.onImageEnter = this.onImageEnter.bind(this);
|
|
|
|
this.onImageLeave = this.onImageLeave.bind(this);
|
|
|
|
this.onClientSync = this.onClientSync.bind(this);
|
|
|
|
this.onClick = this.onClick.bind(this);
|
|
|
|
this._isGif = this._isGif.bind(this);
|
|
|
|
|
|
|
|
this.state = {
|
2016-11-04 14:52:47 +03:00
|
|
|
decryptedUrl: null,
|
2016-11-15 14:22:39 +03:00
|
|
|
decryptedThumbnailUrl: null,
|
2016-12-02 17:21:07 +03:00
|
|
|
decryptedBlob: null,
|
2017-02-28 01:16:56 +03:00
|
|
|
error: null,
|
2018-02-06 20:50:53 +03:00
|
|
|
imgError: false,
|
2018-05-21 18:59:13 +03:00
|
|
|
imgLoaded: false,
|
2018-06-14 17:53:49 +03:00
|
|
|
loadedImageDimensions: null,
|
2018-05-21 18:59:13 +03:00
|
|
|
hover: false,
|
2019-09-28 06:08:31 +03:00
|
|
|
showImage: SettingsStore.getValue("showImages"),
|
2016-11-04 14:52:47 +03:00
|
|
|
};
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2016-11-04 14:52:47 +03:00
|
|
|
|
2018-02-06 20:50:53 +03:00
|
|
|
componentWillMount() {
|
|
|
|
this.unmounted = false;
|
|
|
|
this.context.matrixClient.on('sync', this.onClientSync);
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2018-02-06 20:50:53 +03:00
|
|
|
|
2018-04-29 05:17:55 +03:00
|
|
|
// FIXME: factor this out and aplpy it to MVideoBody and MAudioBody too!
|
2018-02-06 20:50:53 +03:00
|
|
|
onClientSync(syncState, prevState) {
|
|
|
|
if (this.unmounted) return;
|
|
|
|
// Consider the client reconnected if there is no error with syncing.
|
2018-08-30 16:39:48 +03:00
|
|
|
// This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
|
2018-02-06 20:50:53 +03:00
|
|
|
const reconnected = syncState !== "ERROR" && prevState !== syncState;
|
|
|
|
if (reconnected && this.state.imgError) {
|
|
|
|
// Load the image again
|
|
|
|
this.setState({
|
|
|
|
imgError: false,
|
|
|
|
});
|
|
|
|
}
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2016-11-04 14:52:47 +03:00
|
|
|
|
2019-09-28 06:08:31 +03:00
|
|
|
showImage() {
|
|
|
|
localStorage.setItem("mx_ShowImage_" + this.props.mxEvent.getId(), "true");
|
|
|
|
this.setState({showImage: true});
|
|
|
|
}
|
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
onClick(ev) {
|
2018-06-19 10:37:11 +03:00
|
|
|
if (ev.button === 0 && !ev.metaKey) {
|
2015-11-27 18:02:32 +03:00
|
|
|
ev.preventDefault();
|
2019-09-28 06:08:31 +03:00
|
|
|
if (!this.state.showImage) {
|
|
|
|
this.showImage();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2016-11-08 15:57:24 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
|
|
|
const httpUrl = this._getContentUrl();
|
|
|
|
const ImageView = sdk.getComponent("elements.ImageView");
|
|
|
|
const params = {
|
2015-11-27 18:02:32 +03:00
|
|
|
src: httpUrl,
|
2017-05-30 17:09:57 +03:00
|
|
|
name: content.body && content.body.length > 0 ? content.body : _t('Attachment'),
|
2017-02-28 01:16:56 +03:00
|
|
|
mxEvent: this.props.mxEvent,
|
2015-12-08 22:49:16 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
if (content.info) {
|
|
|
|
params.width = content.info.w;
|
|
|
|
params.height = content.info.h;
|
2016-04-07 20:58:50 +03:00
|
|
|
params.fileSize = content.info.size;
|
2015-12-08 22:49:16 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
|
2015-11-27 18:02:32 +03:00
|
|
|
}
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2015-11-27 18:02:32 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
_isGif() {
|
2016-11-08 15:57:24 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
2017-02-28 01:16:56 +03:00
|
|
|
return (
|
|
|
|
content &&
|
|
|
|
content.info &&
|
2017-03-02 16:39:56 +03:00
|
|
|
content.info.mimetype === "image/gif"
|
|
|
|
);
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2015-11-27 18:02:32 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
onImageEnter(e) {
|
2018-05-21 18:59:13 +03:00
|
|
|
this.setState({ hover: true });
|
|
|
|
|
2019-09-28 06:08:31 +03:00
|
|
|
if (!this.state.showImage || !this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
|
2015-11-27 18:02:32 +03:00
|
|
|
return;
|
|
|
|
}
|
2017-02-28 01:16:56 +03:00
|
|
|
const imgElement = e.target;
|
2016-11-04 21:40:57 +03:00
|
|
|
imgElement.src = this._getContentUrl();
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2015-11-27 18:02:32 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
onImageLeave(e) {
|
2018-05-21 18:59:13 +03:00
|
|
|
this.setState({ hover: false });
|
|
|
|
|
2019-09-28 06:08:31 +03:00
|
|
|
if (!this.state.showImage || !this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
|
2015-11-27 18:02:32 +03:00
|
|
|
return;
|
|
|
|
}
|
2017-02-28 01:16:56 +03:00
|
|
|
const imgElement = e.target;
|
2015-11-27 18:02:32 +03:00
|
|
|
imgElement.src = this._getThumbUrl();
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2015-11-27 18:02:32 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
onImageError() {
|
2018-02-06 20:50:53 +03:00
|
|
|
this.setState({
|
|
|
|
imgError: true,
|
|
|
|
});
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2018-02-06 20:50:53 +03:00
|
|
|
|
2018-04-29 06:28:15 +03:00
|
|
|
onImageLoad() {
|
2019-03-06 14:27:16 +03:00
|
|
|
this.props.onHeightChanged();
|
2018-06-14 17:44:55 +03:00
|
|
|
|
|
|
|
let loadedImageDimensions;
|
|
|
|
|
|
|
|
if (this.refs.image) {
|
|
|
|
const { naturalWidth, naturalHeight } = this.refs.image;
|
2019-04-08 15:57:39 +03:00
|
|
|
// this is only used as a fallback in case content.info.w/h is missing
|
2018-06-14 17:44:55 +03:00
|
|
|
loadedImageDimensions = { naturalWidth, naturalHeight };
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({ imgLoaded: true, loadedImageDimensions });
|
2018-04-29 06:28:15 +03:00
|
|
|
}
|
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
_getContentUrl() {
|
2016-11-08 14:42:20 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
2016-11-04 14:52:47 +03:00
|
|
|
if (content.file !== undefined) {
|
|
|
|
return this.state.decryptedUrl;
|
|
|
|
} else {
|
2018-02-06 20:50:53 +03:00
|
|
|
return this.context.matrixClient.mxcUrlToHttp(content.url);
|
2016-11-04 14:52:47 +03:00
|
|
|
}
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2016-11-04 14:52:47 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
_getThumbUrl() {
|
2019-01-20 18:35:16 +03:00
|
|
|
// FIXME: the dharma skin lets images grow as wide as you like, rather than capped to 800x600.
|
|
|
|
// So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
|
|
|
|
// thumbnail resolution will be unnecessarily reduced.
|
|
|
|
// custom timeline widths seems preferable.
|
2019-04-08 15:57:39 +03:00
|
|
|
const pixelRatio = window.devicePixelRatio;
|
2019-05-27 11:06:10 +03:00
|
|
|
const thumbWidth = Math.round(800 * pixelRatio);
|
|
|
|
const thumbHeight = Math.round(600 * pixelRatio);
|
2019-01-20 18:35:16 +03:00
|
|
|
|
2016-11-08 14:42:20 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
2016-11-04 14:52:47 +03:00
|
|
|
if (content.file !== undefined) {
|
2017-03-02 16:39:56 +03:00
|
|
|
// Don't use the thumbnail for clients wishing to autoplay gifs.
|
2016-11-15 14:22:39 +03:00
|
|
|
if (this.state.decryptedThumbnailUrl) {
|
|
|
|
return this.state.decryptedThumbnailUrl;
|
|
|
|
}
|
2016-11-04 14:52:47 +03:00
|
|
|
return this.state.decryptedUrl;
|
2018-06-19 10:37:11 +03:00
|
|
|
} else if (content.info && content.info.mimetype === "image/svg+xml" && content.info.thumbnail_url) {
|
2019-01-20 18:35:16 +03:00
|
|
|
// special case to return clientside sender-generated thumbnails for SVGs, if any,
|
2018-04-29 05:58:17 +03:00
|
|
|
// given we deliberately don't thumbnail them serverside to prevent
|
|
|
|
// billion lol attacks and similar
|
|
|
|
return this.context.matrixClient.mxcUrlToHttp(
|
2019-01-14 20:10:20 +03:00
|
|
|
content.info.thumbnail_url,
|
2019-04-08 15:57:39 +03:00
|
|
|
thumbWidth,
|
|
|
|
thumbHeight,
|
2018-04-29 05:58:17 +03:00
|
|
|
);
|
2018-04-29 06:31:30 +03:00
|
|
|
} else {
|
2019-04-08 15:57:39 +03:00
|
|
|
// we try to download the correct resolution
|
|
|
|
// for hi-res images (like retina screenshots).
|
|
|
|
// synapse only supports 800x600 thumbnails for now though,
|
|
|
|
// so we'll need to download the original image for this to work
|
|
|
|
// well for now. First, let's try a few cases that let us avoid
|
2019-05-14 15:55:38 +03:00
|
|
|
// downloading the original, including:
|
|
|
|
// - When displaying a GIF, we always want to thumbnail so that we can
|
|
|
|
// properly respect the user's GIF autoplay setting (which relies on
|
|
|
|
// thumbnailing to produce the static preview image)
|
|
|
|
// - On a low DPI device, always thumbnail to save bandwidth
|
|
|
|
// - If there's no sizing info in the event, default to thumbnail
|
2019-05-13 20:00:52 +03:00
|
|
|
const info = content.info;
|
|
|
|
if (
|
2019-05-13 20:28:57 +03:00
|
|
|
this._isGif() ||
|
2019-05-13 20:00:52 +03:00
|
|
|
pixelRatio === 1.0 ||
|
|
|
|
(!info || !info.w || !info.h || !info.size)
|
|
|
|
) {
|
2019-04-08 15:57:39 +03:00
|
|
|
return this.context.matrixClient.mxcUrlToHttp(content.url, thumbWidth, thumbHeight);
|
|
|
|
} else {
|
2019-01-20 18:35:16 +03:00
|
|
|
// we should only request thumbnails if the image is bigger than 800x600
|
|
|
|
// (or 1600x1200 on retina) otherwise the image in the timeline will just
|
|
|
|
// end up resampled and de-retina'd for no good reason.
|
|
|
|
// Ideally the server would pregen 1600x1200 thumbnails in order to provide retina
|
|
|
|
// thumbnails, but we don't do this currently in synapse for fear of disk space.
|
|
|
|
// As a compromise, let's switch to non-retina thumbnails only if the original
|
|
|
|
// image is both physically too large and going to be massive to load in the
|
|
|
|
// timeline (e.g. >1MB).
|
|
|
|
|
2019-04-08 15:57:39 +03:00
|
|
|
const isLargerThanThumbnail = (
|
2019-05-13 20:00:52 +03:00
|
|
|
info.w > thumbWidth ||
|
|
|
|
info.h > thumbHeight
|
2019-04-08 15:57:39 +03:00
|
|
|
);
|
2019-05-13 20:00:52 +03:00
|
|
|
const isLargeFileSize = info.size > 1*1024*1024;
|
2019-04-08 15:57:39 +03:00
|
|
|
|
|
|
|
if (isLargeFileSize && isLargerThanThumbnail) {
|
2019-01-20 18:35:16 +03:00
|
|
|
// image is too large physically and bytewise to clutter our timeline so
|
|
|
|
// we ask for a thumbnail, despite knowing that it will be max 800x600
|
|
|
|
// despite us being retina (as synapse doesn't do 1600x1200 thumbs yet).
|
|
|
|
return this.context.matrixClient.mxcUrlToHttp(
|
|
|
|
content.url,
|
2019-04-08 15:57:39 +03:00
|
|
|
thumbWidth,
|
|
|
|
thumbHeight,
|
2019-01-20 18:35:16 +03:00
|
|
|
);
|
2019-04-08 15:57:39 +03:00
|
|
|
} else {
|
|
|
|
// download the original image otherwise, so we can scale it client side
|
|
|
|
// to take pixelRatio into account.
|
|
|
|
// ( no width/height means we want the original image)
|
2019-01-20 18:35:16 +03:00
|
|
|
return this.context.matrixClient.mxcUrlToHttp(
|
|
|
|
content.url,
|
2019-04-08 15:57:39 +03:00
|
|
|
);
|
2019-01-20 18:35:16 +03:00
|
|
|
}
|
|
|
|
}
|
2016-11-04 14:52:47 +03:00
|
|
|
}
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2015-11-27 18:02:32 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
componentDidMount() {
|
2016-11-08 14:42:20 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
2016-11-04 14:52:47 +03:00
|
|
|
if (content.file !== undefined && this.state.decryptedUrl === null) {
|
2017-07-12 16:02:00 +03:00
|
|
|
let thumbnailPromise = Promise.resolve(null);
|
2018-06-14 16:19:30 +03:00
|
|
|
if (content.info && content.info.thumbnail_file) {
|
2016-11-15 14:22:39 +03:00
|
|
|
thumbnailPromise = decryptFile(
|
2017-02-28 01:16:56 +03:00
|
|
|
content.info.thumbnail_file,
|
2017-01-20 17:22:27 +03:00
|
|
|
).then(function(blob) {
|
2018-04-29 05:07:31 +03:00
|
|
|
return URL.createObjectURL(blob);
|
2016-12-02 17:21:07 +03:00
|
|
|
});
|
2016-11-15 14:22:39 +03:00
|
|
|
}
|
2017-02-28 01:16:56 +03:00
|
|
|
let decryptedBlob;
|
2016-11-15 14:22:39 +03:00
|
|
|
thumbnailPromise.then((thumbnailUrl) => {
|
2016-12-02 17:21:07 +03:00
|
|
|
return decryptFile(content.file).then(function(blob) {
|
|
|
|
decryptedBlob = blob;
|
2018-04-29 05:07:31 +03:00
|
|
|
return URL.createObjectURL(blob);
|
2016-12-02 17:21:07 +03:00
|
|
|
}).then((contentUrl) => {
|
2019-08-09 16:51:07 +03:00
|
|
|
if (this.unmounted) return;
|
2016-11-15 14:22:39 +03:00
|
|
|
this.setState({
|
|
|
|
decryptedUrl: contentUrl,
|
|
|
|
decryptedThumbnailUrl: thumbnailUrl,
|
2016-12-02 17:21:07 +03:00
|
|
|
decryptedBlob: decryptedBlob,
|
2016-11-15 14:22:39 +03:00
|
|
|
});
|
2016-11-04 18:39:39 +03:00
|
|
|
});
|
2016-11-15 14:22:39 +03:00
|
|
|
}).catch((err) => {
|
2019-08-09 16:51:07 +03:00
|
|
|
if (this.unmounted) return;
|
2016-11-18 23:08:26 +03:00
|
|
|
console.warn("Unable to decrypt attachment: ", err);
|
2016-11-04 14:52:47 +03:00
|
|
|
// Set a placeholder image when we can't decrypt the image.
|
2016-11-18 23:08:26 +03:00
|
|
|
this.setState({
|
|
|
|
error: err,
|
|
|
|
});
|
2019-11-12 14:51:23 +03:00
|
|
|
}).then();
|
2016-11-04 14:52:47 +03:00
|
|
|
}
|
2019-09-28 06:08:31 +03:00
|
|
|
|
|
|
|
// Remember that the user wanted to show this particular image
|
|
|
|
if (!this.state.showImage && localStorage.getItem("mx_ShowImage_" + this.props.mxEvent.getId()) === "true") {
|
|
|
|
this.setState({showImage: true});
|
|
|
|
}
|
|
|
|
|
2018-03-08 15:31:01 +03:00
|
|
|
this._afterComponentDidMount();
|
|
|
|
}
|
|
|
|
|
|
|
|
// To be overridden by subclasses (e.g. MStickerBody) for further
|
|
|
|
// initialisation after componentDidMount
|
|
|
|
_afterComponentDidMount() {
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2016-11-04 14:52:47 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
componentWillUnmount() {
|
2018-02-06 20:50:53 +03:00
|
|
|
this.unmounted = true;
|
|
|
|
this.context.matrixClient.removeListener('sync', this.onClientSync);
|
2018-03-10 00:12:56 +03:00
|
|
|
this._afterComponentWillUnmount();
|
2018-04-29 05:17:55 +03:00
|
|
|
|
|
|
|
if (this.state.decryptedUrl) {
|
|
|
|
URL.revokeObjectURL(this.state.decryptedUrl);
|
|
|
|
}
|
|
|
|
if (this.state.decryptedThumbnailUrl) {
|
|
|
|
URL.revokeObjectURL(this.state.decryptedThumbnailUrl);
|
|
|
|
}
|
2018-03-10 00:12:56 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
// To be overridden by subclasses (e.g. MStickerBody) for further
|
|
|
|
// cleanup after componentWillUnmount
|
|
|
|
_afterComponentWillUnmount() {
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
2016-03-24 03:13:32 +03:00
|
|
|
|
2018-02-26 17:01:33 +03:00
|
|
|
_messageContent(contentUrl, thumbUrl, content) {
|
2018-06-14 17:44:55 +03:00
|
|
|
let infoWidth;
|
|
|
|
let infoHeight;
|
2018-06-14 16:19:30 +03:00
|
|
|
|
2018-06-14 17:44:55 +03:00
|
|
|
if (content && content.info && content.info.w && content.info.h) {
|
2018-06-14 16:19:30 +03:00
|
|
|
infoWidth = content.info.w;
|
2018-06-14 17:44:55 +03:00
|
|
|
infoHeight = content.info.h;
|
|
|
|
} else {
|
|
|
|
// Whilst the image loads, display nothing.
|
|
|
|
//
|
|
|
|
// Once loaded, use the loaded image dimensions stored in `loadedImageDimensions`.
|
|
|
|
//
|
|
|
|
// By doing this, the image "pops" into the timeline, but is still restricted
|
|
|
|
// by the same width and height logic below.
|
|
|
|
if (!this.state.loadedImageDimensions) {
|
2019-10-02 21:46:21 +03:00
|
|
|
let imageElement;
|
2019-09-28 06:08:31 +03:00
|
|
|
if (!this.state.showImage) {
|
2019-10-02 02:00:01 +03:00
|
|
|
imageElement = <HiddenImagePlaceholder />;
|
2019-10-02 21:46:21 +03:00
|
|
|
} else {
|
|
|
|
imageElement = (
|
|
|
|
<img style={{display: 'none'}} src={thumbUrl} ref="image"
|
|
|
|
alt={content.body}
|
|
|
|
onError={this.onImageError}
|
|
|
|
onLoad={this.onImageLoad}
|
|
|
|
/>
|
|
|
|
);
|
2019-09-28 06:08:31 +03:00
|
|
|
}
|
|
|
|
return this.wrapImage(contentUrl, imageElement);
|
2018-06-14 17:44:55 +03:00
|
|
|
}
|
|
|
|
infoWidth = this.state.loadedImageDimensions.naturalWidth;
|
|
|
|
infoHeight = this.state.loadedImageDimensions.naturalHeight;
|
2018-06-14 16:19:30 +03:00
|
|
|
}
|
|
|
|
|
2018-05-18 12:27:22 +03:00
|
|
|
// The maximum height of the thumbnail as it is rendered as an <img>
|
2018-06-14 16:19:30 +03:00
|
|
|
const maxHeight = Math.min(this.props.maxImageHeight || 600, infoHeight);
|
2018-05-22 18:09:54 +03:00
|
|
|
// The maximum width of the thumbnail, as dictated by its natural
|
2018-05-18 12:27:22 +03:00
|
|
|
// maximum height.
|
2018-06-14 16:19:30 +03:00
|
|
|
const maxWidth = infoWidth * maxHeight / infoHeight;
|
2018-05-18 11:47:49 +03:00
|
|
|
|
|
|
|
let img = null;
|
2018-05-21 18:59:13 +03:00
|
|
|
let placeholder = null;
|
2018-10-24 21:06:48 +03:00
|
|
|
let gifLabel = null;
|
2018-05-21 18:59:13 +03:00
|
|
|
|
2018-05-18 11:47:49 +03:00
|
|
|
// e2e image hasn't been decrypted yet
|
|
|
|
if (content.file !== undefined && this.state.decryptedUrl === null) {
|
2019-01-11 04:37:28 +03:00
|
|
|
placeholder = <img
|
|
|
|
src={require("../../../../res/img/spinner.gif")}
|
|
|
|
alt={content.body}
|
|
|
|
width="32"
|
|
|
|
height="32"
|
|
|
|
/>;
|
2018-05-21 18:59:13 +03:00
|
|
|
} else if (!this.state.imgLoaded) {
|
|
|
|
// Deliberately, getSpinner is left unimplemented here, MStickerBody overides
|
|
|
|
placeholder = this.getPlaceholder();
|
|
|
|
}
|
|
|
|
|
2019-10-02 02:00:01 +03:00
|
|
|
let showPlaceholder = Boolean(placeholder);
|
2018-05-21 18:59:13 +03:00
|
|
|
|
|
|
|
if (thumbUrl && !this.state.imgError) {
|
2018-05-18 12:27:22 +03:00
|
|
|
// Restrict the width of the thumbnail here, otherwise it will fill the container
|
|
|
|
// which has the same width as the timeline
|
2018-10-22 23:03:39 +03:00
|
|
|
// mx_MImageBody_thumbnail resizes img to exactly container size
|
2019-09-28 06:08:31 +03:00
|
|
|
img = (
|
|
|
|
<img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
|
|
|
|
style={{ maxWidth: maxWidth + "px" }}
|
|
|
|
alt={content.body}
|
|
|
|
onError={this.onImageError}
|
|
|
|
onLoad={this.onImageLoad}
|
|
|
|
onMouseEnter={this.onImageEnter}
|
|
|
|
onMouseLeave={this.onImageLeave} />
|
|
|
|
);
|
2019-10-02 02:00:01 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.state.showImage) {
|
|
|
|
img = <HiddenImagePlaceholder style={{ maxWidth: maxWidth + "px" }} />;
|
|
|
|
showPlaceholder = false; // because we're hiding the image, so don't show the sticker icon.
|
2018-05-18 11:47:49 +03:00
|
|
|
}
|
2018-05-17 20:15:34 +03:00
|
|
|
|
2018-10-22 22:57:58 +03:00
|
|
|
if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
|
2018-10-24 21:06:48 +03:00
|
|
|
gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
|
2018-10-22 22:57:58 +03:00
|
|
|
}
|
|
|
|
|
2018-05-21 18:59:13 +03:00
|
|
|
const thumbnail = (
|
2018-06-19 10:37:11 +03:00
|
|
|
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
|
2018-05-21 18:59:13 +03:00
|
|
|
{ /* Calculate aspect ratio, using %padding will size _container correctly */ }
|
2018-06-19 10:37:11 +03:00
|
|
|
<div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
|
2018-05-22 12:43:16 +03:00
|
|
|
{ showPlaceholder &&
|
|
|
|
<div className="mx_MImageBody_thumbnail" style={{
|
|
|
|
// Constrain width here so that spinner appears central to the loaded thumbnail
|
2018-06-19 10:37:11 +03:00
|
|
|
maxWidth: infoWidth + "px",
|
2018-05-22 12:43:16 +03:00
|
|
|
}}>
|
|
|
|
<div className="mx_MImageBody_thumbnail_spinner">
|
|
|
|
{ placeholder }
|
|
|
|
</div>
|
2018-05-21 18:59:13 +03:00
|
|
|
</div>
|
2018-05-22 12:43:16 +03:00
|
|
|
}
|
2018-05-21 18:59:13 +03:00
|
|
|
|
|
|
|
<div style={{display: !showPlaceholder ? undefined : 'none'}}>
|
2018-05-18 11:47:49 +03:00
|
|
|
{ img }
|
2018-10-24 21:06:48 +03:00
|
|
|
{ gifLabel }
|
2018-05-17 20:15:34 +03:00
|
|
|
</div>
|
2018-04-29 05:58:17 +03:00
|
|
|
|
2018-05-21 18:59:13 +03:00
|
|
|
{ this.state.hover && this.getTooltip() }
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
return this.wrapImage(contentUrl, thumbnail);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Overidden by MStickerBody
|
|
|
|
wrapImage(contentUrl, children) {
|
|
|
|
return <a href={contentUrl} onClick={this.onClick}>
|
|
|
|
{children}
|
|
|
|
</a>;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Overidden by MStickerBody
|
|
|
|
getPlaceholder() {
|
|
|
|
// MImageBody doesn't show a placeholder whilst the image loads, (but it could do)
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Overidden by MStickerBody
|
|
|
|
getTooltip() {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Overidden by MStickerBody
|
|
|
|
getFileBody() {
|
|
|
|
return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />;
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2016-11-08 15:57:24 +03:00
|
|
|
const content = this.props.mxEvent.getContent();
|
2016-11-11 14:59:08 +03:00
|
|
|
|
2016-11-18 23:08:26 +03:00
|
|
|
if (this.state.error !== null) {
|
|
|
|
return (
|
|
|
|
<span className="mx_MImageBody" ref="body">
|
2019-01-11 04:37:28 +03:00
|
|
|
<img src={require("../../../../res/img/warning.svg")} width="16" height="16" />
|
2017-10-11 19:56:17 +03:00
|
|
|
{ _t("Error decrypting image") }
|
2016-11-18 23:08:26 +03:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-11-08 15:57:24 +03:00
|
|
|
const contentUrl = this._getContentUrl();
|
2017-02-28 01:16:56 +03:00
|
|
|
let thumbUrl;
|
2017-10-29 10:43:52 +03:00
|
|
|
if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
|
2017-02-28 01:16:56 +03:00
|
|
|
thumbUrl = contentUrl;
|
|
|
|
} else {
|
|
|
|
thumbUrl = this._getThumbUrl();
|
|
|
|
}
|
2016-11-04 14:52:47 +03:00
|
|
|
|
2018-05-21 18:59:13 +03:00
|
|
|
const thumbnail = this._messageContent(contentUrl, thumbUrl, content);
|
|
|
|
const fileBody = this.getFileBody();
|
|
|
|
|
|
|
|
return <span className="mx_MImageBody" ref="body">
|
|
|
|
{ thumbnail }
|
|
|
|
{ fileBody }
|
|
|
|
</span>;
|
2018-02-26 17:01:33 +03:00
|
|
|
}
|
|
|
|
}
|
2019-10-02 02:00:01 +03:00
|
|
|
|
|
|
|
export class HiddenImagePlaceholder extends React.PureComponent {
|
|
|
|
static propTypes = {
|
|
|
|
hover: PropTypes.bool,
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let className = 'mx_HiddenImagePlaceholder';
|
|
|
|
if (this.props.hover) className += ' mx_HiddenImagePlaceholder_hover';
|
|
|
|
return (
|
|
|
|
<div className={className}>
|
|
|
|
<div className='mx_HiddenImagePlaceholder_button'>
|
2019-10-02 21:52:07 +03:00
|
|
|
<span className='mx_HiddenImagePlaceholder_eye' />
|
2019-10-02 02:00:01 +03:00
|
|
|
<span>{_t("Show image")}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|