Merge branch 'main' into test-pages-deployment

app/api/connection-details/route.ts

@@ -12,6 +12,11 @@ export async function GET(request: NextRequest) {
     const roomName = request.nextUrl.searchParams.get('roomName');
     const participantName = request.nextUrl.searchParams.get('participantName');
     const metadata = request.nextUrl.searchParams.get('metadata') ?? '';
+    const region = request.nextUrl.searchParams.get('region');
+    const livekitServerUrl = region ? getLiveKitURL(region) : LIVEKIT_URL;
+    if (livekitServerUrl === undefined) {
+      throw new Error('Invalid region');
+    }
 
     if (typeof roomName !== 'string') {
       return new NextResponse('Missing required query parameter: roomName', { status: 400 });
@@ -32,7 +37,7 @@ export async function GET(request: NextRequest) {
 
     // Return connection details
     const data: ConnectionDetails = {
-      serverUrl: LIVEKIT_URL!,
+      serverUrl: livekitServerUrl,
       roomName: roomName,
       participantToken: participantToken,
       participantName: participantName,
@@ -68,4 +73,19 @@ function pseudoRandomParticipantId(participantName: string): string {
   return `${participantName}_${randomPart}`;
 }
 
+/**
+ * Get the LiveKit server URL for the given region.
+ */
+function getLiveKitURL(region: string | null): string {
+  let targetKey = 'LIVEKIT_URL';
+  if (region) {
+    targetKey = `LIVEKIT_URL_${region}`.toUpperCase();
+  }
+  const url = process.env[targetKey];
+  if (!url) {
+    throw new Error(`${targetKey} is not defined`);
+  }
+  return url;
+}
+
 export const runtime = 'edge'; // Can be removed if not deploying to Edge Runtime. See https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

app/api/url/route.ts

@@ -1,16 +0,0 @@
-import { getLiveKitURL } from '@/lib/server-utils';
-import { NextRequest, NextResponse } from 'next/server';
-
-export async function GET(req: NextRequest) {
-  try {
-    const region = req.nextUrl.searchParams.get('region');
-    const livekitUrl = getLiveKitURL(region);
-    return NextResponse.json({ url: livekitUrl });
-  } catch (error) {
-    if (error instanceof Error) {
-      return new NextResponse(error.message, { status: 500 });
-    }
-  }
-}
-
-export const runtime = 'edge'; // Can be removed if not deploying to Edge Runtime. See https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

app/rooms/[roomName]/PageClientImpl.tsx

@@ -50,9 +50,14 @@ export function PageClientImpl(props: {
 
   const handlePreJoinSubmit = React.useCallback(async (values: LocalUserChoices) => {
     setPreJoinChoices(values);
-    const connectionDetailsResp = await fetch(
-      `${CONN_DETAILS_ENDPOINT}?roomName=${props.roomName}&participantName=${values.username}`,
-    );
+    const url = new URL('/', window.location.origin);
+    url.pathname = CONN_DETAILS_ENDPOINT;
+    url.searchParams.append('roomName', props.roomName);
+    url.searchParams.append('participantName', values.username);
+    if (props.region) {
+      url.searchParams.append('region', props.region);
+    }
+    const connectionDetailsResp = await fetch(url.toString());
     const connectionDetailsData = await connectionDetailsResp.json();
     setConnectionDetails(connectionDetailsData);
   }, []);

lib/client-utils.ts

@@ -1,25 +1,3 @@
-import { useEffect, useState } from 'react';
-
-export function useServerUrl(region?: string) {
-  const [serverUrl, setServerUrl] = useState<string | undefined>();
-  useEffect(() => {
-    let endpoint = `/api/url`;
-    if (region) {
-      endpoint += `?region=${region}`;
-    }
-    fetch(endpoint).then(async (res) => {
-      if (res.ok) {
-        const body = await res.json();
-        console.log(body);
-        setServerUrl(body.url);
-      } else {
-        throw Error('Error fetching server url, check server logs');
-      }
-    });
-  });
-  return serverUrl;
-}
-
 export function encodePassphrase(passphrase: string) {
   return encodeURIComponent(passphrase);
 }
@@ -41,8 +19,3 @@ export function randomString(length: number): string {
   }
   return result;
 }
-
-export const sleep = (time: number) =>
-  new Promise((resolve) => {
-    setTimeout(resolve, time);
-  });

lib/server-utils.ts

@@ -1,11 +0,0 @@
-export function getLiveKitURL(region: string | null): string {
-  let targetKey = 'LIVEKIT_URL';
-  if (region) {
-    targetKey = `LIVEKIT_URL_${region}`.toUpperCase();
-  }
-  const url = process.env[targetKey];
-  if (!url) {
-    throw new Error(`${targetKey} is not defined`);
-  }
-  return url;
-}