ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.3.0-beta/start of voice call and custom code:

Browse Source
This commit is contained in:
Ayushya Amitabh
2020-05-29 17:43:10 -04:00
parent 2053c2860a
commit ccd7f1cfab
15 changed files with 396 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Api.js
+14
View File
@@ -109,3 +109,17 @@ export const UpdatePlayerApi = async (data) => {
body: JSON.stringify(data),
});
};
export const GetVoxeetTokenApi = async () => {
return fetcher({
endpoint: 'validator',
method: 'GET',
});
};
export const GetRefreshedVoxeetTokenApi = async (data) => {
return fetcher({
endpoint: `refresher/${data.token}`,
method: 'GET',
});
};
app/src/App.js
+2 -3
View File
@@ -7,7 +7,6 @@ import firebase from 'firebase/app';
import 'firebase/firestore';
import Inactive from './Inactive';
import { getUserUid } from './Api';
import Chat from './Chat';
const darkTheme = createMuiTheme({
palette: {
@@ -20,7 +19,7 @@ const darkTheme = createMuiTheme({
const Routes = (props) => (
<Router>
<Chat {...props} />
<Create {...props} />
</Router>
);
@@ -34,7 +33,7 @@ const App = () => {
useEffect(() => {
setLoading(true);
// getUserUid();
getUserUid();
firebase
.firestore()
.collection('server')
app/src/CallManager.js
+61 -58
View File
@@ -1,67 +1,70 @@
/* global webkitRTCPeerConnection */
const emptyListener = (e) => console.log('EMPTY LISTENER FOR PHONE MANAGER', e);
import { VoxeetSDK } from '@voxeet/voxeet-web-sdk';
import { GetVoxeetTokenApi, GetRefreshedVoxeetTokenApi } from './Api';
const CONFIG = {
iceServers: [
{
urls: [
'stun:stun.l.google.com:19302',
'stun:stun1.l.google.com:19302',
'stun:stun2.l.google.com:19302',
'stun:stun3.l.google.com:19302',
'stun:stun4.l.google.com:19302',
],
},
],
iceCandidatePoolSize: 10,
};
export default class PhoneManager {
constructor(listener = emptyListener) {
this.mediaStream = null;
class CallManager {
constructor(listener) {
this.listener = listener;
/* B I N D S */
this.joinCall = this.joinCall.bind(this);
this.getMediaStream = this.getMediaStream.bind(this);
this.__refreshToken = null;
this.__accessToken = null;
}
async getMediaStream() {
toggleCall(onCall, conferenceRoomId) {
if (onCall === true) this.leaveCall();
else this.boot(conferenceRoomId);
}
async boot(conferenceRoomId) {
if (
this.__accessToken !== undefined &&
this.__refreshToken !== undefined &&
this.__accessToken !== null &&
this.__refreshToken !== null
) {
try {
await VoxeetSDK.session.open({
externalId: window.localStorage.getItem('watchPartyUserUid'),
name: window.localStorage.getItem('watchPartyUserName'),
});
} catch (error) {
console.error('Error Opening Voxeet Session', error);
}
} else {
this.initialize();
}
}
async leaveCall() {}
async openSession() {}
async initialize() {
GetVoxeetTokenApi()
.then((res) => res.json())
.then((tokenResult) => {
if (tokenResult.status <= 299) {
const { access_token, refresh_token } = tokenResult;
this.updateTokens(access_token, refresh_token);
VoxeetSDK.initializeToken(access_token, this.refreshToken);
} else {
console.error('Get Voxeet Token API Result Error', tokenResult);
}
})
.catch((err) => {
console.error('Get Voxeet Token API error', err);
});
}
async refreshToken() {
return new Promise((resolve, reject) => {
if (this.mediaStream !== null && this.mediaStream !== undefined) resolve(true);
navigator.mediaDevices
.getUserMedia({
video: false,
audio: true,
GetRefreshedVoxeetTokenApi({ token: this.__refreshToken })
.then((res) => res.json())
.then((tokenResult) => {
const { access_token, refresh_token } = tokenResult;
this.updateTokens(access_token, refresh_token);
resolve(access_token);
})
.then((mediaStream) => {
this.mediaStream = mediaStream;
resolve(true);
})
.catch((error) => reject(error));
.catch((err) => {
console.error('Get Voxeet Token API error', err);
reject(err);
});
});
}
async joinCall() {
await this.getMediaStream();
var peerConnection = new webkitRTCPeerConnection(CONFIG);
console.log('Created Peer Connection', peerConnection);
peerConnection.addTrack(this.mediaStream.getAudioTracks()[0], this.mediaStream);
peerConnection.onicecandidate = (ev) => console.log('Got ICE', ev);
var offer = peerConnection.createOffer();
console.log('Created Offer', offer);
var answer = peerConnection.createAnswer();
console.log('Created Answer', answer);
}
async leaveCall() {
if (this.mediaStream !== null && this.mediaStream !== undefined) {
this.mediaStream.getAudioTracks().forEach((track) => track.stop());
}
}
toggleMute() {
if (this.mediaStream !== null && this.mediaStream !== undefined) {
this.mediaStream.getAudioTracks().forEach((track) => (track.enabled = !track.enabled));
}
updateTokens(aT, rT) {
this.__accessToken = aT;
this.__refreshToken = rT;
}
}
app/src/Chat.js
+31 -26
View File
@@ -55,16 +55,18 @@ export default class Chat extends Component {
this.port = null;
this.gifClick = this.gifClick.bind(this);
this.endParty = this.endParty.bind(this);
this.handleMute = this.handleMute.bind(this);
this.leaveParty = this.leaveParty.bind(this);
this.shareParty = this.shareParty.bind(this);
this.syncPlayer = this.syncPlayer.bind(this);
this.sendMessage = this.sendMessage.bind(this);
this.getCarousel = this.getCarousel.bind(this);
this.handlePhoneCall = this.handlePhoneCall.bind(this);
this.callEventListener = this.callEventListener.bind(this);
this.mCallManager = new CallManager(this.callEventListener);
this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
this.videoEventListener = this.videoEventListener.bind(this);
this.mVideoListener = new VideoListener(this.videoEventListener);
this.mCallManager = new CallManager();
}
componentDidMount() {
// EVENT CAPTURE FOR ENTER TO SEND
@@ -84,24 +86,24 @@ export default class Chat extends Component {
this.mVideoListener.start();
// CHROME FIREBASE FIRESTORE LISTENER
// this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
// // Initialize listener
// this.port.postMessage({
// type: 'INIT',
// roomId: window.localStorage.getItem('watchPartyRoomId'),
// });
// // Listener
// this.port.onMessage.addListener((response) => {
// if (response.isError === true) {
// this.props.notify('Uh oh. Got lost from the party.');
// goTo(Create, this.props);
// return;
// }
// this.setState(response);
// if (response.player) this.mVideoListener.doUpdate(response.player);
// const pcc = document.getElementsByClassName('thread-container')[0];
// if (pcc) pcc.scrollTop = pcc.scrollHeight;
// });
this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
// Initialize listener
this.port.postMessage({
type: 'INIT',
roomId: window.localStorage.getItem('watchPartyRoomId'),
});
// Listener
this.port.onMessage.addListener((response) => {
if (response.isError === true) {
this.props.notify('Uh oh. Got lost from the party.');
goTo(Create, this.props);
return;
}
this.setState(response);
if (response.player) this.mVideoListener.doUpdate(response.player);
const pcc = document.querySelector('.thread-container');
if (pcc) pcc.scrollTop = pcc.scrollHeight;
});
// DONE WITH MOUNTING TASKS
this.props.updateLoading(false);
@@ -112,6 +114,7 @@ export default class Chat extends Component {
videoEventListener(video) {
this.syncPlayer(video);
}
callEventListener(event) {}
syncPlayer(video) {
const { status, showName, time, source, element, showChanged } = video;
if (element) {
@@ -216,10 +219,12 @@ export default class Chat extends Component {
: giphyFetch.search(this.state.newMessage, { offset, limit: 1 });
}
async handlePhoneCall() {
if (!this.state.onCall) this.mCallManager.joinCall();
else this.mCallManager.leaveCall();
this.setState({ onCall: !this.state.onCall });
}
handleMute() {
this.mCallManager.toggleMute();
this.setState({ muted: !this.state.muted });
}
render() {
const { admin, name, messages, newMessage, gif, onCall, muted } = this.state;
if (getPlayerSource() === PLAYER_SOURCE.HBONOW && messages[0] !== alertMessage)
@@ -253,17 +258,17 @@ export default class Chat extends Component {
<Thread messages={messages} />
</div>
<div className="text-phone-panel">
{newMessage ? null : (
{gif || newMessage ? null : (
<IconButton onClick={this.handlePhoneCall} color={onCall ? 'secondary' : 'primary'}>
{onCall ? <PhoneDisable /> : <PhoneEnable />}
</IconButton>
)}
{!newMessage && onCall && !muted ? (
<IconButton onClick={() => this.mCallManager.toggleMute()} color="secondary">
{!gif && !newMessage && onCall && !muted ? (
<IconButton onClick={this.handleMute} color="secondary">
<MicOff />
</IconButton>
) : !newMessage && onCall && muted ? (
<IconButton onClick={() => this.mCallManager.toggleMute()} color="primary">
) : !gif && !newMessage && onCall && muted ? (
<IconButton onClick={this.handleMute} color="primary">
<MicOn />
</IconButton>
) : null}
app/src/index.css
+3
View File
@@ -8,6 +8,9 @@ body {
background-color: black;
transition: max-width ease-in-out 0.35s;
}
body.local {
background-color: white;
}
body.visible {
width: var(--body-width);
}
app/src/index.js
+1
View File
@@ -57,6 +57,7 @@ switch (getPlayerSource()) {
document.body.classList.add('hbo');
break;
case PLAYER_SOURCE.LOCAL:
document.body.classList.add('local');
break;
default:
break;