fix(voice): fix race conditions, broken icons, and null deref in call UI

packages/client/components/rtc/state.tsx

@@ -176,27 +176,32 @@ class Voice {
       this.#setSpotlightActive(false);
       this.#setVideoWatchDisabled({});
       this.#setScreenshareWatch({});
+    });
 
-      if (this.speakingPermission && !isMock)
-        room.localParticipant
-          .setMicrophoneEnabled(true)
-          .then((track) => this.#setMicrophone(typeof track !== "undefined"));
+    if (this.speakingPermission && !isMock)
+      room.localParticipant.setMicrophoneEnabled(true).then((track) => {
+        if (this.room() === room)
+          this.#setMicrophone(typeof track !== "undefined");
+      });
 
-      if (isMock) {
-        // Instant mock connection
-        setTimeout(() => {
+    if (isMock) {
+      // Instant mock connection
+      setTimeout(() => {
+        if (this.room() === room) {
           this.#setState("CONNECTED");
           if (this.speakingPermission) {
             void room.localParticipant.setMicrophoneEnabled(true).then(() => {
-              this.#setMicrophone(true);
+              if (this.room() === room) this.#setMicrophone(true);
             });
           }
-        }, 10);
-      }
-    });
+        }
+      }, 10);
+    }
 
     if (!isMock) {
       room.addListener("connected", () => this.#setState("CONNECTED"));
+      room.addListener("reconnecting", () => this.#setState("RECONNECTING"));
+      room.addListener("reconnected", () => this.#setState("CONNECTED"));
       room.addListener("disconnected", () => this.#setState("DISCONNECTED"));
 
       if (!auth) {

packages/client/components/ui/components/features/voice/VoiceStatefulUserIcons.tsx

@@ -47,7 +47,7 @@ export function VoiceStatefulUserIcons(props: {
         <Symbol size={16}>headset_off</Symbol>
       </Show>
       <Show when={props.camera}>
-        <Symbol size={16}>camera_video</Symbol>
+        <Symbol size={16}>videocam</Symbol>
       </Show>
       <Show when={props.screenshare}>
         <Symbol size={16}>screen_share</Symbol>

packages/client/components/ui/components/features/voice/callCard/VoiceCallCard.tsx

@@ -113,8 +113,8 @@ export function VoiceCallCardContext(props: { children: JSX.Element }) {
             batch(() => {
               setMoving(false);
 
-              const left = event.clientX < window.outerWidth / 2;
-              const top = event.clientY < window.outerHeight / 2;
+              const left = event.clientX < window.innerWidth / 2;
+              const top = event.clientY < window.innerHeight / 2;
 
               setState({
                 type: "floating",

packages/client/components/ui/components/features/voice/callCard/VoiceCallCardActions.tsx

@@ -110,7 +110,7 @@ export function VoiceCallCardActions(props: { size: "xs" | "sm" }) {
           onPress={() => voice.toggleCamera()}
         >
           <Show when={voice.video()} fallback={<Symbol>videocam_off</Symbol>}>
-            <Symbol>camera_video</Symbol>
+            <Symbol>videocam</Symbol>
           </Show>
         </IconButton>
         <Show when={voice.video()}>

packages/client/components/ui/components/features/voice/callCard/VoiceCallCardActiveRoom.tsx

@@ -517,13 +517,21 @@ function UserTile(props: { tileId: string; isMaximized: boolean }) {
       data-spotlighted={props.isMaximized}
       onDblClick={() => toggleSpotlight()}
       use:floating={{
-        userCard: {
-          user: user().user!,
-          member: user().member,
-        },
-        contextMenu: () => (
-          <UserContextMenu user={user().user!} member={user().member} inVoice />
-        ),
+        ...(user().user
+          ? {
+              userCard: {
+                user: user().user,
+                member: user().member,
+              },
+              contextMenu: () => (
+                <UserContextMenu
+                  user={user().user!}
+                  member={user().member}
+                  inVoice
+                />
+              ),
+            }
+          : {}),
       }}
     >
       <MediaLayer>