Merge remote-tracking branch 'origin/develop' into dbkr/widget_echo

src/components/views/elements/AppTile.js

@@ -164,6 +164,7 @@ export default class AppTile extends React.Component {
             PersistedElement.destroyElement(this._persistKey);
             ActiveWidgetStore.delWidgetMessaging(this.props.id);
             ActiveWidgetStore.delWidgetCapabilities(this.props.id);
+            ActiveWidgetStore.delRoomId(this.props.id);
         }
     }
 
@@ -349,6 +350,7 @@ export default class AppTile extends React.Component {
         if (!ActiveWidgetStore.getWidgetMessaging(this.props.id)) {
             this._setupWidgetMessaging();
         }
+        ActiveWidgetStore.setRoomId(this.props.id, this.props.room.roomId);
         this.setState({loading: false});
     }
 
@@ -528,6 +530,8 @@ export default class AppTile extends React.Component {
         // (see - https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes and https://wicg.github.io/feature-policy/)
         const iframeFeatures = "microphone; camera; encrypted-media;";
 
+        const appTileBodyClass = 'mx_AppTileBody' + (this.props.miniMode ? '_mini  ' : ' ');
+
         if (this.props.show) {
             const loadingElement = (
                 <div className="mx_AppLoading_spinner_fadeIn">
@@ -536,20 +540,20 @@ export default class AppTile extends React.Component {
             );
             if (this.state.initialising) {
                 appTileBody = (
-                    <div className={'mx_AppTileBody ' + (this.state.loading ? 'mx_AppLoading' : '')}>
+                    <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
                         { loadingElement }
                     </div>
                 );
             } else if (this.state.hasPermissionToLoad == true) {
                 if (this.isMixedContent()) {
                     appTileBody = (
-                        <div className="mx_AppTileBody">
+                        <div className={appTileBodyClass}>
                             <AppWarning errorMsg="Error - Mixed content" />
                         </div>
                     );
                 } else {
                     appTileBody = (
-                        <div className={'mx_AppTileBody ' + (this.state.loading ? 'mx_AppLoading' : '')}>
+                        <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
                             { this.state.loading && loadingElement }
                             { /*
                                 The "is" attribute in the following iframe tag is needed in order to enable rendering of the
@@ -579,7 +583,7 @@ export default class AppTile extends React.Component {
             } else {
                 const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
                 appTileBody = (
-                    <div className="mx_AppTileBody">
+                    <div className={appTileBodyClass}>
                         <AppPermission
                             isRoomEncrypted={isRoomEncrypted}
                             url={this.state.widgetUrl}
@@ -692,6 +696,8 @@ AppTile.propTypes = {
     // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
     // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
     fullWidth: PropTypes.bool,
+    // Optional. If set, renders a smaller view of the widget
+    miniMode: PropTypes.bool,
     // UserId of the current user
     userId: PropTypes.string.isRequired,
     // UserId of the entity that added / modified the widget
@@ -744,4 +750,5 @@ AppTile.defaultProps = {
     handleMinimisePointerEvents: false,
     whitelistCapabilities: [],
     userWidget: false,
+    miniMode: false,
 };

src/components/views/elements/PersistedElement.js

@@ -14,9 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require('react');
-const ReactDOM = require('react-dom');
-const PropTypes = require('prop-types');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+import ResizeObserver from 'resize-observer-polyfill';
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -62,6 +64,9 @@ export default class PersistedElement extends React.Component {
         super();
         this.collectChildContainer = this.collectChildContainer.bind(this);
         this.collectChild = this.collectChild.bind(this);
+        this._onContainerResize = this._onContainerResize.bind(this);
+
+        this.resizeObserver = new ResizeObserver(this._onContainerResize);
     }
 
     /**
@@ -83,7 +88,13 @@ export default class PersistedElement extends React.Component {
     }
 
     collectChildContainer(ref) {
+        if (this.childContainer) {
+            this.resizeObserver.unobserve(this.childContainer);
+        }
         this.childContainer = ref;
+        if (ref) {
+            this.resizeObserver.observe(ref);
+        }
     }
 
     collectChild(ref) {
@@ -101,6 +112,11 @@ export default class PersistedElement extends React.Component {
 
     componentWillUnmount() {
         this.updateChildVisibility(this.child, false);
+        this.resizeObserver.disconnect();
+    }
+
+    _onContainerResize() {
+        this.updateChildPosition(this.child, this.childContainer);
     }
 
     updateChild() {

src/components/views/elements/PersistentApp.js

@@ -0,0 +1,87 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import RoomViewStore from '../../../stores/RoomViewStore';
+import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
+import WidgetUtils from '../../../utils/WidgetUtils';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
+module.exports = React.createClass({
+    displayName: 'PersistentApp',
+
+    getInitialState: function() {
+        return {
+            roomId: RoomViewStore.getRoomId(),
+        };
+    },
+
+    componentWillMount: function() {
+        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
+    },
+
+    componentWillUnmount: function() {
+        if (this._roomStoreToken) {
+            this._roomStoreToken.remove();
+        }
+    },
+
+    _onRoomViewStoreUpdate: function(payload) {
+        if (RoomViewStore.getRoomId() === this.state.roomId) return;
+        this.setState({
+            roomId: RoomViewStore.getRoomId(),
+        });
+    },
+
+    render: function() {
+        if (ActiveWidgetStore.getPersistentWidgetId()) {
+            const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(ActiveWidgetStore.getPersistentWidgetId());
+            if (this.state.roomId !== persistentWidgetInRoomId) {
+                const persistentWidgetInRoom = MatrixClientPeg.get().getRoom(persistentWidgetInRoomId);
+                // get the widget data
+                const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
+                    return ev.getStateKey() === ActiveWidgetStore.getPersistentWidgetId();
+                });
+                const app = WidgetUtils.makeAppConfig(
+                    appEvent.getStateKey(), appEvent.getContent(), appEvent.sender, persistentWidgetInRoomId,
+                );
+                const capWhitelist = WidgetUtils.getCapWhitelistForAppTypeInRoomId(app.type, persistentWidgetInRoomId);
+                const AppTile = sdk.getComponent('elements.AppTile');
+                return <AppTile
+                    key={app.id}
+                    id={app.id}
+                    url={app.url}
+                    name={app.name}
+                    type={app.type}
+                    fullWidth={true}
+                    room={persistentWidgetInRoom}
+                    userId={MatrixClientPeg.get().credentials.userId}
+                    show={true}
+                    creatorUserId={app.creatorUserId}
+                    widgetPageTitle={(app.data && app.data.title) ? app.data.title : ''}
+                    waitForIframeLoad={app.waitForIframeLoad}
+                    whitelistCapabilities={capWhitelist}
+                    showDelete={false}
+                    showMinimise={false}
+                    miniMode={true}
+                />;
+            }
+        }
+        return null;
+    },
+});
+

src/components/views/elements/Pill.js

@@ -62,6 +62,8 @@ const Pill = React.createClass({
         room: PropTypes.instanceOf(Room),
         // Whether to include an avatar in the pill
         shouldShowPillAvatar: PropTypes.bool,
+        // Whether to render this pill as if it were highlit by a selection
+        isSelected: PropTypes.bool,
     },
 
 
@@ -268,6 +270,7 @@ const Pill = React.createClass({
 
         const classes = classNames(pillClass, {
             "mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
+            "mx_UserPill_selected": this.props.isSelected,
         });
 
         if (this.state.pillType) {