Load stickers in AppTile
parent
4f3670941d
commit
1ab71f6f50
|
@ -41,7 +41,8 @@ export default class AppTile extends React.Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(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._onAction = this._onAction.bind(this);
|
||||||
this._onMessage = this._onMessage.bind(this);
|
this._onMessage = this._onMessage.bind(this);
|
||||||
|
@ -158,8 +159,10 @@ export default class AppTile extends React.Component {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
// Legacy Jitsi widget messaging -- TODO replace this with standard widget
|
// Legacy Jitsi widget messaging -- TODO replace this with standard widget
|
||||||
// postMessaging API
|
// postMessaging API
|
||||||
dis.register(this._onAction);
|
|
||||||
window.addEventListener('message', this._onMessage, false);
|
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
|
* Called when widget iframe has finished loading
|
||||||
*/
|
*/
|
||||||
_onLoaded() {
|
_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 = new WidgetMessaging(this.props.id, this.refs.appFrame.contentWindow);
|
||||||
this.widgetMessaging.startListening();
|
this.widgetMessaging.startListening();
|
||||||
this.widgetMessaging.addEndpoint(this.props.id, this.props.url);
|
this.widgetMessaging.addEndpoint(this.props.id, this.props.url);
|
||||||
|
@ -494,6 +497,7 @@ export default class AppTile extends React.Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
|
<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}>
|
<div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
|
||||||
<span className="mx_AppTileMenuBarTitle">
|
<span className="mx_AppTileMenuBarTitle">
|
||||||
<TintableSvgButton
|
<TintableSvgButton
|
||||||
|
@ -539,7 +543,7 @@ export default class AppTile extends React.Component {
|
||||||
height="10"
|
height="10"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div> }
|
||||||
{ appTileBody }
|
{ appTileBody }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -560,9 +564,13 @@ AppTile.propTypes = {
|
||||||
// UserId of the entity that added / modified the widget
|
// UserId of the entity that added / modified the widget
|
||||||
creatorUserId: React.PropTypes.string,
|
creatorUserId: React.PropTypes.string,
|
||||||
waitForIframeLoad: React.PropTypes.bool,
|
waitForIframeLoad: React.PropTypes.bool,
|
||||||
|
showMenubar: React.PropTypes.bool,
|
||||||
|
// Should the AppTile render itself
|
||||||
|
show: React.PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
|
||||||
AppTile.defaultProps = {
|
AppTile.defaultProps = {
|
||||||
url: "",
|
url: "",
|
||||||
waitForIframeLoad: true,
|
waitForIframeLoad: true,
|
||||||
|
showMenubar: true,
|
||||||
};
|
};
|
||||||
|
|
|
@ -25,6 +25,7 @@ import Autocomplete from './Autocomplete';
|
||||||
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
|
import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
|
||||||
import Popover from 'react-simple-popover';
|
import Popover from 'react-simple-popover';
|
||||||
import Widgets from '../../../utils/widgets';
|
import Widgets from '../../../utils/widgets';
|
||||||
|
import AppTile from '../elements/AppTile';
|
||||||
|
|
||||||
export default class MessageComposer extends React.Component {
|
export default class MessageComposer extends React.Component {
|
||||||
constructor(props, context) {
|
constructor(props, context) {
|
||||||
|
@ -285,13 +286,26 @@ export default class MessageComposer extends React.Component {
|
||||||
// Stickers
|
// Stickers
|
||||||
if (this.state.showStickers) {
|
if (this.state.showStickers) {
|
||||||
const stickerpackWidget = Widgets.getStickerpackWidgets()[0];
|
const stickerpackWidget = Widgets.getStickerpackWidgets()[0];
|
||||||
console.warn('Stickerpack widgets', stickerpackWidget);
|
|
||||||
let stickersContent = <p>Click here to add your first sitckerpack</p>;
|
let stickersContent = <p>Click here to add your first sitckerpack</p>;
|
||||||
if (stickerpackWidget && stickerpackWidget.content && stickerpackWidget.content.url) {
|
if (stickerpackWidget && stickerpackWidget.content && stickerpackWidget.content.url) {
|
||||||
stickersContent = <iframe src={stickerpackWidget.content.url} style={{
|
stickersContent = <div style={{
|
||||||
border: 'none',
|
border: 'none',
|
||||||
height: '160px',
|
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 =
|
hideStickersButton =
|
||||||
|
@ -316,7 +330,7 @@ export default class MessageComposer extends React.Component {
|
||||||
width: 'initial',
|
width: 'initial',
|
||||||
padding: 0,
|
padding: 0,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
height: '160px'
|
height: '160px',
|
||||||
}}
|
}}
|
||||||
children={stickersContent}
|
children={stickersContent}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue