Re-introduce connection mode

Author: keepingitneil

src/components/PlaygroundConnect.tsx

@@ -2,10 +2,11 @@ import { useConfig } from "@/hooks/useConfig";
 import { CLOUD_ENABLED, CloudConnect } from "../cloud/CloudConnect";
 import { Button } from "./button/Button";
 import { useState } from "react";
+import { ConnectionMode } from "@/hooks/useConnection";
 
 type PlaygroundConnectProps = {
   accentColor: string;
-  onConnectClicked: () => void;
+  onConnectClicked: (mode: ConnectionMode) => void;
 };
 
 const ConnectTab = ({ active, onClick, children }: any) => {
@@ -57,7 +58,7 @@ const TokenConnect = ({
             newSettings.ws_url = url;
             newSettings.token = token;
             setUserSettings(newSettings);
-            onConnectClicked();
+            onConnectClicked("manual");
           }}
         >
           Connect

src/hooks/useConnection.tsx

@@ -1,17 +1,19 @@
 "use client"
 
-import { CLOUD_ENABLED } from "@/cloud/CloudConnect";
 import { useCloud } from "@/cloud/useCloud";
 import React, { createContext, useState } from "react";
 import { useCallback } from "react";
 import { useConfig } from "./useConfig";
 
+export type ConnectionMode = "cloud" | "manual" | "env"
+
 type TokenGeneratorData = {
   shouldConnect: boolean;
   wsUrl: string;
   token: string;
+  mode: ConnectionMode;
   disconnect: () => Promise<void>;
-  connect: () => Promise<void>;
+  connect: (mode: ConnectionMode) => Promise<void>;
 };
 
 const ConnectionContext = createContext<TokenGeneratorData | undefined>(undefined);
@@ -26,24 +28,28 @@ export const ConnectionProvider = ({
   const [connectionDetails, setConnectionDetails] = useState<{
     wsUrl: string;
     token: string;
+    mode: ConnectionMode;
     shouldConnect: boolean;
-  }>({ wsUrl: "", token: "", shouldConnect: false });
+  }>({ wsUrl: "", token: "", shouldConnect: false, mode: "manual" });
 
-  const connect = useCallback(async () => {
+  const connect = useCallback(async (mode: ConnectionMode) => {
     let token = "";
     let url = "";
-    if (CLOUD_ENABLED) {
+    if (mode === "cloud") {
       token = await generateToken();
       url = cloudWSUrl;
-    } else if (process.env.NEXT_PUBLIC_LIVEKIT_URL) {
+    } else if (mode === "env") {
+      if(!process.env.NEXT_PUBLIC_LIVEKIT_URL) {
+        throw new Error("NEXT_PUBLIC_LIVEKIT_URL is not set");
+      }
       url = process.env.NEXT_PUBLIC_LIVEKIT_URL;
       const {accessToken} = await fetch("/api/token").then((res) => res.json());
       token = accessToken;
     } else {
       token = config.settings.token;
       url = config.settings.ws_url;
     }
-    setConnectionDetails({ wsUrl: url, token, shouldConnect: true });
+    setConnectionDetails({ wsUrl: url, token, shouldConnect: true, mode });
   }, [
     cloudWSUrl,
     config.settings.token,
@@ -61,6 +67,7 @@ export const ConnectionProvider = ({
         wsUrl: connectionDetails.wsUrl,
         token: connectionDetails.token,
         shouldConnect: connectionDetails.shouldConnect,
+        mode: connectionDetails.mode,
         connect,
         disconnect,
       }}

src/pages/index.tsx

@@ -12,10 +12,8 @@ import { PlaygroundConnect } from "@/components/PlaygroundConnect";
 import Playground from "@/components/playground/Playground";
 import { PlaygroundToast, ToastType } from "@/components/toast/PlaygroundToast";
 import { ConfigProvider, useConfig } from "@/hooks/useConfig";
-import { ConnectionProvider, useConnection } from "@/hooks/useConnection";
+import { ConnectionMode, ConnectionProvider, useConnection } from "@/hooks/useConnection";
 import { useMemo } from "react";
-import { CLOUD_ENABLED } from "@/cloud/CloudConnect";
-import { useCloud } from "@/cloud/useCloud";
 
 const themeColors = [
   "cyan",
@@ -45,14 +43,14 @@ export function HomeInner() {
     message: string;
     type: ToastType;
   } | null>(null);
-  const { shouldConnect, wsUrl, token, connect, disconnect } =
+  const { shouldConnect, wsUrl, token, mode, connect, disconnect } =
     useConnection();
 
   const {config} = useConfig();
 
   const handleConnect = useCallback(
-    async (c: boolean) => {
-      c ? connect() : disconnect();
+    async (c: boolean, mode: ConnectionMode) => {
+      c ? connect(mode) : disconnect();
     },
     [connect, disconnect]
   );
@@ -119,7 +117,8 @@ export function HomeInner() {
             <Playground
               themeColors={themeColors}
               onConnect={(c) => {
-                handleConnect(c);
+                const m = process.env.NEXT_PUBLIC_LIVEKIT_URL ? "env" : mode;
+                handleConnect(c, m);
               }}
             />
             <RoomAudioRenderer />
@@ -128,8 +127,8 @@ export function HomeInner() {
         ) : (
           <PlaygroundConnect
             accentColor={themeColors[0]}
-            onConnectClicked={() => {
-              handleConnect(true);
+            onConnectClicked={(mode) => {
+              handleConnect(true, mode);
             }}
           />
         )}