Added chat support

app/lib/RoomClient.js

@@ -13,7 +13,7 @@ const ROOM_OPTIONS =
 	requestTimeout   : 10000,
 	transportOptions :
 	{
-		tcp : false
+		tcp : true
 	}
 };
 
@@ -141,6 +141,40 @@ export default class RoomClient
 			});
 	}
 
+	sendChatMessage(chatMessage)
+	{
+		logger.debug('sendChatMessage() [chatMessage:"%s"]', chatMessage);
+
+		return this._protoo.send('chat-message', { chatMessage })
+			.catch((error) =>
+			{
+				logger.error('sendChatMessage() | failed: %o', error);
+
+				this._dispatch(requestActions.notify(
+					{
+						type : 'error',
+						text : `Could not send chat: ${error}`
+					}));
+			});
+	}
+
+	getChatHistory()
+	{
+		logger.debug('getChatHistory()');
+
+		return this._protoo.send('chat-history', {})
+			.catch((error) =>
+			{
+				logger.error('getChatHistory() | failed: %o', error);
+
+				this._dispatch(requestActions.notify(
+					{
+						type : 'error',
+						text : `Could not get chat history: ${error}`
+					}));
+			});
+	}
+
 	muteMic()
 	{
 		logger.debug('muteMic()');
@@ -579,6 +613,36 @@ export default class RoomClient
 					break;
 				}
 
