element-web/src/components/views/rooms/Stickerpicker.js

373 lines
14 KiB
JavaScript
Raw Normal View History

/*
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 AppTile from '../elements/AppTile';
import MatrixClientPeg from '../../../MatrixClientPeg';
2018-01-17 03:04:06 +03:00
import Modal from '../../../Modal';
import sdk from '../../../index';
2018-01-17 03:04:06 +03:00
import SdkConfig from '../../../SdkConfig';
import ScalarAuthClient from '../../../ScalarAuthClient';
2018-02-07 12:23:00 +03:00
import dis from '../../../dispatcher';
2018-04-02 12:18:35 +03:00
import AccessibleButton from '../elements/AccessibleButton';
2018-06-26 13:59:16 +03:00
import WidgetUtils from '../../../utils/WidgetUtils';
import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
2018-02-27 16:40:21 +03:00
const widgetType = 'm.stickerpicker';
// We sit in a context menu, so the persisted element container needs to float
// above it, so it needs a greater z-index than the ContextMenu
const STICKERPICKER_Z_INDEX = 5000;
2018-02-26 01:10:38 +03:00
export default class Stickerpicker extends React.Component {
constructor(props) {
super(props);
2018-03-29 19:25:07 +03:00
this._onShowStickersClick = this._onShowStickersClick.bind(this);
this._onHideStickersClick = this._onHideStickersClick.bind(this);
2018-01-17 03:04:06 +03:00
this._launchManageIntegrations = this._launchManageIntegrations.bind(this);
2018-02-26 01:10:38 +03:00
this._removeStickerpickerWidgets = this._removeStickerpickerWidgets.bind(this);
this._updateWidget = this._updateWidget.bind(this);
2018-02-07 12:23:00 +03:00
this._onWidgetAction = this._onWidgetAction.bind(this);
this._onResize = this._onResize.bind(this);
this._onFinished = this._onFinished.bind(this);
this.popoverWidth = 300;
this.popoverHeight = 300;
this.state = {
showStickers: false,
imError: null,
stickerpickerX: null,
stickerpickerY: null,
stickerpickerWidget: null,
widgetId: null,
};
}
2018-02-26 01:10:38 +03:00
_removeStickerpickerWidgets() {
console.warn('Removing Stickerpicker widgets');
if (this.state.widgetId) {
this.scalarClient.disableWidgetAssets(widgetType, this.state.widgetId).then(() => {
console.warn('Assets disabled');
}).catch((err) => {
console.error('Failed to disable assets');
});
} else {
console.warn('No widget ID specified, not disabling assets');
}
2018-03-29 23:16:35 +03:00
this.setState({showStickers: false});
WidgetUtils.removeStickerpickerWidgets().then(() => {
2018-04-02 22:25:24 +03:00
this.forceUpdate();
2018-03-29 23:16:35 +03:00
}).catch((e) => {
console.error('Failed to remove sticker picker widget', e);
});
2018-02-05 14:49:44 +03:00
}
2018-01-17 00:35:25 +03:00
componentDidMount() {
// Close the sticker picker when the window resizes
window.addEventListener('resize', this._onResize);
2018-01-17 03:04:06 +03:00
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);
2018-01-17 03:04:06 +03:00
});
}
if (!this.state.imError) {
this.dispatcherRef = dis.register(this._onWidgetAction);
}
// Track updates to widget state in account data
MatrixClientPeg.get().on('accountData', this._updateWidget);
// Initialise widget state from current account data
this._updateWidget();
2018-02-07 12:23:00 +03:00
}
componentWillUnmount() {
window.removeEventListener('resize', this._onResize);
2018-03-29 19:35:21 +03:00
if (this.dispatcherRef) {
dis.unregister(this.dispatcherRef);
}
2018-02-07 12:23:00 +03:00
}
componentDidUpdate(prevProps, prevState) {
this._sendVisibilityToWidget(this.state.showStickers);
}
_imError(errorMsg, e) {
console.error(errorMsg, e);
this.setState({
showStickers: false,
imError: errorMsg,
});
}
_updateWidget() {
const stickerpickerWidget = WidgetUtils.getStickerpickerWidgets()[0];
this.setState({
stickerpickerWidget,
widgetId: stickerpickerWidget ? stickerpickerWidget.id : null,
});
}
2018-02-07 12:23:00 +03:00
_onWidgetAction(payload) {
switch (payload.action) {
case "user_widget_updated":
this.forceUpdate();
break;
case "stickerpicker_close":
this.setState({showStickers: false});
break;
case "show_right_panel":
case "hide_right_panel":
case "show_left_panel":
case "hide_left_panel":
this.setState({showStickers: false});
break;
2018-02-07 12:23:00 +03:00
}
}
2018-01-17 03:04:06 +03:00
_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>
);
}
_sendVisibilityToWidget(visible) {
const widgetMessaging = ActiveWidgetStore.getWidgetMessaging(this.state.stickerpickerWidget.id);
if (widgetMessaging && visible !== this._prevSentVisibility) {
widgetMessaging.sendVisibility(visible);
this._prevSentVisibility = visible;
}
}
_getStickerpickerContent() {
// Handle Integration Manager errors
if (this.state._imError) {
return this._errorStickerpickerContent();
}
// Stickers
2018-02-26 01:10:38 +03:00
// 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 = this.state.stickerpickerWidget;
let stickersContent;
// Use a separate ReactDOM tree to render the AppTile separately so that it persists and does
// not unmount when we (a) close the sticker picker (b) switch rooms. It's properties are still
// updated.
const PersistedElement = sdk.getComponent("elements.PersistedElement");
// Load stickerpack content
2018-02-26 01:10:38 +03:00
if (stickerpickerWidget && stickerpickerWidget.content && stickerpickerWidget.content.url) {
2018-02-07 12:23:00 +03:00
// Set default name
2018-03-29 19:47:53 +03:00
stickerpickerWidget.content.name = stickerpickerWidget.name || _t("Stickerpack");
2018-02-07 17:44:01 +03:00
2018-01-17 02:25:07 +03:00
stickersContent = (
2018-03-30 00:22:57 +03:00
<div className='mx_Stickers_content_container'>
2018-01-17 02:25:07 +03:00
<div
id='stickersContent'
2018-01-17 18:49:36 +03:00
className='mx_Stickers_content'
2018-01-17 02:25:07 +03:00
style={{
border: 'none',
2018-02-07 17:44:01 +03:00
height: this.popoverHeight,
2018-01-17 02:25:07 +03:00
width: this.popoverWidth,
}}
>
<PersistedElement persistKey="stickerPicker" style={{zIndex: STICKERPICKER_Z_INDEX}}>
2018-01-17 02:25:07 +03:00
<AppTile
2018-02-26 01:10:38 +03:00
id={stickerpickerWidget.id}
url={stickerpickerWidget.content.url}
name={stickerpickerWidget.content.name}
2018-01-17 02:25:07 +03:00
room={this.props.room}
2018-02-26 01:10:38 +03:00
type={stickerpickerWidget.content.type}
2018-01-17 02:25:07 +03:00
fullWidth={true}
userId={MatrixClientPeg.get().credentials.userId}
creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
2018-01-17 02:25:07 +03:00
waitForIframeLoad={true}
show={true}
2018-02-07 17:44:01 +03:00
showMenubar={true}
onEditClick={this._launchManageIntegrations}
2018-02-26 01:10:38 +03:00
onDeleteClick={this._removeStickerpickerWidgets}
2018-02-07 17:44:01 +03:00
showTitle={false}
showMinimise={true}
showDelete={false}
2018-04-25 18:28:27 +03:00
showPopout={false}
2018-03-29 19:25:07 +03:00
onMinimiseClick={this._onHideStickersClick}
handleMinimisePointerEvents={true}
whitelistCapabilities={['m.sticker', 'visibility']}
userWidget={true}
2018-01-17 02:25:07 +03:00
/>
</PersistedElement>
2018-01-17 02:25:07 +03:00
</div>
</div>
);
} else {
2018-02-26 01:10:38 +03:00
// Default content to show if stickerpicker widget not added
2018-04-02 22:25:24 +03:00
stickersContent = this._defaultStickerpickerContent();
}
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
*/
2018-03-29 19:25:07 +03:00
_onShowStickersClick(e) {
// XXX: Simplify by using a context menu that is positioned relative to the sticker picker button
const buttonRect = e.target.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page
let x = buttonRect.right + window.pageXOffset - 41;
// Amount of horizontal space between the right of menu and the right of the viewport
// (10 = amount needed to make chevron centrally aligned)
const rightPad = 10;
// When the sticker picker would be displayed off of the viewport, adjust x
// (302 = width of context menu, including borders)
x = Math.min(x, document.body.clientWidth - (302 + rightPad));
// Offset the chevron location, which is relative to the left of the context menu
// (10 = offset when context menu would not be displayed off viewport)
// (8 = value required in practice (possibly 10 - 2 where the 2 = context menu borders)
const stickerPickerChevronOffset = Math.max(10, 8 + window.pageXOffset + buttonRect.left - x);
const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
this.setState({
showStickers: true,
stickerPickerX: x,
stickerPickerY: y,
stickerPickerChevronOffset,
});
}
/**
* Trigger hiding of the sticker picker overlay
* @param {Event} ev Event that triggered the function call
*/
2018-03-29 19:25:07 +03:00
_onHideStickersClick(ev) {
this.setState({showStickers: false});
}
/**
* Called when the window is resized
*/
_onResize() {
this.setState({showStickers: false});
}
/**
* The stickers picker was hidden
*/
_onFinished() {
2018-01-17 00:28:15 +03:00
this.setState({showStickers: false});
}
/**
* Launch the integrations manager on the stickers integration page
*/
2018-01-17 03:04:06 +03:00
_launchManageIntegrations() {
const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
this.scalarClient.getScalarInterfaceUrlForRoom(
2018-02-09 14:44:27 +03:00
this.props.room,
2018-02-27 16:40:21 +03:00
'type_' + widgetType,
this.state.widgetId,
2018-01-17 03:04:06 +03:00
) :
null;
Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
src: src,
}, "mx_IntegrationsManager");
this.setState({showStickers: false});
2018-01-17 03:04:06 +03:00
}
render() {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const ContextualMenu = sdk.getComponent('structures.ContextualMenu');
const GenericElementContextMenu = sdk.getComponent('context_menus.GenericElementContextMenu');
let stickersButton;
const stickerPicker = <ContextualMenu
elementClass={GenericElementContextMenu}
chevronOffset={this.state.stickerPickerChevronOffset}
chevronFace={'bottom'}
left={this.state.stickerPickerX}
top={this.state.stickerPickerY}
menuWidth={this.popoverWidth}
menuHeight={this.popoverHeight}
element={this._getStickerpickerContent()}
onFinished={this._onFinished}
menuPaddingTop={0}
menuPaddingLeft={0}
menuPaddingRight={0}
/>;
if (this.state.showStickers) {
// Show hide-stickers button
stickersButton =
<div
id='stickersButton'
key="controls_hide_stickers"
2018-01-17 18:49:36 +03:00
className="mx_MessageComposer_stickers mx_Stickers_hideStickers"
2018-03-29 19:25:07 +03:00
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"
2018-03-29 19:25:07 +03:00
onClick={this._onShowStickersClick}
title={_t("Show Stickers")}>
<TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />
</div>;
}
return <div>
{stickersButton}
{this.state.showStickers && stickerPicker}
</div>;
}
}