Updates for video view

Author: auser

src/components/Chat/VideoView.js

@@ -9,43 +9,25 @@ export class VideoView extends React.Component {
   static propTypes = {
     ready: T.bool,
     remote: T.bool,
+    stream: T.object,
     peer: T.object
   }
 
   componentDidMount() {
-    if (this.props.ready) {
-      this.attachVideo();
+    if (this.props.ready && this.props.stream) {
+      this.attachVideo(this.props.stream);
     }
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.ready !== this.props.ready || nextProps.peer !== this.props.peer) {
-      this.attachVideo();
+    if (nextProps.ready && nextProps.stream) {
+      this.attachVideo(nextProps.stream);
     }
   }
 
-  attachVideo() {
-    console.log('attachVideo ->', this.props);
-    this.props.remote ? this.attachRemoteVideo() : this.attachLocalVideo()
-  }
-
-  attachRemoteVideo() {
-    const {peer} = this.props;
-    let node = ReactDOM.findDOMNode(this.refs.videoView);
-    attachMediaStream(peer.stream, node);
-  }
-
-  attachLocalVideo() {
-    const {rtc} = this.props;
-
+  attachVideo(stream) {
     let node = ReactDOM.findDOMNode(this.refs.videoView);
-    rtc.webrtc.startLocalMedia(rtc.config.media, function (err, stream) {
-      if (err) {
-          rtc.emit('localMediaError', err);
-      } else {
-        attachMediaStream(stream, node, rtc.config.localVideo);
-      }
-    });
+    attachMediaStream(stream, node);
   }
 
   render() {

src/views/main/indexPage/Page.js

@@ -12,7 +12,10 @@ export class Index extends React.Component {
     this.state = {
       ready: false,
       id: null,
-      peers: [],
+      localVideo: {
+        stream: null,
+        config: null
+      },
       messages: []
     }
   }
@@ -23,11 +26,26 @@ export class Index extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.ready !== this.props.ready) {
-      this.props.actions.webrtc.joinRoom('fullstackio')
+    if (nextProps.ready && !this.props.ready) {
+      this.startLocalMedia();
     }
   }
 
+  startLocalMedia() {
+    const {webrtc, actions} = this.props;
+    actions.webrtc.joinRoom('fullstackio');
+    webrtc.webrtc
+      .startLocalMedia(webrtc.webrtc.config.media, (err, stream) => {
+        if (err) {
+            webrtc.emit('localMediaError', err);
+        } else {
+          this.setState({
+            localStream: stream
+          });
+        }
+    });
+  }
+
   goToAbout(evt) {
     const {router} = this.context;
     const {actions} = this.props;
@@ -36,7 +54,9 @@ export class Index extends React.Component {
   }
 
   render() {
-    const {ready, peers, rtc} = this.props;
+    const {ready, peers, webrtc} = this.props;
+    const {localStream} = this.state;
+
     return (
       <div className={styles.container}>
         <div className={styles.header}>
@@ -48,8 +68,9 @@ export class Index extends React.Component {
         <div className={styles.videoContainer}>
 
           <div className={styles.main}>
-            <VideoView remote={false}
-                ready={ready} rtc={rtc} />
+            <VideoView key={'mine'}
+                ready={ready}
+                stream={localStream} />
           </div>
 
           <div className={styles.peers}>
@@ -59,10 +80,12 @@ export class Index extends React.Component {
             </div>
             <div className={styles.people}>
               {peers.map(peer => {
+                console.log('peer id ', peer.id, this.props.id);
                 return (
                   <div className={styles.person}>
                     <VideoView key={peer.id}
-                      remote={true} peer={peer} ready={ready} rtc={rtc}></VideoView>
+                      ready={ready}
+                      stream={peer.stream} />
                   </div>
                 )
               })}
@@ -91,8 +114,8 @@ Index.contextTypes = {
 }
 
 export default connect(state => ({
-  webrtc: state.webrtc,
+  webrtc: state.webrtc.webrtc,
+  id: state.webrtc.id,
   ready: state.webrtc.ready,
   peers: state.webrtc.peers,
-  rtc: state.webrtc.webrtc
 }))(Index);

src/views/main/styles.module.css

@@ -20,14 +20,14 @@
 
 .content {
   position: relative;
-  /*top: var(--topbar-height);*/
+  top: var(--topbar-height);
   left: 0;
 
   flex: 1;
   order: 1;
 
   .padding {
-    /*padding: var(--padding);*/
+    padding: var(--padding);
   }
 
   @media (--screen-phone-lg) {