src/app/components/VoiceRoomItem.svelte

@@ -5,6 +5,7 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import RoomImage from "@app/components/RoomImage.svelte"
   import RoomName from "@app/components/RoomName.svelte"
+  import {handleJoinError} from "@app/components/VoiceWidget.svelte"
   import {makeRoomPath} from "@app/util/routes"
   import {
     deriveVoiceParticipants,
@@ -41,7 +42,7 @@
       return
     }
 
-    await joinVoiceRoom(url, h)
+    await joinVoiceRoom(url, h).catch(handleJoinError)
   }
 
   $effect(() => {

src/app/components/VoiceWidget.svelte

@@ -1,3 +1,20 @@
+<script module lang="ts">
+  import {AbortError, TimeoutError} from "$lib/util"
+  import {VoiceJoinMembershipError} from "@app/voice"
+  import {pushToast} from "@app/util/toast"
+
+  export function handleJoinError(e: unknown) {
+    if (e instanceof AbortError) return
+    console.error("Failed to join voice room", e)
+    let message = "Failed to join voice room"
+    if (e instanceof VoiceJoinMembershipError) message = e.message
+    else if (e instanceof TimeoutError)
+      message = "Connection timed out. Please check your network and try again."
+    else if (e instanceof Error && e.message === "No signer available") message = e.message
+    pushToast({theme: "error", message})
+  }
+</script>
+
 <script lang="ts">
   import {fly} from "svelte/transition"
   import {displayRelayUrl} from "@welshman/util"
@@ -23,6 +40,10 @@
     $currentVoiceRoom ? displayRoom($currentVoiceRoom.url, $currentVoiceRoom.h) : "",
   )
   const spaceName = $derived($currentVoiceRoom ? displayRelayUrl($currentVoiceRoom.url) : "")
+
+  const handleRejoin = () => {
+    void rejoinVoiceRoom().catch(handleJoinError)
+  }
 </script>
 
 {#if $currentVoiceRoom}
@@ -70,7 +91,7 @@
         <Button
           data-tip="Join Voice"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-success"
-          onclick={rejoinVoiceRoom}>
+          onclick={handleRejoin}>
           <Icon icon={PhoneCallingRounded} size={4} />
         </Button>
       {/if}

src/app/voice.ts

@@ -9,7 +9,7 @@ import type {TrustedEvent} from "@welshman/util"
 import {makeHttpAuth, makeHttpAuthHeader, getTags} from "@welshman/util"
 import {signer} from "@welshman/app"
 import {getLivekitEndpoint} from "$lib/livekit"
-import {AbortError, TimeoutError, whenAborted, whenTimeout} from "$lib/util"
+import {AbortError, whenAborted, whenTimeout} from "$lib/util"
 import {deriveLatestEventForUrl} from "@app/core/state"
 import {pushToast} from "@app/util/toast"
 
@@ -24,17 +24,6 @@ export class VoiceJoinMembershipError extends Error {
   }
 }
 
-const handleJoinError = (e: unknown) => {
-  if (e instanceof AbortError) return
-  console.error("Failed to join voice room", e)
-  let message = "Failed to join voice room"
-  if (e instanceof VoiceJoinMembershipError) message = e.message
-  else if (e instanceof TimeoutError)
-    message = "Connection timed out. Please check your network and try again."
-  else if (e instanceof Error && e.message === "No signer available") message = e.message
-  pushToast({theme: "error", message})
-}
-
 export type VoiceSession = {
   url: string
   h: string
@@ -262,7 +251,7 @@ export const joinVoiceRoom = async (url: string, h: string): Promise<void> => {
     playJoinSound()
   } catch (e) {
     if (isActive()) voiceState.set("disconnected")
-    handleJoinError(e)
+    throw e
   } finally {
     if (isActive()) joinAbortController = undefined
   }
@@ -282,10 +271,10 @@ export const leaveVoiceRoom = async () => {
   participantPubkeyMap.set(new Map())
 }
 
-export const rejoinVoiceRoom = () => {
+export const rejoinVoiceRoom = async (): Promise<void> => {
   const target = get(currentVoiceRoom)
   if (!target) return
-  void joinVoiceRoom(target.url, target.h)
+  return joinVoiceRoom(target.url, target.h)
 }
 
 export const toggleMute = async () => {