From 6bbabc1f3331b099ef118525eff53b528c894cd3 Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Tue, 30 May 2017 23:56:24 -0400
Subject: [PATCH] Add messaging support (experimental)

---
 .eslintrc                      |  2 +-
 src/client/components/app.js   |  2 ++
 src/client/components/input.js | 39 ++++++++++++++++++++++++++++++++++
 src/client/peer/peers.js       | 15 +++++++++++--
 src/less/main.less             | 27 ++++++++++++++++++-----
 5 files changed, 77 insertions(+), 8 deletions(-)
 create mode 100644 src/client/components/input.js

diff --git a/.eslintrc b/.eslintrc
index 43899d2..9ea9bb5 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -200,7 +200,7 @@
         "react/no-did-mount-set-state": 1,
         "react/no-did-update-set-state": 1,
         "react/no-direct-mutation-state": 1,
-        "react/no-set-state": 1,
+        "react/no-set-state": 0,
         "react/no-unknown-property": 1,
         "react/prefer-es6-class": 0,
         // "react/prop-types": 1,
diff --git a/src/client/components/app.js b/src/client/components/app.js
index 4c35504..cd86544 100644
--- a/src/client/components/app.js
+++ b/src/client/components/app.js
@@ -1,4 +1,5 @@
 const Alert = require('./alert.js');
+const Input = require('./input.js');
 const Notifications = require('./notifications.js');
 const React = require('react');
 const _ = require('underscore');
@@ -47,6 +48,7 @@ function app() {
   return (<div className="app">
     <Alert />
     <Notifications />
+    <Input />
     <div className="videos">
       {videos}
     </div>
diff --git a/src/client/components/input.js b/src/client/components/input.js
new file mode 100644
index 0000000..33c0d2d
--- /dev/null
+++ b/src/client/components/input.js
@@ -0,0 +1,39 @@
+const React = require('react');
+const peers = require('../peer/peers.js');
+const notify = require('../action/notify.js');
+
+const Input = React.createClass({
+  getInitialState() {
+    return {
+      visible: false,
+      message: ''
+    };
+  },
+  handleChange(e) {
+    this.setState({
+      message: e.target.value
+    });
+  },
+  handleSubmit(e) {
+    e.preventDefault();
+    const { message } = this.state;
+    peers.message(message);
+    notify.info('You: ' + message);
+    this.setState({ message: '' });
+  },
+  render() {
+    const { message } = this.state;
+    return (
+      <form className="input" onSubmit={this.handleSubmit}>
+        <input
+          onChange={this.handleChange}
+          placeholder="Enter your message..."
+          type="text"
+          value={message}
+        />
+      </form>
+    );
+  }
+});
+
+module.exports = Input;
diff --git a/src/client/peer/peers.js b/src/client/peer/peers.js
index f50d8ac..9605f95 100644
--- a/src/client/peer/peers.js
+++ b/src/client/peer/peers.js
@@ -15,7 +15,7 @@ let peers = {};
  * @param {MediaStream} [stream]
  */
 function create({ socket, user, initiator, stream }) {
-  debug('create peer: %s', user.id);
+  debug('create peer: %s, stream:', user.id, stream);
   notify.warn('Connecting to peer...');
 
   if (peers[user.id]) {
@@ -57,6 +57,12 @@ function create({ socket, user, initiator, stream }) {
     });
   });
 
+  peer.on('data', object => {
+    object = JSON.parse(new window.TextDecoder('utf-8').decode(object));
+    debug('peer: %s, message: %o', user.id, object);
+    notify.info('' + user.id + ': ' + object.message);
+  });
+
   peer.once('close', () => {
     debug('peer: %s, close', user.id);
     notify.error('Peer connection closed');
@@ -93,4 +99,9 @@ function destroy(userId) {
   delete peers[userId];
 }
 
-module.exports = { create, get, getIds, destroy, clear };
+function message(message) {
+  message = JSON.stringify({ message });
+  _.each(peers, peer => peer.send(message));
+}
+
+module.exports = { create, get, getIds, destroy, clear, message };
diff --git a/src/less/main.less b/src/less/main.less
index 630cc60..2e8a37c 100644
--- a/src/less/main.less
+++ b/src/less/main.less
@@ -180,17 +180,16 @@ body.call {
 
     .notification {
       color: @color-info;
-      text-shadow: 0 0 0.1rem @color-info;
+      padding: 0.25rem;
+      background-color: rgba(0, 0, 0, 0.2);
     }
 
     .notification.error {
       color: @color-error;
-      text-shadow: 0 0 0.1rem @color-error;
     }
 
     .notification.warning {
       color: @color-warning;
-      text-shadow: 0 0 0.1rem @color-warning;
     }
 
   }
@@ -207,7 +206,7 @@ body.call {
     .video-container {
       background-color: black;
       box-shadow: 0px 0px 5px black;
-      border-radius: @video-size / 2;
+      border-radius: 10px;
       display: inline-block;
       margin-right: 10px;
       width: @video-size;
@@ -215,7 +214,7 @@ body.call {
       z-index: 2;
 
       video {
-        border-radius: @video-size / 2;
+        border-radius: 10px;
         cursor: pointer;
         object-fit: cover;
         width: 100%;
@@ -241,6 +240,24 @@ body.call {
       }
     }
   }
+
+  .input {
+    position: fixed;
+    left: 10pxpx;
+    bottom: 15px;
+    z-index: 3;
+
+    input {
+      box-shadow: 0px 0px 5px black;
+      background-color: black;
+      background-color: rgba(0, 0, 0, 0.5);
+      border: none;
+      color: #ccc;
+      padding: 0.5rem;
+      font-family: @font-monospace;
+    }
+  }
+
 }
 
 .fade-enter {