Skip to content

Commit 6059ca8

Browse files
auserauser
committed
Moved things around to set up mulitple pages
1 parent 4a0d21c commit 6059ca8

File tree

20 files changed

+465
-179
lines changed

20 files changed

+465
-179
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"webpack": "^1.13.0"
6161
},
6262
"dependencies": {
63+
"chance": "^1.0.3",
6364
"classnames": "^2.2.5",
6465
"font-awesome": "^4.6.1",
6566
"freeice": "^2.2.0",

‎src/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
33

44
require('file?name=favicon.ico!./favicon.ico')
55
import 'font-awesome/css/font-awesome.css'
6+
67
import './app.css'
78

89
import App from 'containers/App/App'

‎src/components/Chat/styles.module.css

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/components/Chat/ChatBox.js renamed to ‎src/components/Rooms/ChatBox.js

File renamed without changes.

‎src/components/Rooms/Room.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react'
2+
3+
import VideoView from 'components/Video/VideoView'
4+
import styles from './styles.module.css'
5+
6+
export class Room extends React.Component {
7+
leaveRoom(room, evt) {
8+
this.props.leaveRoom(room);
9+
}
10+
render() {
11+
const {name, ready, peers, localStream} = this.props;
12+
13+
return (
14+
<div className={styles.container}>
15+
<div className={styles.header}>
16+
<div className={styles.title}>{name}</div>
17+
<div onClick={this.leaveRoom.bind(this, name)}
18+
className={styles.controls}>
19+
<i className="fa fa-close"></i>
20+
</div>
21+
</div>
22+
<div className={styles.videoContainer}>
23+
24+
<div className={styles.main}>
25+
<VideoView ready={ready}
26+
stream={localStream} />
27+
</div>
28+
29+
<div className={styles.peers}>
30+
<div className={styles.invited}>
31+
<i className="fa fa-user-plus"></i>
32+
Invite
33+
</div>
34+
<div className={styles.people}>
35+
{peers.map(peer => {
36+
return (
37+
<div key={peer.id} className={styles.person}>
38+
<VideoView
39+
ready={ready}
40+
stream={peer.stream} />
41+
</div>
42+
)
43+
})}
44+
</div>
45+
</div>
46+
47+
<div className={styles.footer}>
48+
<div className={styles.location}>
49+
<i className="fa fa-map-marker"></i>
50+
San Francisco, CA
51+
</div>
52+
<div className={styles.time}>
53+
<i className="fa fa-clock-o"></i>
54+
2:00pm - 2:30pm
55+
</div>
56+
</div>
57+
58+
</div>
59+
</div>
60+
)
61+
}
62+
}
63+
64+
export default Room;

‎src/components/Chat/VideoView.js renamed to ‎src/components/Rooms/VideoView.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import React, { PropTypes as T } from 'react'
22
import ReactDOM from 'react-dom'
3+
import attachMediaStream from 'attachmediastream'
34

45
import styles from './styles.module.css';
56

6-
import attachMediaStream from 'attachmediastream'
7-
87
export class VideoView extends React.Component {
98
static propTypes = {
109
ready: T.bool,
11-
stream: T.object,
12-
peer: T.object
10+
stream: T.object
1311
}
1412

1513
componentDidMount() {
@@ -31,9 +29,9 @@ export class VideoView extends React.Component {
3129

3230
render() {
3331
return (
34-
<div className={styles.container}>
32+
<div className={styles.videoContainer}>
3533
<video className={styles.video}
36-
ref='videoView'></video>
34+
ref='videoView' />
3735
</div>
3836
)
3937
}

‎src/components/Rooms/styles.module.css

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
@import url('../../styles/base.css');
2+
@import url('../../styles/colors.css');
3+
4+
:root {
5+
--person-video-height: 75px;
6+
}
7+
8+
.container {
9+
border-radius: 12px;
10+
overflow: hidden;
11+
margin: 60px;
12+
box-shadow: 0px 2px 2px var(--dark);
13+
border: 0.5px solid var(--dark);
14+
padding: 0;
15+
16+
width: 450px;
17+
display: flex;
18+
flex-direction: column;
19+
20+
i {
21+
color: var(--light-gray);
22+
}
23+
24+
.header {
25+
flex: 1;
26+
margin: 10px;
27+
padding: 0;
28+
display: flex;
29+
justify-content: space-between;
30+
align-items: center;
31+
32+
.controls {
33+
order: 2;
34+
text-align: right;
35+
i {
36+
font-size: 12px;
37+
}
38+
}
39+
.title {
40+
order: 1;
41+
}
42+
}
43+
44+
.peers {
45+
display: flex;
46+
margin: 10px;
47+
padding: 0px;
48+
align-items: center;
49+
justify-content: space-between;
50+
z-index: -1;
51+
52+
i {
53+
margin: 0 10px;
54+
}
55+
56+
.invited {
57+
flex: 1;
58+
}
59+
60+
.people {
61+
/*flex: 1;*/
62+
flex-direction: column;
63+
justify-content: flex-end;
64+
align-items: flex-end;
65+
66+
.person {
67+
display: inline-block;
68+
background-color: var(--dark);
69+
height: var(--person-video-height);
70+
width: var(--person-video-height);
71+
border-radius: calc(var(--person-video-height)/2);
72+
margin-left: var(--padding);
73+
74+
video {
75+
background-color: var(--dark);
76+
border-radius: calc(var(--person-video-height)/2);
77+
width: var(--person-video-height);
78+
height: var(--person-video-height);
79+
}
80+
}
81+
}
82+
}
83+
84+
.footer {
85+
min-height: 50px;
86+
display: flex;
87+
justify-content: space-between;
88+
align-items: center;
89+
padding: 5px;
90+
box-shadow: 0px -2px 1px var(--dark);
91+
92+
.location, .time {
93+
flex: 1;
94+
padding: 10px;
95+
font-weight: normal;
96+
i {
97+
margin: 0 10px;
98+
font-size: 12px;
99+
}
100+
}
101+
102+
.location {
103+
}
104+
.time {
105+
text-align: right;
106+
}
107+
}
108+
}

‎src/components/Video/VideoView.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { PropTypes as T } from 'react'
2+
import ReactDOM from 'react-dom'
3+
import attachMediaStream from 'attachmediastream'
4+
5+
import styles from './styles.module.css';
6+
7+
export class VideoView extends React.Component {
8+
static propTypes = {
9+
ready: T.bool,
10+
stream: T.object
11+
}
12+
13+
componentDidMount() {
14+
if (this.props.ready && this.props.stream) {
15+
this.attachVideo(this.props.stream);
16+
}
17+
}
18+
19+
componentWillReceiveProps(nextProps) {
20+
if (nextProps.ready && nextProps.stream !== this.props.stream) {
21+
this.attachVideo(nextProps.stream);
22+
}
23+
}
24+
25+
attachVideo(stream) {
26+
let node = ReactDOM.findDOMNode(this.refs.videoView);
27+
attachMediaStream(stream, node);
28+
}
29+
30+
render() {
31+
return (
32+
<div className={styles.videoContainer}>
33+
<video className={styles.video}
34+
ref='videoView' />
35+
</div>
36+
)
37+
}
38+
}
39+
40+
export default VideoView

‎src/components/Video/styles.module.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.videoContainer {
2+
flex: 1;
3+
justify-content: center;
4+
align-items: center;
5+
6+
video {
7+
width: 100%;
8+
}
9+
}

‎src/redux/modules/webrtc.js

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {createConstants, createReducer} from 'redux-module-builder'
22
import SimpleWebRTC from 'SimpleWebRTC'
33
import freeice from 'freeice'
44

5+
let rtc = null;
56
export const types = createConstants('webrtc')(
67
'INIT',
78
'NEW_PEER_ADDED',
@@ -12,7 +13,9 @@ export const types = createConstants('webrtc')(
1213
'PEER_STREAM_ADDED',
1314
'PEER_STREAM_REMOVED',
1415
'CONNECTION_READY',
15-
'JOIN_ROOM'
16+
17+
'JOIN_ROOM',
18+
'LEAVE_ROOM'
1619
)
1720

1821
export const reducer = createReducer({
@@ -37,20 +40,30 @@ export const reducer = createReducer({
3740
}),
3841

3942
[types.PEER_STREAM_ADDED]: (state, {payload}) => {
40-
const peers = state.webrtc.webrtc.getPeers();
43+
const peers = rtc.webrtc.getPeers();
4144
return {...state, peers}
4245
},
4346
[types.PEER_STREAM_REMOVED]: (state, {payload}) => {
44-
const peers = state.webrtc.webrtc.getPeers();
47+
const peers = rtc.webrtc.getPeers();
4548
return {...state, peers}
4649
},
4750
[types.JOIN_ROOM]: (state, {payload}) => ({
4851
...state,
49-
currentRoom: payload
50-
})
52+
currentRooms: state.currentRooms.concat(payload)
53+
}),
54+
[types.LEAVE_ROOM]: (state, {payload}) => {
55+
let currentRooms = [].concat(state.currentRooms);
56+
const idx = currentRooms.indexOf(payload);
57+
if (idx >= 0) {
58+
currentRooms.splice(idx, 1);
59+
}
60+
return {
61+
...state,
62+
currentRooms
63+
}
64+
}
5165
})
5266

53-
let rtc = null;
5467
export const actions = {
5568
init: (cfg) => (dispatch, getState) => {
5669
rtc = new SimpleWebRTC({
@@ -73,18 +86,19 @@ export const actions = {
7386
});
7487
dispatch({type: types.INIT, payload: rtc});
7588
},
76-
newPeer: (peer) => ({type: types.NEW_PEER_ADDED, payload: peer}),
77-
removePeer: (peer) => ({type: types.PEER_STREAM_REMOVED, payload: peer}),
7889
joinRoom: (room) => {
7990
rtc.joinRoom(room);
8091
return {type: types.JOIN_ROOM, payload: room}
8192
},
93+
leaveRoom: (room) => {
94+
return {type: types.LEAVE_ROOM, payload: room}
95+
},
8296
startLocalMedia: (config = {}) => (dispatch) => {
8397
const cfg = Object.assign({}, rtc.config.media, config)
8498
rtc.webrtc.startLocalMedia(cfg, (err, stream) => {
8599
if (err) {
86-
webrtc.emit('localMediaError', err);
87-
dispatch({type: types.LOCAL_MEDIA_ERROR, payload: err})
100+
webrtc.emit('localMediaError', err);
101+
dispatch({type: types.LOCAL_MEDIA_ERROR, payload: err})
88102
} else {
89103
dispatch({type: types.LOCAL_MEDIA_START, payload: stream})
90104
}
@@ -95,6 +109,7 @@ export const actions = {
95109
export const initialState = {
96110
ready: false,
97111
peers: [],
112+
currentRooms: [],
98113
id: null,
99114
webrtc: null
100115
}

‎src/styles/buttons.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import url('./colors.css');
2+
3+
/*buttons*/
4+
.btn {
5+
display: inline-block;
6+
margin: 10px;
7+
padding: 15px 45px;
8+
font-size: 28px;
9+
line-height: 1.8;
10+
appearance: none;
11+
box-shadow: none;
12+
border: none;
13+
border-radius: 50px;
14+
15+
color: #fff;
16+
background-color: var(--highlight);
17+
text-shadow: -1px 1px #417cb8;
18+
19+
&:hover {
20+
background-color: #346392;
21+
text-shadow: -1px 1px #27496d;
22+
}
23+
24+
&:focus {
25+
outline: none;
26+
}
27+
}

0 commit comments

Comments
 (0)