Merge pull request #37 from 8JP8/voice-options-and-passkey-fix-16637778461125049411

8JP8 · web-flow · commit 757b5aeb53dc · 2026-01-20T09:29:36.000Z
Add Voice Options and Fix Passkey Persistence
diff --git a/backend/utils/session_backup.py b/backend/utils/session_backup.py
@@ -1,108 +1,78 @@
-import base64
-import json
-import os
 import time
+import logging
 from typing import Any, Dict, Optional
+from datetime import datetime
+from flask import current_app
 
-
-def _runtime_dir() -> str:
-    # Prefer explicit env var, otherwise create a runtime folder beside backend/
-    base = os.getenv("RUNTIME_DIR")
-    if base:
-        return base
-    return os.path.join(os.path.dirname(os.path.dirname(__file__)), "runtime")
-
-
-def _path() -> str:
-    return os.getenv("SESSION_BACKUP_PATH", os.path.join(_runtime_dir(), "session.tmp"))
-
-
-def _enabled() -> bool:
-    return os.getenv("SESSION_FILE_BACKUP", "false").lower() == "true"
-
-
-def _read_all() -> Dict[str, Any]:
-    p = _path()
-    if not os.path.exists(p):
-        return {}
-    try:
-        with open(p, "rb") as f:
-            raw = f.read()
-        if not raw:
-            return {}
-        # Stored as base64(JSON) to avoid plain text; not meant as security.
-        decoded = base64.b64decode(raw)
-        return json.loads(decoded.decode("utf-8"))
-    except Exception:
-        return {}
-
-
-def _write_all(obj: Dict[str, Any]) -> None:
-    p = _path()
-    os.makedirs(os.path.dirname(p), exist_ok=True)
-    tmp = p + ".tmp"
-    data = base64.b64encode(json.dumps(obj, separators=(",", ":")).encode("utf-8"))
-    with open(tmp, "wb") as f:
-        f.write(data)
-    # atomic replace on both Windows + Linux
-    os.replace(tmp, p)
-
+logger = logging.getLogger(__name__)
 
 def save_session_backup(session_id: str, data: Dict[str, Any], ttl_seconds: int = 10 * 60) -> None:
     """
-    Best-effort session backup to a local runtime file.
-
-    NOTE: This does NOT replace Redis in Azure multi-instance.
-    It only helps single-instance deployments or local dev.
+    Best-effort session backup to MongoDB/CosmosDB.
+    Persists passkey challenges across deployments by using the database instead of local files.
     """
-    if not _enabled():
-        return
     if not session_id:
         return
-    now = int(time.time())
-    all_data = _read_all()
-    all_data[str(session_id)] = {
-        "ts": now,
-        "ttl": int(ttl_seconds),
-        "data": data,
-    }
-    _write_all(all_data)
+
+    try:
+        # Check if we have a database connection
+        if not current_app or not hasattr(current_app, 'db'):
+            logger.warning("Session backup skipped: No database connection available")
+            return
+
+        now = int(time.time())
+        expires_at = now + ttl_seconds
+
+        # Use DB upsert
+        # We store 'expireAt' as a datetime object for potential future TTL index support
+        # We store 'expires_at' as timestamp for consistent manual checking in load_session_backup
+        current_app.db.session_backups.update_one(
+            {'_id': str(session_id)},
+            {'$set': {
+                'data': data,
+                'updated_at': now,
+                'expires_at': expires_at,
+                'expireAt': datetime.fromtimestamp(expires_at)
+            }},
+            upsert=True
+        )
+    except Exception as e:
+        logger.error(f"Failed to save session backup: {str(e)}")
 
 
 def load_session_backup(session_id: str) -> Optional[Dict[str, Any]]:
     """Load a session backup if present and not expired."""
-    if not _enabled():
-        return None
     if not session_id:
         return None
-    now = int(time.time())
-    all_data = _read_all()
-    rec = all_data.get(str(session_id))
-    if not rec:
+
+    try:
+        if not current_app or not hasattr(current_app, 'db'):
+            return None
+
+        now = int(time.time())
+
+        # Find document and verify it hasn't expired
+        backup = current_app.db.session_backups.find_one({
+            '_id': str(session_id),
+            'expires_at': {'$gt': now}
+        })
+
+        if backup:
+            return backup.get('data')
+
         return None
-    ts = int(rec.get("ts", 0))
-    ttl = int(rec.get("ttl", 0))
-    if ttl > 0 and (now - ts) > ttl:
-        # expired -> delete
-        try:
-            del all_data[str(session_id)]
-            _write_all(all_data)
-        except Exception:
-            pass
+    except Exception as e:
+        logger.error(f"Failed to load session backup: {str(e)}")
         return None
-    return rec.get("data") or None
 
 
 def delete_session_backup(session_id: str) -> None:
-    if not _enabled():
-        return
+    """Delete a session backup."""
     if not session_id:
         return
