Testing voice chat UDP

src/app/app.ts

@@ -206,6 +206,10 @@ export default class Enclave<P = Page> {
         server.messages[msg.channel_id][msg.message.id] = msg.message;
         this.forceRender();
         return;
+
+      case "JoinVoice":
+        server.voiceJoin && server.voiceJoin(msg.pin, msg.channel_id);
+        return;
     }
   }
 }

src/app/protocol.ts

@@ -29,6 +29,11 @@ export type ClientMethod =
       method: "MessageDeleted";
       channel_id: string;
       message_id: string;
+    }
+  | {
+      method: "JoinVoice";
+      channel_id: string;
+      pin: number;
     };
 
 export type ServerMethod =
@@ -71,4 +76,8 @@ export type ServerMethod =
       method: "DeleteMessage";
       channel_id: string;
       message_id: string;
+    }
+  | {
+      method: "JoinVoice";
+      channel_id: string;
     };

src/app/server.ts

@@ -31,6 +31,7 @@ export default class EnclaveServer {
   public meta?: ServerMeta;
   public messages: Record<string, Record<string, StoredMessage>>;
   public users: Record<string, ClientMeta | null>;
+  public voiceJoin?: (pin: number, channelId: string) => void;
 
   public constructor(hostname: string, isSecure: boolean) {
     this.hostname = hostname;

src/components/page/channel/VoiceChannel.tsx

@@ -20,7 +20,19 @@ export default function VoiceChannel({
     lastChannelId.current = channel.id;
 
     invoke("disconnect_from_vc");
-    invoke("connect_to_vc", { hostname });
+
+    if (channel.kind !== "voice" || !appRef.current?.server) return;
+
+    appRef.current.server.voiceJoin = (pin, channelId) => {
+      invoke("connect_to_vc", { hostname, pin, channelId }).catch(
+        console.error,
+      );
+    };
+
+    appRef.current.server.websocket?.send({
+      method: "JoinVoice",
+      channel_id: channel.id,
+    });
   }, [channel.id]);
 
   return (

src/components/settings/SettingsDialog.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
-import { User, Palette, Mic, Volume2 } from "lucide-react";
+import { User, Palette, Volume2 } from "lucide-react";
 import { ProfileSettings } from "./ProfileSettings";
 import { AppearanceSettings } from "./AppearanceSettings";
 import { AudioVideoSettings } from "./AudioVideoSettings";