v1.7.0/start of video call

- remove user check updatePlayer api

app/src/Api.js

@@ -11,7 +11,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 ************************************************************************/
 /*global chrome*/
 
-const API_HOST = 'https://api.chromewatchparty.com';
+// const API_HOST = 'https://api.chromewatchparty.com';
+const API_HOST = 'http://localhost:5000/watch-party-crx/us-central1/widgets';
 
 export const PLAYER_STATUS = {
   PLAYING: 'PLAYING',

app/src/App.js

@@ -145,7 +145,7 @@ const App = () => {
         open={notification.open}
         onClose={() => setNotification(closedNotification)}
         message={notification.message}
-        autoHideDuration={6000}
+        autoHideDuration={notification.timeout}
       />
       <Tutorial
         resetTutorial={resetTutorial}
@@ -172,7 +172,9 @@ const App = () => {
               resetTutorial={resetTutorial}
               tutorialComplete={tutorialComplete}
               updateLoading={setLoading}
-              notify={(message) => setNotification({ open: true, message })}
+              notify={(message, timeout = 6000) =>
+                setNotification({ open: true, message, timeout })
+              }
               appVersion={APP_VERSION}
               appVersionString={APP_VERSION_STRING}
               status={status[APP_VERSION_STRING]}

app/src/CallManager.js

@@ -28,13 +28,14 @@ export default class CallManager {
     this.__admin = false;
     this.__adminOnly = true;
   }
-  toggleCall(onCall, conference, admin, adminOnly) {
+  toggleCall(onCall, conference, admin, adminOnly, useVideo) {
+    console.log('USE VIDEO', useVideo);
     try {
       this.listener({ callActionPending: true });
       this.__admin = admin;
       this.__adminOnly = adminOnly;
       if (onCall === true) this.leaveCall();
-      else this.boot(conference);
+      else this.boot(conference, useVideo);
     } catch (e) {
       this.notify('Uh oh something went wrong, try rejoining the call.');
     }
@@ -44,25 +45,29 @@ export default class CallManager {
     VoxeetSDK.conference.mute(VoxeetSDK.session.participant, !muted);
     this.listener({ muted: !muted, callActionPending: false });
   }
-  async boot(conference) {
+  toggleVideo(useVideo) {
+    console.log(useVideo);
+    this.listener({ usingVideo: useVideo });
+  }
+  async boot(conference, useVideo) {
     await this.initialize();
     const opened = await this.openSession();
     if (opened && conference) {
       await VoxeetSDK.conference
         .fetch(conference._id)
-        .then(this.joinCall)
+        .then((c) => this.joinCall(c, useVideo))
         .catch((err) => {
           console.error('Failed to fetch conference', err);
-          this.startCall();
+          this.startCall(useVideo);
         });
     } else if (opened && !conference) {
-      this.startCall();
+      this.startCall(useVideo);
     } else {
       this.listener({ onCall: false, muted: false, callActionPending: false });
       console.error('Unable to open Voxeet Session');
     }
   }
-  async startCall() {
+  async startCall(useVideo) {
     if (!this.__adminOnly || (this.__adminOnly && this.__admin)) {
       VoxeetSDK.conference
         .create({
@@ -80,7 +85,7 @@ export default class CallManager {
             .then((res) => res.status <= 299)
             .catch((err) => {
               if (err.conference) {
-                this.joinCall(err.conference);
+                this.joinCall(err.conference, useVideo);
                 return true;
               } else {
                 this.notify(err.message);
@@ -94,7 +99,7 @@ export default class CallManager {
               }
             });
           if (updatedVoxeet === true) {
-            this.joinCall(conference);
+            this.joinCall(conference, useVideo);
           } else {
             this.listener({
               onCall: false,
@@ -109,9 +114,9 @@ export default class CallManager {
       this.leaveCall();
     }
   }
-  async joinCall(conference) {
+  async joinCall(conference, useVideo) {
     const joined = await VoxeetSDK.conference
-      .join(conference, { constraints: { audio: true, video: false } })
+      .join(conference, { constraints: { audio: true, video: useVideo } })
       .then(() => true)
       .catch((e) => {
         this.listener({
@@ -125,13 +130,13 @@ export default class CallManager {
       });
     // Leave changes as comment for later
     // if (!joined) {
-    //   this.startCall();
+    //   this.startCall(useVideo);
     // }
   }
   async leaveCall() {
     VoxeetSDK.conference.leave().then(() => {
       VoxeetSDK.session.close();
-      this.listener({ onCall: false, muted: false, callActionPending: false });
+      this.listener({ onCall: false, muted: false, callActionPending: false, usingVideo: false });
     });
   }
   async openSession() {

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();
+            console.log('USEVID 2', useVideo);
-            this.mCallManager.toggleCall(onCall, conference, admin, adminOnly);
+            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>
               )}

app/src/index.css

@@ -305,6 +305,9 @@ body.funimation.visible header {
   background-color: black;
   font-size: 1rem !important;
 }
+.party-notification-container .MuiPaper-root .MuiSnackbarContent-message {
+  font-size: 14px;
+}
 @keyframes showbutton {
   0% {
     right: 1rem;

functions/modules/updatePlayer.js

@@ -10,47 +10,35 @@ module.exports = async (req, res) => {
     .get()
     .then((docSnap) => [docSnap.exists, docSnap.data()]);
   if (!roomExists) return res.status(404).send({ message: 'Party not found.' });
-  const userExists = await admin
+  if (showChanged === true && player.showName) {
-    .firestore()
+    if (roomData.player.showName !== player.showName) {
-    .collection('rooms')
+      admin
-    .doc(roomId)
-    .collection('users')
-    .doc(uid)
-    .get()
-    .then((userSnap) => userSnap.exists);
-  if (userExists) {
-    if (showChanged === true && player.showName) {
-      if (roomData.player.showName !== player.showName) {
-        await admin
-          .firestore()
-          .collection('rooms')
-          .doc(roomId)
-          .collection('messages')
-          .add({
-            uid: '<system>',
-            name: '',
-            text: `${userName} changed \n${player.showName ? 'to ' + player.showName : ''}`,
-            time: new Date(),
-          });
-      }
-    }
-    if (roomData.status !== player.status) {
-      await admin
         .firestore()
         .collection('rooms')
         .doc(roomId)
-        .update({
+        .collection('messages')
-          player,
+        .add({
-        })
+          uid: '<system>',
-        .catch((err) => {
+          name: '',
-          console.error(`Failed to update player : \n\t Room: ${roomId} \n\t ${uid}`, err);
+          text: `${userName} changed \n${player.showName ? 'to ' + player.showName : ''}`,
-          res.status(500).send({ message: "Uh oh party could't be synced", err });
+          time: new Date(),
         });
-      return res.status(200).send({ message: 'Synced party player' });
-    } else {
-      return res.status(208).send({ message: 'Player already up to date' });
     }
+  }
+  if (roomData.status !== player.status) {
+    await admin
+      .firestore()
+      .collection('rooms')
+      .doc(roomId)
+      .update({
+        player,
+      })
+      .catch((err) => {
+        console.error(`Failed to update player : \n\t Room: ${roomId} \n\t ${uid}`, err);
+        res.status(500).send({ message: "Uh oh party could't be synced", err });
+      });
+    return res.status(200).send({ message: 'Synced party player' });
   } else {
-    return res.status(401).send({ message: 'Not in room to sync' });
+    return res.status(208).send({ message: 'Player already up to date' });
   }
 };