Develop

app.config.ts

@@ -80,6 +80,8 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
       'android.permission.FOREGROUND_SERVICE_MICROPHONE',
       'android.permission.FOREGROUND_SERVICE_CONNECTED_DEVICE',
       'android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK',
+      'android.permission.READ_PHONE_STATE',
+      'android.permission.MANAGE_OWN_CALLS',
     ],
   },
   web: {

expo-env.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="expo/types" />
 
-// NOTE: This file should not be edited and should be in your git ignore
+// NOTE: This file should not be edited and should be in your git ignore

package.json

@@ -110,7 +110,7 @@
     "axios": "~1.12.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "buffer": "^6.0.3",
-    "countly-sdk-react-native-bridge": "^25.4.0",
+    "countly-sdk-react-native-bridge": "25.4.1",
     "date-fns": "^4.1.0",
     "expo": "~53.0.23",
     "expo-application": "~6.1.5",
@@ -148,6 +148,7 @@
     "mapbox-gl": "3.18.1",
     "moti": "~0.29.0",
     "nativewind": "~4.1.21",
+    "promise": "8.3.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-error-boundary": "~4.0.13",
@@ -167,6 +168,7 @@
     "react-native-restart": "0.0.27",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
+
     "react-native-svg": "15.11.2",
     "react-native-web": "^0.20.0",
     "react-native-webview": "~13.13.1",
@@ -258,6 +260,7 @@
     "initVersion": "7.0.4"
   },
   "resolutions": {
-    "form-data": "4.0.4"
+    "form-data": "4.0.4",
+    "promise": "8.3.0"
   }
 }

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

@@ -85,6 +85,19 @@ jest.mock('i18next', () => ({
   },
 }));
 
+// Mock Actionsheet
+jest.mock('../../ui/actionsheet', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  return {
+    Actionsheet: ({ children, isOpen }: any) => isOpen ? <View testID="mock-actionsheet">{children}</View> : null,
+    ActionsheetBackdrop: () => null,
+    ActionsheetContent: ({ children }: any) => <View testID="mock-actionsheet-content">{children}</View>,
+    ActionsheetDragIndicatorWrapper: ({ children }: any) => <View>{children}</View>,
+    ActionsheetDragIndicator: () => null,
+  };
+});
+
 // Import after mocks to avoid the React Native CSS Interop issue
 import { useBluetoothAudioStore } from '@/stores/app/bluetooth-audio-store';
 import { useLiveKitStore } from '@/stores/app/livekit-store';
