Decomposing Room component + readme update. Both reflect video chat 1…

… to 1 iso initial m 2m.
gagamil · Oct 31, 2016 · 29dcae2 · 29dcae2
1 parent d6afcf5
commit 29dcae2
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,19 @@
 # twiliobasicapp
 
+!!! Important !!!
+
+This example is pretty raw. I am just learning React.
+
 Intro
 
 This is a brief example of Twilio Video based on Twilio quickstart. Using React.
 I appreciate any comments on the code.
 Thanks.
 
+Concept
+
+The Twilio quickstart example is about m2m video chats. This one is aimed at 1 to 1.
+
 Details
 
 The app consists of 2 parts:

diff --git a/src/components/ActiveConversation.js b/src/components/ActiveConversation.js
@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import '../index.css'
+
+
+class ActiveConversation extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {participantConnected:false};
+    this.handeLeaveConversation = this.handeLeaveConversation.bind(this);
+  }
+
+  componentDidMount(){
+    console.log("ActiveConversation::componentDidMount");
+    this.room = this.props.room;
+    this.room.localParticipant.media.attach(this.refs.localmedia);
+
+
+    // TODO -will assume that this app is about 1 on 1 conversation => need to follow this concept here...
+    this.room.participants.forEach(participant=> {
+      this.participant=participant;
+      this.participant.media.attach(this.refs.remotemedia);
+      console.log("Already in Room: '" + this.participant.identity + "'");
+      this.setState({participantConnected:true});
+    });
+
+    // When a participant joins, draw their video on screen
+    this.room.on('participantConnected',  participant=> {
+      console.log("Joining: '" + participant.identity + "'");
+      this.participant=participant;
+      this.participant.media.attach(this.refs.remotemedia);
+      this.setState({participantConnected:true});
+    });
+
+    //DISCONNECT
+    this.room.on('participantDisconnected', function (participant) {
+      console.log("Participant '" + participant.identity + "' left the room");
+      participant.media.detach();//? need to pass this to the child?
+      this.setState({participantConnected:false});
+    });
+
+    // When we are disconnected, stop capturing local video
+    // Also remove media for all remote participants
+    this.room.on('disconnected',  ()=> {
+      console.log('I Left the room');
+      this.room.localParticipant.media.detach();
+      this.room.participants.forEach(function(participant) {
+        participant.media.detach();
+      });
+      this.setState({participantConnected:false});
+      this.room = null;
+    });
+  }
+
+  componentWillUnmount(){
+    console.log("ActiveConversation::componentWillUnMount");
+    this.room.localParticipant.media.detach();
+    this.participant.media.detach();
+  }
+
+  handeLeaveConversation(){
+    this.props.handleLeave()
+  }
+
+  render() {
+    return (
+
+      <div className="row">
+        <div id="callPanel" className="panel panel-default" style={{display: 'block' }}>
+          <div className="panel-heading">
+            <h3 className="panel-title">Call with PUT_NAME_HERE</h3>
+          </div>
+          <div className="panel-body">
+            <div id="videoPanel">
+              <div id="remoteVideo"  ref="remotemedia"></div>
+              <div id="localVideo"  ref="localmedia"></div>
+              <div id="remoteVideoBg" style={{display: 'none' }}></div>
+              <div id="localVideoBg" style={{display: 'none' }}></div>
+            </div>
+          </div>
+        </div>
+        <div className="col-sm-12">
+          <button onClick={this.handeLeaveConversation} className="btn btn-default">Leave conversation</button>
+        </div>
+      </div>
+
+    );
+  }
+}
+
+export default ActiveConversation;
diff --git a/src/components/MessagePanel.js b/src/components/MessagePanel.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+
+class MessagePanel extends Component {
+  render() {
+    return (
+      <div className="row">
+        <div className="col-lg-12">
+          <div className="panel panel-default">
+            <div className="panel-body">
+              {this.props.message}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MessagePanel;
diff --git a/src/components/Room.js b/src/components/Room.js
@@ -1,18 +1,22 @@
 import React, { Component } from 'react';
 import '../index.css'
 
+import ActiveConversation from './ActiveConversation.js';
+import MessagePanel from './MessagePanel.js';
+
 var gRoom = null;
 window.addEventListener('beforeunload', leaveRoomIfJoined);
 
 
 class Room extends Component {
   constructor(props) {
     super(props);
-    this.state = {connectedToRoom: false, connState:'OFFLINE'};
+    this.state = {connState:'DISCONNECTED'};
 
-    this.roomJoined = this.roomJoined.bind(this);
-    this.handeLeaveRoom = this.handeLeaveRoom.bind(this);
     this.joinRoom = this.joinRoom.bind(this);
+    this.roomJoined = this.roomJoined.bind(this);
+    this.startConversation = this.startConversation.bind(this);
+    this.handeLeaveConversation = this.handeLeaveConversation.bind(this);
   }
 
   componentDidMount(){
@@ -25,95 +29,38 @@ class Room extends Component {
           console.log('Could not connect to Twilio: ' + error.message);
         });
   }
+
   roomJoined(room){
-    this.room = room;
     gRoom = room;
-    if(!this.previewMedia){
-      this.room.localParticipant.media.attach(this.refs.localmedia);
-    }
     this.setState({connState:'CONNECTED'});
-
-    //CONNECT
-    this.room.participants.forEach(participant=> {
-      console.log("Already in Room: '" + participant.identity + "'");
-      participant.media.attach(this.refs.remotemedia);
-      this.setState({connState:'PARTICIPANTADD'});
-    });
-
-    // When a participant joins, draw their video on screen
-    this.room.on('participantConnected',  participant=> {
-      console.log("Joining: '" + participant.identity + "'");
-      participant.media.attach(this.refs.remotemedia);
-      this.setState({connState:'PARTICIPANTADD'});
-    });
-
-    //DISCONNECT
-    // When a participant disconnects, note in log
-    this.room.on('participantDisconnected', function (participant) {
-      console.log("Participant '" + participant.identity + "' left the room");
-      participant.media.detach();
-      this.setState({connState:'PARTICIPANTREMOVE'});
-    });
-
-    // When we are disconnected, stop capturing local video
-    // Also remove media for all remote participants
-    this.room.on('disconnected',  ()=> {
-      console.log('Left');
-      this.room.localParticipant.media.detach();
-      this.room.participants.forEach(function(participant) {
-        participant.media.detach();
-      });
-      this.setState({connState:'DISCONNECTED'});
-      this.room = null;
-    });
   }
 
-  handeLeaveRoom(){
-    console.log("handeLeaveRoom");
+  handeLeaveConversation(){
+    console.log("handeLeaveConversation");
     this.room.disconnect();
     this.setState({connState:'DISCONNECTED'});
   }
 
+  startConversation(){
+    this.setState({connState:'START'});
+  }
+
   render() {
-    var leaveRoomButton = "";
-    if(this.state.connState=="CONNECTED"){
-      leaveRoomButton = <button onClick={this.handeLeaveRoom} className="btn btn-default">Leave Room</button>
-    }
-    var joinRoomButton = "";
-    if(this.state.connState=="DISCONNECTED"){
-      joinRoomButton = <button onClick={this.joinRoom} className="btn btn-default">Join Room</button>
+    //var joinRoomButton = <button onClick={this.startConversation} className="btn btn-default">Join Room</button>
+    var component = <MessagePanel message='not connected' />;
+    if(this.state.connState=='CONNECTED'){
+      component = <ActiveConversation room={gRoom} />
     }
     return (
-
-      <div className="row">
-
-        <div id="callPanel" className="panel panel-default" style={{display: 'block' }}>
-          <div className="panel-heading">
-            <h3 className="panel-title">Call with PUT_NAME_HERE</h3>
-          </div>
-          <div className="panel-body">
-            <div id="videoPanel">
-              <div id="remoteVideo"  ref="remotemedia"></div>
-              <div id="localVideo"  ref="localmedia"></div>
-              <div id="remoteVideoBg" style={{display: 'none' }}></div>
-              <div id="localVideoBg" style={{display: 'none' }}></div>
-            </div>
-          </div>
-        </div>
-
-        <div className="col-sm-12">
-          {leaveRoomButton}{joinRoomButton}
-        </div>
-
-      </div>
-
+      <div>{component}</div>
     );
   }
 }
 
 function leaveRoomIfJoined() {
   if (gRoom) {
     gRoom.disconnect();
+    gRoom=null;
   }
 }
 export default Room;