Moved things around to set up mulitple pages

package.json

@@ -60,6 +60,7 @@
     "webpack": "^1.13.0"
   },
   "dependencies": {
+    "chance": "^1.0.3",
     "classnames": "^2.2.5",
     "font-awesome": "^4.6.1",
     "freeice": "^2.2.0",

src/app.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 
 require('file?name=favicon.ico!./favicon.ico')
 import 'font-awesome/css/font-awesome.css'
+
 import './app.css'
 
 import App from 'containers/App/App'

src/components/Rooms/Room.js

@@ -0,0 +1,64 @@
+import React from 'react'
+
+import VideoView from 'components/Video/VideoView'
+import styles from './styles.module.css'
+
+export class Room extends React.Component {
+  leaveRoom(room, evt) {
+    this.props.leaveRoom(room);
+  }
+  render() {
+    const {name, ready, peers, localStream} = this.props;
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <div className={styles.title}>{name}</div>
+          <div onClick={this.leaveRoom.bind(this, name)}
+                className={styles.controls}>
+            <i className="fa fa-close"></i>
+          </div>
+        </div>
+        <div className={styles.videoContainer}>
+
+          <div className={styles.main}>
+            <VideoView ready={ready}
+                stream={localStream} />
+          </div>
+
+          <div className={styles.peers}>
+            <div className={styles.invited}>
+              <i className="fa fa-user-plus"></i>
+              Invite
+            </div>
+            <div className={styles.people}>
+              {peers.map(peer => {
+                return (
+                  <div key={peer.id} className={styles.person}>
+                    <VideoView
+                      ready={ready}
+                      stream={peer.stream} />
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+
+          <div className={styles.footer}>
+            <div className={styles.location}>
+              <i className="fa fa-map-marker"></i>
+              San Francisco, CA
+            </div>
+            <div className={styles.time}>
+              <i className="fa fa-clock-o"></i>
+              2:00pm - 2:30pm
+            </div>
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Room;

src/components/Chat/VideoView.js → src/components/Rooms/VideoView.js

@@ -1,15 +1,13 @@
 import React, { PropTypes as T } from 'react'
 import ReactDOM from 'react-dom'
+import attachMediaStream from 'attachmediastream'
 
 import styles from './styles.module.css';
 
-import attachMediaStream from 'attachmediastream'
-
 export class VideoView extends React.Component {
   static propTypes = {
     ready: T.bool,
-    stream: T.object,
-    peer: T.object
+    stream: T.object
   }
 
   componentDidMount() {
@@ -31,9 +29,9 @@ export class VideoView extends React.Component {
 
   render() {
     return (
-      <div className={styles.container}>
+      <div className={styles.videoContainer}>
         <video className={styles.video}
-                ref='videoView'></video>
+                ref='videoView' />
       </div>
     )
   }

src/components/Rooms/styles.module.css

@@ -0,0 +1,108 @@
+@import url('../../styles/base.css');
+@import url('../../styles/colors.css');
+
+:root {
+  --person-video-height: 75px;
+}
+
+.container {
+  border-radius: 12px;
+  overflow: hidden;
+  margin: 60px;
+  box-shadow: 0px 2px 2px var(--dark);
+  border: 0.5px solid var(--dark);
+  padding: 0;
+
+  width: 450px;
+  display: flex;
+  flex-direction: column;
+
+  i {
+    color: var(--light-gray);
+  }
+
+  .header {
+    flex: 1;
+    margin: 10px;
+    padding: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .controls {
+      order: 2;
+      text-align: right;
+      i {
+        font-size: 12px;
+      }
+    }
+    .title {
+      order: 1;
+    }
+  }
+
+  .peers {
+    display: flex;
+    margin: 10px;
+    padding: 0px;
+    align-items: center;
+    justify-content: space-between;
+    z-index: -1;
+
+    i {
+      margin: 0 10px;
+    }
+
+    .invited {
+      flex: 1;
+    }
+
+    .people {
+      /*flex: 1;*/
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: flex-end;
+
+      .person {
+        display: inline-block;
+        background-color: var(--dark);
+        height: var(--person-video-height);
+        width: var(--person-video-height);
+        border-radius: calc(var(--person-video-height)/2);
+        margin-left: var(--padding);
+
+        video {
+          background-color: var(--dark);
+          border-radius: calc(var(--person-video-height)/2);
+          width: var(--person-video-height);
+          height: var(--person-video-height);
+        }
+      }
+    }
+  }
+
+  .footer {
+    min-height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    box-shadow: 0px -2px 1px var(--dark);
+
+    .location, .time {
+      flex: 1;
+      padding: 10px;
+      font-weight: normal;
+      i {
+        margin: 0 10px;
+        font-size: 12px;
+      }
+    }
+
+    .location {
+    }
+    .time {
+      text-align: right;
+    }
+  }
+}

src/components/Video/VideoView.js

@@ -0,0 +1,40 @@
+import React, { PropTypes as T } from 'react'
+import ReactDOM from 'react-dom'
+import attachMediaStream from 'attachmediastream'
+
+import styles from './styles.module.css';
+
+export class VideoView extends React.Component {
+  static propTypes = {
+    ready: T.bool,
+    stream: T.object
+  }
+
+  componentDidMount() {
+    if (this.props.ready && this.props.stream) {
+      this.attachVideo(this.props.stream);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.ready && nextProps.stream !== this.props.stream) {
+      this.attachVideo(nextProps.stream);
+    }
+  }
+
+  attachVideo(stream) {
+    let node = ReactDOM.findDOMNode(this.refs.videoView);
+    attachMediaStream(stream, node);
+  }
+
+  render() {
+    return (
+      <div className={styles.videoContainer}>
+        <video className={styles.video}
+                ref='videoView' />
+      </div>
+    )
+  }
+}
+
+export default VideoView

src/components/Video/styles.module.css

@@ -0,0 +1,9 @@
+.videoContainer {
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+
+  video {
+    width: 100%;
+  }
+}

src/redux/modules/webrtc.js

@@ -2,6 +2,7 @@ import {createConstants, createReducer} from 'redux-module-builder'
 import SimpleWebRTC from 'SimpleWebRTC'
 import freeice from 'freeice'
 
+let rtc = null;
 export const types = createConstants('webrtc')(
   'INIT',
   'NEW_PEER_ADDED',
@@ -12,7 +13,9 @@ export const types = createConstants('webrtc')(
   'PEER_STREAM_ADDED',
   'PEER_STREAM_REMOVED',
   'CONNECTION_READY',
-  'JOIN_ROOM'
+
+  'JOIN_ROOM',
+  'LEAVE_ROOM'
 )
 
 export const reducer = createReducer({
@@ -37,20 +40,30 @@ export const reducer = createReducer({
   }),
 
   [types.PEER_STREAM_ADDED]: (state, {payload}) => {
-    const peers = state.webrtc.webrtc.getPeers();
+    const peers = rtc.webrtc.getPeers();
     return {...state, peers}
   },
   [types.PEER_STREAM_REMOVED]: (state, {payload}) => {
-    const peers = state.webrtc.webrtc.getPeers();
+    const peers = rtc.webrtc.getPeers();
     return {...state, peers}
   },
   [types.JOIN_ROOM]: (state, {payload}) => ({
     ...state,
-    currentRoom: payload
-  })
+    currentRooms: state.currentRooms.concat(payload)
+  }),
+  [types.LEAVE_ROOM]: (state, {payload}) => {
+    let currentRooms = [].concat(state.currentRooms);
+    const idx = currentRooms.indexOf(payload);
+    if (idx >= 0) {
+      currentRooms.splice(idx, 1);
+    }
+    return {
+      ...state,
+      currentRooms
+    }
+  }
 })
 
-let rtc = null;
 export const actions = {
   init: (cfg) => (dispatch, getState) => {
     rtc = new SimpleWebRTC({
@@ -73,18 +86,19 @@ export const actions = {
       });
     dispatch({type: types.INIT, payload: rtc});
   },
-  newPeer: (peer) => ({type: types.NEW_PEER_ADDED, payload: peer}),
-  removePeer: (peer) => ({type: types.PEER_STREAM_REMOVED, payload: peer}),
   joinRoom: (room) => {
     rtc.joinRoom(room);
     return {type: types.JOIN_ROOM, payload: room}
   },
+  leaveRoom: (room) => {
+    return {type: types.LEAVE_ROOM, payload: room}
+  },
   startLocalMedia: (config = {}) => (dispatch) => {
     const cfg = Object.assign({}, rtc.config.media, config)
     rtc.webrtc.startLocalMedia(cfg, (err, stream) => {
         if (err) {
-            webrtc.emit('localMediaError', err);
-            dispatch({type: types.LOCAL_MEDIA_ERROR, payload: err})
+          webrtc.emit('localMediaError', err);
+          dispatch({type: types.LOCAL_MEDIA_ERROR, payload: err})
         } else {
           dispatch({type: types.LOCAL_MEDIA_START, payload: stream})
         }
@@ -95,6 +109,7 @@ export const actions = {
 export const initialState = {
   ready: false,
   peers: [],
+  currentRooms: [],
   id: null,
   webrtc: null
 }

src/styles/buttons.css

@@ -0,0 +1,27 @@
+@import url('./colors.css');
+
+/*buttons*/
+.btn {
+  display: inline-block;
+  margin: 10px;
+  padding: 15px 45px;
+  font-size: 28px;
+  line-height: 1.8;
+  appearance: none;
+  box-shadow: none;
+  border: none;
+  border-radius: 50px;
+
+  color: #fff;
+  background-color: var(--highlight);
+  text-shadow: -1px 1px #417cb8;
+
+  &:hover {
+    background-color: #346392;
+    text-shadow: -1px 1px #27496d;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}