v1.7.0/start of video call

- remove user check updatePlayer api
This commit is contained in:
2020-09-05 11:21:20 -04:00
parent 1c8930cc2a
commit 201283fc8f
6 changed files with 106 additions and 61 deletions
+2 -1
View File
@@ -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',
+4 -2
View File
@@ -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]}
+18 -13
View File
@@ -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() {
+55 -9
View File
@@ -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>
)}
+3
View File
@@ -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;
+24 -36
View File
@@ -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' });
}
};