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

app/src/Api.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -57,6 +57,7 @@ switch (getPlayerSource()) {
     document.body.classList.add('hbo');
     break;
   case PLAYER_SOURCE.LOCAL:
+    document.body.classList.add('local');
     break;
   default:
     break;