diff --git a/packages/desktop/src/providers/CommunicationsProvider.tsx b/packages/desktop/src/providers/CommunicationsProvider.tsx index db30d8e..6e9736b 100644 --- a/packages/desktop/src/providers/CommunicationsProvider.tsx +++ b/packages/desktop/src/providers/CommunicationsProvider.tsx @@ -1,8 +1,12 @@ -import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react'; +/* eslint-disable jsx-a11y/media-has-caption */ +/* eslint-disable react/jsx-no-comment-textnodes */ +import { ConnectOptions, Room, connect } from 'twilio-video'; +import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { useMediaDevices, useMount } from 'react-use'; import TwilioAccessToken from '@nirvana/core/src/functions/response/TwilioAccessToken.response'; import { getTwilioAccessToken } from '../firebase/functions'; +import useConversations from './ConversationProvider'; import { useImmer } from 'use-immer'; import { useSnackbar } from 'notistack'; @@ -54,31 +58,93 @@ interface ICommunicationsContext { userLocalStream?: MediaStream; userDeviceSelections?: DeviceSelections; + + room: Room | null; } -const CommunicationsContext = React.createContext({}); +const CommunicationsContext = React.createContext({ + room: null, +}); // todo save the selected devices in localstorage export function CommunicationsProvider({ children }: { children: React.ReactNode }) { const { enqueueSnackbar } = useSnackbar(); const [userDeviceSelections, setUserDeviceSelections] = useImmer({}); + const { selectedConversation } = useConversations(); + const devices = useUserDevices(); + const [room, setRoom] = useState(null); + const localAudioRef = useRef(null); + const getAuthToken = useCallback(async () => { - try { - const result = await getTwilioAccessToken(); - const data = result.data as TwilioAccessToken; + const result = await getTwilioAccessToken(); + const data = result.data as TwilioAccessToken; - enqueueSnackbar('got token data'); + enqueueSnackbar('got token data'); - return data.token; - } catch (error) { - console.error(error); - enqueueSnackbar('something went wrong trying to set up calls', { variant: 'error' }); - } + return data.token; }, [enqueueSnackbar]); + const connectToRoom = useCallback( + async (conversationId: string) => { + try { + const token = await getAuthToken(); + + connect(token, { + name: conversationId, + audio: true, + }).then( + (room) => { + enqueueSnackbar('joined room', { variant: 'success' }); + + // Log your Client's LocalParticipant in the Room + const localParticipant = room.localParticipant; + console.log(`Connected to the Room as LocalParticipant "${localParticipant.identity}"`); + + // Log any Participants already connected to the Room + room.participants.forEach((participant) => { + console.log(`Participant "${participant.identity}" is connected to the Room`); + }); + + // Log new Participants as they connect to the Room + room.once('participantConnected', (participant) => { + console.log(`Participant "${participant.identity}" has connected to the Room`); + }); + + // Log Participants as they disconnect from the Room + room.once('participantDisconnected', (participant) => { + console.log(`Participant "${participant.identity}" has disconnected from the Room`); + }); + + setRoom(room); + }, + (error) => { + console.error(`Unable to connect to Room: ${error.message}`); + }, + ); + } catch (error) { + console.error(error); + enqueueSnackbar('something went wrong trying to set up calls', { variant: 'error' }); + } + }, + [getAuthToken, enqueueSnackbar, setRoom], + ); + + // every time conversation is selected + // we should connect to the room and get all of the participant peers + // do a peer to peer room for all cases for now + useEffect(() => { + if (selectedConversation?.id) { + connectToRoom(selectedConversation.id); + } else { + // leave room + + setRoom(null); + } + }, [selectedConversation?.id, connectToRoom]); + // const getUserAudioDevices = useMemo(() => { // console.log(devices); // }, [devices]); @@ -95,7 +161,9 @@ export function CommunicationsProvider({ children }: { children: React.ReactNode }); return ( - + + ); diff --git a/packages/firebase/functions/src/index.ts b/packages/firebase/functions/src/index.ts index eafef56..a16f9bd 100644 --- a/packages/firebase/functions/src/index.ts +++ b/packages/firebase/functions/src/index.ts @@ -29,7 +29,7 @@ export const getStreamToken = functions.https.onCall((data, context) => { return; } - const identity = 'user'; + const identity = context.auth?.uid ?? 'user'; // Create Video Grant const videoGrant = new VideoGrant();