RU-T47 Minor fixes

Author: ucswift

src/components/livekit/livekit-bottom-sheet.tsx

@@ -1,4 +1,5 @@
 import { t } from 'i18next';
+import { Audio, InterruptionModeIOS } from 'expo-av';
 import { Headphones, Mic, MicOff, PhoneOff, Settings } from 'lucide-react-native';
 import { useColorScheme } from 'nativewind';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -146,6 +147,45 @@ export const LiveKitBottomSheet = () => {
     }
   }, [isConnected, currentRoomInfo]);
 
+  // Audio Routing Logic
+  useEffect(() => {
+    const updateAudioRouting = async () => {
+      if (!selectedAudioDevices.speaker) return;
+
+      try {
+        const speaker = selectedAudioDevices.speaker;
+        console.log('Updating audio routing for:', speaker.type);
+
+        if (speaker.type === 'speaker') {
+          // Force Speakerphone
+          await Audio.setAudioModeAsync({
+            allowsRecordingIOS: true,
+            staysActiveInBackground: true,
+            playsInSilentModeIOS: true,
+            shouldDuckAndroid: true,
+            playThroughEarpieceAndroid: false, // This forces speaker on Android
+            interruptionModeIOS: InterruptionModeIOS.DoNotMix,
+          });
+        } else {
+          // Default (Earpiece) or Bluetooth
+          // For Bluetooth to work, we usually just need to NOT force speaker.
+          await Audio.setAudioModeAsync({
+            allowsRecordingIOS: true,
+            staysActiveInBackground: true,
+            playsInSilentModeIOS: true,
+            shouldDuckAndroid: true,
+            playThroughEarpieceAndroid: true, // This allows earpiece/bluetooth
+            interruptionModeIOS: InterruptionModeIOS.DoNotMix,
+          });
+        }
+      } catch (error) {
+        console.error('Failed to update audio routing:', error);
+      }
+    };
+
+    updateAudioRouting();
+  }, [selectedAudioDevices.speaker]);
+
   const handleRoomSelect = useCallback(
     (room: DepartmentVoiceChannelResultData) => {
       connectToRoom(room, room.Token);
@@ -303,7 +343,7 @@ export const LiveKitBottomSheet = () => {
         <View className="w-full p-4">
           <HStack className="mb-4 items-center justify-between">
             <Text className="text-xl font-bold">{t('livekit.title')}</Text>
-            {currentView === BottomSheetView.CONNECTED && (
+            {currentView !== BottomSheetView.AUDIO_SETTINGS && (
               <TouchableOpacity onPress={handleShowAudioSettings} testID="header-audio-settings-button">
                 <Headphones size={20} color="#6B7280" />
               </TouchableOpacity>
@@ -323,7 +363,7 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
     width: '100%',
-    paddingHorizontal: 16,
+    paddingHorizontal: 8,
   },
   roomList: {
     flex: 1,
@@ -334,6 +374,7 @@ const styles = StyleSheet.create({
   controls: {
     flexDirection: 'row',
     justifyContent: 'space-around',
+    width: '100%',
     marginTop: 16,
   },
   controlButton: {

src/components/settings/__tests__/audio-device-selection.test.tsx

@@ -235,7 +235,7 @@ describe('AudioDeviceSelection', () => {
 
       expect(screen.getAllByText('Available BT').length).toBeGreaterThan(0);
       expect(screen.queryByText('Unavailable BT')).toBeNull();
-      expect(screen.getAllByText('Wired Device').length).toBeGreaterThan(0);
+      expect(screen.queryByText('Wired Device')).toBeNull();
     });
 
     it('filters out unavailable devices for speakers', () => {
@@ -247,9 +247,8 @@ describe('AudioDeviceSelection', () => {
       render(<AudioDeviceSelection />);
 
       expect(screen.getAllByText('Available Device').length).toBeGreaterThan(0);
-      // Note: The component actually shows ALL devices in microphone section unless they are unavailable bluetooth
-      // So the unavailable speaker will show in microphone section but not speaker section
-      expect(screen.getAllByText('Unavailable Device').length).toBeGreaterThan(0); // Shows in microphone section
+      // Note: We now filter out unavailable devices from BOTH sections.
+      expect(screen.queryByText('Unavailable Device')).toBeNull();
     });
   });
 
@@ -275,9 +274,8 @@ describe('AudioDeviceSelection', () => {
 
       render(<AudioDeviceSelection />);
 
-      // Device should appear but with fallback label
-      expect(screen.getAllByText('Unknown Device').length).toBeGreaterThan(0);
-      expect(screen.getAllByText('Unknown Device').length).toBeGreaterThan(0);
+      // Device should be filtered out as type is unknown
+      expect(screen.queryByText('Unknown Device')).toBeNull();
     });
   });
 });

src/components/settings/audio-device-selection.tsx

@@ -70,9 +70,13 @@ export const AudioDeviceSelection: React.FC<AudioDeviceSelectionProps> = ({ show
     );
   };
 
-  const availableMicrophones = availableAudioDevices.filter((device) => (device.type === 'bluetooth' ? device.isAvailable : true));
+  const availableMicrophones = availableAudioDevices.filter(
+    (device) => device.isAvailable && (device.type === 'default' || device.type === 'microphone' || device.type === 'bluetooth' || device.type === 'wired')
+  );
 
-  const availableSpeakers = availableAudioDevices.filter((device) => device.isAvailable);
+  const availableSpeakers = availableAudioDevices.filter(
+    (device) => device.isAvailable && (device.type === 'default' || device.type === 'speaker' || device.type === 'bluetooth' || device.type === 'wired')
+  );
 
   return (
     <ScrollView className="flex-1">