+				case 'chat-message-receive':
+				{
+					accept();
+
+					const { peerName, chatMessage } = request.data;
+
+					logger.debug('Got chat from "%s"', peerName);
+
+					this._dispatch(
+						stateActions.addResponseMessage(chatMessage));
+
+					break;
+				}
+
+				case 'chat-history-receive':
+				{
+					accept();
+
+					const { chatHistory } = request.data;
+
+					if (chatHistory.length > 0)
+					{
+						logger.debug('Got chat history');
+						this._dispatch(
+							stateActions.addChatHistory(chatHistory));
+					}
+
+					break;
+				}
+
 				default:
 				{
 					logger.error('unknown protoo method "%s"', request.method);
@@ -709,6 +773,8 @@ export default class RoomClient
 				// Clean all the existing notifcations.
 				this._dispatch(stateActions.removeAllNotifications());
 
+				this.getChatHistory();
+
 				this._dispatch(requestActions.notify(
 					{
 						text    : 'You are in the room',

app/lib/components/Chat/MessageList.jsx

@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import marked from 'marked';
+import { connect } from 'react-redux';
+
+const scrollToBottom = () =>
+{
+	const messagesDiv = document.getElementById('messages');
+
+	messagesDiv.scrollTop = messagesDiv.scrollHeight;
+};
+
+const linkRenderer = new marked.Renderer();
+
+linkRenderer.link = (href, title, text) =>
+{
+	title = title ? title : href;
+	text = text ? text : href;
+	
+	return (`<a target='_blank' href='${ href }' title='${ title }'>${ text }</a>`);
+};
+
+class MessageList extends Component
+{
+	componentDidMount()
+	{
+		scrollToBottom();
+	}
+
+	componentDidUpdate()
+	{
+		scrollToBottom();
+	}
+	
+	getTimeString(time)
+	{
+		return `${(time.getHours() < 10 ? '0' : '')}${time.getHours()}:${(time.getMinutes() < 10 ? '0' : '')}${time.getMinutes()}`;
+	}
+
+	render()
+	{
+		const {
+			chatmessages
+		} = this.props;
+
+		return (
+			<div data-component='MessageList' id='messages'>
+				{
+					chatmessages.map((message, i) =>
+					{
+						const messageTime = new Date(message.time);
+
+						return (
+							<div className='message' key={i}>
+								<div className={message.sender}>
+									<div
+										className='message-text'
+										// eslint-disable-next-line react/no-danger
+										dangerouslySetInnerHTML={{ __html : marked.parse(
+											message.text,
+											{ sanitize: true, renderer: linkRenderer }
+										) }}
+									/>
+									<span className='message-time'>
+										{message.name} - {this.getTimeString(messageTime)}
+									</span>
+								</div>
+							</div>
+						);
+					})
+				}
+			</div>
+		);
+	}
+}
+
+MessageList.propTypes =
+{
+	chatmessages : PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		chatmessages : state.chatmessages
+	};
+};
+
+const MessageListContainer = connect(
+	mapStateToProps
+)(MessageList);
+
+export default MessageListContainer;

app/lib/components/ChatWidget.jsx

@@ -0,0 +1,118 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import * as stateActions from '../redux/stateActions';
+import * as requestActions from '../redux/requestActions';
+import MessageList from './Chat/MessageList';
+
+class ChatWidget extends Component
+{
+	render()
+	{
+		const {
+			senderPlaceHolder,
+			onSendMessage,
+			onToggleChat,
+			showChat,
+			disabledInput,
+			badge,
+			autofocus,
+			displayName
+		} = this.props;
+
+		return (
+			<div data-component='ChatWidget'>
+				{
+					showChat &&
+					<div data-component='Conversation'>
+						<MessageList />
+						<form
+							data-component='Sender'
+							onSubmit={(e) => { onSendMessage(e, displayName); }}
+						>
+							<input
+								type='text'
+								className='new-message'
+								name='message'
+								placeholder={senderPlaceHolder}
+								disabled={disabledInput}
+								autoFocus={autofocus}
+								autoComplete='off'
+							/>
+						</form>
+					</div>
+				}
+				{
+					<div
+						className='launcher'
+						data-type='dark'
+						data-tip='Show room chat'
+						onClick={onToggleChat}
+					>
+						{
+							badge > 0 && <span className='badge'>{badge}</span>
+						}
+					</div>
+				}
+			</div>
+		);
+	}
+}
+
+ChatWidget.propTypes =
+{
+	onToggleChat      : PropTypes.func,
+	showChat          : PropTypes.bool,
+	senderPlaceHolder : PropTypes.string,
+	onSendMessage     : PropTypes.func,
+	disabledInput     : PropTypes.bool,
+	badge             : PropTypes.number,
+	autofocus         : PropTypes.bool,
+	displayName       : PropTypes.string
+};
+
+ChatWidget.defaultProps =
+{
+	senderPlaceHolder : 'Type a message...',
+	badge             : 0,
+	autofocus         : true,
+	displayName       : null
+};
+
+const mapStateToProps = (state) =>
+{
+	return {
+		showChat      : state.chatbehavior.showChat,
+		disabledInput : state.chatbehavior.disabledInput,
+		displayName   : state.me.displayName
+	};
+};
+
+const mapDispatchToProps = (dispatch) =>
+{
+	return {
+		onToggleChat : () =>
+		{
+			dispatch(stateActions.toggleChat());
+		},
+		onSendMessage : (event, displayName) =>
+		{
+			event.preventDefault();
+			const userInput = event.target.message.value;
+
+			if (userInput)
+			{
+				dispatch(stateActions.addUserMessage(userInput));
+				dispatch(requestActions.sendChatMessage(userInput, displayName));
+			}
+			event.target.message.value = '';
+		}
+	};
+};
+
+const ChatWidgetContainer = connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(ChatWidget);
+
+export default ChatWidgetContainer;

app/lib/components/Room.jsx

@@ -10,6 +10,7 @@ import { Appear } from './transitions';
 import Me from './Me';
 import Peers from './Peers';
 import Notifications from './Notifications';
+import ChatWidget from './ChatWidget';
 
 class Room extends React.Component
 {
@@ -29,6 +30,7 @@ class Room extends React.Component
 			<Appear duration={300}>
 				<div data-component='Room'>
 					<Notifications />
+					<ChatWidget />
 
 					<div className='state' data-tip='Server status'>
 						<div className={classnames('icon', room.state)} />

app/lib/components/appPropTypes.js

@@ -69,3 +69,11 @@ export const Notification = PropTypes.shape(
 		type    : PropTypes.oneOf([ 'info', 'error' ]).isRequired,
 		timeout : PropTypes.number
 	});
+
+export const Message = PropTypes.shape(
+	{
+		type      : PropTypes.string,
+		component : PropTypes.string,
+		text      : PropTypes.string,
+		sender    : PropTypes.string
+	});

app/lib/redux/reducers/chatbehavior.js

@@ -0,0 +1,31 @@
+const initialState =
+{
+	showChat      : false,
+	disabledInput : false,
+	badge         : 0
+};
+
+const chatbehavior = (state = initialState, action) =>
+{
+	switch (action.type)
+	{
+		case 'TOGGLE_CHAT':
+		{
+			const showChat = !state.showChat;
+
+			return { ...state, showChat };
+		}
+
+		case 'TOGGLE_INPUT_DISABLED':
+		{
+			const disabledInput = !state.disabledInput;
+
+			return { ...state, disabledInput };
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default chatbehavior;

app/lib/redux/reducers/chatmessages.js

@@ -0,0 +1,45 @@
+import
+{
+	createNewMessage
+} from './helper';
+
+const initialState = [];
+
+const chatmessages = (state = initialState, action) =>
+{
+	switch (action.type)
+	{
+		case 'ADD_NEW_USER_MESSAGE':
+		{
+			const { text } = action.payload;
+
+			const message = createNewMessage(text, 'client', 'Me');
+
+			return [ ...state, message ];
+		}
+
+		case 'ADD_NEW_RESPONSE_MESSAGE':
+		{
+			const { message } = action.payload;
+
+			return [ ...state, message ];
+		}
+
+		case 'ADD_CHAT_HISTORY':
+		{
+			const { chatHistory } = action.payload;
+
+			return [ ...state, ...chatHistory ];
+		}
+
+		case 'DROP_MESSAGES':
+		{
+			return [];
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default chatmessages;

app/lib/redux/reducers/helper.js

@@ -0,0 +1,10 @@
+export function createNewMessage(text, sender, name)
+{
+	return {
+		type : 'message',
+		text,
+		time : Date.now(),
+		name,
+		sender
+	};
+}

app/lib/redux/reducers/index.js

@@ -5,6 +5,8 @@ import producers from './producers';
 import peers from './peers';
 import consumers from './consumers';
 import notifications from './notifications';
+import chatmessages from './chatmessages';
+import chatbehavior from './chatbehavior';
 
 const reducers = combineReducers(
 	{
@@ -13,7 +15,9 @@ const reducers = combineReducers(
 		producers,
 		peers,
 		consumers,
-		notifications
+		notifications,
+		chatmessages,
+		chatbehavior
 	});
 
 export default reducers;

app/lib/redux/requestActions.js

@@ -1,5 +1,9 @@
 import randomString from 'random-string';
 import * as stateActions from './stateActions';
+import
+{
+	createNewMessage
+} from './reducers/helper';
 
 export const joinRoom = (
 	{ roomId, peerName, displayName, device, useSimulcast, produce }) =>
@@ -81,6 +85,16 @@ export const restartIce = () =>
 	};
 };
 
+export const sendChatMessage = (text, name) =>
+{
+	const message = createNewMessage(text, 'response', name);
+
+	return {
+		type    : 'SEND_CHAT_MESSAGE',
+		payload : { message }
+	};
+};
+
 // This returns a redux-thunk action (a function).
 export const notify = ({ type = 'info', text, timeout }) =>
 {

app/lib/redux/roomClientMiddleware.js

@@ -108,6 +108,15 @@ export default ({ dispatch, getState }) => (next) =>
 
 				break;
 			}
+
+			case 'SEND_CHAT_MESSAGE':
+			{
+				const { message } = action.payload;
+
+				client.sendChatMessage(message);
+
+				break;
+			}
 		}
 
 		return next(action);

app/lib/redux/stateActions.js

@@ -220,3 +220,48 @@ export const removeAllNotifications = () =>
 		type : 'REMOVE_ALL_NOTIFICATIONS'
 	};
 };
+
+export const toggleChat = () =>
+{
+	return {
+		type : 'TOGGLE_CHAT'
+	};
+};
+
+export const toggleInputDisabled = () =>
+{
+	return {
+		type : 'TOGGLE_INPUT_DISABLED'
+	};
+};
+
+export const addUserMessage = (text) =>
+{
+	return {
+		type    : 'ADD_NEW_USER_MESSAGE',
+		payload : { text }
+	};
+};
+
+export const addResponseMessage = (message) =>
+{
+	return {
+		type    : 'ADD_NEW_RESPONSE_MESSAGE',
+		payload : { message }
+	};
+};
+
+export const addChatHistory = (chatHistory) =>
+{
+	return {
+		type    : 'ADD_CHAT_HISTORY',
+		payload : { chatHistory }
+	};
+};
+
+export const dropMessages = () =>
+{
+	return {
+		type : 'DROP_MESSAGES'
+	};
+};

app/lib/utils.js

@@ -4,7 +4,7 @@ export function initialize()
 {
 	// Media query detector stuff.
 	mediaQueryDetectorElem =
-		document.getElementById('mediasoup-demo-app-media-query-detector');
+		document.getElementById('multiparty-meeting-media-query-detector');
 
 	return Promise.resolve();
 }