Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/ts/3

res/css/views/rooms/_AppsDrawer.scss

@@ -50,10 +50,6 @@ $MiniAppTileHeight: 200px;
     }
 }
 
-.mx_AppsDrawer_hidden {
-    display: none;
-}
-
 .mx_AppsContainer {
     display: flex;
     flex-direction: row;
@@ -78,15 +74,6 @@ $MiniAppTileHeight: 200px;
     font-size: $font-12px;
 }
 
-.mx_SetAppURLDialog_input {
-    border-radius: 3px;
-    border: 1px solid $input-border-color;
-    padding: 9px;
-    color: $primary-hairline-color;
-    background-color: $primary-bg-color;
-    font-size: $font-15px;
-}
-
 .mx_AppTile {
     width: 50%;
     border: 5px solid $widget-menu-bar-bg-color;
@@ -242,72 +229,6 @@ $MiniAppTileHeight: 200px;
     display: block;
 }
 
-.mx_AppTileMenuBarWidgetPadding {
-    margin-right: 5px;
-}
-
-.mx_AppIconTile {
-    background-color: $lightbox-bg-color;
-    border: 1px solid rgba(0, 0, 0, 0);
-    width: 200px;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    transition: 0.3s;
-    border-radius: 3px;
-    margin: 5px;
-    display: inline-block;
-}
-
-.mx_AppIconTile.mx_AppIconTile_active {
-    color: $accent-color;
-    border-color: $accent-color;
-}
-
-.mx_AppIconTile:hover {
-    border: 1px solid $accent-color;
-    box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
-}
-
-.mx_AppIconTile_content {
-    padding: 2px 16px;
-    height: 60px;
-    overflow: hidden;
-}
-
-.mx_AppIconTile_content h4 {
-    margin-top: 5px;
-    margin-bottom: 2px;
-}
-
-.mx_AppIconTile_content p {
-    margin-top: 0;
-    margin-bottom: 5px;
-    font-size: smaller;
-}
-
-.mx_AppIconTile_image {
-    padding: 10px;
-    max-width: 100px;
-    max-height: 100px;
-    width: auto;
-    height: auto;
-}
-
-.mx_AppIconTile_imageContainer {
-    text-align: center;
-    width: 100%;
-    background-color: white;
-    border-radius: 3px 3px 0 0;
-    height: 155px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-form.mx_Custom_Widget_Form div {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
 .mx_AppPermissionWarning {
     text-align: center;
     background-color: $widget-menu-bar-bg-color;

src/components/structures/LoggedInView.tsx

@@ -218,6 +218,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             vertical: "mx_ResizeHandle_vertical",
             reverse: "mx_ResizeHandle_reverse",
         };
+        let size;
         const collapseConfig = {
             toggleSize: 260 - 50,
             onCollapsed: (collapsed) => {
@@ -228,21 +229,19 @@ class LoggedInView extends React.Component<IProps, IState> {
                     dis.dispatch({action: "show_left_panel"}, true);
                 }
             },
-            onResized: (size) => {
+            onResized: (_size) => {
-                window.localStorage.setItem("mx_lhs_size", '' + size);
+                size = _size;
                 this.props.resizeNotifier.notifyLeftHandleResized();
             },
             onResizeStart: () => {
                 this.props.resizeNotifier.startResizing();
             },
             onResizeStop: () => {
+                window.localStorage.setItem("mx_lhs_size", '' + size);
                 this.props.resizeNotifier.stopResizing();
             },
         };
-        const resizer = new Resizer(
+        const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
-            this._resizeContainer.current,
-            CollapseDistributor,
-            collapseConfig);
         resizer.setClassNames(classNames);
         return resizer;
     }

src/components/structures/RoomView.tsx

@@ -1853,7 +1853,6 @@ export default class RoomView extends React.Component<IProps, IState> {
                 draggingFile={this.state.draggingFile}
                 maxHeight={this.state.auxPanelMaxHeight}
                 showApps={this.state.showApps}
-                hideAppsDrawer={false}
                 onResize={this.onResize}
                 resizeNotifier={this.props.resizeNotifier}
             >

src/components/views/elements/AppTile.js

@@ -240,10 +240,14 @@ export default class AppTile extends React.Component {
             this.iframe.src = 'about:blank';
         }
 
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
+            dis.dispatch({action: 'hangup_conference'});
+        }
+
         // Delete the widget from the persisted store for good measure.
         PersistedElement.destroyElement(this._persistKey);
 
-        this._sgWidget.stop();
+        this._sgWidget.stop({forceDestroy: true});
     }
 
     /* If user has permission to modify widgets, delete the widget,
@@ -387,6 +391,9 @@ export default class AppTile extends React.Component {
             if (this.props.show) {
                 // if we were being shown, end the widget as we're about to be minimized.
                 this._endWidgetActions();
+            } else {
+                // restart the widget actions
+                this._resetWidget(this.props);
             }
             dis.dispatch({
                 action: 'appsDrawer',

src/components/views/elements/PersistentApp.js

@@ -58,6 +58,11 @@ export default class PersistentApp extends React.Component {
             const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
             if (this.state.roomId !== persistentWidgetInRoomId) {
                 const persistentWidgetInRoom = MatrixClientPeg.get().getRoom(persistentWidgetInRoomId);
+
+                // Sanity check the room - the widget may have been destroyed between render cycles, and
+                // thus no room is associated anymore.
+                if (!persistentWidgetInRoom) return null;
+
                 // get the widget data
                 const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
                     return ev.getStateKey() === ActiveWidgetStore.getPersistentWidgetId();

src/components/views/messages/RoomCreate.js

@@ -45,7 +45,7 @@ export default class RoomCreate extends React.Component {
     render() {
         const predecessor = this.props.mxEvent.getContent()['predecessor'];
         if (predecessor === undefined) {
-            return <div />; // We should never have been instaniated in this case
+            return <div />; // We should never have been instantiated in this case
         }
         const prevRoom = MatrixClientPeg.get().getRoom(predecessor['room_id']);
         const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor['room_id']);

src/components/views/rooms/AppsDrawer.js

@@ -40,12 +40,10 @@ export default class AppsDrawer extends React.Component {
         room: PropTypes.object.isRequired,
         resizeNotifier: PropTypes.instanceOf(ResizeNotifier).isRequired,
         showApps: PropTypes.bool, // Should apps be rendered
-        hide: PropTypes.bool, // If rendered, should apps drawer be visible
     };
 
     static defaultProps = {
         showApps: true,
-        hide: false,
     };
 
     constructor(props) {
@@ -173,7 +171,6 @@ export default class AppsDrawer extends React.Component {
 
         const classes = classNames({
             "mx_AppsDrawer": true,
-            "mx_AppsDrawer_hidden": this.props.hide,
             "mx_AppsDrawer_fullWidth": apps.length < 2,
             "mx_AppsDrawer_minimised": !this.props.showApps,
         });

src/components/views/rooms/AuxPanel.js

@@ -37,7 +37,6 @@ export default class AuxPanel extends React.Component {
         room: PropTypes.object.isRequired,
         userId: PropTypes.string.isRequired,
         showApps: PropTypes.bool, // Render apps
-        hideAppsDrawer: PropTypes.bool, // Do not display apps drawer and content (may still be rendered)
 
         // set to true to show the file drop target
         draggingFile: PropTypes.bool,
@@ -54,7 +53,6 @@ export default class AuxPanel extends React.Component {
 
     static defaultProps = {
         showApps: true,
-        hideAppsDrawer: false,
     };
 
     constructor(props) {
@@ -170,7 +168,6 @@ export default class AuxPanel extends React.Component {
                 userId={this.props.userId}
                 maxHeight={this.props.maxHeight}
                 showApps={this.props.showApps}
-                hide={this.props.hideAppsDrawer}
                 resizeNotifier={this.props.resizeNotifier}
             />;
         }

src/components/views/rooms/EventTile.js

@@ -657,8 +657,7 @@ export default class EventTile extends React.Component {
         // source tile when there's no regular tile for an event and also for
         // replace relations (which otherwise would display as a confusing
         // duplicate of the thing they are replacing).
-        const useSource = !tileHandler || this.props.mxEvent.isRelation("m.replace");
+        if (SettingsStore.getValue("showHiddenEventsInTimeline") && !haveTileForEvent(this.props.mxEvent)) {
-        if (useSource && SettingsStore.getValue("showHiddenEventsInTimeline")) {
             tileHandler = "messages.ViewSourceEvent";
             // Reuse info message avatar and sender profile styling
             isInfoMessage = true;

src/indexing/BaseEventIndexManager.ts

@@ -105,10 +105,13 @@ export default abstract class BaseEventIndexManager {
     /**
      * Initialize the event index for the given user.
      *
+     * @param {string} userId The event that should be added to the index.
+     * @param {string} deviceId The profile of the event sender at the
+     *
      * @return {Promise} A promise that will resolve when the event index is
      * initialized.
      */
-    async initEventIndex(): Promise<void> {
+    async initEventIndex(userId: string, deviceId: string): Promise<void> {
         throw new Error("Unimplemented");
     }
 

src/indexing/EventIndexPeg.js

@@ -21,6 +21,7 @@ limitations under the License.
 
 import PlatformPeg from "../PlatformPeg";
 import EventIndex from "../indexing/EventIndex";
+import {MatrixClientPeg} from "../MatrixClientPeg";
 import SettingsStore from '../settings/SettingsStore';
 import {SettingLevel} from "../settings/SettingLevel";
 
@@ -70,9 +71,13 @@ class EventIndexPeg {
     async initEventIndex() {
         const index = new EventIndex();
         const indexManager = PlatformPeg.get().getEventIndexingManager();
+        const client = MatrixClientPeg.get();
+
+        const userId = client.getUserId();
+        const deviceId = client.getDeviceId();
 
         try {
-            await indexManager.initEventIndex();
+            await indexManager.initEventIndex(userId, deviceId);
 
             const userVersion = await indexManager.getUserVersion();
             const eventIndexIsEmpty = await indexManager.isEventIndexEmpty();
@@ -83,7 +88,7 @@ class EventIndexPeg {
                 await indexManager.closeEventIndex();
                 await this.deleteEventIndex();
 
-                await indexManager.initEventIndex();
+                await indexManager.initEventIndex(userId, deviceId);
                 await indexManager.setUserVersion(INDEX_VERSION);
             }
 

src/stores/widgets/StopGapWidget.ts

@@ -74,6 +74,16 @@ class ElementWidget extends Widget {
         return super.templateUrl;
     }
 
+    public get popoutTemplateUrl(): string {
+        if (WidgetType.JITSI.matches(this.type)) {
+            return WidgetUtils.getLocalJitsiWrapperUrl({
+                forLocalRender: false, // The only important difference between this and templateUrl()
+                auth: super.rawData?.auth,
+            });
+        }
+        return this.templateUrl; // use this instead of super to ensure we get appropriate templating
+    }
+
     public get rawData(): IWidgetData {
         let conferenceId = super.rawData['conferenceId'];
         if (conferenceId === undefined) {
@@ -94,8 +104,8 @@ class ElementWidget extends Widget {
         };
     }
 
-    public getCompleteUrl(params: ITemplateParams): string {
+    public getCompleteUrl(params: ITemplateParams, asPopout=false): string {
-        return runTemplate(this.templateUrl, {
+        return runTemplate(asPopout ? this.popoutTemplateUrl : this.templateUrl, {
             // we need to supply a whole widget to the template, but don't have
             // easy access to the definition the superclass is using, so be sad
             // and gutwrench it.
@@ -109,7 +119,7 @@ class ElementWidget extends Widget {
 
 export class StopGapWidget extends EventEmitter {
     private messaging: ClientWidgetApi;
-    private mockWidget: Widget;
+    private mockWidget: ElementWidget;
     private scalarToken: string;
 
     constructor(private appTileProps: IAppTileProps) {
@@ -133,12 +143,23 @@ export class StopGapWidget extends EventEmitter {
      * The URL to use in the iframe
      */
     public get embedUrl(): string {
+        return this.runUrlTemplate({asPopout: false});
+    }
+
+    /**
+     * The URL to use in the popout
+     */
+    public get popoutUrl(): string {
+        return this.runUrlTemplate({asPopout: true});
+    }
+
+    private runUrlTemplate(opts = {asPopout: false}): string {
         const templated = this.mockWidget.getCompleteUrl({
             currentRoomId: RoomViewStore.getRoomId(),
             currentUserId: MatrixClientPeg.get().getUserId(),
             userDisplayName: OwnProfileStore.instance.displayName,
             userHttpAvatarUrl: OwnProfileStore.instance.getHttpAvatarUrl(),
-        });
+        }, opts?.asPopout);
 
         // Add in some legacy support sprinkles
         // TODO: Replace these with proper widget params
@@ -158,19 +179,6 @@ export class StopGapWidget extends EventEmitter {
         return parsed.toString().replace(/%24/g, '$');
     }
 
-    /**
-     * The URL to use in the popout
-     */
-    public get popoutUrl(): string {
-        if (WidgetType.JITSI.matches(this.mockWidget.type)) {
-            return WidgetUtils.getLocalJitsiWrapperUrl({
-                forLocalRender: false,
-                auth: this.mockWidget.rawData?.auth,
-            });
-        }
-        return this.embedUrl;
-    }
-
     public get isManagedByManager(): boolean {
         return !!this.scalarToken;
     }
@@ -275,8 +283,8 @@ export class StopGapWidget extends EventEmitter {
         }
     }
 
-    public stop() {
+    public stop(opts = {forceDestroy: false}) {
-        if (ActiveWidgetStore.getPersistentWidgetId() === this.mockWidget.id) {
+        if (!opts?.forceDestroy && ActiveWidgetStore.getPersistentWidgetId() === this.mockWidget.id) {
             console.log("Skipping destroy - persistent widget");
             return;
         }