- { /* Calculate aspect ratio, using %padding will size _container correctly */ }
-
- { /* mx_MImageBody_thumbnail resizes img to exactly container size */ }
+ const thumbnail = (
+
+ { /* Calculate aspect ratio, using %padding will size _container correctly */ }
+
+
+
+
+
{ img }
- : null;
- return (
-
- { thumbnail }
-
-
- );
+ { this.state.hover && this.getTooltip() }
+
+ );
+
+ return this.wrapImage(contentUrl, thumbnail);
+ }
+
+ // Overidden by MStickerBody
+ wrapImage(contentUrl, children) {
+ return
+ {children}
+ ;
+ }
+
+ // 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
;
}
render() {
@@ -284,7 +330,6 @@ export default class extends React.Component {
);
}
-
const contentUrl = this._getContentUrl();
let thumbUrl;
if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
@@ -293,6 +338,12 @@ export default class extends React.Component {
thumbUrl = this._getThumbUrl();
}
- return this._messageContent(contentUrl, thumbUrl, content);
+ const thumbnail = this._messageContent(contentUrl, thumbUrl, content);
+ const fileBody = this.getFileBody();
+
+ return
+ { thumbnail }
+ { fileBody }
+ ;
}
}
diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js
index cdb60f0074..d9ed668e42 100644
--- a/src/components/views/messages/MStickerBody.js
+++ b/src/components/views/messages/MStickerBody.js
@@ -18,141 +18,39 @@ limitations under the License.
import MImageBody from './MImageBody';
import sdk from '../../../index';
-import TintableSVG from '../elements/TintableSvg';
export default class MStickerBody extends MImageBody {
- displayName: 'MStickerBody'
-
- constructor(props) {
- super(props);
-
- this._onMouseEnter = this._onMouseEnter.bind(this);
- this._onMouseLeave = this._onMouseLeave.bind(this);
- this._onImageLoad = this._onImageLoad.bind(this);
- }
-
- _onMouseEnter() {
- this.setState({showTooltip: true});
- }
-
- _onMouseLeave() {
- this.setState({showTooltip: false});
- }
-
- _onImageLoad() {
- this.setState({
- placeholderClasses: 'mx_MStickerBody_placeholder_invisible',
- });
- const hidePlaceholderTimer = setTimeout(() => {
- this.setState({
- placeholderVisible: false,
- imageClasses: 'mx_MStickerBody_image_visible',
- });
- }, 500);
- this.setState({hidePlaceholderTimer});
- if (this.props.onWidgetLoad) {
- this.props.onWidgetLoad();
- }
- }
-
- _afterComponentDidMount() {
- if (this.refs.image.complete) {
- // Image already loaded
- this.setState({
- placeholderVisible: false,
- placeholderClasses: '.mx_MStickerBody_placeholder_invisible',
- imageClasses: 'mx_MStickerBody_image_visible',
- });
- } else {
- // Image not already loaded
- this.setState({
- placeholderVisible: true,
- placeholderClasses: '',
- imageClasses: '',
- });
- }
- }
-
- _afterComponentWillUnmount() {
- if (this.state.hidePlaceholderTimer) {
- clearTimeout(this.state.hidePlaceholderTimer);
- this.setState({hidePlaceholderTimer: null});
- }
- }
-
- _messageContent(contentUrl, thumbUrl, content) {
- let tooltip;
- const tooltipBody = (
- this.props.mxEvent &&
- this.props.mxEvent.getContent() &&
- this.props.mxEvent.getContent().body) ?
- this.props.mxEvent.getContent().body : null;
- if (this.state.showTooltip && tooltipBody) {
- 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';
- }
-
- // The pixel size of sticker images is generally larger than their intended display
- // size so they render at native reolution on HiDPI displays. We therefore need to
- // explicity set the size so they render at the intended size.
- const imageStyle = {
- height: content.info.h,
- // leave the browser the calculate the width automatically
- };
-
- placeholderSize = placeholderSize + 'px';
-
- // Body 'ref' required by MImageBody
- return (
-
-
- { this.state.placeholderVisible &&
-
-
-
}
-
- { tooltip }
-
- );
- }
-
// Empty to prevent default behaviour of MImageBody
onClick() {
}
+
+ // MStickerBody doesn't need a wrapping `
`, but it does need extra padding
+ // which is added by mx_MStickerBody_wrapper
+ wrapImage(contentUrl, children) {
+ return { children }
;
+ }
+
+ // Placeholder to show in place of the sticker image if
+ // img onLoad hasn't fired yet.
+ getPlaceholder() {
+ const TintableSVG = sdk.getComponent('elements.TintableSvg');
+ return ;
+ }
+
+ // Tooltip to show on mouse over
+ getTooltip() {
+ const content = this.props.mxEvent && this.props.mxEvent.getContent();
+
+ if (!content || !content.body || !content.info || !content.info.w) return null;
+
+ const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
+ return
+
+
;
+ }
+
+ // Don't show "Download this_file.png ..."
+ getFileBody() {
+ return null;
+ }
}
-