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

251 lines
9.5 KiB
JavaScript
Raw Normal View History

/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 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';
2018-01-17 00:04:06 +00:00
import Modal from '../../../Modal';
import sdk from '../../../index';
2018-01-17 00:04:06 +00:00
import SdkConfig from '../../../SdkConfig';
import ScalarAuthClient from '../../../ScalarAuthClient';
2018-02-07 09:23:00 +00:00
import dis from '../../../dispatcher';
export default class Stickerpack extends React.Component {
constructor(props) {
super(props);
this.onShowStickersClick = this.onShowStickersClick.bind(this);
this.onHideStickersClick = this.onHideStickersClick.bind(this);
2018-01-16 21:28:15 +00:00
this.onFinished = this.onFinished.bind(this);
2018-01-17 00:04:06 +00:00
this._launchManageIntegrations = this._launchManageIntegrations.bind(this);
2018-02-05 11:49:44 +00:00
this._removeStickerpackWidgets = this._removeStickerpackWidgets.bind(this);
2018-02-07 09:23:00 +00:00
this._onWidgetAction = this._onWidgetAction.bind(this);
2018-01-16 21:06:57 +00:00
this.defaultStickersContent = (
2018-01-17 15:49:36 +00:00
<div className='mx_Stickers_contentPlaceholder'>
2018-02-07 09:23:00 +00:00
<p>{ _t("You don't currently have any stickerpacks enabled") }</p>
<p>{ _t("Click") } <span className='mx_Stickers_addLink' onClick={this._launchManageIntegrations} > { _t("here") } </span>{ _t("to add some!") }</p>
2018-02-05 11:49:44 +00:00
<img src='img/stickerpack-placeholder.png' alt={_t('Add a stickerpack')} />
2018-01-16 21:06:57 +00:00
</div>
);
this.popoverWidth = 300;
this.popoverHeight = 300;
this.state = {
stickersContent: this.defaultStickersContent,
showStickers: false,
};
}
2018-02-05 11:49:44 +00:00
_removeStickerpackWidgets() {
console.warn('Removing stickerpack widgets');
2018-02-07 09:23:00 +00:00
Widgets.removeStickerpackWidgets();
this._getStickerPickerWidget();
this.onFinished();
2018-02-05 11:49:44 +00:00
}
2018-01-16 21:35:25 +00:00
componentDidMount() {
2018-01-17 00:04:06 +00: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) => {
console.log("Failed to connect to integrations server");
// TODO -- Handle Scalar errors
// this.setState({
// scalar_error: err,
// });
});
}
2018-02-07 09:23:00 +00:00
this._getStickerPickerWidget();
this.dispatcherRef = dis.register(this._onWidgetAction);
}
componentWillUnmount() {
dis.unregister(this.dispatcherRef);
}
_onWidgetAction(payload) {
if (payload.action === "user_widget_updated") {
console.warn("user widget updated");
this._getStickerPickerWidget();
return;
}
}
2018-01-17 00:04:06 +00:00
2018-02-07 09:23:00 +00:00
_getStickerPickerWidget() {
// Stickers
// TODO - Add support for stickerpacks from multiple app stores.
// Render content from multiple stickerpack sources, each within their own iframe, within the stickerpack UI element.
2018-02-07 09:23:00 +00:00
console.warn("Checking for sticker picker widgets");
const stickerpackWidget = Widgets.getStickerpackWidgets()[0];
let stickersContent;
// Load stickerpack content
if (stickerpackWidget && stickerpackWidget.content && stickerpackWidget.content.url) {
2018-02-07 09:23:00 +00:00
// Set default name
stickerpackWidget.content.name = stickerpackWidget.name || "Stickerpack";
console.warn('Stickerpack widget', stickerpackWidget);
2018-01-17 00:04:06 +00:00
this.widgetId = stickerpackWidget.id;
2018-02-07 14:44:01 +00:00
2018-01-16 23:25:07 +00:00
stickersContent = (
<div
style={{
overflow: 'hidden',
height: '300px',
}}
>
<div
id='stickersContent'
2018-01-17 15:49:36 +00:00
className='mx_Stickers_content'
2018-01-16 23:25:07 +00:00
style={{
border: 'none',
2018-02-07 14:44:01 +00:00
height: this.popoverHeight,
2018-01-16 23:25:07 +00:00
width: this.popoverWidth,
}}
>
<AppTile
id={stickerpackWidget.id}
url={stickerpackWidget.content.url}
name={stickerpackWidget.content.name}
room={this.props.room}
type={stickerpackWidget.content.type}
fullWidth={true}
userId={stickerpackWidget.sender || MatrixClientPeg.get().credentials.userId}
creatorUserId={MatrixClientPeg.get().credentials.userId}
waitForIframeLoad={true}
show={true}
2018-02-07 14:44:01 +00:00
showMenubar={true}
onEditClick={this._launchManageIntegrations}
onDeleteClick={this._removeStickerpackWidgets}
showTitle={false}
showMinimise={false}
2018-01-16 23:25:07 +00:00
/>
</div>
</div>
);
} else {
// Default content to show if stickerpack widget not added
2018-02-07 09:23:00 +00:00
console.warn("No available sticker picker widgets");
2018-02-05 11:49:44 +00:00
stickersContent = this.defaultStickersContent;
2018-02-07 09:23:00 +00:00
this.forceUpdate();
}
2018-02-07 09:23:00 +00:00
this.setState({
showStickers: false,
stickersContent: 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) {
2018-02-07 09:23:00 +00:00
this._getStickerPickerWidget();
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
2018-01-16 21:06:57 +00:00
const x = buttonRect.right + window.pageXOffset - 37;
const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
// const self = this;
2018-01-17 15:40:47 +00:00
this.stickersMenu = ContextualMenu.createMenu(GenericElementContextMenu, {
chevronOffset: 10,
chevronFace: 'bottom',
left: x,
top: y,
menuWidth: this.popoverWidth,
menuHeight: this.popoverHeight,
element: this.state.stickersContent,
2018-01-16 21:28:15 +00:00
onFinished: this.onFinished,
2018-02-08 17:50:30 +00:00
menuPaddingTop: 0,
});
this.setState({showStickers: true});
}
/**
* Trigger hiding of the sticker picker overlay
* @param {Event} ev Event that triggered the function call
*/
onHideStickersClick(ev) {
2018-01-17 15:40:47 +00:00
this.stickersMenu.close();
}
/**
* The stickers picker was hidden
*/
2018-01-16 21:28:15 +00:00
onFinished() {
this.setState({showStickers: false});
2018-01-17 15:40:47 +00:00
this.stickersMenu = null;
2018-02-07 09:23:00 +00:00
this.forceUpdate();
console.warn("finshed");
2018-01-16 21:28:15 +00:00
}
/**
* Launch the integrations manager on the stickers integration page
*/
2018-01-17 00:04:06 +00:00
_launchManageIntegrations() {
this.onFinished();
const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
this.scalarClient.getScalarInterfaceUrlForRoom(
2018-02-09 11:44:27 +00:00
this.props.room,
'type_stickerpack',
this.widgetId,
2018-01-17 00:04:06 +00:00
) :
null;
Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
src: src,
}, "mx_IntegrationsManager");
}
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"
2018-01-17 15:49:36 +00:00
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;
}
}