-    all_data = _read_all()
-    if str(session_id) in all_data:
-        try:
-            del all_data[str(session_id)]
-            _write_all(all_data)
-        except Exception:
-            pass
 
+    try:
+        if current_app and hasattr(current_app, 'db'):
+            current_app.db.session_backups.delete_one({'_id': str(session_id)})
+    except Exception as e:
+        logger.error(f"Failed to delete session backup: {str(e)}")
diff --git a/frontend/components/Settings/VoipAudioSettings.tsx b/frontend/components/Settings/VoipAudioSettings.tsx
@@ -10,6 +10,10 @@ const VoipAudioSettings: React.FC = () => {
         selectedDeviceId,
         selectMicrophoneDevice,
         refreshDevices,
+        echoCancellation,
+        noiseSuppression,
+        setEchoCancellation,
+        setNoiseSuppression,
     } = useVoip();
     const { t } = useLanguage();
     const [hasPermission, setHasPermission] = useState<boolean | null>(null);
@@ -317,6 +321,51 @@ const VoipAudioSettings: React.FC = () => {
                         </div>
                     )}
                 </div>
+
+                {/* Advanced Audio Options */}
+                <div className="pt-4 border-t theme-border space-y-4">
+                    <h3 className="text-sm font-medium theme-text-primary">
+                        {t('voip.advancedAudio') || 'Advanced Audio Options'}
+                    </h3>
+
+                    <div className="flex items-center justify-between gap-4">
+                        <div>
+                            <h4 className="font-medium theme-text-primary text-sm">{t('voip.echoCancellation') || 'Echo Cancellation'}</h4>
+                            <p className="text-xs theme-text-secondary">
+                                {t('voip.echoCancellationDesc') || 'Reduces echo from speakers to prevent feedback loops.'}
+                            </p>
+                        </div>
+                        <button
+                            onClick={() => setEchoCancellation(!echoCancellation)}
+                            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ml-4 flex-shrink-0 min-w-[44px] ${echoCancellation ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'
+                                }`}
+                        >
+                            <span
+                                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${echoCancellation ? 'translate-x-6' : 'translate-x-1'
+                                    }`}
+                            />
+                        </button>
+                    </div>
+
+                    <div className="flex items-center justify-between gap-4">
+                        <div>
+                            <h4 className="font-medium theme-text-primary text-sm">{t('voip.noiseSuppression') || 'Noise Suppression'}</h4>
+                            <p className="text-xs theme-text-secondary">
+                                {t('voip.noiseSuppressionDesc') || 'Filters out background noise like fans or typing.'}
+                            </p>
+                        </div>
+                        <button
+                            onClick={() => setNoiseSuppression(!noiseSuppression)}
+                            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ml-4 flex-shrink-0 min-w-[44px] ${noiseSuppression ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'
+                                }`}
+                        >
+                            <span
+                                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${noiseSuppression ? 'translate-x-6' : 'translate-x-1'
+                                    }`}
+                            />
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
     );
