mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-04 22:00:42 +03:00
Code Issues Projects Releases Packages Wiki Activity

Load stickers in AppTile

Browse source
This commit is contained in:
Richard Lewis 2018-01-11 13:20:58 +00:00
parent 4f3670941d
commit 1ab71f6f50
2 changed files with 30 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/views/elements/AppTile.js
View file

@ -41,7 +41,8 @@ export default class AppTile extends React.Component {
constructor(props) {
super(props);
this.state = this._getNewState(this.props);
console.warn('AppTile constructor', props);
this.state = this._getNewState(props);
this._onAction = this._onAction.bind(this);
this._onMessage = this._onMessage.bind(this);
@ -158,8 +159,10 @@ export default class AppTile extends React.Component {
componentDidMount() {
// Legacy Jitsi widget messaging -- TODO replace this with standard widget
// postMessaging API
dis.register(this._onAction);
window.addEventListener('message', this._onMessage, false);
// General event handler
dis.register(this._onAction);
}
/**
@ -322,7 +325,7 @@ export default class AppTile extends React.Component {
* Called when widget iframe has finished loading
*/
_onLoaded() {
// console.warn("App frame loaded", this.props.id);
console.warn("App frame loaded", this.props.id);
this.widgetMessaging = new WidgetMessaging(this.props.id, this.refs.appFrame.contentWindow);
this.widgetMessaging.startListening();
this.widgetMessaging.addEndpoint(this.props.id, this.props.url);
@ -494,6 +497,7 @@ export default class AppTile extends React.Component {
return (
<div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
{ this.props.showMenubar &&
<div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
<span className="mx_AppTileMenuBarTitle">
<TintableSvgButton
@ -539,7 +543,7 @@ export default class AppTile extends React.Component {
height="10"
/>
</span>
</div>
</div> }
{ appTileBody }
</div>
);
@ -560,9 +564,13 @@ AppTile.propTypes = {
// UserId of the entity that added / modified the widget
creatorUserId: React.PropTypes.string,
waitForIframeLoad: React.PropTypes.bool,
showMenubar: React.PropTypes.bool,
// Should the AppTile render itself
show: React.PropTypes.bool,
};
AppTile.defaultProps = {
url: "",
waitForIframeLoad: true,
showMenubar: true,
};

22
src/components/views/rooms/MessageComposer.js
View file

@ -25,6 +25,7 @@ import Autocomplete from './Autocomplete';
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
import Popover from 'react-simple-popover';
import Widgets from '../../../utils/widgets';
import AppTile from '../elements/AppTile';
export default class MessageComposer extends React.Component {
constructor(props, context) {
@ -285,13 +286,26 @@ export default class MessageComposer extends React.Component {
// Stickers
if (this.state.showStickers) {
const stickerpackWidget = Widgets.getStickerpackWidgets()[0];
console.warn('Stickerpack widgets', stickerpackWidget);
let stickersContent = <p>Click here to add your first sitckerpack</p>;
if (stickerpackWidget && stickerpackWidget.content && stickerpackWidget.content.url) {
stickersContent = <iframe src={stickerpackWidget.content.url} style={{
stickersContent = <div style={{
border: 'none',
height: '160px',
}}></iframe>;
}}>
<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}
showMenubar={false}
/>
</div>;
}
hideStickersButton =
@ -316,7 +330,7 @@ export default class MessageComposer extends React.Component {
width: 'initial',
padding: 0,
overflow: 'hidden',
height: '160px'
height: '160px',
}}
children={stickersContent}
/>