feat(mute): Add mute functionality (#9)

Author: prashanthr

src/client/redux/ducks/peer.js

@@ -1,13 +1,15 @@
 import { SOCKET_STREAM } from './socket'
 import createObjectUrl from '../../utils/create-object-url'
+import { VIDEO_MUTE } from './room'
 export const PEER_ADD = 'PEER_ADD'
 export const PEER_REMOVE = 'PEER_REMOVE'
 
 let initialState = {
   /*
     'peer-x': {
       socketId: null,
-      channel: null
+      channel: null,
+      muted: false
     }
   */
 }
@@ -19,7 +21,8 @@ const peerReducer = (state = initialState, action) => {
         ...state,
         [action.peerId]: {
           channel: action.channel,
-          socketId: action.peerId
+          socketId: action.peerId,
+          muted: false
         }
       }
     case PEER_REMOVE:
@@ -39,6 +42,14 @@ const peerReducer = (state = initialState, action) => {
           streamUrl: createObjectUrl(action.stream)
         }
       }
+    case VIDEO_MUTE:
+      return {
+        ...state,
+        [action.peerId]: {
+          ...state[action.peerId],
+          muted: !state[action.peerId].muted
+        }
+      }
     default:
       return state
   }

src/client/redux/ducks/room.js

@@ -4,6 +4,12 @@ export const INITIALIZE = 'INITIALIZE'
 export const INITIALIZE_SUCCESS = 'INITIALIZE_SUCCESS'
 export const INITIALIZE_FAILED = 'INITIALIZE_FAILED'
 export const SHUTDOWN = 'SHUTDOWN'
+export const VIDEO_MUTE = 'VIDEO_MUTE'
+
+export const onMute = (peerId) => ({
+  type: VIDEO_MUTE,
+  peerId
+})
 
 export const initialize = (roomId) => ({
   type: INITIALIZE,

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

@@ -1,17 +1,18 @@
 import React, { Component } from 'react'
 import VideoPlayer from '../video'
+import { Grid, Row, Col } from 'react-bootstrap'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { onMute } from '../../redux/ducks/room'
 import { map, keys, chunk } from 'lodash'
 import createObjectUrl from '../../utils/create-object-url'
-import cuid from 'cuid'
-import { Grid, Row, Col } from 'react-bootstrap'
 import './index.css'
 
 class VideoContainer extends Component {
   constructor (props) {
     super(props)
     this.videoRef = null
+    this.playStream = this.playStream.bind(this)
   }
 
   playStream (event) {
@@ -27,13 +28,23 @@ class VideoContainer extends Component {
           map(rowSets, (rowUsers, index) => (
             <Row key={`row-${index}`} className='show-grid flex'>
               {map(rowUsers, userId => (
-                <Col md={4} key={`col-${index}-${userId}`} className='video-col'>
+                <Col md={12 / rowUsers.length} key={`col-${index}-${userId}`} className='video-col'>
                   <VideoPlayer
-                    metadata={this.props.users[userId].socketId}
+                    metadata={{
+                      socketId: this.props.users[userId].socketId,
+                      isMuted: this.props.users[userId].muted,
+                      disableMute: this.props.users[userId].disableMute
+                    }}
                     src={this.props.users[userId].streamUrl || (this.props.users[userId].stream ? createObjectUrl(this.props.users[userId].stream) : '')}
-                    key={cuid()}
-                    muted={this.props.users[userId].muted}
+                    key={`video-${userId}`}
                     onLoadedMetadata={this.playStream}
+                    onMute={event => {
+                      event.preventDefault()
+                      this.props.onMute(userId)
+                    }}
+                    disableMute={this.props.users[userId].disableMute}
+                    muted={this.props.users[userId].muted}
+                    showDebugInfo
                   />
                 </Col>
               ))}
@@ -52,28 +63,27 @@ VideoContainer.propTypes = {
   }),
   peer: PropTypes.object,
   users: PropTypes.object,
-  usersPerRow: PropTypes.number
+  usersPerRow: PropTypes.number,
+  onMute: PropTypes.func
 }
 
 VideoContainer.defaultProps = {
   usersPerRow: 3
 }
 
 function mapStateToProps (state, ownProps) {
-  const userSocketId = state.user && state.user.socket ? state.user.socket.id : null
+  if (!state.user || !state.user.socket) return { users: {} }
   return {
-    // user: state.user,
-    // peer: state.peer,
-    // numberOfUsers: (state.user ? 1 : 0) + (state.peer ? keys(state.peer) : 0),
     users: {
       ...state.peer,
-      [userSocketId]: {
+      [state.user.socket.id]: {
         streamUrl: state.user ? state.user.streamUrl : null,
-        socketId: userSocketId,
-        muted: true
+        socketId: state.user.socket.id,
+        muted: true,
+        disableMute: true
       }
     }
   }
 }
 
-export default connect(mapStateToProps, {})(VideoContainer)
+export default connect(mapStateToProps, { onMute })(VideoContainer)

src/client/ui-components/video/index.css

@@ -0,0 +1,8 @@
+.video {
+  width: 100%;
+}
+
+.video-controls {
+  width: 100%;
+  position: relative;
+}

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

@@ -1,31 +1,44 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Button, ButtonGroup } from 'react-bootstrap'
+import './index.css'
 
 class VideoPlayer extends Component {
   constructor (props) {
     super(props)
     this.videoRef = null
   }
   render () {
+    const height = this.props.height ? { height: this.props.height } : {}
+    const width = this.props.width ? { width: this.props.width } : { }
     return (
       <div>
         {this.props.showDebugInfo &&
           <span>
-            {`INFO>>>`}
-            {this.props.metadata}
+            {`${JSON.stringify(this.props.metadata, null, 2)}`}
           </span>
         }
         <video
-          height={this.props.height}
-          width={this.props.width}
+          className='video'
           src={this.props.src}
           ref={el => { this.videoRef = el }}
           muted={this.props.muted}
           onClick={this.props.onClick}
           autoPlay={this.props.autoPlay}
           playsInline={this.props.playsInline}
           onLoadedMetadata={this.props.onLoadedMetadata}
+          {...height}
+          {...width}
         />
+        {!this.props.disableMute &&
+          <div className='video-controls'>
+            <ButtonGroup vertical block>
+              <Button onClick={this.props.onMute}>
+                Mute
+              </Button>
+            </ButtonGroup>
+          </div>
+        }
       </div>
     )
   }
@@ -39,18 +52,21 @@ VideoPlayer.propTypes = {
   playsInline: PropTypes.bool,
   autoPlay: PropTypes.bool,
   onClick: PropTypes.func,
+  onMute: PropTypes.func,
   onLoadedMetadata: PropTypes.func,
   showDebugInfo: PropTypes.bool,
-  metadata: PropTypes.any
+  metadata: PropTypes.any,
+  disableMute: PropTypes.bool
 }
 
 VideoPlayer.defaultProps = {
-  height: 480,
-  width: 500,
+  height: null,
+  width: null,
   playsInline: true,
   autoPlay: true,
   muted: false,
-  showDebugInfo: false
+  showDebugInfo: false,
+  disableMute: false
 }
 
 export default VideoPlayer

src/client/views/home/index.js

@@ -6,7 +6,7 @@ export default class App extends Component {
     return (
       <div className='home'>
         <div className='splash'>
-          Connecting Worlds.
+          Connecting Worlds
         </div>
       </div>
     )