diff --git a/frontend/contexts/VoipContext.tsx b/frontend/contexts/VoipContext.tsx
@@ -61,9 +61,13 @@ interface VoipContextType {
     availableDevices: MediaDeviceInfo[];
     selectedDeviceId: string;
     isDocked: boolean;
+    echoCancellation: boolean;
+    noiseSuppression: boolean;
 
     // Actions
     setIsDocked: (value: boolean) => void;
+    setEchoCancellation: (value: boolean) => void;
+    setNoiseSuppression: (value: boolean) => void;
     createCall: (roomId: string, roomType: 'group' | 'dm', roomName?: string) => Promise<void>;
     joinCall: (callId: string) => Promise<void>;
     leaveCall: () => void;
@@ -98,7 +102,11 @@ export const useVoip = () => {
                 availableDevices: [],
                 selectedDeviceId: '',
                 isDocked: false,
+                echoCancellation: true,
+                noiseSuppression: true,
                 setIsDocked: () => { },
+                setEchoCancellation: () => { },
+                setNoiseSuppression: () => { },
                 createCall: async () => { },
                 joinCall: async () => { },
                 leaveCall: () => { },
@@ -140,6 +148,8 @@ export const VoipProvider: React.FC<VoipProviderProps> = ({ children }) => {
     const [availableDevices, setAvailableDevices] = useState<MediaDeviceInfo[]>([]);
     const [selectedDeviceId, setSelectedDeviceId] = useState('');
     const [isDocked, setIsDocked] = useState(false);
+    const [echoCancellation, setEchoCancellation] = useState(true);
+    const [noiseSuppression, setNoiseSuppression] = useState(true);
 
     // State for remote streams (explicit rendering to prevent GC)
     const [remoteStreams, setRemoteStreams] = useState<Map<string, MediaStream>>(new Map());
@@ -154,6 +164,8 @@ export const VoipProvider: React.FC<VoipProviderProps> = ({ children }) => {
 
     // Refs to track current values for VAD closure
     const activeCallRef = useRef<VoipCall | null>(null);
+    // Track if effect update is needed to avoid initial mount double-trigger
+    const isFirstMountRef = useRef(true);
     const socketRef = useRef(socket);
     const connectedRef = useRef(connected);
     const userRef = useRef(user);
@@ -176,13 +188,29 @@ export const VoipProvider: React.FC<VoipProviderProps> = ({ children }) => {
         if (savedThreshold) setMicrophoneThreshold(parseInt(savedThreshold, 10));
         const savedDevice = localStorage.getItem('voip_selected_device');
         if (savedDevice) setSelectedDeviceId(savedDevice);
+
+        const savedEcho = localStorage.getItem('voip_echo_cancellation');
+        if (savedEcho !== null) setEchoCancellation(savedEcho === 'true');
+
+        const savedNoise = localStorage.getItem('voip_noise_suppression');
+        if (savedNoise !== null) setNoiseSuppression(savedNoise === 'true');
     }, []);
 
     const handleSetMicrophoneThreshold = useCallback((value: number) => {
         setMicrophoneThreshold(value);
         localStorage.setItem('voip_microphone_threshold', value.toString());
     }, []);
 
+    const handleSetEchoCancellation = useCallback((value: boolean) => {
+        setEchoCancellation(value);
+        localStorage.setItem('voip_echo_cancellation', String(value));
+    }, []);
+
+    const handleSetNoiseSuppression = useCallback((value: boolean) => {
+        setNoiseSuppression(value);
+        localStorage.setItem('voip_noise_suppression', String(value));
+    }, []);
+
     const refreshDevices = useCallback(async () => {
         try {
             const devices = await navigator.mediaDevices.enumerateDevices();
@@ -268,15 +296,22 @@ export const VoipProvider: React.FC<VoipProviderProps> = ({ children }) => {
     }, []);
 
     const getUserMedia = useCallback(async (deviceId?: string): Promise<MediaStream> => {
-        const constraints = { audio: deviceId ? { deviceId: { exact: deviceId } } : true, video: false };
+        const constraints = {
+            audio: {
+                deviceId: deviceId ? { exact: deviceId } : undefined,
+                echoCancellation: echoCancellation,
+                noiseSuppression: noiseSuppression,
+            },
+            video: false
+        };
         try {
             return await navigator.mediaDevices.getUserMedia(constraints);
         } catch (error: any) {
             console.error('[VOIP] getUserMedia failed:', error);
             toast.error(t('voip.microphoneError') || 'Microphone error');
             throw error;
         }
-    }, [t]);
+    }, [t, echoCancellation, noiseSuppression]);
 
     const createPeerConnection = useCallback((targetUserId: string): RTCPeerConnection => {
         const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
@@ -563,6 +598,48 @@ export const VoipProvider: React.FC<VoipProviderProps> = ({ children }) => {
         }
     }, [activeCall, getUserMedia, stopVoiceActivityDetection, startVoiceActivityDetection]);
 
+    // Handle changes to echo/noise settings while active
+    useEffect(() => {
+        if (isFirstMountRef.current) {
+            isFirstMountRef.current = false;
+            return;
+        }
+
+        // Only trigger if we have an active stream and device is selected
+        if (localStreamRef.current && selectedDeviceId) {
+            const updateStream = async () => {
+                console.log('[VOIP] Updating audio constraints...', { echoCancellation, noiseSuppression });
+                try {
+                    const newStream = await getUserMedia(selectedDeviceId);
+
+                    // Replace tracks in all peer connections
+                    const audioTrack = newStream.getAudioTracks()[0];
+                    peerConnectionsRef.current.forEach(({ connection }) => {
+                        const sender = connection.getSenders().find(s => s.track?.kind === 'audio');
+                        if (sender) {
+                            sender.replaceTrack(audioTrack);
+                        }
+                    });
+
+                    // Stop old tracks
+                    if (localStreamRef.current) {
+                        localStreamRef.current.getTracks().forEach(track => track.stop());
+                    }
+
+                    localStreamRef.current = newStream;
+
+                    // Restart VAD with new stream
+                    stopVoiceActivityDetection();
+                    startVoiceActivityDetection(newStream);
+                } catch (error) {
+                    console.error('[VOIP] Failed to update audio constraints:', error);
+                }
+            };
+
+            updateStream();
+        }
+    }, [echoCancellation, noiseSuppression, selectedDeviceId, getUserMedia, startVoiceActivityDetection, stopVoiceActivityDetection]);
+
 
 
 
@@ -1000,6 +1077,10 @@ export const VoipProvider: React.FC<VoipProviderProps> = ({ children }) => {
         refreshDevices,
         isDocked,
         setIsDocked,
+        echoCancellation,
+        noiseSuppression,
+        setEchoCancellation: handleSetEchoCancellation,
+        setNoiseSuppression: handleSetNoiseSuppression,
     };
 
     return (
