Enable debug client logs (#189)

* enable debug client logs

* use debug mode component

* remove unused imports

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 }) => {

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>

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>
       )}
     </>