diff --git a/app/src/Api.js b/app/src/Api.js index 076afd0..cdb3e51 100644 --- a/app/src/Api.js +++ b/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', diff --git a/app/src/App.js b/app/src/App.js index 1304074..fe2b27a 100644 --- a/app/src/App.js +++ b/app/src/App.js @@ -145,7 +145,7 @@ const App = () => { open={notification.open} onClose={() => setNotification(closedNotification)} message={notification.message} - autoHideDuration={6000} + autoHideDuration={notification.timeout} /> { 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]} diff --git a/app/src/CallManager.js b/app/src/CallManager.js index 13d6827..56cc122 100644 --- a/app/src/CallManager.js +++ b/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() { diff --git a/app/src/Chat.js b/app/src/Chat.js index da99e2e..5b5a5a0 100644 --- a/app/src/Chat.js +++ b/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 { )} + {gif || newMessage ? null : callActionPending ? ( + + ) : ( + + this.handleVideo() : () => this.handlePhoneCall(true)} + color={usingVideo ? 'primary' : 'secondary'} + > + {usingVideo ? : } + + + )} {gif || newMessage ? null : callActionPending ? ( ) : ( this.handlePhoneCall(false)} color={!onCall ? 'secondary' : 'primary'} className="icon-button" > @@ -816,7 +862,7 @@ export default class Chat extends Component { ) : ( - + )} diff --git a/app/src/index.css b/app/src/index.css index c9a8ddd..1d09218 100644 --- a/app/src/index.css +++ b/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; diff --git a/functions/modules/updatePlayer.js b/functions/modules/updatePlayer.js index 2ccd39c..78dfbd1 100644 --- a/functions/modules/updatePlayer.js +++ b/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 - .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: '', - 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: '', + 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' }); } };