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(handleJoinError)
-      await joinVoiceRoom(url, h)
-    } catch (e) {
-      console.error("Failed to join voice room", e)
-      pushToast({theme: "error", message: "Failed to join voice room"})
-    }
   }
 
   $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

@@ -17,6 +17,13 @@ export const LIVEKIT_PARTICIPANTS = 39004
 
 export {checkRelayHasLivekit} from "$lib/livekit"
 
+export class VoiceJoinMembershipError extends Error {
+  constructor() {
+    super("Failed to join voice room: you must be a member.")
+    this.name = "VoiceJoinMembershipError"
+  }
+}
+
 export type VoiceSession = {
   url: string
   h: string
@@ -95,6 +102,7 @@ const fetchLivekitToken = async (
 
   if (!response.ok) {
     const text = await response.text()
+    if (response.status === 403) throw new VoiceJoinMembershipError()
     throw new Error(`Token request failed (${response.status}): ${text}`)
   }
 
@@ -243,7 +251,6 @@ export const joinVoiceRoom = async (url: string, h: string): Promise<void> => {
     playJoinSound()
   } catch (e) {
     if (isActive()) voiceState.set("disconnected")
-    if (e instanceof AbortError) return
     throw e
   } finally {
     if (isActive()) joinAbortController = undefined
@@ -264,9 +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) joinVoiceRoom(target.url, target.h)
+  if (!target) return
+  return joinVoiceRoom(target.url, target.h)
 }
 
 export const toggleMute = async () => {