Add ACTIVE_TOGGLE

src/client/__tests__/App-test.js

@@ -82,7 +82,7 @@ describe('App', () => {
         const video = node.querySelector('video')
         TestUtils.Simulate.click(video)
         expect(store.getActions()).toEqual([{
-          type: constants.ACTIVE_SET,
+          type: constants.ACTIVE_TOGGLE,
           payload: { userId: 'test' }
         }])
       })

src/client/actions/PeerActions.js

@@ -9,10 +9,9 @@ import { play, iceServers } from '../window.js'
 const debug = _debug('peercalls')
 
 class PeerHandler {
-  constructor ({ socket, user, stream, dispatch, getState }) {
+  constructor ({ socket, user, dispatch, getState }) {
     this.socket = socket
     this.user = user
-    this.stream = stream
     this.dispatch = dispatch
     this.getState = getState
   }
@@ -91,7 +90,6 @@ export function createPeer ({ socket, user, initiator, stream }) {
     const handler = new PeerHandler({
       socket,
       user,
-      stream,
       dispatch,
       getState
     })

src/client/actions/StreamActions.js

@@ -17,3 +17,8 @@ export const setActive = userId => ({
   type: constants.ACTIVE_SET,
   payload: { userId }
 })
+
+export const toggleActive = userId => ({
+  type: constants.ACTIVE_TOGGLE,
+  payload: { userId }
+})

src/client/components/App.js

@@ -11,7 +11,7 @@ export default class App extends React.Component {
     dismissAlert: PropTypes.func.isRequired,
     streams: PropTypes.objectOf(PropTypes.string).isRequired,
     alerts: PropTypes.arrayOf(AlertPropType).isRequired,
-    setActive: PropTypes.func.isRequired,
+    toggleActive: PropTypes.func.isRequired,
     active: PropTypes.string,
     init: PropTypes.func.isRequired,
     notify: PropTypes.func.isRequired,
@@ -30,7 +30,7 @@ export default class App extends React.Component {
       notifications,
       notify,
       sendMessage,
-      setActive,
+      toggleActive,
       streams
     } = this.props
 
@@ -41,11 +41,11 @@ export default class App extends React.Component {
       <div className="videos">
         {_.map(streams, (stream, userId) => (
           <Video
-            setActive={setActive}
             active={userId === active}
             key={userId}
-            userId={userId}
+            onClick={toggleActive}
             stream={stream}
+            userId={userId}
           />
         ))}
       </div>

src/client/components/Video.js

@@ -5,15 +5,15 @@ import { ME } from '../constants.js'
 
 export default class Video extends React.Component {
   static propTypes = {
-    setActive: PropTypes.func.isRequired,
+    onClick: PropTypes.func,
     active: PropTypes.bool.isRequired,
     stream: PropTypes.string.isRequired,
     userId: PropTypes.string.isRequired
   }
-  setActive = e => {
-    const { setActive, userId } = this.props
+  handleClick = e => {
+    const { onClick, userId } = this.props
     this.play(e)
-    setActive(userId)
+    onClick(userId)
   }
   play = e => {
     e.preventDefault()
@@ -26,7 +26,7 @@ export default class Video extends React.Component {
       <div className={className}>
         <video
           muted={userId === ME}
-          onClick={this.setActive}
+          onClick={this.handleClick}
           onLoadedMetadata={this.play}
           src={stream}
         />

src/client/constants.js

@@ -1,5 +1,6 @@
 
 export const ACTIVE_SET = 'ACTIVE_SET'
+export const ACTIVE_TOGGLE = 'ACTIVE_TOGGLE'
 
 export const ALERT = 'ALERT'
 export const ALERT_DISMISS = 'ALERT_DISMISS'

src/client/containers/App.js

@@ -11,13 +11,13 @@ function mapStateToProps (state) {
     streams: state.streams,
     alerts: state.alerts,
     notifications: state.notifications,
-    active: state.streams.active
+    active: state.active
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    setActive: bindActionCreators(StreamActions.setActive, dispatch),
+    toggleActive: bindActionCreators(StreamActions.toggleActive, dispatch),
     sendMessage: bindActionCreators(PeerActions.sendMessage, dispatch),
     dismissAlert: bindActionCreators(NotifyActions.dismissAlert, dispatch),
     init: bindActionCreators(CallActions.init, dispatch),

src/client/reducers/__tests__/active-test.js

@@ -1,16 +1,28 @@
-import * as constants from '../../constants.js'
+import * as StreamActions from '../../actions/StreamActions.js'
 import active from '../active.js'
 
 describe('reducers/active', () => {
 
-  it('sets active to userId', () => {
-    const userId = 'test'
-    let state = active()
-    state = active(state, {
-      type: constants.ACTIVE_SET,
-      payload: { userId }
+  describe('setActive', () => {
+    it('sets active to userId', () => {
+      const userId = 'test'
+      let state = active()
+      state = active(state, StreamActions.setActive(userId))
+      expect(state).toBe(userId)
+    })
+  })
+
+  describe('toggleActive', () => {
+    it('sets active to userId', () => {
+      const userId = 'test'
+      let state = active()
+      state = active(state, StreamActions.toggleActive(userId))
+      expect(state).toBe(userId)
+      state = active(state, StreamActions.toggleActive(userId))
+      expect(state).toBe(null)
+      state = active(state, StreamActions.toggleActive(userId))
+      expect(state).toBe(userId)
     })
-    expect(state).toBe(userId)
   })
 
 })

src/client/reducers/active.js

@@ -3,7 +3,10 @@ import * as constants from '../constants.js'
 export default function active (state = null, action) {
   switch (action && action.type) {
     case constants.ACTIVE_SET:
+    case constants.STREAM_ADD:
       return action.payload.userId
+    case constants.ACTIVE_TOGGLE:
+      return state === action.payload.userId ? null : action.payload.userId
     default:
       return state
   }