iris/src/components/chat.js

'use strict';
const React = require('react');
const create = require('create-react-class');
const sanitize = require('sanitize-html');

const Event = require('./events/Event.js');
const Info = require('./info.js');
const Input = require('./input.js');
const User = require('./events/user.js');
const Loading = require('./loading.js');

const generateJdenticon = require("../lib/generate-jdenticon");

let eventFunctions = {
	plaintext: function() {
		let plain = "unknown event";

		if (this.type == "m.room.message") {
			plain = this.content.body;

			if (this.content.format == "org.matrix.custom.html") {
				plain = sanitize(this.content.formatted_body, {allowedTags: []});
			}
		}
		if (this.type == "m.room.member") {
			if (this.content.membership == "invite") {
				plain = `${this.sender} invited ${this.state_key}`;
			} else if (this.content.membership == "join") {
				plain = `${this.state_key} joined the room`;
			} else if (this.content.membership == "leave") {
				plain = `${this.state_key} left the room`;
			} else if (this.content.membership == "kick") {
				plain = `${this.sender} kicked ${this.state_key}`;
			} else if (this.content.membership == "ban") {
				plain = `${this.sender} banned ${this.state_key}`;
			}
		}
		if (this.type == "m.room.avatar") {
			if (this.content.url.length > 0) {
				plain = `${this.sender} changed the room avatar`;
			}
		}
		if (this.type == "m.room.name") {
			return `${this.sender} changed the room name to ${this.content.name}`;
		}
		return plain;
	}
};

let chat = create({
	displayName: "Chat",

	getInitialState: function() {
		return {
			ref: null,
			loading: false
		};
	},

	getSnapshotBeforeUpdate: function(_oldProps, _oldState) {
		let ref = this.state.ref;
		if (ref == null) {return null;}
		if ((ref.scrollHeight - ref.offsetHeight) - ref.scrollTop < 100) { // Less than 100px from bottom
			return true;
		}
		return null;
	},

	componentDidUpdate(prevProps, prevState, snapshot) {
		let ref = this.state.ref;
		if (ref == null) {return;}
		if (snapshot) { // scroll to bottom
			ref.scrollTop = (ref.scrollHeight - ref.offsetHeight);
		}
	},

	setRef: function(ref) {
		if (ref != null) {
			this.setState({ref: ref});
		}
	},

	onReplyClick: function(e) {
		this.setState({replyEvent: e});
	},

	paginateBackwards: function() {
		if (this.state.loading) {
			return;
		}
		let client = this.props.client;
		client.paginateEventTimeline(client.getRoom(this.props.roomId).getLiveTimeline(), {backwards: true}).then(() => {
			this.setState({loading: false});
		});
		this.setState({loading: true});
	},

	render: function() {
		let client = this.props.client;
		let empty = (
			<div className="main">
			</div>
		);
		if (this.props.roomId == undefined) {
			//empty screen
			return empty;
		}

		let room = client.getRoom(this.props.roomId);
		if (room == null) {
			return empty;
		}

		let messageGroups = {
			current: [],
			groups: [],
			sender: "",
			type: ""
		};

		// if the sender is the same, add it to the 'current' messageGroup, if not,
		// push the old one to 'groups' and start with a new array.

		let liveTimeline = room.getLiveTimeline();
		let liveTimelineEvents = liveTimeline.getEvents();

		let events = [];
		if (liveTimelineEvents.length > 0) {
			liveTimelineEvents.forEach((MatrixEvent) => {
				let event = MatrixEvent.event;
				event = Object.assign(event, eventFunctions);
				if (event.sender == null) { // localecho messages
					event.sender = event.user_id;
					event.local = true;
				}
				if (event.sender != messageGroups.sender || event.type != messageGroups.type) {
					messageGroups.sender = event.sender;
					messageGroups.type = event.type;
					if (messageGroups.current.length != 0) {
						messageGroups.groups.push(messageGroups.current);
					}
					messageGroups.current = [];
				}
				messageGroups.current.push(event);
			});
			messageGroups.groups.push(messageGroups.current);

			events = messageGroups.groups.map((events) => {
				return <EventGroup key={`${this.props.roomId}-${events[0].event_id}`} events={events} client={this.props.client} room={room} onReplyClick={this.onReplyClick}/>;
			});
		}
		//TODO: replace with something that only renders events in view
		return (
			<div className="main">
				<Info room={room} />
				<div className="chat" ref={this.setRef}>
					<div className="events">
						<div className="paginateBackwards" onClick={this.paginateBackwards}>
							{this.state.loading ?
								<Loading/> :
								<span>load older messages</span>
							}
						</div>
						{events}
					</div>
				</div>
				<Input client={client} roomId={this.props.roomId} replyEvent={this.state.replyEvent} onReplyClick={this.onReplyClick}/>
			</div>
		);
	}
});

let EventGroup = create({
	displayName: "EventGroup",

	getInitialState: function() {
		let user = this.props.client.getUser(this.props.events[0].sender);
		let avatar = <svg id="avatar" ref={this.avatarRef} />;

		if (user.avatarUrl != null) {
			let hs = this.props.client.baseUrl;
			let media_mxc = user.avatarUrl.slice(6);
			let url = `${hs}/_matrix/media/v1/thumbnail/${media_mxc}?width=128&height=128&method=scale`;
			avatar = <img id="avatar" src={url}/>;
		}

		return {
			user: user,
			avatar: avatar
		};
	},

	avatarRef: function(ref) {
		generateJdenticon(this.state.user.userId).update(ref);
	},

	render: function() {
		let events = this.props.events.map((event, key) => {
			return <Event event={event} key={key} client={this.props.client} room={this.props.room} onReplyClick={this.props.onReplyClick}/>;
		});
		return <div className="eventGroup">
			{this.state.avatar}
			<div className="col">
				<User user={this.state.user}/>
				{events}
			</div>
		</div>;
	}
});

module.exports = chat;