diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 55d5a18a25..ceede48554 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -192,6 +192,12 @@ export default class extends React.Component {
});
}).done();
}
+ this._afterComponentDidMount();
+ }
+
+ // To be overridden by subclasses (e.g. MStickerBody) for further
+ // initialisation after componentDidMount
+ _afterComponentDidMount() {
}
componentWillUnmount() {
diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js
index af39b1bd2d..ad6326a6a2 100644
--- a/src/components/views/messages/MStickerBody.js
+++ b/src/components/views/messages/MStickerBody.js
@@ -16,8 +16,9 @@ limitations under the License.
'use strict';
-import MImageBody from "./MImageBody";
+import MImageBody from './MImageBody';
import sdk from '../../../index';
+import TintableSVG from '../elements/TintableSvg';
export default class MStickerBody extends MImageBody {
displayName: 'MStickerBody'
@@ -27,6 +28,7 @@ export default class MStickerBody extends MImageBody {
this._onMouseEnter = this._onMouseEnter.bind(this);
this._onMouseLeave = this._onMouseLeave.bind(this);
+ this._onImageLoad = this._onImageLoad.bind(this);
}
_onMouseEnter() {
@@ -37,6 +39,36 @@ export default class MStickerBody extends MImageBody {
this.setState({showTooltip: false});
}
+ _onImageLoad() {
+ this.setState({
+ placeholderClasses: 'mx_MStickerBody_placeholder_invisible',
+ });
+ setTimeout(() => {
+ this.setState({
+ placeholderVisible: false,
+ thumbnailClasses: 'mx_MStickerBody_thumbnail_visible',
+ });
+ }, 500);
+ }
+
+ _afterComponentDidMount() {
+ if (this.refs.image.complete) {
+ // Image already loaded
+ this.setState({
+ placeholderVisible: false,
+ placeholderClasses: '.mx_MStickerBody_placeholder_invisible',
+ thumbnailClasses: 'mx_MStickerBody_thumbnail_visible',
+ });
+ } else {
+ // Image not already loaded
+ this.setState({
+ placeholderVisible: true,
+ placeholderClasses: '',
+ thumbnailClasses: '',
+ });
+ }
+ }
+
_messageContent(contentUrl, thumbUrl, content) {
let tooltip;
const tooltipBody = (
@@ -45,18 +77,53 @@ export default class MStickerBody extends MImageBody {
this.props.mxEvent.getContent().body) ?
this.props.mxEvent.getContent().body : null;
if (this.state.showTooltip && tooltipBody) {
- const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+ const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
tooltip = ;
}
+ const gutterSize = 0;
+ let placeholderSize = 75;
+ let placeholderFixupHeight = '100px';
+ let placeholderTop = 0;
+ let placeholderLeft = 0;
+
+ if (content.info) {
+ placeholderTop = Math.floor((content.info.h/2) - (placeholderSize/2)) + 'px';
+ placeholderLeft = Math.floor((content.info.w/2) - (placeholderSize/2) + gutterSize) + 'px';
+ placeholderFixupHeight = content.info.h + 'px';
+ }
+
+ placeholderSize = placeholderSize + 'px';
+ console.warn('placeholder classes', this.state.placeholderClasses);
+
return (
-
-
-
+
+
+
+
+
+