disconnect after fadeout

Author: thomasyuill-livekit

app/ui/_room-provider.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { headers } from 'next/headers';
+import { SessionProvider } from '@/components/app/session-provider';
 import { getAppConfig } from '@/lib/utils';
-import { RoomProvider } from './_room-provider';
 
 export default async function ComponentsLayout({ children }: { children: React.ReactNode }) {
   const hdrs = await headers();
   const appConfig = await getAppConfig(hdrs);
 
   return (
-    <RoomProvider appConfig={appConfig}>
+    <SessionProvider appConfig={appConfig}>
       <div className="bg-muted/20 min-h-svh p-8">
         <div className="mx-auto max-w-3xl space-y-8">
           <header className="space-y-2">
@@ -25,6 +25,6 @@ export default async function ComponentsLayout({ children }: { children: React.R
           <main className="space-y-20">{children}</main>
         </div>
       </div>
-    </RoomProvider>
+    </SessionProvider>
   );
 }

app/ui/layout.tsx

@@ -1,66 +1,24 @@
 'use client';
 
-import { AnimatePresence, motion } from 'motion/react';
-import { RoomAudioRenderer, RoomContext, StartAudio } from '@livekit/components-react';
+import { RoomAudioRenderer, StartAudio } from '@livekit/components-react';
 import type { AppConfig } from '@/app-config';
-import { SessionView } from '@/components/app/session-view';
-import { WelcomeView } from '@/components/app/welcome-view';
+import { SessionProvider } from '@/components/app/session-provider';
+import { ViewController } from '@/components/app/view-controller';
 import { Toaster } from '@/components/livekit/toaster';
-import { useRoom } from '@/hooks/useRoom';
-
-const MotionWelcomeView = motion.create(WelcomeView);
-const MotionSessionView = motion.create(SessionView);
-
-const VIEW_MOTION_PROPS = {
-  variants: {
-    visible: {
-      opacity: 1,
-    },
-    hidden: {
-      opacity: 0,
-    },
-  },
-  initial: 'hidden',
-  animate: 'visible',
-  exit: 'hidden',
-  transition: {
-    duration: 0.5,
-    ease: 'linear',
-  },
-};
 
 interface AppProps {
   appConfig: AppConfig;
 }
 
 export function App({ appConfig }: AppProps) {
-  const { room, isSessionActive, startSession } = useRoom(appConfig);
-  const { startButtonText } = appConfig;
-
   return (
-    <RoomContext.Provider value={room}>
+    <SessionProvider appConfig={appConfig}>
       <main className="grid h-svh grid-cols-1 place-content-center">
-        <AnimatePresence mode="wait">
-          {/* Welcome screen */}
-          {!isSessionActive && (
-            <MotionWelcomeView
-              key="welcome"
-              {...VIEW_MOTION_PROPS}
-              startButtonText={startButtonText}
-              onStartCall={startSession}
-            />
-          )}
-
-          {/* Session view */}
-          {isSessionActive && (
-            <MotionSessionView key="session-view" {...VIEW_MOTION_PROPS} appConfig={appConfig} />
-          )}
-        </AnimatePresence>
+        <ViewController />
       </main>
-
       <StartAudio label="Start Audio" />
       <RoomAudioRenderer />
       <Toaster />
-    </RoomContext.Provider>
+    </SessionProvider>
   );
 }

components/app/app.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { createContext, useContext, useMemo } from 'react';
+import { RoomContext } from '@livekit/components-react';
+import { APP_CONFIG_DEFAULTS, type AppConfig } from '@/app-config';
+import { useRoom } from '@/hooks/useRoom';
+
+const SessionContext = createContext<{
+  appConfig: AppConfig;
+  isSessionActive: boolean;
+  startSession: () => void;
+  endSession: () => void;
+}>({
+  appConfig: APP_CONFIG_DEFAULTS,
+  isSessionActive: false,
+  startSession: () => {},
+  endSession: () => {},
+});
+
+interface SessionProviderProps {
+  appConfig: AppConfig;
+  children: React.ReactNode;
+}
+
+export const SessionProvider = ({ appConfig, children }: SessionProviderProps) => {
+  const { room, isSessionActive, startSession, endSession } = useRoom(appConfig);
+  const contextValue = useMemo(
+    () => ({ appConfig, isSessionActive, startSession, endSession }),
+    [appConfig, isSessionActive, startSession, endSession]
+  );
+
+  return (
+    <RoomContext.Provider value={room}>
+      <SessionContext.Provider value={contextValue}>{children}</SessionContext.Provider>
+    </RoomContext.Provider>
+  );
+};
+
+export function useSession() {
+  return useContext(SessionContext);
+}

components/app/session-provider.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useRef } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { useRoomContext } from '@livekit/components-react';
+import { useSession } from '@/components/app/session-provider';
+import { SessionView } from '@/components/app/session-view';
+import { WelcomeView } from '@/components/app/welcome-view';
+
+const MotionWelcomeView = motion.create(WelcomeView);
+const MotionSessionView = motion.create(SessionView);
+
+const VIEW_MOTION_PROPS = {
+  variants: {
+    visible: {
+      opacity: 1,
+    },
+    hidden: {
+      opacity: 0,
+    },
+  },
+  initial: 'hidden',
+  animate: 'visible',
+  exit: 'hidden',
+  transition: {
+    duration: 0.5,
+    ease: 'linear',
+  },
+};
+
+export function ViewController() {
+  const room = useRoomContext();
+  const isSessionActiveRef = useRef(false);
+  const { appConfig, isSessionActive, startSession } = useSession();
+
+  // animation handler holds a reference to stale isSessionActive value
+  isSessionActiveRef.current = isSessionActive;
+
+  // disconnect room after animation completes
+  const handleAnimationComplete = () => {
+    if (!isSessionActiveRef.current && room.state !== 'disconnected') {
+      room.disconnect();
+    }
+  };
+
+  return (
+    <AnimatePresence mode="wait">
+      {/* Welcome screen */}
+      {!isSessionActive && (
+        <MotionWelcomeView
+          key="welcome"
+          {...VIEW_MOTION_PROPS}
+          startButtonText={appConfig.startButtonText}
+          onStartCall={startSession}
+        />
+      )}
+      {/* Session view */}
+      {isSessionActive && (
+        <MotionSessionView
+          key="session-view"
+          {...VIEW_MOTION_PROPS}
+          appConfig={appConfig}
+          onAnimationComplete={handleAnimationComplete}
+        />
+      )}
+    </AnimatePresence>
+  );
+}

components/app/view-controller.tsx

@@ -2,8 +2,9 @@
 
 import { type HTMLAttributes, useCallback, useState } from 'react';
 import { Track } from 'livekit-client';
-import { useChat, useRemoteParticipants, useRoomContext } from '@livekit/components-react';
+import { useChat, useRemoteParticipants } from '@livekit/components-react';
 import { ChatTextIcon, PhoneDisconnectIcon } from '@phosphor-icons/react/dist/ssr';
+import { useSession } from '@/components/app/session-provider';
 import { TrackToggle } from '@/components/livekit/agent-control-bar/track-toggle';
 import { Button } from '@/components/livekit/button';
 import { Toggle } from '@/components/livekit/toggle';
@@ -41,11 +42,10 @@ export function AgentControlBar({
   ...props
 }: AgentControlBarProps & HTMLAttributes<HTMLDivElement>) {
   const { send } = useChat();
-  const room = useRoomContext();
   const participants = useRemoteParticipants();
   const [chatOpen, setChatOpen] = useState(false);
   const publishPermissions = usePublishPermissions();
-  const [isDisconnecting, setIsDisconnecting] = useState(false);
+  const { isSessionActive, endSession } = useSession();
   const [isSendingMessage, setIsSendingMessage] = useState(false);
 
   const {
@@ -78,15 +78,9 @@ export function AgentControlBar({
   );
 
   const handleDisconnect = useCallback(async () => {
-    setIsDisconnecting(true);
-
-    if (room) {
-      await room.disconnect();
-    }
-
-    setIsDisconnecting(false);
+    endSession();
     onDisconnect?.();
-  }, [room, onDisconnect]);
+  }, [endSession, onDisconnect]);
 
   const visibleControls = {
     leave: controls?.leave ?? true,
@@ -176,7 +170,7 @@ export function AgentControlBar({
           <Button
             variant="destructive"
             onClick={handleDisconnect}
-            disabled={isDisconnecting}
+            disabled={!isSessionActive}
             className="font-mono"
           >
             <PhoneDisconnectIcon weight="bold" />

components/livekit/agent-control-bar/agent-control-bar.tsx

@@ -1,15 +1,16 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Room, RoomEvent, TokenSource } from 'livekit-client';
 import { AppConfig } from '@/app-config';
 import { toastAlert } from '@/components/livekit/alert-toast';
 
 export function useRoom(appConfig: AppConfig) {
+  const aborted = useRef(false);
   const room = useMemo(() => new Room(), []);
-  const [isSessionActive, setIsSessionStarted] = useState(false);
+  const [isSessionActive, setIsSessionActive] = useState(false);
 
   useEffect(() => {
     function onDisconnected() {
-      setIsSessionStarted(false);
+      setIsSessionActive(false);
     }
 
     function onMediaDevicesError(error: Error) {
@@ -29,7 +30,14 @@ export function useRoom(appConfig: AppConfig) {
   }, [room]);
 
   useEffect(() => {
-    let aborted = false;
+    return () => {
+      aborted.current = true;
+      room.disconnect();
+    };
+  }, [room]);
+
+  const startSession = useCallback(() => {
+    setIsSessionActive(true);
 
     const tokenSource = TokenSource.custom(async () => {
       const url = new URL(
@@ -59,7 +67,7 @@ export function useRoom(appConfig: AppConfig) {
       }
     });
 
-    if (isSessionActive && room.state === 'disconnected') {
+    if (room.state === 'disconnected') {
       const { isPreConnectBufferEnabled } = appConfig;
       Promise.all([
         room.localParticipant.setMicrophoneEnabled(true, undefined, {
@@ -71,7 +79,7 @@ export function useRoom(appConfig: AppConfig) {
             room.connect(connectionDetails.serverUrl, connectionDetails.participantToken)
           ),
       ]).catch((error) => {
-        if (aborted) {
+        if (aborted.current) {
           // Once the effect has cleaned up after itself, drop any errors
           //
           // These errors are likely caused by this effect rerunning rapidly,
@@ -86,16 +94,11 @@ export function useRoom(appConfig: AppConfig) {
         });
       });
     }
+  }, [room, appConfig]);
 
-    return () => {
-      aborted = true;
-      room.disconnect();
-    };
-  }, [room, isSessionActive, appConfig]);
-
-  const startSession = () => {
-    setIsSessionStarted(true);
-  };
+  const endSession = useCallback(() => {
+    setIsSessionActive(false);
+  }, []);
 
-  return { room, isSessionActive, startSession };
+  return { room, isSessionActive, startSession, endSession };
 }