v1.3.0-beta/begin voice call

app/src/Chat.js

@@ -31,6 +31,7 @@ import {
 import { goTo } from 'route-lite';
 import Create from './Create';
 import VideoListener from './VideoListener';
+import CallManager from './CallManager';
 
 const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
 const alertMessage = {
@@ -63,6 +64,7 @@ export default class Chat extends Component {
     this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
     this.videoEventListener = this.videoEventListener.bind(this);
     this.mVideoListener = new VideoListener(this.videoEventListener);
+    this.mCallManager = new CallManager();
   }
   componentDidMount() {
     // EVENT CAPTURE FOR ENTER TO SEND
@@ -213,23 +215,10 @@ export default class Chat extends Component {
       ? giphyFetch.trending({ offset, limit: 1 })
       : giphyFetch.search(this.state.newMessage, { offset, limit: 1 });
   }
-  handlePhoneCall() {
-    if (!this.state.onCall) {
-      navigator.mediaDevices
-        .getUserMedia({
-          video: false,
-          audio: true,
-        })
-        .then((mediaStream) => {
-          this.setState({ onCall: true, muted: false });
-          console.log('GOT DEVICE');
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    } else {
-      this.setState({ onCall: false });
-    }
+  async handlePhoneCall() {
+    if (!this.state.onCall) this.mCallManager.joinCall();
+    else this.mCallManager.leaveCall();
+    this.setState({ onCall: !this.state.onCall });
   }
   render() {
     const { admin, name, messages, newMessage, gif, onCall, muted } = this.state;
@@ -264,6 +253,20 @@ export default class Chat extends Component {
           <Thread messages={messages} />
         </div>
         <div className="text-phone-panel">
+          {newMessage ? null : (
+            <IconButton onClick={this.handlePhoneCall} color={onCall ? 'secondary' : 'primary'}>
+              {onCall ? <PhoneDisable /> : <PhoneEnable />}
+            </IconButton>
+          )}
+          {!newMessage && onCall && !muted ? (
+            <IconButton onClick={() => this.mCallManager.toggleMute()} color="secondary">
+              <MicOff />
+            </IconButton>
+          ) : !newMessage && onCall && muted ? (
+            <IconButton onClick={() => this.mCallManager.toggleMute()} color="primary">
+              <MicOn />
+            </IconButton>
+          ) : null}
           <TextField
             multiline
             rowsMax="3"
@@ -305,18 +308,6 @@ export default class Chat extends Component {
               ),
             }}
           />
-          <IconButton onClick={this.handlePhoneCall} color={onCall ? 'secondary' : 'primary'}>
-            {onCall ? <PhoneDisable /> : <PhoneEnable />}
-          </IconButton>
-          {onCall && !muted ? (
-            <IconButton color="secondary">
-              <MicOff />
-            </IconButton>
-          ) : onCall && muted ? (
-            <IconButton color="primary">
-              <MicOn />
-            </IconButton>
-          ) : null}
         </div>
         {gif ? (
           <Carousel