forgot to commit

Author: davidliu

hooks/useConnection.tsx

@@ -0,0 +1,89 @@
+import { TokenSource, TokenSourceBase, TokenSourceResponseObject } from 'livekit-client';
+import { createContext, useContext, useMemo, useState } from 'react';
+import { SessionProvider, useSession } from '@livekit/components-react';
+
+// TODO: Add your Sandbox ID here
+const sandboxID = '';
+
+// The name of the agent you wish to be dispatched.
+const agentName = undefined
+
+// NOTE: If you prefer not to use LiveKit Sandboxes for testing, you can generate your
+// tokens manually by visiting https://cloud.livekit.io/projects/p_/settings/keys
+// and using one of your API Keys to generate a token with custom TTL and permissions.
+
+// For use without a token server.
+const hardcodedUrl = '';
+const hardcodedToken = '';
+
+interface ConnectionContextType {
+  isConnectionActive: boolean;
+  connect: () => void;
+  startDisconnectTransition: () => void;
+  onDisconnectTransitionComplete: () => void;
+}
+
+const ConnectionContext = createContext<ConnectionContextType>({
+  isConnectionActive: false,
+  connect: () => {},
+  startDisconnectTransition: () => {},
+  onDisconnectTransitionComplete: () => {},
+});
+
+export function useConnection() {
+  const ctx = useContext(ConnectionContext);
+  if (!ctx) {
+    throw new Error('useConnection must be used within a ConnectionProvider');
+  }
+  return ctx;
+}
+
+interface ConnectionProviderProps {
+  children: React.ReactNode;
+}
+
+export function ConnectionProvider({ children }: ConnectionProviderProps) {
+  const [isConnectionActive, setIsConnectionActive] = useState(false);
+
+  const tokenSource = useMemo(() => {
+    if (sandboxID) {
+      return TokenSource.sandboxTokenServer(sandboxID)
+    } else {
+      return TokenSource.literal(
+        {
+          serverUrl: hardcodedUrl,
+          participantToken: hardcodedToken,
+        } satisfies TokenSourceResponseObject
+      )
+    }
+  }, [sandboxID, hardcodedUrl, hardcodedToken])
+
+  const session = useSession(
+    tokenSource,
+    agentName ? { agentName } : undefined
+  );
+
+  const { start: startSession, end: endSession } = session;
+
+  const value = useMemo(() => {
+    return {
+      isConnectionActive,
+      connect: () => {
+        setIsConnectionActive(true);
+        startSession();
+      },
+      startDisconnectTransition: () => {
+        setIsConnectionActive(false);
+      },
+      onDisconnectTransitionComplete: () => {
+        endSession();
+      },
+    };
+  }, [startSession, endSession, isConnectionActive]);
+
+  return (
+    <SessionProvider session={session}>
+      <ConnectionContext.Provider value={value}>{children}</ConnectionContext.Provider>
+    </SessionProvider>
+  );
+}