Autofocus join call button when ready

src/room/LobbyView.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import styles from "./LobbyView.module.css";
 import { Button, CopyButton, MicButton, VideoButton } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -43,6 +43,14 @@ export function LobbyView({
 
   useLocationNavigation(state === GroupCallState.InitializingLocalCallFeed);
 
+  const joinCallButtonRef = useRef();
+
+  useEffect(() => {
+    if (state === GroupCallState.LocalCallFeedInitialized) {
+      joinCallButtonRef.current.focus();
+    }
+  }, [state]);
+
   return (
     <div className={styles.room}>
       <Header>
@@ -103,6 +111,7 @@ export function LobbyView({
             )}
           </div>
           <Button
+            ref={joinCallButtonRef}
             className={styles.copyButton}
             size="lg"
             disabled={state !== GroupCallState.LocalCallFeedInitialized}