Merge pull request #2053 from matrix-org/dbkr/jitsi_always_on_screen

Implement always-on-screen capability for widgets

src/components/views/rooms/AppsDrawer.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -214,24 +215,30 @@ module.exports = React.createClass({
     render: function() {
         const enableScreenshots = SettingsStore.getValue("enableWidgetScreenshots", this.props.room.room_id);
 
-        const apps = this.state.apps.map(
-            (app, index, arr) => {
-                return (<AppTile
-                    key={app.id}
-                    id={app.id}
-                    url={app.url}
-                    name={app.name}
-                    type={app.type}
-                    fullWidth={arr.length<2 ? true : false}
-                    room={this.props.room}
-                    userId={this.props.userId}
-                    show={this.props.showApps}
-                    creatorUserId={app.creatorUserId}
-                    widgetPageTitle={(app.data && app.data.title) ? app.data.title : ''}
-                    waitForIframeLoad={app.waitForIframeLoad}
-                    whitelistCapabilities={enableScreenshots ? ["m.capability.screenshot"] : []}
-                />);
-            });
+        const apps = this.state.apps.map((app, index, arr) => {
+            const capWhitelist = enableScreenshots ? ["m.capability.screenshot"] : [];
+
+            // Obviously anyone that can add a widget can claim it's a jitsi widget,
+            // so this doesn't really offer much over the set of domains we load
+            // widgets from at all, but it probably makes sense for sanity.
+            if (app.type == 'jitsi') capWhitelist.push("m.always_on_screen");
+
+            return (<AppTile
+                key={app.id}
+                id={app.id}
+                url={app.url}
+                name={app.name}
+                type={app.type}
+                fullWidth={arr.length<2 ? true : false}
+                room={this.props.room}
+                userId={this.props.userId}
+                show={this.props.showApps}
+                creatorUserId={app.creatorUserId}
+                widgetPageTitle={(app.data && app.data.title) ? app.data.title : ''}
+                waitForIframeLoad={app.waitForIframeLoad}
+                whitelistCapabilities={capWhitelist}
+            />);
+        });
 
         let addWidget;
         if (this.props.showApps &&

src/components/views/rooms/EventTile.js

@@ -702,7 +702,6 @@ module.exports = withMatrixClient(React.createClass({
                         <div className="mx_EventTile_msgOption">
                             { readAvatars }
                         </div>
-                        { avatar }
                         { sender }
                         <div className="mx_EventTile_line">
                             <a href={permalink} onClick={this.onPermalinkClicked}>
@@ -719,6 +718,12 @@ module.exports = withMatrixClient(React.createClass({
                             { keyRequestInfo }
                             { editButton }
                         </div>
+                        {
+                            // The avatar goes after the event tile as it's absolutly positioned to be over the
+                            // event tile line, so needs to be later in the DOM so it appears on top (this avoids
+                            // the need for further z-indexing chaos)
+                        }
+                        { avatar }
                     </div>
                 );
             }

src/components/views/rooms/Stickerpicker.js

@@ -24,6 +24,7 @@ import ScalarAuthClient from '../../../ScalarAuthClient';
 import dis from '../../../dispatcher';
 import AccessibleButton from '../elements/AccessibleButton';
 import WidgetUtils from '../../../utils/WidgetUtils';
+import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 
 const widgetType = 'm.stickerpicker';
 
@@ -43,8 +44,6 @@ 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;
 
@@ -166,17 +165,10 @@ export default class Stickerpicker extends React.Component {
         );
     }
 
-    _collectWidgetMessaging(widgetMessaging) {
-        this._appWidgetMessaging = widgetMessaging;
-
-        // Do this now instead of in componentDidMount because we might not have had the
-        // reference to widgetMessaging when mounting
-        this._sendVisibilityToWidget(true);
-    }
-
     _sendVisibilityToWidget(visible) {
-        if (this._appWidgetMessaging && visible !== this._prevSentVisibility) {
-            this._appWidgetMessaging.sendVisibility(visible);
+        const widgetMessaging = ActiveWidgetStore.getWidgetMessaging(this.state.stickerpickerWidget.id);
+        if (widgetMessaging && visible !== this._prevSentVisibility) {
+            widgetMessaging.sendVisibility(visible);
             this._prevSentVisibility = visible;
         }
     }
@@ -217,7 +209,6 @@ export default class Stickerpicker extends React.Component {
                     >
                     <PersistedElement persistKey="stickerPicker" style={{zIndex: STICKERPICKER_Z_INDEX}}>
                         <AppTile
-                            collectWidgetMessaging={this._collectWidgetMessaging}
                             id={stickerpickerWidget.id}
                             url={stickerpickerWidget.content.url}
                             name={stickerpickerWidget.content.name}