Merge branches 'develop' and 't3chguy/m.relates_to' of github.com:matrix-org/matrix-react-sdk into t3chguy/m.relates_to

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

# Conflicts:
#	src/components/structures/RoomView.js

src/components/views/rooms/AppsDrawer.js

@@ -37,7 +37,15 @@ module.exports = React.createClass({
     displayName: 'AppsDrawer',
 
     propTypes: {
+        userId: PropTypes.string.isRequired,
         room: PropTypes.object.isRequired,
+        showApps: PropTypes.bool, // Should apps be rendered
+        hide: PropTypes.bool, // If rendered, should apps drawer be visible
+    },
+
+    defaultProps: {
+        showApps: true,
+        hide: false,
     },
 
     getInitialState: function() {
@@ -48,7 +56,7 @@ module.exports = React.createClass({
 
     componentWillMount: function() {
         ScalarMessaging.startListening();
-        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
+        MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents);
     },
 
     componentDidMount: function() {
@@ -58,7 +66,7 @@ module.exports = React.createClass({
             this.scalarClient.connect().then(() => {
                 this.forceUpdate();
             }).catch((e) => {
-                console.log("Failed to connect to integrations server");
+                console.log('Failed to connect to integrations server');
                 // TODO -- Handle Scalar errors
                 //     this.setState({
                 //         scalar_error: err,
@@ -72,7 +80,7 @@ module.exports = React.createClass({
     componentWillUnmount: function() {
         ScalarMessaging.stopListening();
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
+            MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents);
         }
         dis.unregister(this.dispatcherRef);
     },
@@ -83,7 +91,7 @@ module.exports = React.createClass({
     },
 
     onAction: function(action) {
-        const hideWidgetKey = this.props.room.roomId + "_hide_widget_drawer";
+        const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer';
         switch (action.action) {
             case 'appsDrawer':
                 // When opening the app drawer when there aren't any apps,
@@ -111,7 +119,7 @@ module.exports = React.createClass({
      * passed through encodeURIComponent.
      * @param {string} pathTemplate The path with template variables e.g. '/foo/$bar'.
      * @param {Object} variables The key/value pairs to replace the template
-     * variables with. E.g. { "$bar": "baz" }.
+     * variables with. E.g. { '$bar': 'baz' }.
      * @return {string} The result of replacing all template variables e.g. '/foo/baz'.
      */
     encodeUri: function(pathTemplate, variables) {
@@ -192,13 +200,13 @@ module.exports = React.createClass({
     },
 
     _launchManageIntegrations: function() {
-        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+        const IntegrationsManager = sdk.getComponent('views.settings.IntegrationsManager');
         const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
-                this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId, 'add_integ') :
+                this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room, 'add_integ') :
                 null;
         Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
             src: src,
-        }, "mx_IntegrationsManager");
+        }, 'mx_IntegrationsManager');
     },
 
     onClickAddWidget: function(e) {
@@ -206,12 +214,12 @@ module.exports = React.createClass({
         // Display a warning dialog if the max number of widgets have already been added to the room
         const apps = this._getApps();
         if (apps && apps.length >= MAX_WIDGETS) {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
             const errorMsg = `The maximum number of ${MAX_WIDGETS} widgets have already been added to this room.`;
             console.error(errorMsg);
             Modal.createDialog(ErrorDialog, {
-                title: _t("Cannot add any more widgets"),
-                description: _t("The maximum permitted number of widgets have already been added to this room."),
+                title: _t('Cannot add any more widgets'),
+                description: _t('The maximum permitted number of widgets have already been added to this room.'),
             });
             return;
         }
@@ -243,11 +251,11 @@ module.exports = React.createClass({
         ) {
             addWidget = <div
                 onClick={this.onClickAddWidget}
-                role="button"
-                tabIndex="0"
+                role='button'
+                tabIndex='0'
                 className={this.state.apps.length<2 ?
-                    "mx_AddWidget_button mx_AddWidget_button_full_width" :
-                    "mx_AddWidget_button"
+                    'mx_AddWidget_button mx_AddWidget_button_full_width' :
+                    'mx_AddWidget_button'
                 }
                 title={_t('Add a widget')}>
                 [+] { _t('Add a widget') }
@@ -255,8 +263,8 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_AppsDrawer">
-                <div id="apps" className="mx_AppsContainer">
+            <div className={'mx_AppsDrawer' + (this.props.hide ? ' mx_AppsDrawer_hidden' : '')}>
+                <div id='apps' className='mx_AppsContainer'>
                     { apps }
                 </div>
                 { this._canUserModify() && addWidget }

src/components/views/rooms/AuxPanel.js

@@ -32,7 +32,8 @@ module.exports = React.createClass({
         // js-sdk room object
         room: PropTypes.object.isRequired,
         userId: PropTypes.string.isRequired,
-        showApps: PropTypes.bool,
+        showApps: PropTypes.bool, // Render apps
+        hideAppsDrawer: PropTypes.bool, // Do not display apps drawer and content (may still be rendered)
 
         // Conference Handler implementation
         conferenceHandler: PropTypes.object,
@@ -52,6 +53,11 @@ module.exports = React.createClass({
         onResize: PropTypes.func,
     },
 
+    defaultProps: {
+        showApps: true,
+        hideAppsDrawer: false,
+    },
+
     shouldComponentUpdate: function(nextProps, nextState) {
         return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
                 !ObjectUtils.shallowEqual(this.state, nextState));
@@ -134,6 +140,7 @@ module.exports = React.createClass({
             userId={this.props.userId}
             maxHeight={this.props.maxHeight}
             showApps={this.props.showApps}
+            hide={this.props.hideAppsDrawer}
         />;
 
         return (

src/components/views/rooms/EventTile.js

@@ -38,6 +38,7 @@ const ObjectUtils = require('../../../ObjectUtils');
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
+    'm.sticker': 'messages.MessageEvent',
     'm.call.invite': 'messages.TextualEvent',
     'm.call.answer': 'messages.TextualEvent',
     'm.call.hangup': 'messages.TextualEvent',
@@ -472,7 +473,8 @@ module.exports = withMatrixClient(React.createClass({
         const eventType = this.props.mxEvent.getType();
 
         // Info messages are basically information about commands processed on a room
-        const isInfoMessage = (eventType !== 'm.room.message');
+        // For now assume that anything that doesn't have a content body is an isInfoMessage
+        const isInfoMessage = !content.body; // Boolean comparison of non-boolean content body
 
         const EventTileType = sdk.getComponent(getHandlerTile(this.props.mxEvent));
         // This shouldn't happen: the caller should check we support this type

src/components/views/rooms/MessageComposer.js

@@ -24,7 +24,7 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
-
+import Stickerpicker from './Stickerpicker';
 
 export default class MessageComposer extends React.Component {
     constructor(props, context) {
@@ -32,8 +32,6 @@ export default class MessageComposer extends React.Component {
         this.onCallClick = this.onCallClick.bind(this);
         this.onHangupClick = this.onHangupClick.bind(this);
         this.onUploadClick = this.onUploadClick.bind(this);
-        this.onShowAppsClick = this.onShowAppsClick.bind(this);
-        this.onHideAppsClick = this.onHideAppsClick.bind(this);
         this.onUploadFileSelected = this.onUploadFileSelected.bind(this);
         this.uploadFiles = this.uploadFiles.bind(this);
         this.onVoiceCallClick = this.onVoiceCallClick.bind(this);
@@ -202,20 +200,6 @@ export default class MessageComposer extends React.Component {
         // this._startCallApp(true);
     }
 
-    onShowAppsClick(ev) {
-        dis.dispatch({
-            action: 'appsDrawer',
-            show: true,
-        });
-    }
-
-    onHideAppsClick(ev) {
-        dis.dispatch({
-            action: 'appsDrawer',
-            show: false,
-        });
-    }
-
     onInputContentChanged(content: string, selection: {start: number, end: number}) {
         this.setState({
             autocompleteQuery: content,
@@ -281,7 +265,12 @@ export default class MessageComposer extends React.Component {
                 alt={e2eTitle} title={e2eTitle}
             />,
         );
-        let callButton, videoCallButton, hangupButton, showAppsButton, hideAppsButton;
+
+        let callButton;
+        let videoCallButton;
+        let hangupButton;
+
+        // Call buttons
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =
                 <div key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
@@ -298,19 +287,6 @@ export default class MessageComposer extends React.Component {
                 </div>;
         }
 
-        // Apps
-        if (this.props.showApps) {
-            hideAppsButton =
-                <div key="controls_hide_apps" className="mx_MessageComposer_apps" onClick={this.onHideAppsClick} title={_t("Hide Apps")}>
-                    <TintableSvg src="img/icons-hide-apps.svg" width="35" height="35" />
-                </div>;
-        } else {
-            showAppsButton =
-                <div key="show_apps" className="mx_MessageComposer_apps" onClick={this.onShowAppsClick} title={_t("Show Apps")}>
-                    <TintableSvg src="img/icons-show-apps.svg" width="35" height="35" />
-                </div>;
-        }
-
         const canSendMessages = this.props.room.currentState.maySendMessage(
             MatrixClientPeg.get().credentials.userId);
 
@@ -353,6 +329,11 @@ export default class MessageComposer extends React.Component {
                 }
             }
 
+            let stickerpickerButton;
+            if (SettingsStore.isFeatureEnabled('feature_sticker_messages')) {
+                stickerpickerButton = <Stickerpicker key='stickerpicker_controls_button' room={this.props.room} />;
+            }
+
             controls.push(
                 <MessageComposerInput
                     ref={(c) => this.messageComposerInput = c}
@@ -364,12 +345,11 @@ export default class MessageComposer extends React.Component {
                     onContentChanged={this.onInputContentChanged}
                     onInputStateChanged={this.onInputStateChanged} />,
                 formattingButton,
+                stickerpickerButton,
                 uploadButton,
                 hangupButton,
                 callButton,
                 videoCallButton,
-                showAppsButton,
-                hideAppsButton,
             );
         } else {
             controls.push(

src/components/views/rooms/RoomHeader.js

@@ -392,7 +392,7 @@ module.exports = React.createClass({
         let manageIntegsButton;
         if (this.props.room && this.props.room.roomId && this.props.inRoom) {
             manageIntegsButton = <ManageIntegsButton
-                roomId={this.props.room.roomId}
+                room={this.props.room}
             />;
         }
 

src/components/views/rooms/Stickerpicker.js

@@ -0,0 +1,290 @@
+/*
+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 { _t } from '../../../languageHandler';
+import Widgets from '../../../utils/widgets';
+import AppTile from '../elements/AppTile';
+import ContextualMenu from '../../structures/ContextualMenu';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import SdkConfig from '../../../SdkConfig';
+import ScalarAuthClient from '../../../ScalarAuthClient';
+import dis from '../../../dispatcher';
+import AccessibleButton from '../elements/AccessibleButton';
+
+const widgetType = 'm.stickerpicker';
+
+export default class Stickerpicker extends React.Component {
+    constructor(props) {
+        super(props);
+        this._onShowStickersClick = this._onShowStickersClick.bind(this);
+        this._onHideStickersClick = this._onHideStickersClick.bind(this);
+        this._launchManageIntegrations = this._launchManageIntegrations.bind(this);
+        this._removeStickerpickerWidgets = this._removeStickerpickerWidgets.bind(this);
+        this._onWidgetAction = this._onWidgetAction.bind(this);
+        this._onFinished = this._onFinished.bind(this);
+
+        this.popoverWidth = 300;
+        this.popoverHeight = 300;
+
+        this.state = {
+            showStickers: false,
+            imError: null,
+        };
+    }
+
+    _removeStickerpickerWidgets() {
+        console.warn('Removing Stickerpicker widgets');
+        if (this.widgetId) {
+            this.scalarClient.disableWidgetAssets(widgetType, this.widgetId).then(() => {
+                console.warn('Assets disabled');
+            }).catch((err) => {
+                console.error('Failed to disable assets');
+            });
+        } else {
+            console.warn('No widget ID specified, not disabling assets');
+        }
+
+        // Wrap this in a timeout in order to avoid the DOM node from being pulled from under its feet
+        setTimeout(() => this.stickersMenu.close());
+        Widgets.removeStickerpickerWidgets().then(() => {
+            this.forceUpdate();
+        }).catch((e) => {
+            console.error('Failed to remove sticker picker widget', e);
+        });
+    }
+
+    componentDidMount() {
+        this.scalarClient = null;
+        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
+            this.scalarClient = new ScalarAuthClient();
+            this.scalarClient.connect().then(() => {
+                this.forceUpdate();
+            }).catch((e) => {
+                this._imError("Failed to connect to integrations server", e);
+            });
+        }
+
+        if (!this.state.imError) {
+            this.dispatcherRef = dis.register(this._onWidgetAction);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.dispatcherRef) {
+            dis.unregister(this.dispatcherRef);
+        }
+    }
+
+    _imError(errorMsg, e) {
+        console.error(errorMsg, e);
+        this.setState({
+            showStickers: false,
+            imError: errorMsg,
+        });
+    }
+
+    _onWidgetAction(payload) {
+        if (payload.action === "user_widget_updated") {
+            this.forceUpdate();
+        } else if (payload.action === "stickerpicker_close") {
+            // Wrap this in a timeout in order to avoid the DOM node from being
+            // pulled from under its feet
+            setTimeout(() => this.stickersMenu.close());
+        }
+    }
+
+    _defaultStickerpickerContent() {
+        return (
+            <AccessibleButton onClick={this._launchManageIntegrations}
+                className='mx_Stickers_contentPlaceholder'>
+                <p>{ _t("You don't currently have any stickerpacks enabled") }</p>
+                <p className='mx_Stickers_addLink'>Add some now</p>
+                <img src='img/stickerpack-placeholder.png' alt={_t('Add a stickerpack')} />
+            </AccessibleButton>
+        );
+    }
+
+    _errorStickerpickerContent() {
+        return (
+            <div style={{"text-align": "center"}} className="error">
+                <p> { this.state.imError } </p>
+            </div>
+        );
+    }
+
+    _getStickerpickerContent() {
+        // Handle Integration Manager errors
+        if (this.state._imError) {
+            return this._errorStickerpickerContent();
+        }
+
+        // Stickers
+        // TODO - Add support for Stickerpickers from multiple app stores.
+        // Render content from multiple stickerpack sources, each within their
+        // own iframe, within the stickerpicker UI element.
+        const stickerpickerWidget = Widgets.getStickerpickerWidgets()[0];
+        let stickersContent;
+
+        // Load stickerpack content
+        if (stickerpickerWidget && stickerpickerWidget.content && stickerpickerWidget.content.url) {
+            // Set default name
+            stickerpickerWidget.content.name = stickerpickerWidget.name || _t("Stickerpack");
+            this.widgetId = stickerpickerWidget.id;
+
+            stickersContent = (
+                <div className='mx_Stickers_content_container'>
+                    <div
+                        id='stickersContent'
+                        className='mx_Stickers_content'
+                        style={{
+                            border: 'none',
+                            height: this.popoverHeight,
+                            width: this.popoverWidth,
+                        }}
+                    >
+                        <AppTile
+                            id={stickerpickerWidget.id}
+                            url={stickerpickerWidget.content.url}
+                            name={stickerpickerWidget.content.name}
+                            room={this.props.room}
+                            type={stickerpickerWidget.content.type}
+                            fullWidth={true}
+                            userId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
+                            creatorUserId={MatrixClientPeg.get().credentials.userId}
+                            waitForIframeLoad={true}
+                            show={true}
+                            showMenubar={true}
+                            onEditClick={this._launchManageIntegrations}
+                            onDeleteClick={this._removeStickerpickerWidgets}
+                            showTitle={false}
+                            showMinimise={true}
+                            showDelete={false}
+                            onMinimiseClick={this._onHideStickersClick}
+                            handleMinimisePointerEvents={true}
+                            whitelistCapabilities={['m.sticker']}
+                        />
+                    </div>
+                </div>
+            );
+        } else {
+            // Default content to show if stickerpicker widget not added
+            console.warn("No available sticker picker widgets");
+            stickersContent = this._defaultStickerpickerContent();
+            this.widgetId = null;
+            this.forceUpdate();
+        }
+        this.setState({
+            showStickers: false,
+        });
+        return stickersContent;
+    }
+
+    /**
+     * Show the sticker picker overlay
+     * If no stickerpacks have been added, show a link to the integration manager add sticker packs page.
+     * @param  {Event} e Event that triggered the function
+     */
+    _onShowStickersClick(e) {
+        const GenericElementContextMenu = sdk.getComponent('context_menus.GenericElementContextMenu');
+        const buttonRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = buttonRect.right + window.pageXOffset - 42;
+        const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
+        // const self = this;
+        this.stickersMenu = ContextualMenu.createMenu(GenericElementContextMenu, {
+            chevronOffset: 10,
+            chevronFace: 'bottom',
+            left: x,
+            top: y,
+            menuWidth: this.popoverWidth,
+            menuHeight: this.popoverHeight,
+            element: this._getStickerpickerContent(),
+            onFinished: this._onFinished,
+            menuPaddingTop: 0,
+        });
+
+
+        this.setState({showStickers: true});
+    }
+
+    /**
+     * Trigger hiding of the sticker picker overlay
+     * @param  {Event} ev Event that triggered the function call
+     */
+    _onHideStickersClick(ev) {
+        setTimeout(() => this.stickersMenu.close());
+    }
+
+    /**
+     * The stickers picker was hidden
+     */
+    _onFinished() {
+        this.setState({showStickers: false});
+    }
+
+    /**
+     * Launch the integrations manager on the stickers integration page
+     */
+    _launchManageIntegrations() {
+        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+        const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
+                this.scalarClient.getScalarInterfaceUrlForRoom(
+                    this.props.room,
+                    'type_' + widgetType,
+                    this.widgetId,
+                ) :
+                null;
+        Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+            src: src,
+        }, "mx_IntegrationsManager");
+
+        // Wrap this in a timeout in order to avoid the DOM node from being pulled from under its feet
+        setTimeout(() => this.stickersMenu.close());
+    }
+
+    render() {
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        let stickersButton;
+        if (this.state.showStickers) {
+            // Show hide-stickers button
+            stickersButton =
+                <div
+                    id='stickersButton'
+                    key="controls_hide_stickers"
+                    className="mx_MessageComposer_stickers mx_Stickers_hideStickers"
+                    onClick={this._onHideStickersClick}
+                    ref='target'
+                    title={_t("Hide Stickers")}>
+                    <TintableSvg src="img/icons-hide-stickers.svg" width="35" height="35" />
+                </div>;
+        } else {
+            // Show show-stickers button
+            stickersButton =
+                <div
+                    id='stickersButton'
+                    key="constrols_show_stickers"
+                    className="mx_MessageComposer_stickers"
+                    onClick={this._onShowStickersClick}
+                    title={_t("Show Stickers")}>
+                    <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />
+                </div>;
+        }
+        return stickersButton;
+    }
+}