v1.7.0/start of video call

- remove user check updatePlayer api

app/src/Chat.js

@@ -69,6 +69,8 @@ import {
   VolumeDown,
   VolumeUp,
   CancelRounded,
+  VideocamRounded,
+  VideocamOffRounded,
 } from '@material-ui/icons';
 import Create from './Create';
 import { goTo } from 'route-lite';
@@ -101,6 +103,7 @@ export default class Chat extends Component {
       replyTo: null,
       sendingMessages: [],
       volumes: {},
+      usingVideo: false,
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -278,7 +281,8 @@ export default class Chat extends Component {
         this.state.onCall,
         this.state.conference,
         this.state.admin,
-        this.state.adminOnly
+        this.state.adminOnly,
+        false
       );
     DeleteRoomApi(data)
       .then((res) => {
@@ -306,7 +310,8 @@ export default class Chat extends Component {
         this.state.onCall,
         this.state.conference,
         this.state.admin,
-        this.state.adminOnly
+        this.state.adminOnly,
+        false
       );
     LeaveRoomApi(data)
       .then((res) => {
@@ -381,7 +386,8 @@ export default class Chat extends Component {
   gifClick(iGif) {
     this.sendMessageInvoker(iGif.images.original.url);
   }
-  handlePhoneCall() {
+  handlePhoneCall(useVideo = false) {
+    console.log('USEVID 1', useVideo);
     const { onCall, conference, admin, adminOnly } = this.state;
     if (window.navigator && onCall === false) {
       try {
@@ -397,19 +403,39 @@ export default class Chat extends Component {
             audio: true,
           })
           .then(() => {
-            document.getElementById('mic-permission-overlay').remove();
-            this.mCallManager.toggleCall(onCall, conference, admin, adminOnly);
+            console.log('USEVID 2', useVideo);
+            if (useVideo === true) {
+              window.navigator
+                .getUserMedia({
+                  video: true,
+                })
+                .then(() => {
+                  document.getElementById('mic-permission-overlay').remove();
+                  this.mCallManager.toggleCall(onCall, conference, admin, adminOnly, useVideo);
+                })
+                .catch(() => {
+                  document.getElementById('mic-permission-overlay').remove();
+                  this.props.notify(
+                    'Check your webcam permission for this website. You can modify site permission by clicking on the lock (🔒) icon in the top left, then clicking site permissions.',
+                    15000
+                  );
+                });
+            } else {
+              document.getElementById('mic-permission-overlay').remove();
+              this.mCallManager.toggleCall(onCall, conference, admin, adminOnly, useVideo);
+            }
           })
           .catch(() => {
             document.getElementById('mic-permission-overlay').remove();
             this.props.notify(
-              'Check your mic permission for this website. You can modify site permission by clicking on the lock icon in the top left.'
+              'Check your mic permission for this website. You can modify site permission by clicking on the lock (🔒) icon in the top left, then clicking site permissions.',
+              15000
             );
           });
       } catch (err) {
         console.error('Handle Phone Call Error', err);
       }
-    } else this.mCallManager.toggleCall(onCall, conference, admin, adminOnly);
+    } else this.mCallManager.toggleCall(onCall, conference, admin, adminOnly, useVideo);
   }
   handleMute() {
     this.mCallManager.toggleMute(this.state.muted);
@@ -479,6 +505,10 @@ export default class Chat extends Component {
       });
     }
   }
+  handleVideo() {
+    const { usingVideo } = this.state;
+    this.mCallManager.toggleVideo(!usingVideo);
+  }
   render() {
     const {
       admin,
@@ -500,6 +530,7 @@ export default class Chat extends Component {
       replyTo,
       sendingMessages,
       volumes,
+      usingVideo,
     } = this.state;
     const alerts = [
       {
@@ -802,12 +833,27 @@ export default class Chat extends Component {
               </IconButton>
             </Tooltip>
           )}
+          {gif || newMessage ? null : callActionPending ? (
+            <CircularProgress className="icon-button" color="secondary" />
+          ) : (
+            <Tooltip
+              placement="top"
+              title={onCall ? (usingVideo ? 'Stop Video' : 'Start Video') : 'Join Video Call'}
+            >
+              <IconButton
+                onClick={onCall ? () => this.handleVideo() : () => this.handlePhoneCall(true)}
+                color={usingVideo ? 'primary' : 'secondary'}
+              >
+                {usingVideo ? <VideocamOffRounded /> : <VideocamRounded />}
+              </IconButton>
+            </Tooltip>
+          )}
           {gif || newMessage ? null : callActionPending ? (
             <CircularProgress className="icon-button" color="secondary" />
           ) : (
             <IconButton
               disabled={callActionPending}
-              onClick={this.handlePhoneCall}
+              onClick={() => this.handlePhoneCall(false)}
               color={!onCall ? 'secondary' : 'primary'}
               className="icon-button"
             >
@@ -816,7 +862,7 @@ export default class Chat extends Component {
                   <PhoneDisable />
                 </Tooltip>
               ) : (
-                <Tooltip placement="top" title="Join Call">
+                <Tooltip placement="top" title="Join Voice Call">
                   <PhoneEnable />
                 </Tooltip>
               )}