Merge pull request #2 from livekit-examples:small-fixes

Small changes and clean ups

frontend/app/api/connection-details/route.ts

@@ -0,0 +1,68 @@
+import {
+  AccessToken,
+  AccessTokenOptions,
+  VideoGrant,
+} from "livekit-server-sdk";
+import { NextResponse } from "next/server";
+
+const API_KEY = process.env.LIVEKIT_API_KEY;
+const API_SECRET = process.env.LIVEKIT_API_SECRET;
+const LIVEKIT_URL = process.env.LIVEKIT_URL;
+
+export type ConnectionDetails = {
+  serverUrl: string;
+  roomName: string;
+  participantName: string;
+  participantToken: string;
+};
+
+export async function GET() {
+  try {
+    // Generate participant token
+    const participantIdentity = `voice_assistant_user_${Math.round(
+      Math.random() * 10_000
+    )}`;
+    const participantToken = await createParticipantToken(
+      {
+        identity: participantIdentity,
+      },
+      "roomName"
+    );
+
+    if (LIVEKIT_URL === undefined) {
+      throw new Error("LIVEKIT_URL is not defined");
+    }
+
+    // Return connection details
+    const data: ConnectionDetails = {
+      serverUrl: LIVEKIT_URL,
+      roomName: "voice_assistant_room",
+      participantToken: participantToken,
+      participantName: participantIdentity,
+    };
+    return NextResponse.json(data);
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error(error);
+
+      return new NextResponse(error.message, { status: 500 });
+    }
+  }
+}
+
+function createParticipantToken(
+  userInfo: AccessTokenOptions,
+  roomName: string
+) {
+  const at = new AccessToken(API_KEY, API_SECRET, userInfo);
+  at.ttl = "5m";
+  const grant: VideoGrant = {
+    room: roomName,
+    roomJoin: true,
+    canPublish: true,
+    canPublishData: true,
+    canSubscribe: true,
+  };
+  at.addGrant(grant);
+  return at.toJwt();
+}

frontend/app/globals.css

@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

frontend/app/layout.tsx

@@ -1,11 +1,5 @@
-import type { Metadata } from "next";
 import "./globals.css";
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
 export default function RootLayout({
   children,
 }: Readonly<{

frontend/app/page.tsx

@@ -11,7 +11,7 @@ import {
 } from "@livekit/components-react";
 import { useCallback, useState } from "react";
 import { MediaDeviceFailure } from "livekit-client";
-import type { ConnectionDetails } from "./connection-details/route";
+import type { ConnectionDetails } from "./api/connection-details/route";
 
 export default function Page() {
   const [connectionDetails, updateConnectionDetails] = useState<
@@ -20,7 +20,8 @@ export default function Page() {
 
   const onConnectButtonClicked = useCallback(async () => {
     const url = new URL(
-      process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? "/connection-details",
+      process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ??
+        "/api/connection-details",
       window.location.origin
     );
     const response = await fetch(url.toString());