Voice Room Membership Error (#106)

Before this we were showing "Failed to join voice room" if the relay rejected our request for a livekit token because we aren't a member of the room. Now it shows the error "Failed to join voice room: you must be a member."

Co-authored-by: mplorentz <mplorentz@noreply.gitea.coracle.social>
Reviewed-on: coracle/flotilla#106
Co-authored-by: Matt Lorentz <mplorentz@noreply.coracle.social>
Co-committed-by: Matt Lorentz <mplorentz@noreply.coracle.social>

src/app/components/VoiceRoomItem.svelte

@@ -5,7 +5,7 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import RoomImage from "@app/components/RoomImage.svelte"
   import RoomName from "@app/components/RoomName.svelte"
-  import {pushToast} from "@app/util/toast"
+  import {handleJoinError} from "@app/components/VoiceWidget.svelte"
   import {makeRoomPath} from "@app/util/routes"
   import {
     deriveVoiceParticipants,
@@ -42,12 +42,7 @@
       return
     }
 
-    try {
-      await joinVoiceRoom(url, h)
-    } catch (e) {
-      console.error("Failed to join voice room", e)
-      pushToast({theme: "error", message: "Failed to join voice room"})
-    }
+    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}