Cleanup some complexity that is not needed (#50)

src/cloud/useCloud.tsx

@@ -1,3 +1,12 @@
 export function CloudProvider({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }
+
+export function useCloud() {
+  const generateToken: () => Promise<string> = async () => {
+    throw new Error("Not implemented");
+  };
+  const wsUrl = "";
+
+  return { generateToken, wsUrl };
+}

src/hooks/useConnection.tsx

@@ -0,0 +1,79 @@
+"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";
+
+type TokenGeneratorData = {
+  shouldConnect: boolean;
+  wsUrl: string;
+  token: string;
+  disconnect: () => Promise<void>;
+  connect: () => Promise<void>;
+};
+
+const ConnectionContext = createContext<TokenGeneratorData | undefined>(undefined);
+
+export const ConnectionProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const { generateToken, wsUrl: cloudWSUrl } = useCloud();
+  const { config } = useConfig();
+  const [connectionDetails, setConnectionDetails] = useState<{
+    wsUrl: string;
+    token: string;
+    shouldConnect: boolean;
+  }>({ wsUrl: "", token: "", shouldConnect: false });
+
+  const connect = useCallback(async () => {
+    let token = "";
+    let url = "";
+    if (CLOUD_ENABLED) {
+      token = await generateToken();
+      url = cloudWSUrl;
+    } else if (process.env.NEXT_PUBLIC_LIVEKIT_URL) {
+      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 });
+  }, [
+    cloudWSUrl,
+    config.settings.token,
+    config.settings.ws_url,
+    generateToken,
+  ]);
+
+  const disconnect = useCallback(async () => {
+    setConnectionDetails((prev) => ({ ...prev, shouldConnect: false }));
+  }, []);
+
+  return (
+    <ConnectionContext.Provider
+      value={{
+        wsUrl: connectionDetails.wsUrl,
+        token: connectionDetails.token,
+        shouldConnect: connectionDetails.shouldConnect,
+        connect,
+        disconnect,
+      }}
+    >
+      {children}
+    </ConnectionContext.Provider>
+  );
+};
+
+export const useConnection = () => {
+  const context = React.useContext(ConnectionContext);
+  if (context === undefined) {
+    throw new Error("useConnection must be used within a ConnectionProvider");
+  }
+  return context;
+}

src/hooks/useTokenGenerator.tsx

@@ -1,90 +0,0 @@
-"use client"
-
-import React, { createContext, useState } from "react";
-import { useConfig } from "./useConfig";
-import { useCallback } from "react";
-
-// Note: cloud mode is only used in our private, hosted version
-export type Mode = "cloud" | "env" | "manual";
-
-type TokenGeneratorData = {
-  shouldConnect: boolean;
-  wsUrl: string;
-  token: string;
-  disconnect: () => Promise<void>;
-  connect: (mode: Mode) => Promise<void>;
-};
-
-const TokenGeneratorContext = createContext<TokenGeneratorData | undefined>(undefined);
-
-export const TokenGeneratorProvider = ({
-  children,
-  generateConnectionDetails,
-}: {
-  children: React.ReactNode;
-  // generateConnectionDetails is only required in cloud mode
-  generateConnectionDetails?: () => Promise<{ wsUrl: string; token: string }>;
-}) => {
-  const { config } = useConfig();
-  const [token, setToken] = useState("");
-  const [wsUrl, setWsUrl] = useState("");
-  const [shouldConnect, setShouldConnect] = useState(false);
-  const connect = useCallback(
-    async (mode: Mode) => {
-      console.log("connecting", mode);
-      if (mode === "cloud") {
-        if (!generateConnectionDetails) {
-          throw new Error(
-            "generateConnectionDetails must be provided in cloud mode"
-          );
-        }
-        const { wsUrl, token } = await generateConnectionDetails();
-        setWsUrl(wsUrl);
-        setToken(token);
-      } else if (mode === "env") {
-        const url = process.env.NEXT_PUBLIC_LIVEKIT_URL;
-        if (!url) {
-          throw new Error("NEXT_PUBLIC_LIVEKIT_URL must be set in env mode");
-        }
-        const res = await fetch("/api/token");
-        const { accessToken } = await res.json();
-        setWsUrl(url);
-        setToken(accessToken);
-      } else if (mode === "manual") {
-        setWsUrl(config.settings.ws_url);
-        setToken(config.settings.token);
-      }
-      setShouldConnect(true);
-    },
-    [
-      config.settings.token,
-      config.settings.ws_url,
-      generateConnectionDetails,
-    ]
-  );
-  const disconnect = useCallback(async () => {
-    setShouldConnect(false);
-  }, []);
-
-  return (
-    <TokenGeneratorContext.Provider
-      value={{
-        wsUrl,
-        token,
-        shouldConnect,
-        connect,
-        disconnect,
-      }}
-    >
-      {children}
-    </TokenGeneratorContext.Provider>
-  );
-};
-
-export const useTokenGenerator = () => {
-  const context = React.useContext(TokenGeneratorContext);
-  if (context === undefined) {
-    throw new Error("useTokenGenerator must be used within a TokenGeneratorProvider");
-  }
-  return context;
-}

src/pages/index.tsx

@@ -9,12 +9,13 @@ import Head from "next/head";
 import { useCallback, useState } from "react";
 
 import { PlaygroundConnect } from "@/components/PlaygroundConnect";
-import Playground, { PlaygroundMeta } from "@/components/playground/Playground";
+import Playground from "@/components/playground/Playground";
 import { PlaygroundToast, ToastType } from "@/components/toast/PlaygroundToast";
 import { ConfigProvider, useConfig } from "@/hooks/useConfig";
-import { Mode, TokenGeneratorProvider, useTokenGenerator } from "@/hooks/useTokenGenerator";
+import { ConnectionProvider, useConnection } from "@/hooks/useConnection";
-import { useRef } from "react";
 import { useMemo } from "react";
+import { CLOUD_ENABLED } from "@/cloud/CloudConnect";
+import { useCloud } from "@/cloud/useCloud";
 
 const themeColors = [
   "cyan",
@@ -32,9 +33,9 @@ const inter = Inter({ subsets: ["latin"] });
 export default function Home() {
   return (
     <ConfigProvider>
-      <TokenGeneratorProvider>
+      <ConnectionProvider>
         <HomeInner />
-      </TokenGeneratorProvider>
+      </ConnectionProvider>
     </ConfigProvider>
   );
 }
@@ -45,13 +46,13 @@ export function HomeInner() {
     type: ToastType;
   } | null>(null);
   const { shouldConnect, wsUrl, token, connect, disconnect } =
-    useTokenGenerator();
+    useConnection();
   
   const {config} = useConfig();
 
   const handleConnect = useCallback(
-    (c: boolean, mode: Mode) => {
+    async (c: boolean) => {
-      c ? connect(mode) : disconnect();
+      c ? connect() : disconnect();
     },
     [connect, disconnect]
   );
@@ -118,10 +119,7 @@ export function HomeInner() {
             <Playground
               themeColors={themeColors}
               onConnect={(c) => {
-                const mode = process.env.NEXT_PUBLIC_LIVEKIT_URL
+                handleConnect(c);
-                  ? "env"
-                  : "manual";
-                handleConnect(c, mode);
               }}
             />
             <RoomAudioRenderer />
@@ -131,8 +129,7 @@ export function HomeInner() {
           <PlaygroundConnect
             accentColor={themeColors[0]}
             onConnectClicked={() => {
-              const mode = process.env.NEXT_PUBLIC_LIVEKIT_URL ? "env" : "manual";
+              handleConnect(true);
-              handleConnect(true, mode);
             }}
           />
         )}