diff --git a/src/app/components/VoiceCallAudioSettingsDialog.svelte b/src/app/components/VoiceCallAudioSettingsDialog.svelte new file mode 100644 index 00000000..7c8c25f0 --- /dev/null +++ b/src/app/components/VoiceCallAudioSettingsDialog.svelte @@ -0,0 +1,161 @@ + + + + + + Call settings + +

Microphone, speaker, and camera for this call.

+
+ + {#snippet label()} +

Microphone

+ {/snippet} + {#snippet input()} + + {/snippet} +
+ {#if canPickOutput} + + {#snippet label()} +

Speaker

+ {/snippet} + {#snippet input()} + + {/snippet} +
+ {/if} + + {#snippet label()} +

Camera

+ {/snippet} + {#snippet input()} + + {/snippet} +
+
+
+ + + +
diff --git a/src/app/components/VoiceRoomJoinDialog.svelte b/src/app/components/VoiceRoomJoinDialog.svelte index 044fcd64..61bb8ee2 100644 --- a/src/app/components/VoiceRoomJoinDialog.svelte +++ b/src/app/components/VoiceRoomJoinDialog.svelte @@ -26,16 +26,21 @@ const spaceLabel = $derived(displayRelayUrl(url)) let audioInputs = $state([]) + let videoInputs = $state([]) let selectedDeviceId = $state("") + let selectedVideoDeviceId = $state("") let startWithoutMic = $state(false) + let joinWithCamera = $state(false) const loadDevices = async () => { if (!navigator.mediaDevices?.enumerateDevices) return try { const devices = await navigator.mediaDevices.enumerateDevices() audioInputs = devices.filter(d => d.kind === "audioinput") + videoInputs = devices.filter(d => d.kind === "videoinput") } catch { audioInputs = [] + videoInputs = [] } } @@ -52,6 +57,8 @@ h, startWithoutMic, startWithoutMic ? undefined : selectedDeviceId || undefined, + joinWithCamera, + joinWithCamera ? selectedVideoDeviceId || undefined : undefined, ) } @@ -69,7 +76,7 @@ -

Select a microphone to join the call:

+

Choose devices for the call:

-
@@ -100,6 +107,34 @@ {/snippet} +
+ + +
+ + {#snippet label()} +

Camera

+ {/snippet} + {#snippet input()} + + {/snippet} +
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte index f5ea6c3e..1702753d 100644 --- a/src/app/components/VoiceWidget.svelte +++ b/src/app/components/VoiceWidget.svelte @@ -12,8 +12,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, @@ -68,6 +70,10 @@ await goto(makeRoomPath(targetRoom.url, targetRoom.h)) pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h}) } + + const openAudioSettings = () => { + pushModal(VoiceCallAudioSettingsDialog) + } {#if targetRoom} @@ -121,6 +127,12 @@ onclick={toggleScreenShare}> +