Introduce mock cloud components for easier maintainability (#49)

src/cloud/CloudConnect.tsx

@@ -0,0 +1,5 @@
+export const CloudConnect = ({ accentColor }: { accentColor: string }) => {
+  return null;
+};
+
+export const CLOUD_ENABLED = false;

src/cloud/README.md

@@ -0,0 +1 @@
+Files in this `cloud/` directory can be ignored. They are mocks which we override in our private, hosted version of the agents-playground that supports LiveKit Cloud authentication.

src/cloud/useCloud.tsx

@@ -0,0 +1,3 @@
+export function CloudProvider({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

src/components/PlaygroundConnect.tsx

@@ -1,4 +1,5 @@
 import { useConfig } from "@/hooks/useConfig";
+import { CLOUD_ENABLED, CloudConnect } from "../cloud/CloudConnect";
 import { Button } from "./button/Button";
 import { useState } from "react";
 
@@ -7,25 +8,34 @@ type PlaygroundConnectProps = {
   onConnectClicked: () => void;
 };
 
-export const PlaygroundConnect = ({
+const ConnectTab = ({ active, onClick, children }: any) => {
+  let className = "px-2 py-1 text-sm";
+
+  if (active) {
+    className += " border-b border-cyan-500 text-cyan-500";
+  } else {
+    className += " text-gray-500 border-b border-transparent";
+  }
+
+  return (
+    <button className={className} onClick={onClick}>
+      {children}
+    </button>
+  );
+};
+
+const TokenConnect = ({
   accentColor,
   onConnectClicked,
 }: PlaygroundConnectProps) => {
   const { setUserSettings, config } = useConfig();
-  const [url, setUrl] = useState(config.settings.ws_url)
-  const [token, setToken] = useState(config.settings.token)
+  const [url, setUrl] = useState(config.settings.ws_url);
+  const [token, setToken] = useState(config.settings.token);
 
   return (
     <div className="flex left-0 top-0 w-full h-full bg-black/80 items-center justify-center text-center">
       <div className="flex flex-col gap-4 p-8 bg-gray-950 w-full max-w-[400px] rounded-lg text-white border border-gray-900">
         <div className="flex flex-col gap-2">
-          <h1 className="text-xl">Connect to playground</h1>
-          <p className="text-sm text-gray-500">
-            Connect LiveKit Agent Playground with a custom server using LiveKit
-            Cloud or LiveKit Server.
-          </p>
-        </div>
-        <div className="flex flex-col gap-2 my-4">
           <input
             value={url}
             onChange={(e) => setUrl(e.target.value)}
@@ -43,7 +53,7 @@ export const PlaygroundConnect = ({
           accentColor={accentColor}
           className="w-full"
           onClick={() => {
-            const newSettings = {...config.settings};
+            const newSettings = { ...config.settings };
             newSettings.ws_url = url;
             newSettings.token = token;
             setUserSettings(newSettings);
@@ -63,3 +73,60 @@ export const PlaygroundConnect = ({
     </div>
   );
 };
+
+export const PlaygroundConnect = ({
+  accentColor,
+  onConnectClicked,
+}: PlaygroundConnectProps) => {
+  const [showCloud, setShowCloud] = useState(true);
+  const copy = CLOUD_ENABLED
+    ? "Connect to playground with LiveKit Cloud or manually with a URL and token"
+    : "Connect to playground with a URL and token";
+  return (
+    <div className="flex left-0 top-0 w-full h-full bg-black/80 items-center justify-center text-center gap-2">
+      <div className="min-h-[540px]">
+        <div className="flex flex-col bg-gray-950 w-full max-w-[480px] rounded-lg text-white border border-gray-900">
+          <div className="flex flex-col gap-2">
+            <div className="px-10 space-y-2">
+              <h1 className="text-2xl">Connect to playground</h1>
+              <p className="text-sm text-gray-500">
+                {copy}
+              </p>
+            </div>
+            {CLOUD_ENABLED && (
+              <div className="flex justify-center pt-4 gap-4 border-b border-gray-900">
+                <ConnectTab
+                  active={showCloud}
+                  onClick={() => {
+                    setShowCloud(true);
+                  }}
+                >
+                  LiveKit Cloud
+                </ConnectTab>
+                <ConnectTab
+                  active={!showCloud}
+                  onClick={() => {
+                    setShowCloud(false);
+                  }}
+                >
+                  Manual
+                </ConnectTab>
+              </div>
+            )}
+          </div>
+          <div className="flex flex-col bg-gray-900/30 flex-grow">
+            {showCloud && CLOUD_ENABLED ? (
+              <CloudConnect accentColor={accentColor} />
+            ) : (
+              <TokenConnect
+                accentColor={accentColor}
+                onConnectClicked={onConnectClicked}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+

src/pages/_app.tsx

@@ -1,6 +1,10 @@
+import { CloudProvider } from "@/cloud/useCloud";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
+  return (
+    <CloudProvider>
+      <Component {...pageProps} />
+    </CloudProvider>
+  );}