Merge branch 'release-v0.12.4' into develop

src/components/views/elements/AppTile.js

@@ -364,9 +364,7 @@ export default class AppTile extends React.Component {
         if (!this.widgetMessaging) {
             this._onInitialLoad();
         }
-        if (this._exposeWidgetMessaging) {
-            this._exposeWidgetMessaging(this.widgetMessaging);
-        }
+        this.setState({loading: false});
     }
 
     /**
@@ -404,8 +402,6 @@ export default class AppTile extends React.Component {
         }).catch((err) => {
             console.log(`Failed to get capabilities for widget type ${this.props.type}`, this.props.id, err);
         });
-
-        this.setState({loading: false});
     }
 
     _onWidgetAction(payload) {

src/components/views/messages/MStickerBody.js

@@ -107,6 +107,16 @@ export default class MStickerBody extends MImageBody {
             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.
+        // XXX: This will be clobberred when we run fixupHeight(), but we need to do it
+        // here otherwise the stickers are momentarily displayed at the pixel size.
+        const imageStyle = {
+            height: content.info.h,
+            // leave the browser the calculate the width automatically
+        };
+
         placeholderSize = placeholderSize + 'px';
 
         // Body 'ref' required by MImageBody
@@ -132,6 +142,7 @@ export default class MStickerBody extends MImageBody {
                     <img
                         className={'mx_MStickerBody_image ' + this.state.imageClasses}
                         src={contentUrl}
+                        style={imageStyle}
                         ref='image'
                         alt={content.body}
                         onLoad={this._onImageLoad}

src/components/views/rooms/Stickerpicker.js

@@ -34,6 +34,7 @@ export default class Stickerpicker extends React.Component {
         this._onHideStickersClick = this._onHideStickersClick.bind(this);
         this._launchManageIntegrations = this._launchManageIntegrations.bind(this);
         this._removeStickerpickerWidgets = this._removeStickerpickerWidgets.bind(this);
+        this._updateWidget = this._updateWidget.bind(this);
         this._onWidgetAction = this._onWidgetAction.bind(this);
         this._onResize = this._onResize.bind(this);
         this._onFinished = this._onFinished.bind(this);
@@ -90,11 +91,12 @@ export default class Stickerpicker extends React.Component {
         if (!this.state.imError) {
             this.dispatcherRef = dis.register(this._onWidgetAction);
         }
-        const stickerpickerWidget = Widgets.getStickerpickerWidgets()[0];
-        this.setState({
-            stickerpickerWidget,
-            widgetId: stickerpickerWidget ? stickerpickerWidget.id : null,
-        });
+
+        // Track updates to widget state in account data
+        MatrixClientPeg.get().on('accountData', this._updateWidget);
+
+        // Initialise widget state from current account data
+        this._updateWidget();
     }
 
     componentWillUnmount() {
@@ -116,6 +118,14 @@ export default class Stickerpicker extends React.Component {
         });
     }
 
+    _updateWidget() {
+        const stickerpickerWidget = Widgets.getStickerpickerWidgets()[0];
+        this.setState({
+            stickerpickerWidget,
+            widgetId: stickerpickerWidget ? stickerpickerWidget.id : null,
+        });
+    }
+
     _onWidgetAction(payload) {
         if (payload.action === "user_widget_updated") {
             this.forceUpdate();