diff --git a/app/routes/_room.tsx b/app/routes/_room.tsx index c41a4b53..f5271bce 100644 --- a/app/routes/_room.tsx +++ b/app/routes/_room.tsx @@ -7,6 +7,7 @@ import invariant from 'tiny-invariant' import { EnsureOnline } from '~/components/EnsureOnline' import { EnsurePermissions } from '~/components/EnsurePermissions' import { Icon } from '~/components/Icon/Icon' +import { Spinner } from '~/components/Spinner' import { useStateObservable, useSubscribedState } from '~/hooks/rxjsHooks' import { usePeerConnection } from '~/hooks/usePeerConnection' @@ -74,12 +75,28 @@ export default function RoomWithPermissions() { } > - + ) } +function RoomPreparation() { + const { mode } = useLoaderData() + const { roomName } = useParams() + invariant(roomName) + const userMedia = useUserMedia(mode) + const room = useRoom({ roomName, userMedia }) + + return room.roomState.meetingId ? ( + + ) : ( +
+ +
+ ) +} + function tryToGetDimensions(videoStreamTrack?: MediaStreamTrack) { if ( videoStreamTrack === undefined || @@ -98,14 +115,18 @@ function tryToGetDimensions(videoStreamTrack?: MediaStreamTrack) { return { height, width } } -function Room() { +interface RoomProps { + room: ReturnType + userMedia: ReturnType +} + +function Room({ room, userMedia }: RoomProps) { const [joined, setJoined] = useState(false) const [dataSaverMode, setDataSaverMode] = useState(false) const { roomName } = useParams() invariant(roomName) const { - mode, userDirectoryUrl, traceLink, feedbackEnabled, @@ -117,11 +138,14 @@ function Room() { maxApiHistory = 100, } = useLoaderData() - const userMedia = useUserMedia(mode) - const room = useRoom({ roomName, userMedia }) + const params = new URLSearchParams(apiExtraParams) + + invariant(room.roomState.meetingId, 'Meeting ID cannot be missing') + params.set('correlationId', room.roomState.meetingId) + const { peer, iceConnectionState } = usePeerConnection({ maxApiHistory, - apiExtraParams, + apiExtraParams: params.toString(), iceServers, apiBase: '/api/calls', }) diff --git a/app/utils/rxjs/RxjsPeer.client.ts b/app/utils/rxjs/RxjsPeer.client.ts index a80a4898..a508120a 100644 --- a/app/utils/rxjs/RxjsPeer.client.ts +++ b/app/utils/rxjs/RxjsPeer.client.ts @@ -182,7 +182,7 @@ export class RxjsPeer { console.debug('🆕 creating new session') const { apiBase } = this.config const response = await this.fetchWithRecordedHistory( - `${apiBase}/sessions/new?SESSION`, + `${apiBase}/sessions/new?CreatingSession&${this.config.apiExtraParams}`, { method: 'POST' } ) if (response.status > 400) { @@ -260,7 +260,7 @@ export class RxjsPeer { })), } const response = await this.fetchWithRecordedHistory( - `${this.config.apiBase}/sessions/${sessionId}/tracks/new?PUSHING`, + `${this.config.apiBase}/sessions/${sessionId}/tracks/new?PushingTrack&${this.config.apiExtraParams}`, { method: 'POST', body: JSON.stringify(requestBody), @@ -393,7 +393,7 @@ export class RxjsPeer { this.taskScheduler.schedule(async () => { const newTrackResponse: TracksResponse = await this.fetchWithRecordedHistory( - `${this.config.apiBase}/sessions/${sessionId}/tracks/new?PULLING`, + `${this.config.apiBase}/sessions/${sessionId}/tracks/new?PullingTrack&${this.config.apiExtraParams}`, { method: 'POST', body: JSON.stringify({ @@ -434,7 +434,7 @@ export class RxjsPeer { const renegotiationResponse = await this.fetchWithRecordedHistory( - `${this.config.apiBase}/sessions/${sessionId}/renegotiate`, + `${this.config.apiBase}/sessions/${sessionId}/renegotiate?${this.config.apiExtraParams}`, { method: 'PUT', body: JSON.stringify({ @@ -537,7 +537,7 @@ export class RxjsPeer { force: false, } const response = await this.fetchWithRecordedHistory( - `${apiBase}/sessions/${sessionId}/tracks/close`, + `${apiBase}/sessions/${sessionId}/tracks/close?${this.config.apiExtraParams}`, { method: 'PUT', body: JSON.stringify(requestBody),