Add simple chat component and make videojs player fluid

Author: yamalight

src/components/chat/index.js

@@ -0,0 +1,60 @@
+// npm packages
+import React from 'react';
+
+export default class Chat extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      episode: props.episode,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.episode && (!this.state.episode || nextProps.episode._id !== this.state.episode._id)) {
+      this.setState({episode: nextProps.episode}, () => {
+        this.connectToServer();
+      });
+    }
+  }
+
+  connectToServer() {
+    const {episode} = this.state;
+
+    // Create WebSocket connection.
+    const url = `ws://localhost:3000${episode._id}`;
+    this.socket = new WebSocket(url);
+
+    // Connection opened
+    // this.socket.addEventListener('open', event => {
+    // this.socket.send('Hello Server!');
+    // });
+
+    // Listen for messages
+    this.socket.addEventListener('message', event => {
+      console.log('Message from server', event.data);
+    });
+  }
+
+  render() {
+    return (
+      <div className="column" style={{width: 340, maxWidth: 340, display: 'flex', flexDirection: 'column'}}>
+        <div className="is-flex" style={{flexGrow: 1}}>
+          Chat history
+        </div>
+        <div className="is-flex">
+          <div className="field has-addons" style={{flexGrow: 1}}>
+            <p className="control" style={{flexGrow: 1}}>
+              <input className="input" type="text" placeholder="Send a message.." />
+            </p>
+            <p className="control" style={{marginRight: 10}}>
+              <a className="button is-info">
+                Send
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/episode.js

@@ -1,7 +1,7 @@
 // npm packages
 import React from 'react';
-import {Link} from 'react-router-dom';
 // our packages
+import Chat from '../components/chat';
 import PluginManager from '../api';
 
 export default class Series extends React.Component {
@@ -25,6 +25,7 @@ export default class Series extends React.Component {
     }
 
     videojs('video', {
+      fluid: true,
       plugins: {
         ass: {
           src: file.subtitles,
@@ -54,7 +55,13 @@ export default class Series extends React.Component {
 
     if (episode && file) {
       body = (
-        <video id="video" className="video-js" controls autoPlay preload="auto">
+        <video
+          id="video"
+          className="video-js vjs-default-skin vjs-big-play-centered vjs-fluid"
+          controls
+          autoPlay
+          preload="auto"
+        >
           <source src={file.url} type={file.type} />
         </video>
       );
@@ -75,7 +82,12 @@ export default class Series extends React.Component {
           </div>
         </nav>
 
-        {body}
+        <div className="columns">
+          <div className="column">
+            {body}
+          </div>
+          <Chat episode={episode} />
+        </div>
       </div>
     );
   }