When stickerpicker made visible, send visibility over postMessage

src/components/views/elements/AppTile.js

@@ -167,6 +167,19 @@ export default class AppTile extends React.Component {
 
         // Widget action listeners
         this.dispatcherRef = dis.register(this._onWidgetAction);
+
+    }
+
+    componentDidUpdate() {
+        // Allow parents to access widget messaging
+        if (this.props.collectWidgetMessaging) {
+            this.props.collectWidgetMessaging(new Promise((resolve) => {
+                if (this.widgetMessaging) resolve(this.widgetMessaging);
+
+                // Expect this to be resolved later
+                this._exposeWidgetMessaging = resolve;
+            }));
+        }
     }
 
     componentWillUnmount() {
@@ -352,6 +365,9 @@ export default class AppTile extends React.Component {
         if (!this.widgetMessaging) {
             this._onInitialLoad();
         }
+        if (this._exposeWidgetMessaging) {
+            this._exposeWidgetMessaging(this.widgetMessaging);
+        }
     }
 
     /**
@@ -390,9 +406,6 @@ export default class AppTile extends React.Component {
             console.log(`Failed to get capabilities for widget type ${this.props.type}`, this.props.id, err);
         });
 
-        // Allow parents to access widget messaging
-        if (this.props.collectWidgetMessaging) this.props.collectWidgetMessaging(this.widgetMessaging);
-
         this.setState({loading: false});
     }
 

src/components/views/rooms/Stickerpicker.js

@@ -38,6 +38,8 @@ export default class Stickerpicker extends React.Component {
         this._onResize = this._onResize.bind(this);
         this._onFinished = this._onFinished.bind(this);
 
+        this._collectWidgetMessaging = this._collectWidgetMessaging.bind(this);
+
         this.popoverWidth = 300;
         this.popoverHeight = 300;
 
@@ -102,6 +104,14 @@ export default class Stickerpicker extends React.Component {
         }
     }
 
+    componentDidUpdate(prevProps, prevState) {
+        if (this._appWidgetMessaging &&
+            prevState.showStickers !== this.state.showStickers
+        ) {
+            this._appWidgetMessaging.sendVisibility(this.state.showStickers);
+        }
+    }
+
     _imError(errorMsg, e) {
         console.error(errorMsg, e);
         this.setState({
@@ -137,6 +147,12 @@ export default class Stickerpicker extends React.Component {
         );
     }
 
+    async _collectWidgetMessaging(prom) {
+        const widgetMessaging = await prom;
+        this._appWidgetMessaging = widgetMessaging;
+        this._appWidgetMessaging.sendVisibility(true);
+    }
+
     _getStickerpickerContent() {
         // Handle Integration Manager errors
         if (this.state._imError) {
@@ -173,6 +189,7 @@ export default class Stickerpicker extends React.Component {
                     >
                     <PersistedElement>
                         <AppTile
+                            collectWidgetMessaging={this._collectWidgetMessaging}
                             id={stickerpickerWidget.id}
                             url={stickerpickerWidget.content.url}
                             name={stickerpickerWidget.content.name}
@@ -192,7 +209,7 @@ export default class Stickerpicker extends React.Component {
                             showPopout={false}
                             onMinimiseClick={this._onHideStickersClick}
                             handleMinimisePointerEvents={true}
-                            whitelistCapabilities={['m.sticker']}
+                            whitelistCapabilities={['m.sticker', 'visibility']}
                         />
                     </PersistedElement>
                     </div>