@@ -117,8 +130,8 @@ const mockAvailableRooms = [
 ];
 
 const mockSelectedAudioDevices = {
-  microphone: { id: 'mic1', name: 'Default Microphone', type: 'default' as const, isAvailable: true },
-  speaker: { id: 'speaker1', name: 'Default Speaker', type: 'default' as const, isAvailable: true },
+  microphone: { id: 'mic1', name: 'Default Microphone', type: 'microphone' as const, isAvailable: true },
+  speaker: { id: 'speaker1', name: 'Default Speaker', type: 'speaker' as const, isAvailable: true },
 };
 
 describe('LiveKitBottomSheet', () => {
@@ -451,6 +464,63 @@ describe('LiveKitBottomSheet', () => {
       await audioService.playDisconnectionSound();
       expect(audioService.playDisconnectionSound).toHaveBeenCalledTimes(1);
     });
+
+    it('should return to room select when back is pressed from audio settings if entered from room select', () => {
+      const { fireEvent } = require('@testing-library/react-native');
+
+      mockUseLiveKitStore.mockReturnValue({
+        ...defaultLiveKitState,
+        isBottomSheetVisible: true,
+        availableRooms: mockAvailableRooms,
+      });
+
+      const component = render(<LiveKitBottomSheet />);
+
+      // Navigate to audio settings
+      const settingsButton = component.getByTestId('header-audio-settings-button');
+      fireEvent.press(settingsButton);
+
+      // Verify we are in audio settings
+      expect(component.getByTestId('audio-settings-view')).toBeTruthy();
+
+      // Press back
+      const backButton = component.getByTestId('back-button');
+      fireEvent.press(backButton);
+
+      // Verify we are back in room select (by checking for join buttons)
+      expect(component.getByTestId('room-list')).toBeTruthy();
+    });
+
+    it('should return to connected view when back is pressed from audio settings if entered from connected view', async () => {
+      const { fireEvent } = require('@testing-library/react-native');
+
+      mockUseLiveKitStore.mockReturnValue({
+        ...defaultLiveKitState,
+        isBottomSheetVisible: true,
+        isConnected: true,
+        currentRoomInfo: mockCurrentRoomInfo,
+        currentRoom: mockRoom,
+      });
+
+      const component = render(<LiveKitBottomSheet />);
+
+      // Verify we are in connected view
+      await expect(component.findByTestId('connected-view')).resolves.toBeTruthy();
+
+      // Navigate to audio settings
+      const settingsButton = component.getByTestId('audio-settings-button');
+      fireEvent.press(settingsButton);
+
+      // Verify we are in audio settings
+      expect(component.getByTestId('audio-settings-view')).toBeTruthy();
+
+      // Press back
+      const backButton = component.getByTestId('back-button');
+      fireEvent.press(backButton);
+
+      // Verify we are back in connected view
+      expect(component.getByTestId('connected-view')).toBeTruthy();
+    });
   });
 
   describe('Analytics', () => {

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

@@ -11,7 +11,7 @@ import { useBluetoothAudioStore } from '@/stores/app/bluetooth-audio-store';
 
 import { Card } from '../../components/ui/card';
 import { Text } from '../../components/ui/text';
-import { useLiveKitStore } from '../../stores/app/livekit-store';
+import { applyAudioRouting, useLiveKitStore } from '../../stores/app/livekit-store';
 import { AudioDeviceSelection } from '../settings/audio-device-selection';
 import { Actionsheet, ActionsheetBackdrop, ActionsheetContent, ActionsheetDragIndicator, ActionsheetDragIndicatorWrapper } from '../ui/actionsheet';
 import { HStack } from '../ui/hstack';
@@ -32,6 +32,7 @@ export const LiveKitBottomSheet = () => {
   const { trackEvent } = useAnalytics();
 
   const [currentView, setCurrentView] = useState<BottomSheetView>(BottomSheetView.ROOM_SELECT);
+  const [previousView, setPreviousView] = useState<BottomSheetView | null>(null);
   const [isMuted, setIsMuted] = useState(true); // Default to muted
   const [permissionsRequested, setPermissionsRequested] = useState(false);
 
@@ -146,6 +147,34 @@ 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);
+
+        let targetType: 'bluetooth' | 'speaker' | 'earpiece' | 'default' = 'default';
+
+        if (speaker.type === 'speaker') {
+          targetType = 'speaker';
+        } else if (speaker.type === 'bluetooth') {
+          targetType = 'bluetooth';
+        } else {
+          targetType = 'earpiece';
+        }
+
+        await applyAudioRouting(targetType);
+      } catch (error) {
+        console.error('Failed to update audio routing:', error);
+      }
+    };
+
+    updateAudioRouting();
+  }, [selectedAudioDevices.speaker]);
+
   const handleRoomSelect = useCallback(
     (room: DepartmentVoiceChannelResultData) => {
       connectToRoom(room, room.Token);
@@ -181,12 +210,18 @@ export const LiveKitBottomSheet = () => {
   }, [disconnectFromRoom]);
 
   const handleShowAudioSettings = useCallback(() => {
+    setPreviousView(currentView);
     setCurrentView(BottomSheetView.AUDIO_SETTINGS);
-  }, []);
+  }, [currentView]);
 
   const handleBackFromAudioSettings = useCallback(() => {
-    setCurrentView(BottomSheetView.CONNECTED);
-  }, []);
+    if (previousView) {
+      setCurrentView(previousView);
+      setPreviousView(null);
+    } else {
+      setCurrentView(isConnected && currentRoomInfo ? BottomSheetView.CONNECTED : BottomSheetView.ROOM_SELECT);
+    }
+  }, [previousView, isConnected, currentRoomInfo]);
 
   const renderRoomSelect = () => (
     <View style={styles.content}>
@@ -303,7 +338,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 +358,7 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
     width: '100%',
-    paddingHorizontal: 16,
+    paddingHorizontal: 8,
   },
   roomList: {
     flex: 1,
@@ -334,6 +369,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,9 @@ 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 === 'microphone' || device.type === 'bluetooth' || device.type === 'wired'));
 
-  const availableSpeakers = availableAudioDevices.filter((device) => device.isAvailable);
+  const availableSpeakers = availableAudioDevices.filter((device) => device.isAvailable && (device.type === 'speaker' || device.type === 'bluetooth' || device.type === 'wired'));
 
   return (
     <ScrollView className="flex-1">