713 lines
26 KiB
JavaScript
713 lines
26 KiB
JavaScript
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { useQuery, useConvex } from 'convex/react';
|
|
import { api } from '../../../../convex/_generated/api';
|
|
import Avatar from './Avatar';
|
|
import AvatarCropModal from './AvatarCropModal';
|
|
import { useTheme, THEMES, THEME_LABELS } from '../contexts/ThemeContext';
|
|
|
|
const THEME_PREVIEWS = {
|
|
[THEMES.LIGHT]: { bg: '#ffffff', sidebar: '#f2f3f5', tertiary: '#e3e5e8', text: '#313338' },
|
|
[THEMES.DARK]: { bg: '#313338', sidebar: '#2b2d31', tertiary: '#1e1f22', text: '#f2f3f5' },
|
|
[THEMES.ASH]: { bg: '#202225', sidebar: '#1a1b1e', tertiary: '#111214', text: '#f0f1f3' },
|
|
[THEMES.ONYX]: { bg: '#0c0c14', sidebar: '#080810', tertiary: '#000000', text: '#e0def0' },
|
|
};
|
|
|
|
const TABS = [
|
|
{ id: 'account', label: 'My Account', section: 'USER SETTINGS' },
|
|
{ id: 'appearance', label: 'Appearance', section: 'USER SETTINGS' },
|
|
{ id: 'voice', label: 'Voice & Video', section: 'APP SETTINGS' },
|
|
{ id: 'keybinds', label: 'Keybinds', section: 'APP SETTINGS' },
|
|
];
|
|
|
|
const UserSettings = ({ onClose, userId, username, onLogout }) => {
|
|
const [activeTab, setActiveTab] = useState('account');
|
|
|
|
useEffect(() => {
|
|
const handleKey = (e) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
window.addEventListener('keydown', handleKey);
|
|
return () => window.removeEventListener('keydown', handleKey);
|
|
}, [onClose]);
|
|
|
|
const renderSidebar = () => {
|
|
let lastSection = null;
|
|
const items = [];
|
|
|
|
TABS.forEach((tab, i) => {
|
|
if (tab.section !== lastSection) {
|
|
if (lastSection !== null) {
|
|
items.push(<div key={`sep-${i}`} style={{ height: '1px', backgroundColor: 'var(--border-subtle)', margin: '8px 10px' }} />);
|
|
}
|
|
items.push(
|
|
<div key={`hdr-${tab.section}`} style={{
|
|
fontSize: '12px', fontWeight: '700', color: 'var(--text-muted)',
|
|
marginBottom: '6px', textTransform: 'uppercase', padding: '0 10px'
|
|
}}>
|
|
{tab.section}
|
|
</div>
|
|
);
|
|
lastSection = tab.section;
|
|
}
|
|
items.push(
|
|
<div
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
style={{
|
|
padding: '6px 10px', borderRadius: '4px', cursor: 'pointer', marginBottom: '2px', fontSize: '15px',
|
|
backgroundColor: activeTab === tab.id ? 'var(--background-modifier-selected)' : 'transparent',
|
|
color: activeTab === tab.id ? 'var(--header-primary)' : 'var(--header-secondary)',
|
|
}}
|
|
>
|
|
{tab.label}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
items.push(<div key="sep-logout" style={{ height: '1px', backgroundColor: 'var(--border-subtle)', margin: '8px 10px' }} />);
|
|
items.push(
|
|
<div
|
|
key="logout"
|
|
onClick={onLogout}
|
|
style={{
|
|
padding: '6px 10px', borderRadius: '4px', cursor: 'pointer', fontSize: '15px',
|
|
color: '#ed4245', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
|
|
}}
|
|
>
|
|
Log Out
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
<path d="M16 17L21 12L16 7" stroke="#ed4245" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<path d="M21 12H9" stroke="#ed4245" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
<path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="#ed4245" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
|
|
return items;
|
|
};
|
|
|
|
return (
|
|
<div style={{
|
|
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
|
backgroundColor: 'var(--bg-primary)', zIndex: 1000,
|
|
display: 'flex', color: 'var(--text-normal)',
|
|
}}>
|
|
{/* Sidebar */}
|
|
<div style={{
|
|
width: '218px', backgroundColor: 'var(--bg-secondary)',
|
|
display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
|
|
padding: '60px 6px 60px 20px', overflowY: 'auto',
|
|
}}>
|
|
<div style={{ width: '100%' }}>
|
|
{renderSidebar()}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div style={{ flex: 1, display: 'flex', justifyContent: 'flex-start', overflowY: 'auto' }}>
|
|
<div style={{ flex: 1, maxWidth: '740px', padding: '60px 40px 80px', position: 'relative' }}>
|
|
{activeTab === 'account' && <MyAccountTab userId={userId} username={username} />}
|
|
{activeTab === 'appearance' && <AppearanceTab />}
|
|
{activeTab === 'voice' && <VoiceVideoTab />}
|
|
{activeTab === 'keybinds' && <KeybindsTab />}
|
|
</div>
|
|
|
|
{/* Right spacer with close button */}
|
|
<div style={{ flex: '0 0 36px', paddingTop: '60px', marginLeft: '8px' }}>
|
|
<button
|
|
onClick={onClose}
|
|
style={{
|
|
width: '36px', height: '36px', borderRadius: '50%',
|
|
border: '2px solid var(--header-secondary)', background: 'transparent',
|
|
color: 'var(--header-secondary)', cursor: 'pointer',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
fontSize: '18px',
|
|
}}
|
|
>
|
|
✕
|
|
</button>
|
|
<div style={{ fontSize: '13px', fontWeight: '600', color: 'var(--header-secondary)', textAlign: 'center', marginTop: '4px' }}>
|
|
ESC
|
|
</div>
|
|
</div>
|
|
<div style={{ flex: '0.5' }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* =========================================
|
|
MY ACCOUNT TAB
|
|
========================================= */
|
|
const MyAccountTab = ({ userId, username }) => {
|
|
const allUsers = useQuery(api.auth.getPublicKeys);
|
|
const convex = useConvex();
|
|
|
|
const currentUser = allUsers?.find(u => u.id === userId);
|
|
|
|
const [displayName, setDisplayName] = useState('');
|
|
const [aboutMe, setAboutMe] = useState('');
|
|
const [customStatus, setCustomStatus] = useState('');
|
|
const [avatarFile, setAvatarFile] = useState(null);
|
|
const [avatarPreview, setAvatarPreview] = useState(null);
|
|
const [saving, setSaving] = useState(false);
|
|
const [hasChanges, setHasChanges] = useState(false);
|
|
const [showCropModal, setShowCropModal] = useState(false);
|
|
const [rawImageUrl, setRawImageUrl] = useState(null);
|
|
const fileInputRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (currentUser) {
|
|
setDisplayName(currentUser.displayName || '');
|
|
setAboutMe(currentUser.aboutMe || '');
|
|
setCustomStatus(currentUser.customStatus || '');
|
|
}
|
|
}, [currentUser]);
|
|
|
|
useEffect(() => {
|
|
if (!currentUser) return;
|
|
const changed =
|
|
displayName !== (currentUser.displayName || '') ||
|
|
aboutMe !== (currentUser.aboutMe || '') ||
|
|
customStatus !== (currentUser.customStatus || '') ||
|
|
avatarFile !== null;
|
|
setHasChanges(changed);
|
|
}, [displayName, aboutMe, customStatus, avatarFile, currentUser]);
|
|
|
|
const handleAvatarChange = (e) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
const url = URL.createObjectURL(file);
|
|
setRawImageUrl(url);
|
|
setShowCropModal(true);
|
|
e.target.value = '';
|
|
};
|
|
|
|
const handleCropApply = (blob) => {
|
|
const file = new File([blob], 'avatar.png', { type: 'image/png' });
|
|
setAvatarFile(file);
|
|
const previewUrl = URL.createObjectURL(blob);
|
|
setAvatarPreview(previewUrl);
|
|
if (rawImageUrl) URL.revokeObjectURL(rawImageUrl);
|
|
setRawImageUrl(null);
|
|
setShowCropModal(false);
|
|
};
|
|
|
|
const handleCropCancel = () => {
|
|
if (rawImageUrl) URL.revokeObjectURL(rawImageUrl);
|
|
setRawImageUrl(null);
|
|
setShowCropModal(false);
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
if (!userId || saving) return;
|
|
setSaving(true);
|
|
try {
|
|
let avatarStorageId;
|
|
if (avatarFile) {
|
|
const uploadUrl = await convex.mutation(api.files.generateUploadUrl);
|
|
const res = await fetch(uploadUrl, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': avatarFile.type },
|
|
body: avatarFile,
|
|
});
|
|
const { storageId } = await res.json();
|
|
avatarStorageId = storageId;
|
|
}
|
|
const args = { userId, displayName, aboutMe, customStatus };
|
|
if (avatarStorageId) args.avatarStorageId = avatarStorageId;
|
|
await convex.mutation(api.auth.updateProfile, args);
|
|
setAvatarFile(null);
|
|
if (avatarPreview) {
|
|
URL.revokeObjectURL(avatarPreview);
|
|
setAvatarPreview(null);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to save profile:', err);
|
|
alert('Failed to save profile: ' + err.message);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleReset = () => {
|
|
if (currentUser) {
|
|
setDisplayName(currentUser.displayName || '');
|
|
setAboutMe(currentUser.aboutMe || '');
|
|
setCustomStatus(currentUser.customStatus || '');
|
|
}
|
|
setAvatarFile(null);
|
|
if (avatarPreview) {
|
|
URL.revokeObjectURL(avatarPreview);
|
|
setAvatarPreview(null);
|
|
}
|
|
if (rawImageUrl) {
|
|
URL.revokeObjectURL(rawImageUrl);
|
|
setRawImageUrl(null);
|
|
}
|
|
setShowCropModal(false);
|
|
};
|
|
|
|
const avatarUrl = avatarPreview || currentUser?.avatarUrl;
|
|
|
|
return (
|
|
<div>
|
|
<h2 style={{ color: 'var(--header-primary)', margin: '0 0 20px', fontSize: '20px' }}>My Account</h2>
|
|
|
|
{/* Profile card */}
|
|
<div style={{ backgroundColor: 'var(--bg-secondary)', borderRadius: '8px', overflow: 'hidden' }}>
|
|
{/* Banner */}
|
|
<div style={{ height: '100px', backgroundColor: 'var(--brand-experiment)' }} />
|
|
|
|
{/* Profile body */}
|
|
<div style={{ padding: '0 16px 16px', position: 'relative' }}>
|
|
{/* Avatar */}
|
|
<div
|
|
className="user-settings-avatar-wrapper"
|
|
onClick={() => fileInputRef.current?.click()}
|
|
style={{ marginTop: '-40px', marginBottom: '12px', width: 'fit-content', cursor: 'pointer', position: 'relative' }}
|
|
>
|
|
<Avatar username={username} avatarUrl={avatarUrl} size={80} />
|
|
<div className="user-settings-avatar-overlay">
|
|
CHANGE<br/>AVATAR
|
|
</div>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleAvatarChange}
|
|
style={{ display: 'none' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Fields */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
{/* Username (read-only) */}
|
|
<div>
|
|
<label style={{
|
|
display: 'block', color: 'var(--header-secondary)', fontSize: '12px',
|
|
fontWeight: '700', textTransform: 'uppercase', marginBottom: '8px',
|
|
}}>
|
|
Username
|
|
</label>
|
|
<div style={{
|
|
backgroundColor: 'var(--bg-tertiary)', borderRadius: '4px', padding: '10px',
|
|
color: 'var(--text-muted)', fontSize: '16px',
|
|
}}>
|
|
{username}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Display Name */}
|
|
<div>
|
|
<label style={{
|
|
display: 'block', color: 'var(--header-secondary)', fontSize: '12px',
|
|
fontWeight: '700', textTransform: 'uppercase', marginBottom: '8px',
|
|
}}>
|
|
Display Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={displayName}
|
|
onChange={(e) => setDisplayName(e.target.value)}
|
|
placeholder="How others see you in chat"
|
|
style={{
|
|
width: '100%', backgroundColor: 'var(--bg-tertiary)', border: 'none',
|
|
borderRadius: '4px', padding: '10px', color: 'var(--text-normal)',
|
|
fontSize: '16px', outline: 'none', boxSizing: 'border-box',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* About Me */}
|
|
<div>
|
|
<label style={{
|
|
display: 'block', color: 'var(--header-secondary)', fontSize: '12px',
|
|
fontWeight: '700', textTransform: 'uppercase', marginBottom: '8px',
|
|
}}>
|
|
About Me
|
|
</label>
|
|
<textarea
|
|
value={aboutMe}
|
|
onChange={(e) => setAboutMe(e.target.value.slice(0, 190))}
|
|
placeholder="Tell others about yourself"
|
|
rows={3}
|
|
style={{
|
|
width: '100%', backgroundColor: 'var(--bg-tertiary)', border: 'none',
|
|
borderRadius: '4px', padding: '10px', color: 'var(--text-normal)',
|
|
fontSize: '16px', outline: 'none', resize: 'none', fontFamily: 'inherit',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
/>
|
|
<div style={{ fontSize: '12px', color: 'var(--text-muted)', textAlign: 'right' }}>
|
|
{aboutMe.length}/190
|
|
</div>
|
|
</div>
|
|
|
|
{/* Custom Status */}
|
|
<div>
|
|
<label style={{
|
|
display: 'block', color: 'var(--header-secondary)', fontSize: '12px',
|
|
fontWeight: '700', textTransform: 'uppercase', marginBottom: '8px',
|
|
}}>
|
|
Custom Status
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={customStatus}
|
|
onChange={(e) => setCustomStatus(e.target.value)}
|
|
placeholder="Set a custom status"
|
|
style={{
|
|
width: '100%', backgroundColor: 'var(--bg-tertiary)', border: 'none',
|
|
borderRadius: '4px', padding: '10px', color: 'var(--text-normal)',
|
|
fontSize: '16px', outline: 'none', boxSizing: 'border-box',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Save bar */}
|
|
{hasChanges && (
|
|
<div style={{
|
|
position: 'sticky', bottom: '0', left: 0, right: 0,
|
|
backgroundColor: 'var(--bg-tertiary)', borderRadius: '4px',
|
|
padding: '10px 16px', marginTop: '16px',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '12px',
|
|
boxShadow: '0 -2px 10px rgba(0,0,0,0.2)',
|
|
}}>
|
|
<span style={{ color: 'var(--text-muted)', fontSize: '14px', marginRight: 'auto' }}>
|
|
Careful — you have unsaved changes!
|
|
</span>
|
|
<button
|
|
onClick={handleReset}
|
|
style={{
|
|
background: 'transparent', border: 'none', color: 'var(--header-primary)',
|
|
cursor: 'pointer', fontSize: '14px', fontWeight: '500', padding: '8px 16px',
|
|
}}
|
|
>
|
|
Reset
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
style={{
|
|
backgroundColor: '#3ba55c', color: 'white', border: 'none',
|
|
borderRadius: '4px', padding: '8px 24px', cursor: saving ? 'not-allowed' : 'pointer',
|
|
fontSize: '14px', fontWeight: '500', opacity: saving ? 0.7 : 1,
|
|
}}
|
|
>
|
|
{saving ? 'Saving...' : 'Save Changes'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{showCropModal && rawImageUrl && (
|
|
<AvatarCropModal
|
|
imageUrl={rawImageUrl}
|
|
onApply={handleCropApply}
|
|
onCancel={handleCropCancel}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* =========================================
|
|
APPEARANCE TAB
|
|
========================================= */
|
|
const AppearanceTab = () => {
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
return (
|
|
<div>
|
|
<h2 style={{ color: 'var(--header-primary)', margin: '0 0 20px', fontSize: '20px' }}>Appearance</h2>
|
|
<div style={{ marginBottom: '16px' }}>
|
|
<label style={{
|
|
display: 'block', color: 'var(--header-secondary)', fontSize: '12px',
|
|
fontWeight: '700', textTransform: 'uppercase', marginBottom: '12px',
|
|
}}>
|
|
Theme
|
|
</label>
|
|
<div className="theme-selector-grid">
|
|
{Object.values(THEMES).map((themeKey) => {
|
|
const preview = THEME_PREVIEWS[themeKey];
|
|
const isActive = theme === themeKey;
|
|
return (
|
|
<div
|
|
key={themeKey}
|
|
className={`theme-card ${isActive ? 'active' : ''}`}
|
|
onClick={() => setTheme(themeKey)}
|
|
>
|
|
<div className="theme-preview" style={{ backgroundColor: preview.bg }}>
|
|
<div className="theme-preview-sidebar" style={{ backgroundColor: preview.sidebar }}>
|
|
<div className="theme-preview-channel" style={{ backgroundColor: preview.tertiary }} />
|
|
<div className="theme-preview-channel" style={{ backgroundColor: preview.tertiary, width: '60%' }} />
|
|
</div>
|
|
<div className="theme-preview-chat">
|
|
<div className="theme-preview-message" style={{ backgroundColor: preview.sidebar, opacity: 0.6 }} />
|
|
<div className="theme-preview-message" style={{ backgroundColor: preview.sidebar, opacity: 0.4, width: '70%' }} />
|
|
</div>
|
|
</div>
|
|
<div className="theme-card-label">
|
|
<div className={`theme-radio ${isActive ? 'active' : ''}`}>
|
|
{isActive && <div className="theme-radio-dot" />}
|
|
</div>
|
|
<span>{THEME_LABELS[themeKey]}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* =========================================
|
|
VOICE & VIDEO TAB
|
|
========================================= */
|
|
const VoiceVideoTab = () => {
|
|
const [inputDevices, setInputDevices] = useState([]);
|
|
const [outputDevices, setOutputDevices] = useState([]);
|
|
const [selectedInput, setSelectedInput] = useState(() => localStorage.getItem('voiceInputDevice') || 'default');
|
|
const [selectedOutput, setSelectedOutput] = useState(() => localStorage.getItem('voiceOutputDevice') || 'default');
|
|
const [inputVolume, setInputVolume] = useState(() => parseInt(localStorage.getItem('voiceInputVolume') || '100'));
|
|
const [outputVolume, setOutputVolume] = useState(() => parseInt(localStorage.getItem('voiceOutputVolume') || '100'));
|
|
const [micTesting, setMicTesting] = useState(false);
|
|
const [micLevel, setMicLevel] = useState(0);
|
|
const micStreamRef = useRef(null);
|
|
const animFrameRef = useRef(null);
|
|
const analyserRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const enumerate = async () => {
|
|
try {
|
|
// Request permission to get labels
|
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
stream.getTracks().forEach(t => t.stop());
|
|
|
|
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
setInputDevices(devices.filter(d => d.kind === 'audioinput'));
|
|
setOutputDevices(devices.filter(d => d.kind === 'audiooutput'));
|
|
} catch (err) {
|
|
console.error('Failed to enumerate devices:', err);
|
|
}
|
|
};
|
|
enumerate();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('voiceInputDevice', selectedInput);
|
|
}, [selectedInput]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('voiceOutputDevice', selectedOutput);
|
|
}, [selectedOutput]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('voiceInputVolume', String(inputVolume));
|
|
}, [inputVolume]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem('voiceOutputVolume', String(outputVolume));
|
|
}, [outputVolume]);
|
|
|
|
const startMicTest = async () => {
|
|
try {
|
|
const constraints = { audio: selectedInput !== 'default' ? { deviceId: { exact: selectedInput } } : true };
|
|
const stream = await navigator.mediaDevices.getUserMedia(constraints);
|
|
micStreamRef.current = stream;
|
|
|
|
const audioCtx = new AudioContext();
|
|
const source = audioCtx.createMediaStreamSource(stream);
|
|
const analyser = audioCtx.createAnalyser();
|
|
analyser.fftSize = 256;
|
|
source.connect(analyser);
|
|
analyserRef.current = analyser;
|
|
|
|
setMicTesting(true);
|
|
|
|
const dataArray = new Uint8Array(analyser.frequencyBinCount);
|
|
const tick = () => {
|
|
analyser.getByteFrequencyData(dataArray);
|
|
const avg = dataArray.reduce((sum, v) => sum + v, 0) / dataArray.length;
|
|
setMicLevel(Math.min(100, (avg / 128) * 100));
|
|
animFrameRef.current = requestAnimationFrame(tick);
|
|
};
|
|
tick();
|
|
} catch (err) {
|
|
console.error('Mic test failed:', err);
|
|
}
|
|
};
|
|
|
|
const stopMicTest = useCallback(() => {
|
|
if (micStreamRef.current) {
|
|
micStreamRef.current.getTracks().forEach(t => t.stop());
|
|
micStreamRef.current = null;
|
|
}
|
|
if (animFrameRef.current) {
|
|
cancelAnimationFrame(animFrameRef.current);
|
|
animFrameRef.current = null;
|
|
}
|
|
setMicTesting(false);
|
|
setMicLevel(0);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
return () => stopMicTest();
|
|
}, [stopMicTest]);
|
|
|
|
const selectStyle = {
|
|
width: '100%', backgroundColor: 'var(--bg-tertiary)', border: 'none',
|
|
borderRadius: '4px', padding: '10px', color: 'var(--text-normal)',
|
|
fontSize: '14px', outline: 'none', boxSizing: 'border-box',
|
|
};
|
|
|
|
const labelStyle = {
|
|
display: 'block', color: 'var(--header-secondary)', fontSize: '12px',
|
|
fontWeight: '700', textTransform: 'uppercase', marginBottom: '8px',
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h2 style={{ color: 'var(--header-primary)', margin: '0 0 20px', fontSize: '20px' }}>Voice & Video</h2>
|
|
|
|
<div style={{ display: 'flex', gap: '16px', marginBottom: '24px' }}>
|
|
{/* Input Device */}
|
|
<div style={{ flex: 1 }}>
|
|
<label style={labelStyle}>Input Device</label>
|
|
<select
|
|
value={selectedInput}
|
|
onChange={(e) => setSelectedInput(e.target.value)}
|
|
style={selectStyle}
|
|
>
|
|
<option value="default">Default</option>
|
|
{inputDevices.map(d => (
|
|
<option key={d.deviceId} value={d.deviceId}>
|
|
{d.label || `Microphone ${d.deviceId.slice(0, 8)}`}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Output Device */}
|
|
<div style={{ flex: 1 }}>
|
|
<label style={labelStyle}>Output Device</label>
|
|
<select
|
|
value={selectedOutput}
|
|
onChange={(e) => setSelectedOutput(e.target.value)}
|
|
style={selectStyle}
|
|
>
|
|
<option value="default">Default</option>
|
|
{outputDevices.map(d => (
|
|
<option key={d.deviceId} value={d.deviceId}>
|
|
{d.label || `Speaker ${d.deviceId.slice(0, 8)}`}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Input Volume */}
|
|
<div style={{ marginBottom: '20px' }}>
|
|
<label style={labelStyle}>Input Volume</label>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={inputVolume}
|
|
onChange={(e) => setInputVolume(parseInt(e.target.value))}
|
|
className="voice-slider"
|
|
/>
|
|
<span style={{ color: 'var(--text-normal)', fontSize: '14px', minWidth: '36px' }}>{inputVolume}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Output Volume */}
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<label style={labelStyle}>Output Volume</label>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={outputVolume}
|
|
onChange={(e) => setOutputVolume(parseInt(e.target.value))}
|
|
className="voice-slider"
|
|
/>
|
|
<span style={{ color: 'var(--text-normal)', fontSize: '14px', minWidth: '36px' }}>{outputVolume}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mic Test */}
|
|
<div style={{ marginBottom: '24px' }}>
|
|
<label style={labelStyle}>Mic Test</label>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
|
<button
|
|
onClick={micTesting ? stopMicTest : startMicTest}
|
|
style={{
|
|
backgroundColor: micTesting ? '#ed4245' : 'var(--brand-experiment)',
|
|
color: 'white', border: 'none', borderRadius: '4px',
|
|
padding: '8px 16px', cursor: 'pointer', fontSize: '14px', fontWeight: '500',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{micTesting ? 'Stop Testing' : 'Let\'s Check'}
|
|
</button>
|
|
<div className="mic-level-bar">
|
|
<div className="mic-level-fill" style={{ width: `${micLevel}%` }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* =========================================
|
|
KEYBINDS TAB
|
|
========================================= */
|
|
const KeybindsTab = () => {
|
|
const keybinds = [
|
|
{ action: 'Quick Switcher', keys: 'Ctrl+K' },
|
|
{ action: 'Toggle Mute', keys: 'Ctrl+Shift+M' },
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<h2 style={{ color: 'var(--header-primary)', margin: '0 0 20px', fontSize: '20px' }}>Keybinds</h2>
|
|
|
|
<div style={{
|
|
backgroundColor: 'var(--bg-secondary)', borderRadius: '8px', padding: '16px',
|
|
marginBottom: '16px',
|
|
}}>
|
|
<p style={{ color: 'var(--text-muted)', fontSize: '14px', margin: '0 0 16px' }}>
|
|
Keybind configuration coming soon. Current keybinds are shown below.
|
|
</p>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
{keybinds.map(kb => (
|
|
<div key={kb.action} style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
padding: '10px 12px', backgroundColor: 'var(--bg-tertiary)', borderRadius: '4px',
|
|
}}>
|
|
<span style={{ color: 'var(--text-normal)', fontSize: '14px' }}>{kb.action}</span>
|
|
<kbd style={{
|
|
backgroundColor: 'var(--bg-primary)', padding: '4px 8px', borderRadius: '4px',
|
|
fontSize: '13px', color: 'var(--header-primary)', fontFamily: 'inherit',
|
|
border: '1px solid var(--border-subtle)',
|
|
}}>
|
|
{kb.keys}
|
|
</kbd>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserSettings;
|