diff --git a/app/src/Api.js b/app/src/Api.js index cdb3e51..6b4a42e 100644 --- a/app/src/Api.js +++ b/app/src/Api.js @@ -11,8 +11,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION. ************************************************************************/ /*global chrome*/ -// const API_HOST = 'https://api.chromewatchparty.com'; -const API_HOST = 'http://localhost:5000/watch-party-crx/us-central1/widgets'; +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/CallManager.js b/app/src/CallManager.js index 56cc122..1acd0ec 100644 --- a/app/src/CallManager.js +++ b/app/src/CallManager.js @@ -27,13 +27,14 @@ export default class CallManager { this.__sessionInitialized = false; this.__admin = false; this.__adminOnly = true; + this.__useVideo = false; } toggleCall(onCall, conference, admin, adminOnly, useVideo) { - console.log('USE VIDEO', useVideo); try { this.listener({ callActionPending: true }); this.__admin = admin; this.__adminOnly = adminOnly; + this.__useVideo = useVideo; if (onCall === true) this.leaveCall(); else this.boot(conference, useVideo); } catch (e) { @@ -46,8 +47,15 @@ export default class CallManager { this.listener({ muted: !muted, callActionPending: false }); } toggleVideo(useVideo) { - console.log(useVideo); - this.listener({ usingVideo: useVideo }); + if (useVideo === true) { + VoxeetSDK.conference.startVideo(VoxeetSDK.session.participant).then(() => { + this.listener({ usingVideo: useVideo }); + }); + } else { + VoxeetSDK.conference.stopVideo(VoxeetSDK.session.participant).then(() => { + this.listener({ usingVideo: useVideo }); + }); + } } async boot(conference, useVideo) { await this.initialize(); @@ -93,6 +101,7 @@ export default class CallManager { onCall: false, muted: false, callActionPending: false, + usingVideo: false, }); console.error('Update Voxeet API Error', err); return false; @@ -105,6 +114,7 @@ export default class CallManager { onCall: false, muted: false, callActionPending: false, + usingVideo: false, }); console.error('Failed to update party Voxeet'); } @@ -123,11 +133,15 @@ export default class CallManager { onCall: false, muted: false, callActionPending: false, + usingVideo: false, }); this.notify('Unable to join call. Try again in a moment.'); console.error('Error joining call', e); - return true; + return false; }); + if (joined === true) { + this.listener({ usingVideo: useVideo }); + } // Leave changes as comment for later // if (!joined) { // this.startCall(useVideo); @@ -136,7 +150,19 @@ export default class CallManager { async leaveCall() { VoxeetSDK.conference.leave().then(() => { VoxeetSDK.session.close(); - this.listener({ onCall: false, muted: false, callActionPending: false, usingVideo: false }); + this.listener({ + onCall: false, + muted: false, + callActionPending: false, + usingVideo: false, + conference: null, + }); + document.querySelectorAll('.vxt-video').forEach((v) => { + v.srcObject.getTracks().forEach((track) => { + track.stop(); + }); + v.remove(); + }); }); } async openSession() { @@ -167,7 +193,7 @@ export default class CallManager { VoxeetSDK.conference.on('participantUpdated', () => this.usersListHandle()); VoxeetSDK.conference.on('joined', () => { - this.listener({ onCall: true, callActionPending: false }); + this.listener({ onCall: true, callActionPending: false, usingVideo: this.__useVideo }); }); VoxeetSDK.conference.on('left', () => { @@ -175,14 +201,47 @@ export default class CallManager { onCall: false, callActionPending: false, usersOnCall: {}, + usingVideo: false, }); }); VoxeetSDK.conference.on('streamAdded', (participant, stream) => { + this.listener({ callActionPending: true }); + if (this.__useVideo === true) { + const vid = 'video#' + LocalData().userUid; + if (!document.querySelector(vid)) { + const vidNode = document.createElement('video'); + vidNode.id = LocalData().userUid; + vidNode.classList.add('vxt-video'); + document.querySelector('.vxt-video-container').appendChild(vidNode); + navigator + .getUserMedia({ + video: true, + audio: false, + }) + .then((stream) => { + vidNode.srcObject = stream; + vidNode.onloadedmetadata = vidNode.play; + }) + .catch((err) => { + //ignore + }); + } + } this.listener({ callActionPending: false }); }); VoxeetSDK.conference.on('streamRemoved', (participant, stream) => { + const vid = 'video#' + participant.id; + if (document.querySelector(vid)) { + document + .querySelector(vid) + .srcObject.getTracks() + .forEach((track) => { + track.stop(); + }); + document.querySelector(vid).remove(); + } this.listener({ callActionPending: false }); }); @@ -194,11 +253,11 @@ export default class CallManager { ) { await GetVoxeetTokenApi({ partyName: LocalData().partyName }) .then((res) => res.json()) - .then((tokenResult) => { + .then(async (tokenResult) => { if (tokenResult.status <= 299) { const { access_token, refresh_token } = tokenResult; this.updateTokens(access_token, refresh_token); - VoxeetSDK.initializeToken(access_token, refresh_token); + await VoxeetSDK.initializeToken(access_token, refresh_token); } else { console.error('Get Voxeet Token API Result Error', tokenResult); } @@ -207,7 +266,7 @@ export default class CallManager { console.error('Get Voxeet Token API error', err); }); } else { - VoxeetSDK.initializeToken(this.__accessToken, this.__refreshToken); + await VoxeetSDK.initializeToken(this.__accessToken, this.__refreshToken); } } async refreshToken() { diff --git a/app/src/Chat.js b/app/src/Chat.js index 5b5a5a0..60a1b9e 100644 --- a/app/src/Chat.js +++ b/app/src/Chat.js @@ -394,7 +394,7 @@ export default class Chat extends Component { const overlay = document.createElement('div'); overlay.innerHTML = `
-

Grant Mic Permission

+

Grant Mic / Camera Permission

`; overlay.id = 'mic-permission-overlay'; document.body.appendChild(overlay); @@ -803,6 +803,7 @@ export default class Chat extends Component { } else return null; })} +