From c542d71ad0dcfa2996841d372f446b2507717a7b Mon Sep 17 00:00:00 2001
From: Ben Ringold <ben.ringold@varsitytutors.com>
Date: Mon, 8 Apr 2019 19:20:55 -0700
Subject: [PATCH] Mirror local video  (#57)

* Flip local video horizontally
---
 src/client/components/App.js                  |  1 +
 src/client/components/Video.js                | 10 ++++++----
 src/client/components/__tests__/Video-test.js | 19 +++++++++++++++----
 src/scss/_video.scss                          |  6 ++++++
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/client/components/App.js b/src/client/components/App.js
index 44ebea0..b464e24 100644
--- a/src/client/components/App.js
+++ b/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) => (
diff --git a/src/client/components/Video.js b/src/client/components/Video.js
index eb09c7b..e09e1f8 100644
--- a/src/client/components/Video.js
+++ b/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 className = classnames('video-container', { active })
+    const { active, mirrored, muted } = this.props
+    const className = classnames('video-container', { active, mirrored })
     return (
       <div className={className}>
         <video
diff --git a/src/client/components/__tests__/Video-test.js b/src/client/components/__tests__/Video-test.js
index 2125746..367b434 100644
--- a/src/client/components/__tests__/Video-test.js
+++ b/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
-  function render () {
+  let component, videos, video, onClick, mediaStream, url, wrapper
+  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')
     })
   })
 
diff --git a/src/scss/_video.scss b/src/scss/_video.scss
index 92c25a6..d6c9db2 100644
--- a/src/scss/_video.scss
+++ b/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);
+  }
 }