fix(video): Fixed mirroring for user other than self

Author: Prash

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

@@ -45,6 +45,7 @@ class VideoContainer extends Component {
                     }}
                     disableMute={this.props.users[userId].disableMute}
                     muted={this.props.users[userId].muted}
+                    mirror={this.props.users[userId].mirror}
                   />
                 </Col>
               ))}
@@ -81,7 +82,8 @@ function mapStateToProps (state, ownProps) {
         streamUrl: state.user ? state.user.streamUrl : null,
         socketId: state.user.socket.id,
         muted: true,
-        disableMute: true
+        disableMute: true,
+        mirror: true
       }
     }
   }

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

@@ -1,5 +1,8 @@
 .video {
   width: 100%;
+}
+
+.video-mirror {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
 }

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

@@ -58,7 +58,7 @@ class VideoPlayer extends Component {
         </div>
         <video
           poster={getRandomAvatarUrl()}
-          className='video'
+          className={`video ${this.props.mirror ? 'video-mirror' : ''}`}
           ref={el => { this.videoRef = el }}
           muted={this.props.muted}
           onClick={this.props.onClick}
@@ -94,7 +94,8 @@ VideoPlayer.propTypes = {
   onLoadedMetadata: PropTypes.func,
   showDebugInfo: PropTypes.bool,
   metadata: PropTypes.any,
-  disableMute: PropTypes.bool
+  disableMute: PropTypes.bool,
+  mirror: PropTypes.bool
 }
 
 VideoPlayer.defaultProps = {
@@ -104,7 +105,8 @@ VideoPlayer.defaultProps = {
   autoPlay: true,
   muted: false,
   showDebugInfo: false,
-  disableMute: false
+  disableMute: false,
+  mirror: false
 }
 
 export default VideoPlayer