Mirror local video (#57)

* Flip local video horizontally

src/client/components/App.js

@@ -75,6 +75,7 @@ export default class App extends React.PureComponent {
             stream={streams[constants.ME]}
             userId={constants.ME}
             muted
+            mirrored
           />
 
           {_.map(peers, (_, userId) => (

src/client/components/Video.js

@@ -16,10 +16,12 @@ export default class Video extends React.PureComponent {
     active: PropTypes.bool.isRequired,
     stream: StreamPropType,
     userId: PropTypes.string.isRequired,
-    muted: PropTypes.bool.isRequired
+    muted: PropTypes.bool.isRequired,
+    mirrored: PropTypes.bool
   }
   static defaultProps = {
-    muted: false
+    muted: false,
+    mirrored: false
   }
   handleClick = e => {
     const { onClick, userId } = this.props
@@ -48,8 +50,8 @@ export default class Video extends React.PureComponent {
     videos[socket.id] = video
   }
   render () {
-    const { active, muted } = this.props
+    const { active, mirrored, muted } = this.props
-    const className = classnames('video-container', { active })
+    const className = classnames('video-container', { active, mirrored })
     return (
       <div className={className}>
         <video

src/client/components/__tests__/Video-test.js

@@ -1,5 +1,6 @@
 jest.mock('../../window.js')
 import React from 'react'
+import ReactDOM from 'react-dom'
 import TestUtils from 'react-dom/test-utils'
 import Video from '../Video.js'
 import { MediaStream } from '../../window.js'
@@ -19,30 +20,40 @@ describe('components/Video', () => {
         stream={this.state.stream || this.props.stream}
         onClick={this.props.onClick}
         userId="test"
+        muted={this.props.muted}
+        mirrored={this.props.mirrored}
       />
     }
   }
 
-  let component, videos, video, onClick, mediaStream, url
+  let component, videos, video, onClick, mediaStream, url, wrapper
-  function render () {
+  function render (flags = {}) {
     videos = {}
     onClick = jest.fn()
     mediaStream = new MediaStream()
     component = TestUtils.renderIntoDocument(
       <VideoWrapper
         videos={videos}
-        active
+        active={flags.active || false}
         stream={{ mediaStream, url }}
         onClick={onClick}
         userId="test"
+        muted={flags.muted || false}
+        mirrored={flags.mirrored}
       />
     )
+    wrapper = ReactDOM.findDOMNode(component)
     video = TestUtils.findRenderedComponentWithType(component, Video)
   }
 
   describe('render', () => {
     it('should not fail', () => {
-      render()
+      render({})
+    })
+
+    it('Mirrored and active propogate to rendered classes', () => {
+      render({ active: true, mirrored: true })
+      expect(wrapper.className).toBe('video-container active mirrored')
     })
   })
 

src/scss/_video.scss

@@ -43,4 +43,10 @@
       cursor: inherit;
     }
   }
+
+  .video-container.mirrored video {
+    transform: rotateY(180deg);
+    -webkit-transform:rotateY(180deg);
+    -moz-transform:rotateY(180deg);
+  }
 }