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 (
+
{videos}
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 (
+
+ );
+ }
+});
+
+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 {