WIP

Author: Ari

Diff for: config/production.config.js

@@ -0,0 +1 @@
+TURN_SERVER=https://runfullstack.co:8080/

Diff for: src/components/Rooms/VideoView.js

@@ -9,6 +9,7 @@ export const types = createConstants('webrtc')(
 
   'LOCAL_MEDIA_START',
   'LOCAL_MEDIA_ERROR',
+  'LOCAL_MEDIA_STOP',
 
   'PEER_STREAM_ADDED',
   'PEER_STREAM_REMOVED',
@@ -39,6 +40,11 @@ export const reducer = createReducer({
     localStreamError: payload
   }),
 
+  [types.LOCAL_MEDIA_STOP]: (state, {payload}) => ({
+    ...state,
+    localStream: null
+  }),
+
   [types.PEER_STREAM_ADDED]: (state, {payload}) => {
     const peers = rtc.webrtc.getPeers();
     return {...state, peers}
@@ -91,6 +97,7 @@ export const actions = {
     return {type: types.JOIN_ROOM, payload: room}
   },
   leaveRoom: (room) => {
+    rtc.leaveRoom(room);
     return {type: types.LEAVE_ROOM, payload: room}
   },
   startLocalMedia: (config = {}) => (dispatch) => {
@@ -103,6 +110,12 @@ export const actions = {
           dispatch({type: types.LOCAL_MEDIA_START, payload: stream})
         }
     });
+  },
+  stopLocalMedia: () => {
+    rtc.stopLocalVideo();
+    return {
+      type: types.LOCAL_MEDIA_STOP
+    }
   }
 }
 

Diff for: src/redux/modules/webrtc.js

@@ -13,13 +13,6 @@ export class Index extends React.Component {
     const {actions, params} = this.props;
   }
 
-  goToAbout(evt) {
-    const {router} = this.context;
-    const {actions} = this.props;
-    actions.routing.navigateTo('about');
-    return false;
-  }
-
   newChat(evt) {
     evt.preventDefault();
     const {actions} = this.props;
@@ -39,22 +32,18 @@ export class Index extends React.Component {
 
     return (
       <div className={styles.container}>
-        <div className={[styles.grid]}>
-          <div className={[styles.row, styles.smallRow]}>
-            <div className={styles.actions}>
-              <form className={formStyles.form}
-                    onSubmit={this.newChat.bind(this)}>
-                <input name="roomName"
-                    ref="roomName"
-                    className={[formStyles.input]}
-                    placeholder="Get a room (or leave blank for randomly generated one)" />
-                <input type="submit"
-                    className={[formStyles.btn, styles.actions].join(' ')}
-                    onClick={this.newChat.bind(this)}
-                    value="New chat" />
-              </form>
-            </div>
-          </div>
+        <div className={[styles.row, styles.smallRow]}>
+          <form className={formStyles.form}
+                onSubmit={this.newChat.bind(this)}>
+            <input name="roomName"
+                ref="roomName"
+                className={[formStyles.input]}
+                placeholder="Get a room (or leave blank for randomly generated one)" />
+            <input type="submit"
+                className={[formStyles.btn, styles.actions].join(' ')}
+                onClick={this.newChat.bind(this)}
+                value="New chat" />
+          </form>
         </div>
       </div>
     )

Diff for: src/views/main/indexPage/Page.js

@@ -1,24 +1,11 @@
 @import url('../../../styles/base.css');
 @import url('../../../styles/colors.css');
 
-.room {
-}
-
-.actions {
-  text-align: center;
-}
-
-.grid {
-}
-
 .row {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-}
-
-.room {
-  flex: 1;
+  text-align: center;
 }
 
 @media all and ( min-width: 480px ) {

Diff for: src/views/main/indexPage/styles.module.css

@@ -47,7 +47,13 @@ export class VideoIndex extends React.Component {
   leaveRoom(roomName) {
     const {actions} = this.props;
     actions.webrtc.leaveRoom(roomName);
-    actions.routing.navigateTo('/')
+    actions.routing.navigateTo('/');
+  }
+
+  componentWillUnmount() {
+    const {actions} = this.props;
+    actions.webrtc.stopLocalMedia();
+    this.leaveRoom(this.props.roomName);
   }
 
   render() {

Diff for: src/views/main/video/Page.js

@@ -12,6 +12,10 @@ const getConfig = require('hjs-webpack');
 const isDev = NODE_ENV === 'development';
 const isTest = NODE_ENV === 'test';
 
+// devServer config
+const devHost   = process.env.HOST || 'localhost';
+const devPort   = process.env.PORT || 3000;
+
 const root = resolve(__dirname);
 const src = join(root, 'src');
 const modules = join(root, 'node_modules');
@@ -27,7 +31,7 @@ var config = getConfig({
     return {
       'index.html': context.defaultTemplate({
         title: 'callerId',
-        publicPath: isDev ? '//localhost:3000/' : '',
+        publicPath: isDev ? `//${devHost}:${devPort}/` : '',
         meta: {}
       })
     };
@@ -54,6 +58,8 @@ const defines =
     __DEBUG__: isDev
   });
 
+console.log('defines', defines);
+
 config.plugins = [
   new webpack.DefinePlugin(defines)
 ].concat(config.plugins);
@@ -115,6 +121,12 @@ config.externals = {
   'ws': true
 }
 
+// Dev
+if (isDev) {
+  config.devServer.port = devPort;
+  config.devServer.hostname = devHost;
+}
+
 // console.log(require('prettyjson').render(config));
 // Testing
 if (isTest) {