From 0ef6052820e075cef7ed82f18c37368b0fda7be3 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Wed, 1 Apr 2026 14:22:14 -0400
Subject: [PATCH 1/2] Add settings button to configure audio devices in call

---
 .../VoiceCallAudioSettingsDialog.svelte       | 134 ++++++++++++++++++
 src/app/components/VoiceWidget.svelte         |  12 ++
 src/app/voice.ts                              |  33 +++++
 3 files changed, 179 insertions(+)
 create mode 100644 src/app/components/VoiceCallAudioSettingsDialog.svelte

diff --git a/src/app/components/VoiceCallAudioSettingsDialog.svelte b/src/app/components/VoiceCallAudioSettingsDialog.svelte
new file mode 100644
index 00000000..f656eb5f
--- /dev/null
+++ b/src/app/components/VoiceCallAudioSettingsDialog.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import {
+    currentVoiceSession,
+    DeviceKind,
+    supportsAudioOutputSelection,
+    switchVoiceActiveDevice,
+    type VoiceSession,
+  } from "@app/voice"
+  import {popModal} from "@app/util/modal"
+
+  const selectValueForActiveDevice = (session: VoiceSession, kind: DeviceKind): string => {
+    const livekitDeviceId = session.room.getActiveDevice(kind)
+    if (livekitDeviceId === undefined || livekitDeviceId === "" || livekitDeviceId === "default") {
+      return ""
+    }
+    return livekitDeviceId
+  }
+
+  let audioInputs = $state<MediaDeviceInfo[]>([])
+  let audioOutputs = $state<MediaDeviceInfo[]>([])
+  let selectedInput = $state("")
+  let selectedOutput = $state("")
+
+  const loadDevices = async () => {
+    if (!navigator.mediaDevices?.enumerateDevices) return
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      audioInputs = devices.filter(d => d.kind === "audioinput")
+      audioOutputs = devices.filter(d => d.kind === "audiooutput")
+    } catch {
+      audioInputs = []
+      audioOutputs = []
+    }
+  }
+
+  $effect(() => {
+    void loadDevices()
+    const md = navigator.mediaDevices
+    if (!md?.addEventListener) return
+    const onDeviceChange = () => {
+      void loadDevices()
+    }
+    md.addEventListener("devicechange", onDeviceChange)
+    return () => {
+      md.removeEventListener("devicechange", onDeviceChange)
+    }
+  })
+
+  $effect(() => {
+    const session = $currentVoiceSession
+    if (!session) {
+      popModal()
+      return
+    }
+    selectedInput = selectValueForActiveDevice(session, DeviceKind.AudioInput)
+    selectedOutput = selectValueForActiveDevice(session, DeviceKind.AudioOutput)
+  })
+
+  const onInputChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.AudioInput, selectedInput)
+  }
+
+  const onOutputChange = () => {
+    void switchVoiceActiveDevice(DeviceKind.AudioOutput, selectedOutput)
+  }
+
+  const onDone = () => {
+    popModal()
+  }
+
+  // Output not support in Safari
+  const canPickOutput = supportsAudioOutputSelection()
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Audio settings</ModalTitle>
+    </ModalHeader>
+    <p class="text-sm opacity-80">Choose microphone and speaker for this call.</p>
+    <div class="flex flex-col gap-4 pt-2">
+      <FieldInline>
+        {#snippet label()}
+          <p>Microphone</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={selectedInput}
+            onchange={onInputChange}
+            aria-label="Microphone">
+            <option value="">Default microphone</option>
+            {#each audioInputs as d (d.deviceId)}
+              <option value={d.deviceId}>
+                {d.label || `Microphone ${d.deviceId.slice(0, 8)}…`}
+              </option>
+            {/each}
+          </select>
+        {/snippet}
+      </FieldInline>
+      {#if canPickOutput}
+        <FieldInline>
+          {#snippet label()}
+            <p>Speaker</p>
+          {/snippet}
+          {#snippet input()}
+            <select
+              class="select select-bordered w-full"
+              bind:value={selectedOutput}
+              onchange={onOutputChange}
+              aria-label="Speaker">
+              <option value="">Default speaker</option>
+              {#each audioOutputs as d (d.deviceId)}
+                <option value={d.deviceId}>
+                  {d.label || `Speaker ${d.deviceId.slice(0, 8)}…`}
+                </option>
+              {/each}
+            </select>
+          {/snippet}
+        </FieldInline>
+      {/if}
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-primary" onclick={onDone}>Done</Button>
+  </ModalFooter>
+</Modal>
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 603d2efc..1ed8356e 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -9,8 +9,10 @@
   import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
   import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import Settings from "@assets/icons/settings.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import VoiceCallAudioSettingsDialog from "@app/components/VoiceCallAudioSettingsDialog.svelte"
   import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
   import {
     decodeRelay,
@@ -63,6 +65,10 @@
     await goto(makeRoomPath(targetRoom.url, targetRoom.h))
     pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
+
+  const openAudioSettings = () => {
+    pushModal(VoiceCallAudioSettingsDialog)
+  }
 </script>
 
 {#if targetRoom}
@@ -100,6 +106,12 @@
           onclick={toggleMute}>
           <Icon icon={$currentVoiceSession.muted ? MicrophoneOff : Microphone} size={4} />
         </Button>
+        <Button
+          data-tip="Audio settings"
+          class="center tooltip tooltip-top btn btn-sm btn-square btn-ghost"
+          onclick={openAudioSettings}>
+          <Icon icon={Settings} size={4} />
+        </Button>
         <Button
           data-tip="Leave room"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-error"
diff --git a/src/app/voice.ts b/src/app/voice.ts
index a4453ed4..7fb1f241 100644
--- a/src/app/voice.ts
+++ b/src/app/voice.ts
@@ -7,6 +7,7 @@ import {
   Room as LiveKitRoom,
   RoomEvent,
   Track,
+  supportsAudioOutputSelection,
   type AudioCaptureOptions,
   type LocalParticipant,
 } from "livekit-client"
@@ -24,6 +25,8 @@ export const LIVEKIT_PARTICIPANTS = 39004
 
 export {checkRelayHasLivekit} from "$lib/livekit"
 
+export {supportsAudioOutputSelection}
+
 export type VoiceSession = {
   url: string
   h: string
@@ -43,6 +46,36 @@ export enum VoiceState {
 
 export const currentVoiceSession = writable<VoiceSession | undefined>(undefined)
 
+const LIVEKIT_DEFAULT_DEVICE_ID = "default"
+
+export enum DeviceKind {
+  AudioInput = "audioinput",
+  AudioOutput = "audiooutput",
+}
+
+export const switchVoiceActiveDevice = async (
+  kind: DeviceKind,
+  targetDeviceId: string,
+): Promise<void> => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+  const id = targetDeviceId === "" ? LIVEKIT_DEFAULT_DEVICE_ID : targetDeviceId
+  try {
+    await session.room.switchActiveDevice(kind, id)
+  } catch {
+    let label: string
+    switch (kind) {
+      case DeviceKind.AudioInput:
+        label = "microphone"
+        break
+      case DeviceKind.AudioOutput:
+        label = "speaker"
+        break
+    }
+    pushToast({theme: "error", message: `Error changing ${label}`})
+  }
+}
+
 export const voiceState = writable<VoiceState>(VoiceState.Disconnected)
 
 export const currentVoiceRoom = writable<Room | undefined>(undefined)
-- 
2.52.0


From 617b5c9fcac7eeecea9b447c269f13c6e1cd3d0e Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Thu, 2 Apr 2026 15:27:50 -0400
Subject: [PATCH 2/2] PR fixes

---
 .../VoiceCallAudioSettingsDialog.svelte        | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/app/components/VoiceCallAudioSettingsDialog.svelte b/src/app/components/VoiceCallAudioSettingsDialog.svelte
index f656eb5f..c8afccc0 100644
--- a/src/app/components/VoiceCallAudioSettingsDialog.svelte
+++ b/src/app/components/VoiceCallAudioSettingsDialog.svelte
@@ -5,6 +5,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {
     currentVoiceSession,
@@ -41,16 +42,9 @@
   }
 
   $effect(() => {
-    void loadDevices()
-    const md = navigator.mediaDevices
-    if (!md?.addEventListener) return
-    const onDeviceChange = () => {
-      void loadDevices()
-    }
-    md.addEventListener("devicechange", onDeviceChange)
-    return () => {
-      md.removeEventListener("devicechange", onDeviceChange)
-    }
+    loadDevices()
+    navigator.mediaDevices?.addEventListener?.("devicechange", loadDevices)
+    return () => navigator.mediaDevices?.removeEventListener?.("devicechange", loadDevices)
   })
 
   $effect(() => {
@@ -83,8 +77,8 @@
   <ModalBody>
     <ModalHeader>
       <ModalTitle>Audio settings</ModalTitle>
+      <ModalSubtitle>Choose microphone and speaker for this call.</ModalSubtitle>
     </ModalHeader>
-    <p class="text-sm opacity-80">Choose microphone and speaker for this call.</p>
     <div class="flex flex-col gap-4 pt-2">
       <FieldInline>
         {#snippet label()}
@@ -129,6 +123,6 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-primary" onclick={onDone}>Done</Button>
+    <Button class="btn btn-primary w-full" onclick={onDone}>Done</Button>
   </ModalFooter>
 </Modal>
-- 
2.52.0