feat(webrtc): add UI to select audio/video input and output devices

2026-07-06 12:56:27 +00:00
parent 59846fc1e4
commit 9aeedb1a53
3 changed files with 133 additions and 1 deletions
@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+import { useVoiceStore } from '../stores/voice.ts';
+
+interface Props {
+  onClose: () => void;
+}
+
+export function DeviceSettingsModal({ onClose }: Props) {
+  const room = useVoiceStore((s) => s._room);
+  const [audioInputs, setAudioInputs] = useState<MediaDeviceInfo[]>([]);
+  const [audioOutputs, setAudioOutputs] = useState<MediaDeviceInfo[]>([]);
+  const [videoInputs, setVideoInputs] = useState<MediaDeviceInfo[]>([]);
+
+  const [activeAudioInput, setActiveAudioInput] = useState<string>('');
+  const [activeAudioOutput, setActiveAudioOutput] = useState<string>('');
+  const [activeVideoInput, setActiveVideoInput] = useState<string>('');
+
+  useEffect(() => {
+    async function loadDevices() {
+      if (!room) return;
+      try {
+        // Request permissions first to ensure we get labels
+        await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+      } catch (e) {
+        // Ignore if denied or no devices
+      }
+
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      setAudioInputs(devices.filter((d) => d.kind === 'audioinput'));
+      setAudioOutputs(devices.filter((d) => d.kind === 'audiooutput'));
+      setVideoInputs(devices.filter((d) => d.kind === 'videoinput'));
+
+      // If room exposes getActiveDevice(kind)
+      if (typeof room.getActiveDevice === 'function') {
+        const ai = room.getActiveDevice('audioinput');
+        const ao = room.getActiveDevice('audiooutput');
+        const vi = room.getActiveDevice('videoinput');
+        if (ai) setActiveAudioInput(ai);
+        if (ao) setActiveAudioOutput(ao);
+        if (vi) setActiveVideoInput(vi);
+      }
+    }
+    loadDevices();
+  }, [room]);
+
+  const handleDeviceChange = async (kind: MediaDeviceKind, deviceId: string) => {
+    if (!room) return;
+    try {
+      await room.switchActiveDevice(kind, deviceId);
+      if (kind === 'audioinput') setActiveAudioInput(deviceId);
+      if (kind === 'audiooutput') setActiveAudioOutput(deviceId);
+      if (kind === 'videoinput') setActiveVideoInput(deviceId);
+    } catch (e) {
+      console.error('Failed to switch device', e);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-gb-bg/80 z-50 flex items-center justify-center p-4">
+      <div className="bg-gb-bg border border-gb-bg-t rounded-sm shadow-xl p-4 w-full max-w-md">
+        <h3 className="text-sm font-bold text-gb-fg-f mb-4">Device Settings</h3>
+        
+        <div className="space-y-4">
+          <div>
+            <label className="block text-xxs text-gb-fg-s mb-1">Microphone</label>
+            <select 
+              value={activeAudioInput}
+              onChange={(e) => handleDeviceChange('audioinput', e.target.value)}
+              className="w-full bg-gb-bg-s text-gb-fg border border-gb-bg-t rounded-sm px-2 py-1 text-sm outline-none focus:border-gb-orange"
+            >
+              <option value="">Default Microphone</option>
+              {audioInputs.map(d => (
+                <option key={d.deviceId} value={d.deviceId}>{d.label || `Microphone (${d.deviceId.slice(0, 5)}...)`}</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-xxs text-gb-fg-s mb-1">Speaker</label>
+            <select 
+              value={activeAudioOutput}
+              onChange={(e) => handleDeviceChange('audiooutput', e.target.value)}
+              className="w-full bg-gb-bg-s text-gb-fg border border-gb-bg-t rounded-sm px-2 py-1 text-sm outline-none focus:border-gb-orange"
+            >
+              <option value="">Default Speaker</option>
+              {audioOutputs.map(d => (
+                <option key={d.deviceId} value={d.deviceId}>{d.label || `Speaker (${d.deviceId.slice(0, 5)}...)`}</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-xxs text-gb-fg-s mb-1">Camera</label>
+            <select 
+              value={activeVideoInput}
+              onChange={(e) => handleDeviceChange('videoinput', e.target.value)}
+              className="w-full bg-gb-bg-s text-gb-fg border border-gb-bg-t rounded-sm px-2 py-1 text-sm outline-none focus:border-gb-orange"
+            >
+              <option value="">Default Camera</option>
+              {videoInputs.map(d => (
+                <option key={d.deviceId} value={d.deviceId}>{d.label || `Camera (${d.deviceId.slice(0, 5)}...)`}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="mt-6 flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-3 py-1 bg-gb-bg-s hover:bg-gb-bg-t text-gb-fg-f text-sm rounded-sm transition-colors border border-gb-bg-t"
+          >
+            [close]
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,6 +1,9 @@
+import { useState } from 'react';
 import { useVoiceStore } from '../stores/voice.ts';
+import { DeviceSettingsModal } from './DeviceSettingsModal.tsx';

 export function VoiceControls() {
+  const [showDeviceSettings, setShowDeviceSettings] = useState(false);
  const isMuted = useVoiceStore((state) => state.isMuted);
  const isDeafened = useVoiceStore((state) => state.isDeafened);
  const isVideoOn = useVoiceStore((state) => state.isVideoOn);
@@ -71,6 +74,13 @@ export function VoiceControls() {
        [ns{noiseSuppression ? '●' : '○'}]
      </button>
      <div className="flex-1" />
+      <button
+        onClick={() => setShowDeviceSettings(true)}
+        className="px-1.5 py-0.5 rounded-sm transition-colors text-gb-fg-s hover:text-gb-fg-f hover:bg-gb-bg-t border border-transparent mr-2"
+        title="Device Settings"
+      >
+        [⚙]
+      </button>
      <button
        onClick={leaveVoice}
        className="px-1.5 py-0.5 rounded-sm text-gb-red hover:bg-gb-red hover:text-gb-bg transition-colors border border-transparent hover:border-gb-red"
@@ -78,6 +88,10 @@ export function VoiceControls() {
      >
        [x]
      </button>
+
+      {showDeviceSettings && (
+        <DeviceSettingsModal onClose={() => setShowDeviceSettings(false)} />
+      )}
    </div>
  );
 }
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/AudioRenderers.tsx","./src/components/BotManager.tsx","./src/components/CalendarView.tsx","./src/components/ChannelList.tsx","./src/components/ChannelSettingsModal.tsx","./src/components/ChatArea.tsx","./src/components/CommandDropdown.tsx","./src/components/CommandManager.tsx","./src/components/ConnectionStatus.tsx","./src/components/ContextMenu.tsx","./src/components/ConversationList.tsx","./src/components/CreateChannelModal.tsx","./src/components/CreateServerModal.tsx","./src/components/DMChat.tsx","./src/components/DocsView.tsx","./src/components/EmojiPicker.tsx","./src/components/FeatureRequestsPanel.tsx","./src/components/ForgotPasswordPage.tsx","./src/components/FormatToolbar.tsx","./src/components/ForumView.tsx","./src/components/GiphyPicker.tsx","./src/components/InstallBanner.tsx","./src/components/InstallPrompt.tsx","./src/components/InviteModal.tsx","./src/components/JoinServer.tsx","./src/components/JoinServerModal.tsx","./src/components/Layout.tsx","./src/components/ListView.tsx","./src/components/LoginForm.tsx","./src/components/MemberContextMenu.tsx","./src/components/MemberList.tsx","./src/components/MemberRoleAssign.tsx","./src/components/MentionDropdown.tsx","./src/components/MentionPopup.tsx","./src/components/MessageSearch.tsx","./src/components/MobileDrawer.tsx","./src/components/MobileNav.tsx","./src/components/NewConversationModal.tsx","./src/components/NotificationPrompt.tsx","./src/components/PinnedMessages.tsx","./src/components/Poll.tsx","./src/components/ReactionBar.tsx","./src/components/ReplyBar.tsx","./src/components/ResetPasswordPage.tsx","./src/components/RoleManager.tsx","./src/components/ServerBar.tsx","./src/components/ServerSettingsModal.tsx","./src/components/SlashCommandPopup.tsx","./src/components/ThemeToggle.tsx","./src/components/ThreadListPanel.tsx","./src/components/ThreadPanel.tsx","./src/components/TypingIndicator.tsx","./src/components/UserProfileModal.tsx","./src/components/UserSettings.tsx","./src/components/VideoGrid.tsx","./src/components/VoiceChannel.tsx","./src/components/VoiceControls.tsx","./src/components/VoicePanel.tsx","./src/lib/api.ts","./src/lib/kaomojiData.ts","./src/lib/slashCommands.ts","./src/lib/usePermissions.ts","./src/stores/auth.ts","./src/stores/bot.ts","./src/stores/channel.ts","./src/stores/conversation.ts","./src/stores/featureRequest.ts","./src/stores/layout.ts","./src/stores/member.ts","./src/stores/message.ts","./src/stores/moderation.ts","./src/stores/notificationSettings.ts","./src/stores/permissions.ts","./src/stores/presence.ts","./src/stores/push.ts","./src/stores/readStates.ts","./src/stores/role.ts","./src/stores/server.ts","./src/stores/thread.ts","./src/stores/typing.ts","./src/stores/voice.ts","./src/stores/ws.ts"],"version":"5.9.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/AudioRenderers.tsx","./src/components/BotManager.tsx","./src/components/CalendarView.tsx","./src/components/ChannelList.tsx","./src/components/ChannelSettingsModal.tsx","./src/components/ChatArea.tsx","./src/components/CommandDropdown.tsx","./src/components/CommandManager.tsx","./src/components/ConnectionStatus.tsx","./src/components/ContextMenu.tsx","./src/components/ConversationList.tsx","./src/components/CreateChannelModal.tsx","./src/components/CreateServerModal.tsx","./src/components/DMChat.tsx","./src/components/DeviceSettingsModal.tsx","./src/components/DocsView.tsx","./src/components/EmojiPicker.tsx","./src/components/FeatureRequestsPanel.tsx","./src/components/ForgotPasswordPage.tsx","./src/components/FormatToolbar.tsx","./src/components/ForumView.tsx","./src/components/GiphyPicker.tsx","./src/components/InstallBanner.tsx","./src/components/InstallPrompt.tsx","./src/components/InviteModal.tsx","./src/components/JoinServer.tsx","./src/components/JoinServerModal.tsx","./src/components/Layout.tsx","./src/components/ListView.tsx","./src/components/LoginForm.tsx","./src/components/MemberContextMenu.tsx","./src/components/MemberList.tsx","./src/components/MemberRoleAssign.tsx","./src/components/MentionDropdown.tsx","./src/components/MentionPopup.tsx","./src/components/MessageSearch.tsx","./src/components/MobileDrawer.tsx","./src/components/MobileNav.tsx","./src/components/NewConversationModal.tsx","./src/components/NotificationPrompt.tsx","./src/components/PinnedMessages.tsx","./src/components/Poll.tsx","./src/components/ReactionBar.tsx","./src/components/ReplyBar.tsx","./src/components/ResetPasswordPage.tsx","./src/components/RoleManager.tsx","./src/components/ServerBar.tsx","./src/components/ServerSettingsModal.tsx","./src/components/SlashCommandPopup.tsx","./src/components/ThemeToggle.tsx","./src/components/ThreadListPanel.tsx","./src/components/ThreadPanel.tsx","./src/components/TypingIndicator.tsx","./src/components/UserProfileModal.tsx","./src/components/UserSettings.tsx","./src/components/VideoGrid.tsx","./src/components/VoiceChannel.tsx","./src/components/VoiceControls.tsx","./src/components/VoicePanel.tsx","./src/lib/api.ts","./src/lib/kaomojiData.ts","./src/lib/slashCommands.ts","./src/lib/usePermissions.ts","./src/stores/auth.ts","./src/stores/bot.ts","./src/stores/channel.ts","./src/stores/conversation.ts","./src/stores/featureRequest.ts","./src/stores/layout.ts","./src/stores/member.ts","./src/stores/message.ts","./src/stores/moderation.ts","./src/stores/notificationSettings.ts","./src/stores/permissions.ts","./src/stores/presence.ts","./src/stores/push.ts","./src/stores/readStates.ts","./src/stores/role.ts","./src/stores/server.ts","./src/stores/thread.ts","./src/stores/typing.ts","./src/stores/voice.ts","./src/stores/ws.ts"],"version":"5.9.3"}