Skip to content

Commit 4586cdd

Browse files
prashanthrprashanthr
authored
feat(room-toolbar): Add toolbar for room (#7)
1 parent 155675a commit 4586cdd

File tree

12 files changed

+220
-35
lines changed

12 files changed

+220
-35
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"react-router-redux": "next",
3131
"redux": "^3.7.2",
3232
"redux-saga": "^0.16.0",
33+
"semantic-ui-react": "^0.79.1",
3334
"simple-peer": "^8.1.1",
3435
"socket.io": "^2.0.4",
3536
"socket.io-client": "^2.0.4",

‎public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css" />
78
<!--
89
Notice the use of %PUBLIC_URL% in the tag above.
910
It will be replaced with the URL of the `public` folder during the build.

‎src/client/redux/ducks/peer.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ const peerReducer = (state = initialState, action) => {
3131
...newState
3232
}
3333
case SOCKET_STREAM:
34-
console.log('socketstreamreducer', action, state)
3534
return {
3635
...state,
3736
[action.peerId]: {

‎src/client/redux/sagas/peer.js

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const peerEventSignal = ({
1515
signal,
1616
socket
1717
}) => {
18-
console.info('Peer event signal', signal)
1918
socket.emit('signal', { signal, peerId })
2019
}
2120

@@ -28,7 +27,6 @@ const peerEventData = (data) => {
2827
}
2928

3029
const peerEventStream = ({ peerId, socket, stream }) => {
31-
console.info('Peer event stream', stream)
3230
// socket.emit('stream', { stream, peerId })
3331
return store.dispatch({
3432
type: 'SOCKET_STREAM',
@@ -49,7 +47,6 @@ const createPeer = ({
4947
}) => {
5048
return new Promise((resolve, reject) => {
5149
const isInitiator = socket.id === initiator
52-
console.log('new peer - initiator', peerId, isInitiator)
5350
const peer = new Peer({
5451
initiator: isInitiator,
5552
config: {
@@ -79,10 +76,6 @@ const createPeer = ({
7976
})
8077
}
8178

82-
// const destroyPeer = () => {
83-
84-
// }
85-
8679
// state
8780
function* addPeer ({ channel, peerId }) {
8881
yield put({
@@ -124,7 +117,6 @@ function* setupPeers (action) {
124117

125118
// Destroy any old peers
126119
const peersToDestroy = keys(existingPeers).filter(key => !peers.includes(key))
127-
console.log('Removing peers', peersToDestroy)
128120
for (const key of peersToDestroy) {
129121
const peerToDestroy = existingPeers[key]
130122
if (peerToDestroy && peerToDestroy.channel) {

‎src/client/ui-components/soundcheck/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { Component } from 'react'
2+
import PropTypes from 'prop-types'
3+
4+
class Soundcheck extends Component {
5+
render () {
6+
return <span>Hello Soundcheck</span>
7+
}
8+
}
9+
10+
Soundcheck.propTypes = {
11+
12+
}
13+
14+
export default Soundcheck

‎src/client/ui-components/soundcheck/soundcheck-wrapper.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
import React, { Component } from 'react'
3+
import PropTypes from 'prop-types'
4+
import { Modal } from 'semantic-ui-react'
5+
import Soundcheck from './index'
6+
7+
class SoundcheckWrapper extends Component {
8+
render () {
9+
return (
10+
<Modal
11+
open={this.props.show}
12+
closeOnDimmerClick
13+
closeOnDocumentClick
14+
onClose={this.props.onClose}
15+
>
16+
<Modal.Header>Soundcheck</Modal.Header>
17+
<Modal.Content>
18+
<Soundcheck />
19+
</Modal.Content>
20+
</Modal>
21+
)
22+
}
23+
}
24+
25+
SoundcheckWrapper.propTypes = {
26+
onClose: PropTypes.func,
27+
show: PropTypes.bool
28+
}
29+
30+
export default SoundcheckWrapper

‎src/client/ui-components/toolbar/index.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, { Component } from 'react'
2+
import { Icon, Menu } from 'semantic-ui-react'
3+
import PropTypes from 'prop-types'
4+
import { map } from 'lodash'
5+
6+
class Toolbar extends Component {
7+
renderMenuItem = (item) => (
8+
<Menu.Item
9+
key={item.key}
10+
name={item.name || item.key}
11+
active={this.props.activeMenuItem === item.key}
12+
onClick={item.onClick}
13+
>
14+
<Icon name={item.icon} />
15+
{item.label || item.key}
16+
</Menu.Item>
17+
)
18+
render() {
19+
return (
20+
<Menu compact icon='labeled'>
21+
{map(this.props.items, item => this.renderMenuItem(item))}
22+
</Menu>
23+
)
24+
}
25+
}
26+
27+
Toolbar.propTypes = {
28+
items: PropTypes.arrayOf(PropTypes.object),
29+
activeMenuItem: PropTypes.string
30+
}
31+
32+
Toolbar.defaultProps = {
33+
activeMenuItem: null
34+
}
35+
36+
export default Toolbar

‎src/client/ui-components/toolbar/toolbar-wrapper.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { Component } from 'react'
2+
import PropTypes from 'prop-types'
3+
import Toolbar from './index'
4+
import SoundcheckWrapper from '../soundcheck/soundcheck-wrapper'
5+
6+
class ToolbarWrapper extends Component {
7+
constructor (props) {
8+
super(props)
9+
this.onExitRoom = this.onExitRoom.bind(this)
10+
this.onSettingsClick = this.onSettingsClick.bind(this)
11+
this.state = {
12+
showSettingsModal: false
13+
}
14+
}
15+
16+
toggleSettingsModalState = () => this.setState({
17+
showSettingsModal: !this.state.showSettingsModal
18+
})
19+
20+
onSettingsClick () {
21+
this.toggleSettingsModalState()
22+
}
23+
24+
onExitRoom () {
25+
this.props.onLeaveRoom()
26+
// @todo: Move to router history
27+
window.location.replace('/')
28+
}
29+
30+
render () {
31+
const menuItems = [{
32+
key: 'setting',
33+
label: 'Settings',
34+
icon: 'setting',
35+
onClick: this.onSettingsClick
36+
}, {
37+
key: 'exit',
38+
label: 'Exit Room',
39+
icon: 'external',
40+
onClick: this.onExitRoom
41+
}]
42+
return (
43+
<div>
44+
<Toolbar
45+
items={menuItems}
46+
/>
47+
<SoundcheckWrapper
48+
show={this.state.showSettingsModal}
49+
onClose={this.toggleSettingsModalState}
50+
/>
51+
</div>
52+
)
53+
}
54+
}
55+
56+
ToolbarWrapper.propTypes = {
57+
onLeaveRoom: PropTypes.func,
58+
history: PropTypes.any
59+
}
60+
61+
export default ToolbarWrapper

‎src/client/ui-components/video-container/index.js

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
55
import { map } from 'lodash'
66
import createObjectUrl from '../../utils/create-object-url'
77
import cuid from 'cuid'
8+
import { Grid } from 'semantic-ui-react'
89

910
class VideoContainer extends Component {
1011
constructor (props) {
@@ -20,21 +21,29 @@ class VideoContainer extends Component {
2021
render () {
2122
return (
2223
<div>
23-
<VideoPlayer
24-
metadata={this.props.user.socket ? this.props.user.socket.id : null}
25-
src={this.props.user.streamUrl}
26-
muted
27-
onLoadedMetadata={this.playStream}
28-
/>
29-
<br />
30-
{map(this.props.peer, (peer, peerId) => (
31-
<VideoPlayer
32-
metadata={peer.socketId}
33-
src={peer.streamUrl || (peer.stream ? createObjectUrl(peer.stream) : '')}
34-
key={cuid()}
35-
onLoadedMetadata={this.playStream}
36-
/>
37-
))}
24+
<Grid columns={3}>
25+
<Grid.Column>
26+
<VideoPlayer
27+
metadata={this.props.user.socket ? this.props.user.socket.id : null}
28+
src={this.props.user.streamUrl}
29+
muted
30+
onLoadedMetadata={this.playStream}
31+
/>
32+
</Grid.Column>
33+
<Grid.Column>
34+
<span />
35+
</Grid.Column>
36+
<Grid.Column>
37+
{map(this.props.peer, (peer, peerId) => (
38+
<VideoPlayer
39+
metadata={peer.socketId}
40+
src={peer.streamUrl || (peer.stream ? createObjectUrl(peer.stream) : '')}
41+
key={cuid()}
42+
onLoadedMetadata={this.playStream}
43+
/>
44+
))}
45+
</Grid.Column>
46+
</Grid>
3847
</div>
3948
)
4049
}

‎src/client/ui-components/video/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ VideoPlayer.propTypes = {
4646

4747
VideoPlayer.defaultProps = {
4848
height: 480,
49-
width: 640,
49+
width: 500,
5050
playsInline: true,
5151
autoPlay: true,
5252
muted: false,

‎src/client/views/room/index.js

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { Component } from 'react'
2-
import VideoContainer from '../../ui-components/video-container'
32
import PropTypes from 'prop-types'
3+
import VideoContainer from '../../ui-components/video-container'
4+
import ToolbarWrapper from '../../ui-components/toolbar/toolbar-wrapper'
5+
import { Grid } from 'semantic-ui-react'
46
import { connect } from 'react-redux'
57
import { initialize, shutdown } from '../../redux/ducks/room'
68

@@ -15,16 +17,27 @@ class Room extends Component {
1517
render () {
1618
return (
1719
<div>
18-
{`Welcome to Room ${this.props.roomId}`}
20+
<Grid.Row columns={2}>
21+
<Grid.Column style={{ float: 'left' }}>
22+
{`Welcome to Room ${this.props.roomId}`}
23+
</Grid.Column>
24+
<Grid.Column style={{ float: 'right' }}>
25+
<ToolbarWrapper
26+
onLeaveRoom={this.props.shutdown}
27+
/>
28+
</Grid.Column>
29+
</Grid.Row>
1930
<br />
20-
{this.props.error
21-
? 'Encountered an error getting streams'
22-
: (
23-
this.props.user && this.props.user.streamUrl
24-
? <VideoContainer />
25-
: 'Initializing streams...'
26-
)
27-
}
31+
<Grid.Row>
32+
{this.props.error
33+
? 'Encountered an error getting streams'
34+
: (
35+
this.props.user && this.props.user.streamUrl
36+
? <VideoContainer />
37+
: 'Initializing streams...'
38+
)
39+
}
40+
</Grid.Row>
2841
</div>
2942
)
3043
}

‎yarn.lock

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -991,6 +991,13 @@ babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0:
991991
core-js "^2.4.0"
992992
regenerator-runtime "^0.10.0"
993993

994+
babel-runtime@^6.25.0:
995+
version "6.26.0"
996+
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
997+
dependencies:
998+
core-js "^2.4.0"
999+
regenerator-runtime "^0.11.0"
1000+
9941001
babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.23.0:
9951002
version "6.23.0"
9961003
resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638"
@@ -1371,6 +1378,10 @@ clap@^1.0.9:
13711378
dependencies:
13721379
chalk "^1.1.3"
13731380

1381+
classnames@^2.2.5:
1382+
version "2.2.5"
1383+
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
1384+
13741385
clean-css@4.0.x:
13751386
version "4.0.10"
13761387
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.10.tgz#6be448d6ba8c767654ebe11f158b97a887cb713f"
@@ -4144,6 +4155,10 @@ lodash.uniq@^4.3.0:
41444155
version "4.17.4"
41454156
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
41464157

4158+
lodash@^4.17.4:
4159+
version "4.17.5"
4160+
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
4161+
41474162
longest@^1.0.1:
41484163
version "1.0.1"
41494164
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
@@ -5472,6 +5487,10 @@ regenerator-runtime@^0.10.0:
54725487
version "0.10.3"
54735488
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
54745489

5490+
regenerator-runtime@^0.11.0:
5491+
version "0.11.1"
5492+
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
5493+
54755494
regenerator-transform@0.9.8:
54765495
version "0.9.8"
54775496
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.8.tgz#0f88bb2bc03932ddb7b6b7312e68078f01026d6c"
@@ -5677,6 +5696,16 @@ seek-bzip@^1.0.5:
56775696
dependencies:
56785697
commander "~2.8.1"
56795698

5699+
semantic-ui-react@^0.79.1:
5700+
version "0.79.1"
5701+
resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.79.1.tgz#80bd0ccfb3b3c1184a1b1b3f6067ab1225aed5f0"
5702+
dependencies:
5703+
babel-runtime "^6.25.0"
5704+
classnames "^2.2.5"
5705+
fbjs "^0.8.16"
5706+
lodash "^4.17.4"
5707+
prop-types "^15.5.10"
5708+
56805709
"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.1.0, semver@^5.3.0:
56815710
version "5.3.0"
56825711
resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"

0 commit comments

Comments
 (0)