v1.7.0/start of video call

- remove user check updatePlayer api
2020-09-05 11:21:20 -04:00
parent 1c8930cc2a
commit 201283fc8f
6 changed files with 106 additions and 61 deletions
@@ -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',
@@ -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]}
@@ -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() {
@@ -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>
              )}
@@ -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;
@@ -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
-    .firestore()
-    .collection('rooms')
-    .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
+  if (showChanged === true && player.showName) {
+    if (roomData.player.showName !== player.showName) {
+      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 });
+        .collection('messages')
+        .add({
+          uid: '<system>',
+          name: '',
+          text: `${userName} changed \n${player.showName ? 'to ' + player.showName : ''}`,
+          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' });
  }
 };