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),