From 423c0d1b84d550292ce1c3622552b858610123a3 Mon Sep 17 00:00:00 2001
From: lukasIO <mail@lukasseiler.de>
Date: Sat, 20 Jan 2024 11:40:24 +0100
Subject: [PATCH] Enable debug client logs (#189)

* enable debug client logs

* use debug mode component

* remove unused imports
---
 lib/Debug.tsx          |  4 ++--
 pages/custom/index.tsx |  3 +--
 pages/rooms/[name].tsx | 18 ++++++++++--------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/lib/Debug.tsx b/lib/Debug.tsx
index e07ce70..5db2152 100644
--- a/lib/Debug.tsx
+++ b/lib/Debug.tsx
@@ -5,10 +5,10 @@ import { tinykeys } from 'tinykeys';
 import styles from '../styles/Debug.module.css';
 
 export const useDebugMode = ({ logLevel }: { logLevel?: LogLevel }) => {
-  setLogLevel(logLevel ?? 'debug');
   const room = useRoomContext();
 
   React.useEffect(() => {
+    setLogLevel(logLevel ?? 'debug');
     // @ts-expect-error
     window.__lk_room = room;
 
@@ -16,7 +16,7 @@ export const useDebugMode = ({ logLevel }: { logLevel?: LogLevel }) => {
       // @ts-expect-error
       window.__lk_room = undefined;
     };
-  }, []);
+  }, [room, logLevel]);
 };
 
 export const DebugMode = ({ logLevel }: { logLevel?: LogLevel }) => {
diff --git a/pages/custom/index.tsx b/pages/custom/index.tsx
index 3383baf..b83bbc8 100644
--- a/pages/custom/index.tsx
+++ b/pages/custom/index.tsx
@@ -49,7 +49,6 @@ export default function CustomRoomConnection() {
     keyProvider.setKey(e2eePassphrase);
     room.setE2EEEnabled(true);
   }
-
   const connectOptions = useMemo((): RoomConnectOptions => {
     return {
       autoSubscribe: true,
@@ -75,7 +74,7 @@ export default function CustomRoomConnection() {
           video={true}
         >
           <VideoConference chatMessageFormatter={formatChatMessageLinks} />
-          <DebugMode logLevel={LogLevel.info} />
+          <DebugMode logLevel={LogLevel.debug} />
         </LiveKitRoom>
       )}
     </main>
diff --git a/pages/rooms/[name].tsx b/pages/rooms/[name].tsx
index ed40bc3..aa76967 100644
--- a/pages/rooms/[name].tsx
+++ b/pages/rooms/[name].tsx
@@ -86,12 +86,15 @@ type ActiveRoomProps = {
   onLeave?: () => void;
 };
 const ActiveRoom = ({ roomName, userChoices, onLeave }: ActiveRoomProps) => {
-  const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, {
-    userInfo: {
-      identity: userChoices.username,
-      name: userChoices.username,
-    },
-  });
+  const tokenOptions = React.useMemo(() => {
+    return {
+      userInfo: {
+        identity: userChoices.username,
+        name: userChoices.username,
+      },
+    };
+  }, [userChoices.username]);
+  const token = useToken(process.env.NEXT_PUBLIC_LK_TOKEN_ENDPOINT, roomName, tokenOptions);
 
   const router = useRouter();
   const { region, hq, codec } = router.query;
@@ -108,7 +111,6 @@ const ActiveRoom = ({ roomName, userChoices, onLeave }: ActiveRoomProps) => {
 
   const e2eeEnabled = !!(e2eePassphrase && worker);
   const keyProvider = new ExternalE2EEKeyProvider();
-
   const roomOptions = React.useMemo((): RoomOptions => {
     let videoCodec: VideoCodec | undefined = (
       Array.isArray(codec) ? codec[0] : codec ?? 'vp9'
@@ -176,7 +178,7 @@ const ActiveRoom = ({ roomName, userChoices, onLeave }: ActiveRoomProps) => {
           onDisconnected={onLeave}
         >
           <VideoConference chatMessageFormatter={formatChatMessageLinks} />
-          <DebugMode logLevel={LogLevel.info} />
+          <DebugMode logLevel={LogLevel.debug} />
         </LiveKitRoom>
       )}
     </>